프론트엔드 개발

아래 예제에는 NextJs 안에서 getServerSideProps 안에서 one, two, three까지 3개에 api에 요청하여 데이터를 가져오고 있습니다. 가져오는 데이터의 크기가 크지 않다면 이렇게 사용할 수 있지만, 가져오는 데이터의 크기가 크거나, 3개의 api요청이 아닌 1000개의 api요청 같을 때는 느려질 수 있습니다. 어떻게 고칠 수 있을까요? example) export const getServerSideProps = async function (ctx) { const one = await fetchJson(`${process.env.NEXT_PUBLIC_ENV_VARIABLE}/api/~`, { method: 'GET', }); const two = await fetchJson(`..

이번 시간에는 Next JS에 Typescript를 더하여 사용해 볼 것인데, 공식 홈페이지를 보며 따라 하였다. Typescript 예제 사용방법 - 첫 프로젝트를 시작할 때, npm 또는 yarn을 이용하여 사용할 수 있다. npx create-next-app --ts # or yarn create next-app --typescript - 기존 프로젝트가 있다면, tsconfig.json 파일을 루트 폴더 바로 아래에 위치시킨다. Next.js는 이 파일을 기본값으로 자동 구성한다. 사용자 지정 컴파일러 옵션과 함께 고유한 tsconfig.json을 제공하는 것도 지원한다. 그런 다음 터미널에서 'npm run dev' 또는' yarn dev'을 실행하면 다음과 같이 컴파일이 완료되었다고 확인할 수..

2021년 6월 16일 수요일에 업데이트된 Next js 11, 공식 홈페이지에서 번역기를 돌려가면서 어떠한 것들이 달라졌는지 살펴보려 한다. 요약 Conformance: 최적의 UX를 지원하기 위해 세심하게 제작된 솔루션을 제공하는 시스템 Improved Performance: 코딩을 더 빨리 시작할 수 있도록 콜드 스타트업 시간을 개선하기 위한 추가 최적화 next/script: 성능을 향상시키기 위해 자동으로 타사 스크립트 로드의 우선순위를 지정 next/image: 자동 크기 감지 및 블러업 자리 표시자 지원으로 레이아웃 이동을 줄이고 보다 부드러운 시각적 경험 제공 Webpack 5: 이제 모든 Next.js 애플리케이션에 대해 기본적으로 활성화되어 모든 Next.js 개발자에게 이러한 이점을 ..

Next js에서 styled-component를 이용하려면 몇 가지 설정이 필요하다. Next js와 styled-components 가 설치되어 있다고 가정한다. 문제점 첫 화면에서, css가 의도치 않게 적용되는 모습을 볼 수 있다. styled-components이 기존 csr처럼 작동되기 때문에 발생되는 문제인데, 이를 해결하려면 ssr을 적용을 해야 한다. 해결방법 1. babel-plugin-styled-components 설치 yarn add -D babel-plugin-styled-components npm i -D babel-plugin-styled-components 2. 해당 프로젝트 root 바로 밑에 .babelrc를 만든다. { "presets": ["next/babel"], ..

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를..