분류 전체보기

Next.js - Getting Started - 2

Static Generation without data 기본적으로 Next.js의 아무런 fetching이 필요없는 페이지는 Static Generation을 사용하는 pre-render기법을 사용합니다. 예시를 들면 function About() { return About } export default About; 이러한 경우에는 Next.js는 하나의 HTML파일을 빌드타임떄 생성합니다. Static Generation with data 어떠한 페이지는 당연히 pre-rendering되기 위해 외부의 fetching되는 데이터가 필요합니다. 이 경우에는 두가지 시나리오가 존재합니다. 이 중 하나 또는 둘다 적용될 수 있습니다. 그렇다면 다시 CNA프로젝트로 돌아가서 S..

Next.js - Getting Started - 1

Next.js React로 완전한 웹 애플리케이션을 처음부터 빌드하려면 고려해야 할 중요한 세부 사항이 많이 있습니다. 코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 트렌스파일러를 사용하여 변환되어야 합니다. code spliting과 같은 production최적화를 수행해야 합니다. 성능 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링할 수 있습니다. 서버 측 렌더링 또는 클라이언트 측 렌더링을 사용할 수도 있습니다. React앱을 데이터 저장소에 연결하기 위해 서버 측 코드를 작성해야 할 수도 있습니다. Next.js는 위의 문제에 대한 최고의 해답을 제공합니다. Next.js 시작 ( 공식문서 ) Pages Next.js 에서는 '.js', '.jsx', '.ts'..

Webpack 설정

자바스크립트 개발자의 딜레마 자바스크립트 언어의 문법은 빠르게 진화하고 있지만 정작 자바스크립트 코드를 실행해주는 환경은 이를 받쳐주지 못하는 경우가 많습니다. 예를 들어 브라우저의 경우 종류가 워낙 다양해서 어떤 브라우저가 어떤 문법을 지원하는지 일일이 파악하기 힘들 정도이고, 노드 (NodeJS)의 경우에도 버전별로 지원하는 언어 문법이 다르기 때문에 브라우저 만큼은 아니지만 비슷한 문제를 겪게 됩니다. Babel: JavaScript transpiler/Compiler 컴파일(compile)은 인간이 작성한 소스 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 과정을 의미하지만, 트랜스파일(transpile)은 다른 실행 환경에서도 돌아갈 수 있도록 같은 언어를 유지한체 소스 코드의 형태만 ..

Next.js ( CSR && SSR )

오늘날 웹 어플리케이션 개발을 한다고 하면 대부분 리액트 앵귤러 뷰와 같은 자바스크립트 기반 프레임워크를 통해서 개발을 하게 됩니다. MPA란 다양한 페이지를 만들어 매 요청마다 새로운 페이지를 요청해서 화면에 렌더링 해주는 전통적인 웹 방식이다 MPA의 단점 하지만 매번 새로운 HTML을 서버로부터 받아오고 전환 시마다 화면 깜빡임이 있다는 단점이 있습니다. 그 후로 AJAX라는 것이 나타나면서 동적으로 서버에서 원하는 정보를 받아와서 화면 깜빡임도 없는 SPA를 사용하게 되었습니다. CSR && SSR SPA는 웹 애플리케이션에 필요로 한 정적 리소스를 초반 한번에 모두 다운로드 하고 그 후 페이지 갱신이 필요로 할 때 필요로 한 데이터만 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 ..