전체 글93 getStaticPaths [동적 라우팅] 페이지 path는 외부 데이터에 달려있다. 다이나믹 라우팅 [id].js 일 경우 사용한다. getStaticProps 사용해주면 반드시 getStaticPaths 있어야 한다. getStaticPaths 를 사용하기 전에 라이브러리 하나만들자. 반드시 [ { params: { } } ] 배열안에 object 인 params key 값을 가져야한다. fallback : true, path: [ {params : { id : '1' }} ] ... 3 현재 4번에 해당하는 글이 없다면, fallback : true 일 경우 서버로 부터 불러온다. 2021. 10. 25. Pre-rendering next.js 는 Pre-rendering 방식이다. pre-rendering 이란 것은 초기에 html을 먼저 보여준다. 그 후 js 를 로드하는 방식이다. CSR 리액트인 경우 초기에 모든 페이지를 로드하기 때문에 흰 화면이 오랜시간 유저에게 보인다. 고로 next.js 를 사용 Pre-rendering 의 장점은? A.검색엔진 최적화. B.초기 내 앱에 JS 없이 작동 pre-rendering method 2개 존재. 1. static generation 빌드타임에 서버에서 호출한다 npm run dev or yarn dev 할 경우 빌드 시작. 2.server-side-rendering html 이 생성된다 각각 요청에의해서. (재사용 X) 가장 중요한 핵심은, 넥스트 js는 각각의 페이지를 pr.. 2021. 10. 23. next.js에서 css사용해보자 next.js 에서 Image 컴포넌트가 따로 있음. Next.js supports CSS Modules using the [name].module.css file naming convention. Metadata 수정하는법 이제 next.js 에서 css 사용하는법 다른 라이브러리도 사용 가능. 반드시 이름.module.css 컨벤션 지켜야한다. 글로벌 css 파일은 항상 pages/_app.js 에서 임포트해야한다. 2021. 10. 22. 라우팅 하기 in next.js 라우팅을 어떻게 할까 ? pages 폴더 안에 있는 건 next.js 로 인해 자동으로 라우팅 해줌. No routing libraries are required. 넥스트js 는 코드스플리팅을 자동으로 해준다. Only the JavaScript for /posts/first-post is loaded. 코드스플리팅? 쉽게 말하자면 각각의 페이지들은 필요한 것들만 로드한다.https://parkjaeho.tistory.com/130 코드스플리팅 코드 스플리팅? SPA 에서 웹사이트가 방대하다고 가정한다면, 컴포넌트가 몇 만개가 될 가능성이 존재한다. 처음 비어있는 index.html 에서 웹팩을 사용해 번들링한 하나의 .js 페이지를 대기하면 페 parkjaeho.tistory.com 넥스트js는 페이지.. 2021. 10. 22. 코드스플리팅 코드 스플리팅? SPA 에서 웹사이트가 방대하다고 가정한다면, 컴포넌트가 몇 만개가 될 가능성이 존재한다. 처음 비어있는 index.html 에서 웹팩을 사용해 번들링한 하나의 .js 페이지를 대기하면 페이지 로딩이 오랜시간 걸림. 그렇기 때문에, 필요없는 컴포넌트는 번들링한 하나의 .js 페이지에서 처음에 불러오지 않도록 하는것이 코드스플리팅. 즉, 처음에 필요없는건 나중에 불러오는 방식 그렇다면 기준은 아래 1,2처럼 잡자 1.pages 폴더 (서비스 별로 나뉘어져 있는 폴더임) 컴포넌트 기준으로 2.서버사이드렌더링 안될 애들 npm install @loadable/component Typescript 사용시 npm i --save-dev @types/loadable__component https:/.. 2021. 10. 19. 웹팩 웹팩 ? 하나의 웹서비스를 구성하는 모든 파일들 (html 제외) ( css ,js ,image 들을 각각의 모듈로 본다) 을 해석한다음 그 파일들을 하나의 파일로 합쳐줌(모듈 번들링) 이것이 바로 웹팩. 웹팩 사용 전 무수히 많은 파일들을 요청하고 응답한다. 수백개의 파일들이 있다면 느릴 것이고, 지구 반대편에서 요청을하면 더 더욱 응답이 느릴 것이다. 웹팩 사용 후 파일들을 하나의 파일에 합쳐준다. 이것을 모듈 번들링이라고 한다. 페이지 로딩속도가 빨라질 것이다. loader 로더가 무엇일까? js가 아닌 파일들에 대해서 ( CSS, Images, 폰트 등) 웹팩안에서 합쳐(번들링) 줄 수 있게 적용해주는 속성, (css 로더를 적용한 상태에서 웹팩 build를 하면 빌드 결과물에 css 코드가 포함.. 2021. 10. 15. 이전 1 2 3 4 5 ··· 16 다음
