Web Dev
-
[toy blog service] Preview Mode 이해하기Web Dev/5. Projects 2021. 4. 13. 23:40
데이터를 fetching해올때 preview mode 라는 것이 있다. 오늘은 Static Generation(Incremental Static Regeneration)에서 preview mode를 통해 어떤 경우에 한해서만 build 타임이 아니라 request 타임에 파일을 생성하도록 해보았다. Preview Mode가 필요했던 이유 나는 블로그 서비스를 흉내내고 있기 때문에 글을 생성하거나, 수정했을때 사용자에게는 바로 즉각 반영된 글화면(글목록이 아니라)이 보이되, 다른 유저에게는 Incremental하게 보여주고 싶었다(Server Side Rendering까진 안해도 될것 같다고 판단했기 때문) 하지만 문제는 Incremental Static Regeneration을 하자니 유저가 글을 작성/..
-
[toy blog service] Dynamic route를 가진 페이지에서 getStaticProps를 하려면 getStaticPaths가 필요하다!Web Dev/5. Projects 2021. 4. 13. 15:20
nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation Basic Features: Data Fetching | Next.js Next.js has 2 pre-rendering modes: Static Generation and Server-side rendering. Learn how they work here. nextjs.org 여기서는 getStaticPaths가 무엇인지 다루어보겠다. 아래는 내가 getStaticPaths를 통해서 개발한 코드랑 화면이다. import Head from "next/head"; import React from "react"; import { PostType } from "../....
-
[toy blog service] Intro Page와 Index 페이지를 통해서 살펴보는 Static Generation과 Incremental Static Regeneration차이Web Dev/5. Projects 2021. 4. 13. 12:52
- Intro page: Static 하게 고정될거라 Static Generation이 맞다고 판단 - Index page: 최신글과 트렌딩을 보여줘야하는데, 그렇기 때문에 업데이트는 필요하지만 Incremenatl Static Regeneration으로도 충분할 것으로 판단(일정시간지나고 나서 regeneration 하도록) Static Generation nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation Basic Features: Data Fetching | Next.js Next.js has 2 pre-rendering modes: Static Generation and Server-side rendering..
-
[toy blog service] 각페이지를 어떻게 렌더링할지... + json으로 가짜 서버 만들기Web Dev/5. Projects 2021. 4. 13. 11:16
페이지를 어떻게 렌더링할지 고민하는 중 - Intro page: Static 하게 고정될거라 Static Generation이 맞다고 판단 - Index page: 최신글과 트렌딩을 보여줘야하는데, 그렇기 때문에 업데이트는 필요하지만 Incremenatl Static Regeneration으로도 충분할 것으로 판단(일정시간지나고 나서 regeneration 하도록) - username/write page: 글을 작성하고 수정하는 화면인데, 작성 화면 포맷 자체는 Static하게 생성하되, 수정인 경우 Client Side에서 글을 fetching 해와도 충분할 것으로 생각 - username/index page 과 username/[id] page: 개인 블로그의 메인화면과, 조회하는 글이 보이는 화면인..
-
[toy blog service] Next.js의 Pages 이해하기(간단한 Typescript설정)Web Dev/5. Projects 2021. 4. 11. 22:05
Project를 시작하며... - 작업한 화면: 아래는 이 화면을 구성하면서 다룬 내용들이다. 오늘 만든 화면 - 필요한 routes 와 pages - `/index.js` -> `/`: main - `/:username/index.js` -> `/:username`: 개인 블로그의 메인(Read all) - `/:username/id`: 각 포스팅 읽기(Read one) - `/:username/write`: 블로그 글 create page - `/:username/write?id=articleId`: 블로그 글 수정페이지(update) 아래에 내가 화면을 구성하면서 파악한 내용들을 정리했다. 1. TypeScript 설정을 하자: 공식 독스 - 후에 더 상세하게 살펴보기로 하고 여기서는 일단 설정만을..
-
[toy blog service] Next.js 기반 서비스 기능 도출 과정Web Dev/5. Projects 2021. 4. 11. 21:21
프로젝트를 시작하며 velog라는 멋있는 서비스가 있다. 여기서 프로젝트 구조도 볼 수 있어서, 이를 참고해서 Next.js 를 통해서 이와 비슷한 서비스를 직접 구현해보려고 한다. 아래에는 각 기능들을 캡쳐하면서 파악한 부분이다. Velog 서비스를 기준으로 분석한 기능 - 공통 화면(후순위) - velog는 home화면이 있다. 이렇게 여러사람의 글을 볼 수 있는 화면이 있다. - 우측 상단에서 개인용 설정을 볼 수 있다. - 개인 화면(CRUD) - 내 벨로그 안에서 볼 수 있는 내용들은 아래와 같다. - (READ ALL) 우선 개인 blog 메인 화면: 글, 시리즈, 소개 화면으로 구성되어있고 검색어 기능이 있다. - (CREATE) 새 글 작성을 선택하는 경우: Markdown 형태로 작성하고..
-
[다락재 쉼터] 1차 개발 마무리 후기Web Dev/5. Projects 2021. 4. 8. 21:06
이번주에 이 프로젝트를 많이 진행했다. 이 전에도 여러번 시도했다가 몇 번을 엎었는데, 이번에는 완벽하진 않아도 프로젝트 초기 세팅 부터 markup, css 부터 도메인 설정까지 마무리 했다는 것이 뿌듯하다. 프로젝트를 하더라도 전반적인 과정을 모두 경험하는 과정은 흔치 않았는데 좋은 경험이 되었다. 특히 도메인을 설정할 일이 한번도 없었는데, 이번기회에 경험해서 내가 할 수 있는 일이라는 것을 알게 된 점도 뿌듯하다. 개발은 실제로 해보기 전에는 그것보다 더 어렵게 여겨지거나, 더 쉽게 여겨지는 것 같다. 어떤 문제를 해결할때 어느정도 난이도일지 감을 잡는것이 아직 가장 어려운 것 같다. 마크업 위주의 페이지인데도, 만들면서 배운점이 많은 것을 보니 어떠한 작은 문제라도 해결하다보면 보이던 것 보다 ..
-
[다락재 쉼터] Netlify에 무료 도메인(freenom) 붙이기Web Dev/5. Projects 2021. 4. 8. 15:41
- 도메인이란? 아직 프로젝트가 테스트 단계라 돈을 내는 도메인이 필요한 상태가 아니다. 그래서 무료 도메인을 발급받아서 사용하려고 하는데, 이렇게 발급 받은 도메인은 샀다기 보다는 단기 임대의 개념이다. 처음에 이렇게 발급받은 도메인도 유료로 구매한 도메인들과 같은 효력을 가지는지 의문이 있었는데, 국제적으로 도메인은 국제인터넷주소 관리기구(ICANN)에서 여기서 하위 기관에 권한을 위임하고, 거기서또 하위기관에 권한을 주는 구조로 효력은 동일하다고 한다. 그래서나는 freenom이라는 곳에서 임시로 도메인을 발급받아서 사용하고자 한다 - 무료 도메인 대여하기 이를위해서 참고한 자료는 [나만의 인터넷 주소 도메인을 만들어보자! 무료 도메인 생성하기]라는 글이다. 다락재 쉼터를 로마자로 표현하면 dara..