프론트엔드 개발

NEXT JS Environment Variables를 번역했습니다. Next.js 버전 9.4 이상용입니다. 이전 버전의 Next.js를 사용하는 경우 next.config.js에서 환경 변수를 업그레이드하거나 참조하세요. (github.com/vercel/next.js/tree/canary/examples/environment-variables) Exposing Environment Variables to the Browser 기본적으로. env.local을 통해로드 된 모든 환경 변수는 Node.js에서만 사용할 수 있는데, 브라우저에 변수를 사용하려면 변수 앞에 NEXT_PUBLIC_을 붙여야합니다. NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk process.env.NEXT_..

기본적으로 Next js는 모든 페이지를 pre-renders 해준다. 즉, Next.js는 클라이언트 측 JavaScript에서 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성한다. 생성된 각 HTML은 해당 페이지에 최소한의 JS 코드와 연결된다. 브라우저에서 페이지를 로드하면 해당 JS 코드가 실행되고, 페이지가 상호작용 하게 된다. ( hydration ) 2가지 형태의 pre-rendering - Static-Generation: HTML은 빌드할 때 생성되며, 각 요청에서 재사용된다. - Server-side-Rendering: HTML은 매 요청 시에 생성된다. Static Generation 만약 페이지가 Static Generation를 사용하게 된다면, HTML은 빌드..

pages 폴더 바로 밑에 파일을 만들고 다른 설정 필요 없이 각 페이지는 파일의 이름과 연결되어, routing이 적용된다. Dynamic Routing Next.js는 dynamic routes를 제공한다. 예를 들어, test/1, test/2와 같이 접근하려면 pages 디렉터리 바로 밑에 아래와 같이 만들어야 한다. 네이밍을 대괄호로 감싸면 적용된다. router.beforePopState 경우에 따라 popstate를 호출하고 라우터가 작동하기 전에 무언가를 수행 할 수 있다. router.beforePopState(cb) cb-들어오는 popstate 이벤트에서 실행할 함수. 이 함수는 다음의 props를 사용하여 이벤트 상태를 객체로 받는다. url: String - 새로운 상태의 경로, ..

필요조건 Node.js 10.13 이거나 최신 Setup npx create-next-app // or yarn create next-app create next-app으로 설치 시, 1. 컴파일과 번들링이 자동으로 된다. 2. 변경사항 저장 시, 화면에 바로 적용 3. SSR 지원 4. static 파일 지원 pacakage.json에서는 "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } - develope 환경 yarn dev를 터미널에서 실행하면, development server가 실행된다. 'http://localhost:3000'으로 들어가서 확인해보면 된다. - product 환경 yarn start를..

앞서 CSR과 SSR을 비교해 보면서 정리해보면, 각 브라우저의 크롤러들이 해당 페이지에서 내용을 찾게 될 때, SEO적인 측면에서 SSR을 고려해볼 필요가 있다고 생각하였습니다. SEO 뿐만이 아니라 html을 먼저 뿌려주기 때문에, 유저가 처음 들어왔을 때, 빠르다고 느끼다고 생각할 수 있습니다. React에서, SSR을 적용하려면 몇 개의 프레임워크들이 있습니다. https://jthcast.dev/posts/gatsby-versus-nextjs/ 이글에서Gatsby와 Next.js의 차이를 알 수 있습니다. 저는 SSR과 SSG방법을 모두 사용 가능한 Next js를 선택하겠습니다. Next.js는 리액트를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 프레임워크입니다. Next js는 ..

CSR 동작 방식 처음에 웹서버에 요청할 때, 서버는 데이터가 없는 문서를 반환한다. HTML 및 static파일들이 로드되면서 데이터가 있다면, 데이터 또한 서버에 요청하고 그것이 화면상에 나타나게 된다. Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라서 javascript를 통해 동적으로 Rendering 한다. 필요에 따라 데이터를 서버에 요청해서 받아와 Rendring 한다. SSR 동작방식 서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JavaScript 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식. SSR과..