전체보기

이번 포스트에서는, 우리가 개발한 application의 코드가 network에 배포된 후, 어디에 저장되고 어디서 실행되는지. Edge라는 것이 무엇인지에 대해 알아보고자 한다. What is the Network? 쉽게 생각하자면 network는 자원을 공유할 수 있는 연결된 컴퓨터(혹은 서버)라고 할 수 있다. Next.js application에서 우리가 개발한 code는 origin servers, Content Delivery Networks (CDNs), and the Edge에 배포 되게 되는데, 각각이 무엇인지 알아보도록 하자. Origin Servers Server라고 하면 application 코드의 원본을 저장하고 실행시키는 메인 컴퓨터 라고 할 수 있다. 그리고 이러한 Server..

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를 리턴해주자. 그리고 우리..