전체 글

Next.js 에서는 자기들의 가장 중요한 컨셉중 하나로 Pre-rendering 을 꼽고 있다. 이 포스트에서는 Pre-rendering이 무엇인지, 그리고 Next.js에서 제공하는 렌더링 방식에 대해 정리해보고자 한다. React에서 작성한 코드를 UI의 HTML코드로 변환하는 중요한 작업단위를 Rendering이라고 한다. 이 글에서는 이러한 Rendering의 종류와 Next.js에서 제공하는 렌더링 방식에 대해 정리해보고자 한다. What is Rendering? 렌더링이란 무엇일까? 렌더링이란, 작성된 코드를 유저가 상호작용할 수 있는 페이지로 변화시키는 과정을 의미한다. 렌더링의 분류 Next.js를 통해서는 다음의 3가지 방식의 렌더링이 가능하다. Server-Side Rendering(..

이번 포스트에서는 Next.js의 약간은 advanced features에 대해 알아보고자 한다. 이번 포스트를 통해 기본적으로 Next.js가 기본적으로 어떻게 동작하고 있는지에 대해 이해해볼 것이다. 앞서, React는 컴포넌트 구조를 잡는 것에 있어서 매우 개방적이기 때문에 여러가지 방법이 있다고 말한 적이 있다. 이에 반해 Next.js Framework는 development process뿐만 아니라 최종 application단계에서도 최대한 빠르도록 최적화 하는 구조를 만들어 준다. 이번 포스트에서는 다음 3가지 주제에 대해 다뤄 보려고 한다. 코드가 구동되는 환경/장소(The environment where your code runs): Development vs. Production 코드가..

Next.js 시작하기 Next.js를 프로젝트에 도입하면, 더이상 react와 react-dom 스크립트를 unpkg.com에서 받아 올 필요가 없다. 대신, 관련 패키지들을 npm을 통해 설치할 수 있다. 아래의 일련의 과정을 통해 Next.js를 성공적으로 프로젝트에 도입해보자. 1. Install packages 먼저, package.json이라는 빈 객체({})만 있는 파일을 만들자. // package.json { } 그리고, 터미널에서 아래의 명령어를 실행시키자. run npm install react react-dom next 설치가 완료되고 나면, package.json 파일 아래 아러처럼 dependencies들이 설치 된 것을 볼 수 있을 것이다. // package.json { "d..

이전 글에서 React의 Core Concepts인 Components와 Props에 대해 알아봤다. 여기에서는 마지막 코어 컨셉인 State가 무엇인지, React가 State와 Event-Handler를 이용하여 어떻게 Interactivity를 높이고 있는지 알아보자. Event-Handler React에서 Event를 Listen하고 Hadling 하는 방법은 매우 간단하다. Listening to Events function HomePage() { // ... function handleClick() { console.log('increment like count'); } return ( {/* ... */} Like ); } 위에서 만들었던 HomePage 컴포넌트 안에 button 을 하나 ..

이전 글에 이어서, 이번에는 React의 Core Conept들과 이를 어떻게 이용하고 있는지 알아보자. React의 Core Concepts Components Props State Components 아래 사진 처럼 유저 인터페이스는 작은 단위의 블락(so called Components)로 쪼갤 수 있다. 이러한 모듈성은, 컴포넌트를 추가, 수정, 삭제할 때 application의 다른 부분은 수정할 필요 없이, 아주 쉽게 유지 보수 할 수 있게 만듦으로써 유지보수성을 높여준다. 이러한 컴포넌트는 어떻게 만들 수 있을까? 리액트에서는 components는 함수이다. script 태그의 안쪽에서 header라는 함수를 작성하고, JSX를 이용하여 원하는 UI elements를 리턴해주자. 그리고 우리..

NextJS를 처음 배우면서 공식 홈페이지에 있는 내용을 따라하며 정리하려고 하며 당해 포스트는 그 첫 시작이며, React가 Dom을 어떻게 다루는지에 대해 주요하게 다루려고 한다. Getting Start with React 리액트를 project에 도입하기 위해서는 unpkg.com 이라는 곳에서 2가지 스크립트(react, readt-dom)를 로드 해줘야 한다. react: React library의 코어 react-dom: React를 이용하여 DOM을 컨트롤 할 수 있는 DOM methods를 제공해준다. 만약, 우리가 JavaScript만을 이용하여 h1태그를 div태그 안에 넣으려고 했다면, 아래와 같이 긴 코드가 필요했겠지만 const header = document.createElem..