profile
움직이는 만큼 행복해진다

React.lazy and (next.js) Suspense

React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고간편하게 컴포넌트 코드 스플리팅을 할 수 있다고 한다.컴포넌트를 렌더링 하는 시점에비동기적으로 로딩할 수 있게 해주는 유틸 함수리액트 내장 컴포넌트코드 스플리팅된

2021년 11월 14일
·
0개의 댓글
·

Next.js <Image />

이번에 next.js의 &lt;Image /> 에서 AVIF 포맷을 지원한다고 해서 Image 태그를 다시 한번 사용해봤다.AVIF 포맷 : 용량이 더 적은 파일 형식(.jpg, .png 같은 것)https&#x3A;//itigic.com/ko/heif-and-avif

2021년 11월 13일
·
0개의 댓글
·

Next.js middleware

간단하게 테스트course/id 에 미들웨어를 만들기id가 1이 아니면 404 화면을 띄우기404 화면 컴포넌트 필요\_middleware.ts 에선 리액트 컴포넌트 문법(jsx or tsx)를 사용할 수 없음서버쪽 코드라고 생각하면 될 것 같다console.log도

2021년 11월 13일
·
0개의 댓글
·

[Next.js] getStaticProps vs. getServerSideProps

"빌드 시에 딱 한 번"만 호출되고, 바로 static file로 빌드됩니다. 따라서, 이후 수정이 불가능합니다.SSG (Static Site Generation) 개념입니다."page가 요청받을때마다" 호출되어 pre-rendering합니다.SSR (Server Si

2021년 11월 12일
·
0개의 댓글
·

Next.js 11 vs 12 컴파일러 비교

이번 next.js 12버전 업데이트에서 Babel 컴파일러에서 SWC(Rust) 컴파일러로 바뀌었다.build time11버전 : 1분 50초(빌드에 걸리는 총 시간)12버전 : 1분 38초(빌드에 걸리는 총 시간)refresh time11버전 : 강의 만들기 ->

2021년 11월 12일
·
0개의 댓글
·

next.js 12.0.2에서 react-hook-form build 안됨

https&#x3A;//github.com/react-hook-form/react-hook-form/discussions/6961https&#x3A;//github.com/react-hook-form/resolvers/issues/27112.0.1 버전에선 에러가 안난

2021년 11월 12일
·
0개의 댓글
·
post-thumbnail

Error: Not supported at Object.loadConfig [as default]

https&#x3A;//stackoverflow.com/questions/69774152/failed-to-load-next-config-js/69781857next.js를 버전 12로 올리고 실행하는데 위와 같은 에러가 발생했다.에러를 검색해보니 node.js버전을

2021년 11월 12일
·
0개의 댓글
·
post-thumbnail

Next.js Pre-rendering and Data Fetching

Next.js version 12 업데이트 후 .server.js로 페이지 컴포넌트를 만들면 getServerSideProps, getStaticProps 둘다 필요없다고 하는 것 같은데 이것을 실험해보기 전에 getServerSideProps을 먼저 사용해봐야겠다는

2021년 11월 9일
·
0개의 댓글
·
post-thumbnail

Next.js version 12

이번에 Next.js의 버전 12가 나온 것에 대해 알아보자. Next.js 12 공식 영상 및 문서 https&#x3A;//youtu.be/dMBYI7pTR4Qhttps&#x3A;//nextjs.org/blog/next-12Update today by running

2021년 11월 9일
·
0개의 댓글
·
post-thumbnail

next.js debug mode

최근까지 package.json에 있는 "dev": "NODE_OPTIONS='--inspect' next dev"스크립트를 NODE_OPTIONS='--inspect' 없이 사용했었다.이번에 이 환경변수를 설정하는 것이 어떤 의미가 있는지 알아보자.브라우저에 위 UR

2021년 9월 26일
·
0개의 댓글
·

ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed

delete the .next folder at the root of your project.참고 문헌https&#x3A;//stackoverflow.com/questions/67652612/chunkloaderror-loading-chunk-node-modules-n

2021년 8월 27일
·
0개의 댓글
·

next js와 styled components

getInitialProps, getStaticProps, getServerSidePropsstatic method로써 어떤 페이지에 추가된 비동기 함수 이다.server side rendering을 가능하게 하고 initial data population을 할 수 있

2021년 7월 29일
·
0개의 댓글
·

next js 구조(작성중)

\_document : HTML, App container\_app : 공통의 레이아웃index : home 컴포넌트signup : /signup 에 해당하는 페이지 컴포넌트글로벌 CSS앱 공통으로 쓰이는 header나 footer를 어디에 넣어야 되나 했는데 AppL

2021년 7월 10일
·
0개의 댓글
·