분류 전체보기93 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. (NPM) dependencies && devDependencies dependencies 그리고 devDependencies 차이점이 무엇일까 ? dependencies 애플리케이션의 로직과 연관이 있는 것들. (화면) - 배포용 npm i react npm i chart npm i vue devDependencies 개발을 할때 개발을 위한 보조 라이브러리 - 개발용 -D === --save-dev npm i typescript -D npm i webpack -D npm i js-compression -D 나중에 최종적으로 서버에 빌드가 될경우 devDependncies는 배포가 되지 않는다. npm 커스텀 명령어 npm run bulid === tsc 2021. 10. 9. CORS. CORS,SOP 웹브라우저의 내장된 보안정책이다 . 쉽게 한번 풀어보려고한다. cors 를 알기전에 Origin(출처)를 알고가자 Origin(출처)? http://localhost:3000/ http : 프로토콜. localhost : 호스트. 3000 : 포트번호. SOP(Same-Origin Policy) 웹브라우저의 보안 정책으로 말 그대로 “같은 출처에서만 리소스를 서로 공유할 수 있다”라는 규칙을 가진 정책이다. 쉽게말해서, 같은 도메인이어야 통신을 할 수 있다 라는 내용이다. 그럼 cors는 c=cross 다른 출처 리소스 아니겠는가? 그렇다는건 도메인이 다르면 CORS 정책 위반으로 인해 에러가 발생한다. ex) 민수는 백엔드개발자이고, 민수의 집주소는 http://localhost:500.. 2021. 9. 8. 이전 1 2 3 4 5 ··· 14 다음
