"이벤트 루프가 뭐예요?" 누군가 나에게 이렇게 묻다면 나는 자신 있게 답을 할 수 있을까? 솔직히 현재의 나는 명쾌하게 대답할 자신이 없다. 그래서 이 글은 미래의 나를 위해, 그리고 이 질문에 답하기 위해 작성하는 정리 노트다. 1. 자바스크립트는 싱글 스레드인데 어떻게 멀티태스킹을 할까?이벤트 루프를 논하기 전에 먼저 해결해야 할 의문이 있다. "자바스크립트는 싱글 스레드(Single Thread) 언어다." 이 말은 한 번에 하나의 작업만 할 수 있다는 뜻인데, 실제 우리가 쓰는 웹 사이트는 파일도 다운로드하고, 애니메이션도 보여주고, 서버 요청도 동시에 처리하는 것처럼 보인다. 이게 어떻게 가능한 걸까? . 자바스크립트 엔진은 '요청'만 보내고, 실제로 시간이 오래 걸리는 작업(네트워크, 타이머..

사진과 같이 import가 많이질수록 코드가 점전 늘어나고 복잡해진다.이러한 문제를 해결하기 위해 절대 경로를 써준다.../../ 다음과 같은 부분을 @ 로 고치는 방법을 서술한다.babel 플러그인 설치yarn add -D babel-plugin-module-resolverornpm i -D babel-plugin-module-resolverbabel.config.js 에 플러그인 추가module.exports = { presets: ... plugins: [ ... [ 'module-resolver', { alias: { '@': './src', }, }, ], ],};해당 코드의 plugins 부분에 아래와 같은..

Object.assign 과 Spread Syntax (...) 둘 다 javascript에서 객체를 복사하거나 병합하는 방법이다.나도 일반적으로 Spread 문법을 주로 사용하고 Object.assign에 대해서는 무지했는데, 이에 대해 알아보기 위해 글을 작성해본다.Object.assign 사용예시const o1 = { a: 1 };const o2 = { b: 2 };const o3 = { c: 3 };const obj = Object.assign(o1, o2, o3);console.log(obj); // { a: 1, b: 2, c: 3 }console.log(o1); // { a: 1, b: 2, c: 3 }, 목표 객체 자체가 변경됨.console.log(o2); // { b: 2 };conso..

Front-End의 기본 공부틀들웹의 동작원리 : (HTTP(s), DNS, IP 주소, 요청, 응답, DOM 렌더트리, CORS, CSR/SSR )HTML, CSS : (dom 문법 , sass, meta tag, bootstrap..)Javascript : (프로토타입체인, 문법, 호이스팅, 버블링, 캡쳐링, 비동기 방법 …)Git 사용법 : (버전 관리의 개념, clone , pull, push, branch, reabse, merge …)패키지 & 빌드 관리법 (npm, nvm, package.json, webpack, babel, vite …)프레임워크 & 라이브러리 사용 (react, redux, recoil, angular, vue)HTML CanvasThree.js컴퓨터 그래픽스란?현대 그..

자바스크립트에서 쉽게 진수 변환을 하는법 toString 과 parseInt를 이용하면 된다. 예시 let num = 122; console.log(num.toString(2)); //1111010 let binNum = "1111010" console.log(parseInt(binNum,2)); //122 toString() Number.prototype.toString() 에 해당하는 메서드이다. 특정한 Number 객체를 문자열로 반환 num.toString(radix) 매개변수 radix radix 는 2 ~ 36 사이의 정수가 들어간다. 2 ~ 36 사이의 정수가들어가지 않으면 RangeError가 발생한다. radix 값이 지정되지 않으면 default 값으로 10이 들어가게 된다. 예시 le..