https://jsisweird.com/ JS is weirdA fun and tricky JavaScript quizjsisweird.com 자바스크립트만의 매력이라고 할 수 있는 요상한 문법들을 다룬 사이트가 있다JS is weird 라는 사이트는'연산'과 '타입 변환'을 중심으로 자바스크립트 문제 25개를 풀 수 있는 곳이다 평소에 생각하지 못했던 문법들이 나와서 심심할 때 재미 삼아 풀어볼 만하다! 오늘은 그 중에서 생각해 볼 만한 문제 8개를 풀이해보려고 한다  1. true + false 👉 1 "+" 연산시 boolean 은 number 타입으로 변환된다.그러면 1 + 0 이 되니까, 결과는 1이다.  2. [,,,].length 👉 3 빈 공간에는 undefined 가 들어간다.마지막의..

Javascript에서 숫자는 64비트 부동소수점 형식으로 저장된다. 64비트 부동소수점이 어떤 건지 알아야0.1 + 0.2 === 0.3 이 오류라는 것을 이해할 수 있다! 64비트 부동소수점이 어떤건지 각각의 단어를 먼저 나눠서 살펴보자 🧐  64비트 자바의 경우, int, char, float 등 숫자 하나에도 여러 타입을 지닌다.자바스크립트는 다른 언어와 다르게 숫자는 number 타입 하나로만 다루고 있다.number 타입은 64비트의 고정된 크기 공간을 가지고 있다. 사람은 숫자를 10진법, 컴퓨터는 2진법으로 표현한다.컴퓨터는 모든 데이터를 0, 1로 이루어진 이진수로 처리한다. 그래서 하나의 비트(bit)는 0 또는 1의 값을 지닌다.  부동소수점 뜰 부, 움직일 동 (浮動)Floatin..

이번 사이드 프로젝트는 아이디어가 담긴 어떠한 제품을 만들어 내기보다는, 입사 이후 처음 하는 사이드 프로젝트인 만큼 감을 익혀보자라는 가벼운 마음으로 진행했다.프로젝트를 하면서 많은 깨달음을 얻었고 여러 욕심과 동기부여가 생겨서 의미 있던 프로젝트이다! 🍊🫶  How are you?나에 대해 알아가는 시간, 당신은 어떠신가요? 하루에 한 번, 나에 대한 질문 카드가 주어진다. 주제는 다양하며 온전히 나의 생각에 대해 답변하는 것이다.하루하루 답변한 것들은 리스트로 볼 수 있으며 당일에 한정해서 작성한 내용을 수정할 수 있다. https://github.com/beyond-localhost/how-are-you-FE GitHub - beyond-localhost/how-are-you-FE: 나에 대해..

컴포넌트를 Pure, 즉 순수하게 작성하면 프로젝트의 코드 베이스가 커지더라도 사이드 이펙트를 피할 수 있다.자세한 이유와 방법을 알아보자. why?1. 컴포넌트는 서버와 같은 다른 환경에서 실행 가능하다. 동일 입력 - 동일 결과에 따라, 하나의 컴포넌트는 수많은 유저의 요청을 처리할 수 있다.2. input이 변경되지 않았을 때에는 캐싱된 것을 가져오기에 렌더링을 하지 않아 성능을 향상할 수 있다.3. 렌더링을 하다가 값이 중간에 바뀌었을 때 렌더링이 다시 시작되는 비효율이 발생한다. 이는 특히 컴포넌트 트리가 깊을 때 문제인데, 순수 함수는 이를 막을 수 있다. 순수 상태를 깨트리지 않기 위해 주의할 것1. same input 그리고 same output수학 공식처럼 y=2x 일 때, x가 3이면 ..

project를 초기 세팅하면서 eslint에 대한 에러를 만났다. 📍 문제❌ SyntaxError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.cjs': Unexpected token '||=' eslint 설치한 이후에 아무 것도 건드리지 않았는데, App.tsx 파일을 누르니 위 에러가 나타났다. 📍 상황위 plugin을 로드하지 못했다는 이슈로 node 버전을 통해 해결할 수 있었다.현재 나는 회사 프로젝트로 인해 노드 14 버전이 WebStrom IDE에 기본적으로 세팅이 되어 있었다.하지만 vite 로 프로젝트를 만들었기에 terminal에서는 node version을 바꿔주었지만IDE 자체에 뜨는 문제였기 때문에 ..

Javascript 유니버스 탐험 완료 🚀👩‍🚀 Redux 를 만들고, React 팀의 멤버였던 Dan Abramov 가 생각하는 Javascript를 알 수 있었고조금 더 넓은 시야로 언어를 바라볼 수 있게 되었다.  https://justjavascript.com/ Just JavaScriptJust JavaScript will help you develop a rock-solid understanding of how JavaScript works through intuitive visual explanations and learning challenges.justjavascript.com

🔎 모듈이란? 자바스크립트에서 모듈이란 일반적으로 '파일' 각각을 말한다. 기존에는 모듈이라는 개념이 없었지만, 점점 자바스크립트 세계가 커지면서 모듈을 불러오고 내보낼 수 있도록 하였다. ECMAScript 2015(=ES 6)에서 공식적으로 모듈 시스템이 도입되었다. 각 모듈은 독립적으로 자체 스코프를 가진다. 모듈 내에서 선언한 변수, 함수 등을 해당 모듈 내에서만 사용 가능하다. 이에 따라 모듈 간에 공유하기 위해서는 export, import 구문을 사용할 수 있다. 필요한 모듈만 로드하여 사용 가능하며, 모듈화를 통해 코드를 작고 큰 단위로 나누어 관리할 수 있다. 💡 모듈 시스템 공식적으로 ESM이 도입되기 전까지는 AMD, CommonJS, UMD가 사용되었다. - AMD Asynchron..

input tag의 event 중 onKeyDown, onKeyPress, onKeyUp, onInput, onChange에 대해 정리를 하려고 한다. 이번에 몰랐던 사실들을 많이 알게 되었다 🤔 🤔 그럼 각 이벤트에 대해 먼저 알아보자! onKeyDown 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 onKeyDown만 눌렀을 때, 계속 실행이 된다는 것이다. onKeyPress onKeyDown과 마찬가지로 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 KeyCode 값이 아닌 ASCII 값이기에 한글을 포함해 shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다는 것이다. 아래의 사진을 보면, 한글을 입력했을 때 해당 이벤트..

끝과 끝을 맛본 2023 😀첫 입사한 회사에서의 퇴사와, 현 회사와의 만남작년 11월 프론트엔드 개발자로서 처음 입사한 회사에서 3개월간 업무를 하고 퇴사를 하게 되었다. 이후에 개발팀이 완전 무너졌는데 그래도 좋은 사람들을 만나고 짧지만 압축해서 많은 것들을 배울 수 있었다. 그리고 현재의 회사에 입사를 하여 기존 코드 유지보수와 리팩토링 및 신규 서비스 개발들을 하며 어느덧 1년 차 개발자로서 성장하였다! '문제'에 대해 놀라지 않고 차분히 대응하는 태도개발자는 문제를 해결하는 사람이다. 새로운 것을 만들어 내기도 하지만, 기존 서비스 이슈에도계속 대응을 하며 서비스를 이끌어야 한다. 나는 회사 대표 서비스인 2개의 플랫폼 '메인' 페이지를 주 담당으로 맡게 되었다. 메인 페이지는 단순히 서비스의..