IT 엘도라도

Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org * React 공식 문서를 꼼꼼히 읽으면서 개인적으로 요약한 내용입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. Hook 개요 Hook은 함수형 컴포넌트로도 클래스형 컴포넌트의 기능들(상태, 생명주기 메소드 등)을 사용할 수 있도록 하는 새로운 개념으로, React 16.8.0부터 도입이 되었다. 참고로 Hook을 사용하려면 React뿐만 아니라 React DOM을 포함한 모든 패키지도 함께 업데이트해줘야 한다. 이 문서에서는 React가 왜 Hook이라는 것을 새롭게 도입하였는지, 그리고 이것이 애플리케이션의 개발에 어떠한 도움을 주는지에 ..

* React 공식 문서의 '고급 안내서' 부분을 읽으면서 개인적으로 요약한 내용들입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 코드 분할 (Code-Splitting) 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org 대부분의 React 앱들은 여러 정적 파일들을 Webpack, Rollup, Browserify 등의 번들러로 번들링 한 파일들을 웹 페이지에 포함하여 한 번에 앱 전체를 로드할 수 있다. 이러한 종류의 앱을 SPA(Single Page Application)라고 부른다. Create React App, Next.js, Gatsby 등의 툴을 사용한다면 자동으로 Webpack이 설치되고 적..

* React를 공부하면서 생긴 궁금증들과 이에 대한 해답을 개인적으로 정리한 것입니다. 잘못된 내용이 있다면 지적 부탁드립니다. 1. 태그로 Babel 라이브러리를 로드하는 경우 Babel은 어떠한 원리로 동작하는가? 태그로 Babel 라이브러리를 로드한다. 태그를 만들고 그 안에 ES6(+ JSX) 문법의 코드를 작성한다. 브라우저는 태그 안에 작성된 코드를 ES6(+ JSX) 문법으로 간주한다. 그 코드들은 로드된 Babel 라이브러리에 의해 모든 브라우저에서 호환이 가능한 문법의 코드로 컴파일된다. 따라서 이러한 런타임 변환은 서버에서 미리 컴파일된 코드를 제공하는 것보다 더 느릴 수밖에 없다. 2. key prop은 엘리먼트 배열을 사용할 때만 의미가 있는가? React 공식 문서에 따르면, 프..

npm으로 Node.js 패키지들을 관리하는 프로젝트의 경우, 프로젝트 루트 폴더에는 Node.js 패키지들이 설치된 node_modules 폴더와 함께 package.json, package-lock.json 파일이 위치하고 있다. 이번 포스팅에서는 Node.js 패키지를 활용하여 프로젝트를 진행하는 개발자들이 node_modules 폴더, package.json 파일, 그리고 package-lock.json 파일에 대해 최소한으로 알고 있어야 하는 것들에 대해 정리해보기로 하였다. 틀린 내용이 있다면 댓글로 지적 바란다. ※ Node.js 및 npm에 대한 기본적인 내용은 여기를 참고하기 바란다. ※ 본 포스팅은 npm 6까지 사용하던 lockfileVersion 1을 기준으로 작성되어, 최신 loc..

1. JavaScript 모듈 시스템 파일 단위의 모듈화는 코드의 재활용성을 극대화시킴으로써 애플리케이션 개발의 생산성을 엄청나게 향상시킨다. 그런데 초창기 JavaScript는 모듈 시스템이라는 것을 갖추고 있지 않았다. 그나마 가지고 있는 것이라고는 태그를 통해 또 다른 JavaScript 소스 파일들을 서버에게 요청하는 방식이었는데, 각각의 태그에 의해 로드된 JavaScript 코드들은 사실상 하나의 파일 안에 작성된 것처럼 동작했다. 즉, 로드된 각 JavaSript 소스 파일마다 독립적인 파일 스코프를 가지고 있는 것이 아니라 하나의 전역 객체를 공유하는 방식이었던 것이다. 이로 인해 서로 다른 JavaScript 소스 파일에 존재하는 변수나 함수들이 같은 이름을 가짐으로써 충돌하는 문제들이 ..

1. 쿠키 (Cookie) 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미한다. 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장이 된다. (↔ 세션) 매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있다. SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다. (CSRF 취약) 대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재한다. 대부분의 브라우저가 지원한다. ※ 다른 오리진(= 프로토콜 + 도메인 + 포트) or 다른 도메인에 대한 이슈 1. 브라우저의 CORS 정책은 다른 오리진에 대한 요청을 막음 : 브라우저는 다른 오리진에 요청을 보낼 때 요청의 Origin 헤더에 자신의 오리진을 실어..

1. 비동기 프로그래밍 (Asynchronous Programming) 동기적(Synchronous) 실행은 코드가 작성된 순서대로 실행되는 것이라면, 비동기적(Asynchronous) 실행은 코드가 작성된 순서와 무관하게 실행되는 것을 말한다. 동기적 실행은 어떠한 작업이 완료되기 전까지 반드시 기다려야 하지만, 비동기적 실행은 그 작업이 완료되기 전까지 다른 작업을 수행할 수 있다는 특징이 있다. 비동기 프로그래밍은 프로그램의 성능을 획기적으로 향상하는 한편, 코드가 작성된 순서대로 실행되는 것이 아니기 때문에 많은 프로그래머들이 디버깅에 어려움을 겪곤 한다. 그래서 많은 프로그래밍 언어들은 비동기 프로그래밍의 편의를 돕기 위해 여러 기능들을 제공하곤 한다. 이번 포스팅에서는 JavaScript가 제..

1. 개요 - JavaScript는 프로토타입 기반의 언어 JavaScript는 객체 지향 언어임에도 불구하고 다른 객체 지향 언어(Java, Python 등)와 달리 클래스(Class)의 개념이 존재하지 않는다. 그래서 다른 객체 지향 언어를 공부하다가 새롭게 JavaScript를 공부하기 시작하는 사람들은 주로 이 부분에서 많은 혼란을 겪는다. JavaScript는 클래스 대신 프로토타입(Prototype)이라는 개념을 통해 객체 지향 프로그래밍을 지원하는데, 실제로 JavaScript를 사용하는 상당수의 사람들은 프로토타입의 개념을 정확히 이해하지 못하고 사용하는 경우가 많다. 하지만 JavaScript는 프로토타입 기반의 언어라 불릴 만큼 프로토타입에서 시작하여 프로토타입으로 끝나기 때문에, Ja..

1. 브라우저 렌더링 과정 1-1. DOM 트리 생성 HTML 파서가 전달받은 HTML 파일에 담겨 있는 HTML 코드들을 파싱 하여 메모리 상에 DOM 객체들로 이뤄진 DOM 트리를 생성한다. DOM(Document Object Model)은 문서의 각 요소를 객체(Object)로 표현하는 방법이자 모델을 뜻한다. 이러한 DOM 트리의 구축으로 인해 스크립트 언어가 문서의 뷰를 편하게 조작할 수 있다. 1-2. 스타일 규칙 생성 CSS 파서가 전달받은 HTML 파일과 CSS 파일에 담겨 있는 CSS 코드들을 파싱 하여 메모리 상에 스타일 규칙들을 생성한다. 1-3. 렌더 트리 생성 앞서 생성한 DOM 트리와 스타일 규칙들의 정보를 바탕으로, 실제로 브라우저의 화면에 노출되어야 하는 노드들에 대한 정보인..

JavaScript를 공부하는 사람이라면 한 번쯤은 JavaScript가 단일 쓰레드 기반의 프로그래밍 언어라는 말을 들은 적이 있을 것이다. 그렇다면 setTimeout() 함수로 특정 시간을 기다림과 동시에 다른 코드를 동작시키는 등의 비동기 처리는 어떻게 가능한 것일까? 단일 쓰레드라면 스택이 하나이므로 모든 작업은 하나씩 순서대로 이뤄져야 하기에 이는 말이 안 된다. 이를 이해하기 위해서는 JavaScript의 런타임에 대한 이해가 필요하다. 필자도 이에 대한 이해가 부족하여 이번 기회에 직접 찾아보며 공부해보았고, 그 결과를 이 포스팅에 정리하고자 한다. 혹시 틀린 점이 있다면 댓글로 지적해주기 바란다. 1. JavaScript 런타임 런타임이란 해당 프로그래밍 언어로 작성된 코드가 구동되는 환..