Web Dev/5. Projects
-
[toy blog service] Next.js의 API와 jsonWeb Dev/5. Projects 2021. 4. 19. 22:06
Next.js에서는 API 관련 기능을 제공한다. 여기를 보면 이런식으로 구성을 해서 /api/* 로 매핑이 된다. 얘들은 서버사이드에서만 번들링이 된다. 나는 여기서 공부를 위해서 여러 endpoint를 만들어봤는데, 아래는 /api/[username]/index 를 처리하는 파일은 아래와 같이 작성했다. // Next.js API route support: https://nextjs.org/docs/api-routes/introduction import type { NextApiRequest, NextApiResponse } from "next"; import { selectData, insertData } from "../../../../utils/common"; // http://localhost..
-
[toy blog service] getServerSideProps 이용하기Web Dev/5. Projects 2021. 4. 18. 23:13
data fetching 중 getStaticProps, getStaticPaths(static build in dynamic route), getServerSideProps 중 마지막 것을 사용해보았다. 이건 간단하게 write 페이지에서 글을 업데이트 중일때는 getServerSideProps를 통해서 serverSide에서 data를 fetching했다. 이건 nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering여기서 확인할 수 있다. Basic Features: Data Fetching | Next.js Next.js has 2 pre-rendering modes: Static Generation ..
-
[toy blog service] React Component를 Package화 하기(hayoung-markdown)Web Dev/5. Projects 2021. 4. 16. 23:10
이걸 한 이유 이걸 왜했을까...를 하다보니 webpack설정과 npm link 관련 문제로 나도 너무 괴로워서 고민을 했는데, React 컴포넌트자체를 패키지화해서 내 개인 블로그(gatsby 기반)와 이번 toy blog service에서 계속 사용하고 싶었기 때문이다. React Component를 Package화 하는 전반적인 흐름은 webpack을 설정하고(typescript설정까지) react/react-dom 설치하고 설정하고 library화를 하기위한 설정 types관련 설정(Typescript를 사용하는 패키지를 위한 설정) 스타일관련 설정하는 것 next.js에서 client-side-rendering만하기 React 컴포넌트를 패키지화한게 처음이라(프로젝트 내에서 공통적으로 사용하기 ..
-
[toy blog service] Webpack, TypeScript와 React(Babel은 천천히!)Web Dev/5. Projects 2021. 4. 14. 18:58
Webpack이란? [core concepts] Webpack은 "Static Module Bundler for modern javascript applications" 이다. 웹팩이 앱을 처리할때 내부적으로 dependency graph를 그린다. 버전 4부터는 configuration 파일이 꼭필요한것은 아니지만, 원하면 configuration파일을 통해서 customizing할 수 있다. 핵심적인 컨셉은 아래와 같다. Entry Entry point는 웹팩이 어디서부터 dependency graph를 그릴지 알려주는 것이다. 웹팩은 여기서부터, 이 entry파일이 어떤 파일들에 의존하고 있는지 파악한다. (default는 src/index.js) Output 번들파일을 어디로 나오게 하면되는지 저..
-
[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: 개인 블로그의 메인화면과, 조회하는 글이 보이는 화면인..