명민하다

Next.js, Nuxt.js, Gatsby, Hugo, Jekyll 및 HTML에 대한 starter workflows 가 있으니 필요한 파일 복사해서 붙여넣자 1. Next.js, Nuxt.js, Gatsby, Hugo, Jekyll 또는 HTML을 만들어 저장소에 저장한 후 해당 저장소의 설정 탭으로 이동 2. 왼쪽 사이드바에서 페이지를 클릭 3.빌드 및 배포에서 GitHub 작업을 선택 4. repository의 코드를 기반으로 몇가지 workflow가 제안된다. 코드 베이스와 호환되는 workflow를 선택 - 나는 지금 workflow가 하나라서 안보임 5. 구성을 클릭하면 미리 만들어진 workflow로 이동 자유롭게 yaml 파일을 조정하고 코드 커밋하기 - 나는 starter workfl..

최상위 디렉터리에 .babelrc를 만들어주고 아래 와 같은 내용 추가 { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] }

next에서 css-in-js 방식인 styled-component를 이용하려면 몇 가지 설정이 필요하다. _document.js 설정 ssr시에 실행되는 파일인 _documents.js에 styled-components의 스타일 코드를 추출하는 로직을 추가한다. 공식문서를 참고해서 아래와 같이 getInitialProps method를 작성한다. import Document from 'next/document' import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerS..

렌더링 이란 요청해서 받은 내용을 브라우저 화면에 표시하는 것 렌더링 과정 Loader 가 서버로 부터 정보들을 불러옴 파싱을 통해 문서를 DOM 트리로 만듬 DOM 트리가 구축되는 동안 브라우저는 렌터 트리를 구축 CSS 설정/레이아웃 위치 지정 렌터링 트리가 그려짐 서버사이드 렌터링(SSR) ssr은 페이지 이동할 때마다 새로운 페이지를 요청 한다. 모든 탬플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 장점 검색엔진 최적화(SEO) 가능 서버 사이드 렌더링을 통해 얻을 수 있는 가장 큰 장점 이다. 성능개선 첫 렌더링된 html 을 클라이언트에게 전달해 주기때문에 초기로딩속도를 많이 줄여줄 수 있다. 자바스크립트 파일을 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐..