JavaScript/Next.js 썸네일형 리스트형 Next.js에서 운영배포시 console 제거 1) babel-plugin-transform-remove-console 설치 yarn add --dev babel-plugin-transform-remove-console 2) .babelrc 작성 { "presets": [ "next/babel" ], "env": { "production": { // 개발시 "development" "plugins": [ "transform-remove-console" ] } } } 추가로, next.js 12.0.0 버전 이후로는 next.config.js에서 간단하게 제거할 수 있다. https://nextjs.org/docs/advanced-features/compiler#remove-console IE11 개발서버에서 attachShadow 이슈 이슈 attachShadow가 웹컴포넌트와 관련된 키워드인데, IE에서 작동하지 않는다.(개발 서버만) 해결 방법 1) @webcomponents/shadydom 설치 2) src/polyfills.js import "@webcomponents/shadydom"; 3) next.config.js webpack(config) { const originalEntry = config.entry; config.entry = async () => { const entries = await originalEntry(); if ( entries["main.js"] && !entries["main.js"].includes("./src/polyfills.js") ) { entries["main.js"].unshift(".. Next.js url 네이밍 ~~.help 같은 filepath를 갖으려면 아래와 같이 폴더구조를 잡으면 된다. ㄴ src ㄴ pages ㄴ main.help ㄴ index.tsx CRA와 비교한 Next.js의 장점 1. Pre-rendering CRA에서 Server Side Rendering을 구현하기 위해서는 라이브러리 설치, 설정 변경 등 추가작업이 필요하지만 Next.js는 어떤 추가 설정 없이 페이지 요청 시 html을 생성하는 ServerSideRendering은 물론이고, build시에 html을 생성하는 Static Side Generation까지 두가지 형태의 Pre-rendering을 제공한다. 2. next.config.js CRA에서는 webpack, babel 등으로 react-script로 추상화 된 설정들을 수정하기 위해 프로젝트의 복잡성이라는 리스크를 지닌 eject 명령어를 수행후 설정 파일을 수정해야 되지만 next.js에서는 webpack, babel, css-loader, bab.. next-redux-wrapper가 필요한 이유 https://simsimjae.medium.com/next-redux-wrapper%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0-5d0176209d14 Data Fetching 번역 페이지 문서에서는 Next.js가 두 가지 형태의 사전 렌더 방식, 동적 생성과 서버 사이드 렌더링이 있다는 것에 대해 설명하였다. 이 문서에서는 데이터 fetching의 각 방식에 대해 심도 있게 살펴볼 것이다. 아직 페이지 문서에 대해 읽어보지 않았다면 먼저 페이지 문서에 대해서 읽어보는 것을 추천한다. 사전 렌더링을 위해 데이터를 가져오는 데 사용할 수 있는 Next.js의 세 가지 독특한 방식에 대해 이야기할 것이다. getStaticProps(정적 생성): 빌드 시간에 데이터를 가져오기 getStaticPaths(정적 생성): 데이터에 기초해서 특정 동적 경로를 사전 렌더하기 getServerSideProps(서버 사이드 렌더링): 매 요청마다 데이터를 가져오기 이에 더해서 우리는 클라이언트 측.. Pages 번역 Next.js에서 페이지는 pages 디렉토리 안에 있는 .js, .jsx, .ts, or .tsx 파일에 있는 export된 React 컴포넌트이다. 각 페이지는 파일의 이름에 따른 route로 연결된다. 예시: 아래와 같은 React 컴포넌트를 export하는 pages/about.js를 생성하면 /about 에서 접근이 가능할 것이다. function About() { return About } export default About 동적 경로 Next.js는 다이나믹(동적) 라우트를 지원한다. 예를 들어 pages/posts/[id].js란 파일을 생성하면 post/1, post/2 같은 경로로 접근이 가능하다. 사전 렌더링 기본적으로 Next.js는 모든 페이지를 먼저 렌더링한다. 먼저 렌더링 한.. 내가 정리하는 Next.js 0. 요약 Next.js는 SPA고, 첫 페이지 내용이 모두 채워져 있는 html을 받아서 SSR이라고 하고, Link를 이용해서 CSR을 하고, 검색엔진최적화를 대응하려면 Next.js를 사용해야 된다. 1. Next.js는 SPA인가? Next.js는 SPA인 리액트에서 SSR을 할 수 있게 구현이 되어있는 프레임워크이다. Next.js는 기존의 Multi Page Form이랑 다른 개념이다. 기존 Multi Page Form은 page가 변경될 때 마다 서버에서 html 파일을 새로 내려주지만, Next.js는 첫 페이지만 내려주고, 나머지는 CSR한다. 즉, 페이지가 갱신될 때 store가 살아있는 이유는 Next.js도 SPA이기 때문이다. Next.js가 SPA인지 테스트해보기 위해 next .. 이전 1 2 다음
