NextJS React로 웹 애플리케이션을 구성하기엔 고려할게 많이 있다. React 코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 컴파일러를 사용하여 변환되어야 한다. 코드 분할과 같은 프로덕션 최적화를 수행해야 한다. 성능 및 SEO를 위해 일부 페이지를 정적으로 ...

시작전에.. 현재 굉장히 각광받고 있는 기술이며, 개발자과 관련 없는 사람도 한 번 쯤은 들어본지 꽤나 된 기술이다. 인터넷에 떠다니는 많은 글 들을 읽어 봤지만 이해하기 힘든 경우도 많았고, 이번에 블록체인 관련 ‘Mastering’ 시리즈로 유명한 BitCoin Mastering이란 책을 읽으면서 어느정도 개념을 정리할 수 있을 것 같아서 이번 ...

JavaScript의 실행과정 처음 브라우저에서 서버에서 클라이언트 코드를 요청하여 HTML 코드를 읽으며 <script> 태그를 이용한 JavaSript(편의상 JS) 코드와 OnClick과 같은 JS 코드가 포함된 속성들을 브라우저의 JS 엔진으로 보낸다. JS는 스크립트를 실행하기 위해 실행 컨텍스트(...

데이터 바인딩(Data Binding) 데이터 바인딩은 뷰 요소 혹은 사용자 인터페이스를 채우는 데이터를 연결하는 프로세스이다. 즉, Model과 View의 연결을 생성한다. 쉽게 생각한다면, UI 구성요소에 데이터를 동기화 시키는 방법이라 생각하면 될거같다. 데이터 바인딩은 2가지 유형으로 분류할 수 있는데 단방향 바인딩과 양방향 바인딩이 존재한...

DOM (Document Object Model) MDN에서의 정의는 DOM은 웹 문서용 프로그래밍 인터페이스이다. 그리고 다음 문장이 DOM의 핵심이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. 쉽게 말해서 우리가 아래 코드처럼 ht...

React로 개발을 하다보면, Webpack 그리고 babel이란 단어를 심심치 않게 접하게 된다. 오늘은 Webpack과 babel의 개념에 대해서 알아보려고 한다. 웹팩 등장 전 아래와 같이 script를 바디에서 호출하는 식으로 사용했다. 이런 경우 문제점은 전역 스코프가 오염되어 예측할 수 없게 된다. <script type="m...

SSR (Server Side Rendering) SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. 쉽게 말해서 서버에서 렌더링할 준비가 다 되면 HTML을 브라우저에게 응답해준다. 출처: https://medium.com/walmartglobaltech/the-benefits-of-server-s...