Skip to content

Latest commit

 

History

History

step3

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

3주차: node.js + express.js + REST API + ajax

요구사항

  • 사전 조사
    • node.js에 대한 개념 (3문장 요약)
    • express.js 대한 개념 (3문장 요약)
    • Javascript와 NodeJS의 공통점/차이점 (3문장 요약)
    • RESTful, RESTAPI 등에 대해 조사하기 (5문장 요약)
    • AJAX란? (3문장 요약)
    • CORS (3문장 요약)
  • 기능구현
    • REST API 구현
      • CRUD(Create, Read, Update, Delete)
        • 아이템 조회
        • 아이템 추가
        • 아이템 내용 수정
        • 아이템 토글
        • 아이템 삭제
      • 데이터를 저장할 수 있는 형태로 관리한다.
        • 파일시스템(json) or MySQL or MongoDB 중 택 1
    • 서버에서 HTML 불러오기
      • static middleware를 이용
    • fetch를 사용하여 API 연동하기

사전조사에 대한 참고링크

요구사항 스펙문서

아이템 조회

# Request
GET /api/items

# Response
[
  { "idx": 1, "content": "todo item1", "completed": true, "createdAt": 1625484597770 },
  { "idx": 2, "content": "todo item2", "completed": false, "createdAt": 1625484600000 },
  { "idx": 3, "content": "todo item3", "completed": false, "createdAt": 1625484712340 }
]

아이템 추가

# Request
POST /api/items
Content-Type: application/json

{
  "content": "새로운 Todo Item"
}

아이템 내용 수정

# Request
# 1번 아이템의 내용을 수정
PUT /api/items/1
Content-Type: application/json

{
  "content": "새로운 Todo Item"
}

아이템 토글

# Request
# 1번 아이템을 토글
PUT /api/items/toggle/1
Content-Type: application/json

아이템 삭제

# Request
# 1번 아이템을 삭제
DELETE /api/items/1
Content-Type: application/json

fetch 사용 방법

// 아이템 조회
fetch('/api/items')
  .then(response => response.json())
  .then(items => console.log(items));

// 아이템 추가
const addConfig = {
  method: 'post',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({ content: "새로운 Todo Item" }),
}
fetch('/api/items', appendConfig)
  .then(response => response.json())
  .then(items => console.log(items));

// 아이템 수정
const updateConfig = {
  method: 'put',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({ content: "새로운 Todo Item" }),
}
fetch('/api/items/1', updateConfig)
  .then(response => response.json())
  .then(items => console.log(items));

// 아이템 토글
fetch('/api/items/1/toggle', { method: 'put' })
  .then(response => response.json())
  .then(items => console.log(items));

// 아이템 삭제
fetch('/api/items/1', { method: 'delete' })
  .then(response => response.json())
  .then(items => console.log(items));