Skip to content

chaaerim/react-blog-15th

 
 

Repository files navigation

과제 제출


모무 프론트
전시원 김채림

목차

  1. 어떻게 구현했는가
  2. css 서버사이드 렌더링 적용
  3. pull request 내용

1. 어떻게 구현했는가

Landing

  • 주소창 '/'
    랜딩페이지, 들어오게 되면 게시물을 나열
    제목과 게시한 날짜(월,일)을 표시함

POST (CREATE)

  • 주소창 '/post'
    게시글을 작성하게 되면 제목과 본문내용을 담아서 recoil 이 보관
    게시글 id 도 recoil 에서 전역관리하여 새로운 게시글이 만들어질 때마다 +1 시켜서 관리

GET (READ)

  • 주소창 '/get/[id]'
    랜딩페이지에서 게시글을 누르면 게시글의 id 값을 주소창에 담아서 넘김
    동적라우팅을 통해 주소창 설계
    해당 id 값을 /get/[id] 페이지에서 받은 다음 recoil 에 저장된 데이터를 가져옴
    posts 객체를 가져오면 그대로 게시글에 대한 데이터를 렌더링

EDIT (UPDATE)

  • 주소창 '/edit/[id]'
    랜딩페이지에서 게시글을 누르고 나면 게시글을 상세히 볼 수 있음.
    그곳에서 수정하기 버튼을 눌러 접근
    get 과 동일한 논리로 게시글 가져온 다음 렌더링
    차이점은 input 창의 value 로 이미 작성되어 있는 내용을 넣어 줘야 함.

페이지 없음 (DELETE)

  • 주소창 없음
    지우기 버튼을 누르면 해당 아이디에 맞는 게시물을 posts 배열에서 삭제

데이터 구조

{
  "posts": [
    {
      "id": "number",
      "title": "string",
      "contents": "string",
      "date": "string"
    }
  ]
}

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.4%
  • JavaScript 0.6%