dev_eun

Dynamic Routes /posts/:id 경로의 post를 라우팅하고 싶을 경우 pages/posts/[id].ts 파일을 생성 getStaticPaths()가 id 값들의 리스트를 반환 리스트 원소의 타입은 object이다. 그리고 이 객체는 반드시 params안에 key가 id인 객체를 가지고 있어야 한다. return fileNames.map(fileName => { return { params: { id: fileName.replace(/\.md$/, '') } } }) filename([id].js)의 id와 같은 key여야 한다. getStaticProps()가 id에 필요한 데이터들을 fetch getStaticPaths() Fallback fallback: false일 ..

Pre-rendering Next.js는 기본적으로 모든 페이지마다 pre-rendering한다. 이것은 CSR보다 SEO가 더 좋다는 말! 각 HTML은 해당 페이지에 필요한 js코드와 연관되어 있다. 페이지가 브라우저에 의해 로드되었을 때, js 코드가 실행되고 페이지를 인터렉티브하게 만든다.(이 과정을 hydration이라고 함) 순수 React 앱이었으면 아마 로딩도 되지 않았을 거다. 왜냐면 React.js는 pre-rendering하지 않기 때문. Next.js에는 Static Generation과 Server-side Rendering 두 가지 방법이 있으며 페이지마다 다르게 적용할 수 있다. Static Generation build타임에 HTML을 생성하는 방법이다. pre-render된..

Page끼리 이동하기(Navigate) Pages /pages 디렉토리에 있는 파일로부터 export된 React Component가 페이지가 된다. pages/index.js => / route pages/posts/first-post.js => /posts/first-post route Link Link 컴포넌트 안에는 a태그가 가장 상위에 있어야 한다. href 속성을 사용하여 다른 페이지로 라우팅할 수 있다. 만약 내부 라우트가 아닌 외부 페이지로 링크하고 싶다면 Link가 아닌 a 태그를 사용한다. 그리고 className같은 속성을 사용해야 할 경우 Link가 아닌 a 태그에 추가해야 한다. import Link from 'next/link' this page! Client-side Navig..

현재 gatsby로 github.io를 생성하여 개발 중입니다. 그런데 push 할 때마다 빌드하고 배포하는 것이 번거러워 찾아보니 Github Action으로 CI를 만드는 것이 있더라구요! 바로 적용을 해보았습니다. 먼저 보통 github page의 url은 제 페이지처럼 https://eun-seong.github.io/TIL/ 이렇게 생겼을 것입니다. 혹은 뒤에 repository 이름이 없는 username.github.io로만 구성이 되어 있기도 합니다. 1. gatsby-config.js 파일 수정 저처럼 url 뒤에 repo 이름이 붙는 페이지는 개츠비 프로젝트의 gatsby-config.js 파일에 pathPrefix를 추가로 설정을 해주어야 합니다. 형식은 pathPrefix: '/re..

열심히 블로그를 만들고 있었는데, footer가 컨텐츠의 길이에 맞춰 위로 올라오는 것이 보기 좋지 않았다. 구글링을 해보니 wrapper의 flex를 설정하는 글이 많아 시도했지만, 문제가 해결되지 않았다. Header Contents Footer * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } #wrap { text-align: center; display: flex; flex-direction: column; height: 100%; } header { width: 100%; height: 60px; background: #ddd; } main { } footer { width: 100%; height..

로컬에서 실행할 때는 정상적으로 작동되었지만, deploy 후 github.io에서 실행했을 때 css가 정상적으로 작동하지 않는 상황이 발생했다. - 해결 내가 styled-components 만 add 해놓고, gatsby-plugin-styled-components 를 add 하지 않았다. $ yarn add gatsby-plugin-styled-components

항상 프로젝트가 끝나고 나서 드는 생각과 다짐이 있습니다. '다음 프로젝트 때는 매일 공부한 것을 기록해야지..!' 이지만, 항상 지키지 못했죠... 소마가 종료되고 난 후에 너무 후회가 됐습니다. 6개월이란 긴 시간동안 분명 많은 것을 배웠을 텐데, 기록을 하지 않아서 날아가버린 느낌입니다. 아쉽지만 이미 지나갔으니, 앞으로 기록을 꾸준히 해보자는 생각에 TIL 블로그를 제작하기로 하였습니다. 먼저 고민했던 플랫폼들을 살펴보자면, 1. github.io - 장점 github와 연동 - 아마 제일 큰 메리트가 아닐까 git에 대한 이해가 있다면, jekyll, gatsby 등 많은 테마로 커스텀할 수 있다. global - 단점 장벽이 높다. git과 github에 대한 이해가 필요하다. 제작하기 쉽지 ..