BLOG

Smilegate Stove Dev Camp 사전 과제 📝

Web Frontend 민지호

🛠 요구사항

1. 포스트 작성

• POST /api/posts/${id}
• WRITE_POST {title, body}

2. 포스트 수정

• PATCH /api/posts/${id}
• UPDATE_POST {title, body}

3. 포스트 삭제

• DELETE /api/posts/${id}
• REMOVE_POST

4. 포스트 리스트 조회

• GET /api/posts?page=1
• LIST_POST

5. 포스트 조회

• GET /api/posts/${id}
• READ_POST (위 화면들에서 볼 수 있음)

6. 포스트의 댓글 리스트 조회

• GET /api/comments/${postId}
• LIST_COMMENT

7. 포스트에 댓글 작성

• POST /api/comments/${postId}
• WRITE_COMMENT {username, body}

🛠 프로젝트 구조

• backend

• frontend

🛠 DB

• blogs.post

• Blog.comments

🛠 Skill & Dependency

• backend: Node.js, mongoose(MongoDB), Joi, Koa

"dependencies": {
    "dotenv": "^10.0.0",
    "joi": "^17.4.2",
    "joi-objectid": "^4.0.2",
    "koa": "^2.13.4",
    "koa-bodyparser": "^4.3.0",
    "koa-router": "^10.1.1",
    "mongoose": "^6.0.12",
    "sanitize-html": "^2.5.3"
  }

• frontend: React.js, redux, react-dom, redux-saga, axios, styled-components, quill

"dependencies": {
    "axios": "^0.24.0",
    "qs": "^6.10.1",
    "quill": "^1.3.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet-async": "^1.1.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.2",
    "redux-actions": "^2.6.5",
    "redux-saga": "^1.1.3",
    "styled-components": "^5.3.3",
  },

🛠 Execution

• backend

yarn start:dev # localhost:4000

• frontend

yarn start # localhost:3000