전체 글12 Babel 자바스크립트의 표준인 ECMA Script는 매년 갱신되고 있지만, 브라우저가 지원하는 ECMA 표준은 브라우저마다 다르다. 개발자가 브라우저 별로 지원하는 ECMA 표준을 모두 파악하고 브라우저 맞춤형으로 자바스크립트를 사용하는 것은 매우 비효율적이기 때문에, 개발자는 우리의 코드를 브라우저가 지원하는 ECMA 표준으로 변환해주는 컴파일러, Babel을 사용한다. (개인적으로 Babel은 트랜스파일러라고 생각하지만, 공식 홈페이지에서는 컴파일러라고 합니다.) 즉, Babel은 원활하게 크로스 브라우징을 할 수 있도록 브라우저가 지원하는 ECMA 표준으로 코드를 변환해주는 컴파일러다. 그렇다면 최신 ECMA 표준을 모두 지원하는 브라우저를 사용하면 Babel을 사용하지 않아도 되는 것일까? 타입스크립트 .. 2022. 10. 26. NVM으로 Node 설치하기 상황 yarn berry를 적용하기 위해 node의 버전을 업데이트하는 과정에서, Node 공식 홈페이지의 installer를 이용하여 node v16.18.0을 설치한 후부터 CLI 입력 시 permission 에러가 발생했다. 에러 내용 EACCES: permission denied, symlink '... /corepack/dist/pnpm.js' → '/usr/local/bin/pnpm' 원인 We do not recommend using a Node installer, since the Node installation process installs npm in a directory with local permissions and can cause permissions errors when you.. 2022. 10. 25. 주소창에 google.com을 치면 발생하는 일 # 22.11.07. 렌더링 과정 update 요약 1. 입력된 URI를 기반으로 HTTP Request Message를 작성한다. 2. DNS 서버에서 DNS를 조회하여 IP주소를 받아온다. 3. 해당 IP주소의 서버와 클라이언트는 TCP Connection을 생성한다. 4. 서버에서는 HTTP Request에 대한 Response를 전송한다. 5. 브라우저는 Response를 토대로 렌더링을 진행하여 결과물을 화면에 나타낸다. 6. 요청이 종료되면 클라이언트와 서버의 Connection을 종료한다. 이렇게 가볍게 마무리지을 수도 있지만, 기왕 알아보는 김에 조금 더 알아보자. 입력된 URI를 기반으로 HTTP Request Message를 작성한다. 우선 URL과 URI부터 구분해보자. URI는 Un.. 2022. 10. 12. MIME 컴퓨터는 이진 형식으로 파일을 저장한다. 모든 파일이 이진 형식으로 인코딩되어 있는 상태에서도 컴퓨터는 오디오 파일과 비디오 파일, 그리고 이미지 파일을 구분하여 실행한다. 브라우저 상에서 이를 가능하게 하는 것이 바로 MIME 타입이다. MIME 타입은 클라이언트에게 전송된 문서의 타입을 명시하는 역할을 한다. 예를 들어 png파일은 image/png로, pdf파일은 application/pdf로 MIME 타입을 지정한다. 등장 배경 MIME 타입은 텍스트 외의 파일을 이메일로 전송하기 위해 탄생했다. 초창기 이메일은 오로지 텍스트만 전송이 가능했다. 이메일 전송 프로토콜인 SMTP protocol은 7-bit ASCII charset만 지원했기 때문에 **바이너리 파일이나 **ASCII charset.. 2022. 10. 2. React.createPortal 자식 컴포넌트(button)에서 JSX 표현식을 return하면, 자식 컴포넌트는 아래의 콘솔창처럼 부모 컴포넌트(root)의 내부에서 렌더링이 발생한다. 하지만 createPortal을 사용하면 자식 컴포넌트는 부모 컴포넌트에 종속되지 않고 다른 container 컴포넌트에서 렌더링을 할 수 있다. createPortal은 인자로 제공된 자식 컴포넌트 혹은 JSX 표현식을 부모 컴포넌트의 외부에서 렌더링하는 메서드이기 때문이다. 아래 콘솔창에 있는 엘리먼트와 엘리먼트는 형제 관계인 것처럼 보이지만, 실제 코드에서는 엘리먼트가 엘리먼트에 속한 부모 자식관계이다. 실제 코드를 살펴보자. function ToastNotiParent() { const [isOpen, setIsOpen] = useState(.. 2022. 9. 28. JSX # 22.11.03. React 17 (babel 7.9.0) 이후부터 JSX는 createElement 메서드가 아닌 jsx 메서드로 변환된다. JSX 표현식은 React.createElement 메서드를 보다 편리하게 사용하기 위해 만들어진 문법으로, 컴파일 과정에서 바벨을 거치며 React.createElement 메서드로 변환된다. 이해를 돕기 위해 JSX 표현식이 컴파일되는 과정을 살펴보자. const welcome = ( Hello, world! ); 위의 코드는 babel을 통해 아래와 같은 방법으로 컴파일된다. const welcome = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 그리고 React.crea.. 2022. 9. 28. React Context React에서 자체적으로 제공하는 상태(state) 관리 API로 Context API를 사용하기 위해서는 createContext와 Provider 프로퍼티, 그리고 value값이 필요하다. Context 데이터를 사용할 때는 useContext를 사용하는 방법과 Provider처럼 Consumer 프로퍼티를 사용하는 방법이 있으나 useContext를 사용하는 방법을 주로 사용한다. Context API에 대한 설명은 이정도로 줄이고, 그동안 Context API를 사용하며 몇 가지 궁금한 점이 있었다. 이에 대한 해답을 찾는 과정에서 알게 된 내용을 기록하려 한다. Q1. 부모 컴포넌트가 렌더링되면 자연스레 자식 컴포넌트도 렌더링이 발생한다. props를 사용하지 않는 자식 컴포넌트에서 발생하는 불.. 2022. 9. 28. React Router v6 Router React Router를 사용하기 위해서는 반드시 Router가 Routes 또는 Route를 nesting 하고 있어야 한다. useRoutes() may be used only in the context of a component. * Routes 또는 Route element를 Router element로 감싸지 않을 경우 해당 에러가 발생한다. Router의 종류로는 웹에서 흔히 쓰이는 BrowserRouter 외에도 HashRouter, StaticRouter, NavtiveRouter, MemoryRouter가 있다. BroswerRouter JS는 브라우저 객체 모델(BOM, Browser Object Model)을 통해 브라우저의 정보에 접근할 수 있을 뿐만 아니라 브라우저의.. 2022. 9. 25. JavaScript에서의 함수 함수를 선언하는 방법 6가지 함수 선언 함수명을 생략할 수 없다 function declarationFunc() { ... } 함수 표현식(익명) const expressionFunc = function() { ... } 함수 표현식(명명) const expressionFunc = function named(nickname) { console.log(nickname) } expressionFunc('fodi') // fodi named('fodi') // not defined 즉시 실행 함수 (function iife() { ... })() function 생성자 함수 문자열을 함수로 인식하여 JavaScript 코드를 실행하기 때문에 보안에 매우 취약하다. const constructorFunc = n.. 2022. 9. 25. 실행 컨텍스트 (Excution Context) 실행 컨텍스트는 코드가 실행되는 환경에 대한 데이터를 모아놓은 추상적인 개념이다. 무슨 말인지 명확하게 와닿지 않으니 '코드가 실행되는 환경'에 대해 먼저 구체화시켜 보자. 아래의 코드에는 전역에서 선언된 outer함수와 outer함수 내부에서 선언된 inner함수가 있다. 그리고 outer함수 내부에는 변수 a가 let으로 선언되어 있고, 변수 b는 const로 선언되어 있으며, inner함수에는 변수 c와 d가 각각 선언되어 있다. 이것은 코드가 실행되는 환경이자 맥락(context)의 극히 일부분이다. 만약 코드가 실행되는 맥락을 모르는 사람이 아래의 코드를 본다면 이해할 수 있을까? function outer() { let a = 'a', const b = 'b', function inner() .. 2022. 9. 25. 이전 1 2 다음