Code Monkey home page Code Monkey logo

js-todo-list-step3's Introduction

πŸš€ μ„Έλ²ˆμ§Έ λ―Έμ…˜ - Todo List for Team!

이번 λ―Έμ…˜μ€ νŒ€μ„ μœ„ν•œ TodoListλ₯Ό μž‘μ„±ν•˜λŠ” λ―Έμ…˜μž…λ‹ˆλ‹€. μ—¬λŸ¬κ°œμ˜ μ»΄ν¬λ„ŒνŠΈμ˜ μƒνƒœκ°’μ„ κ΄€λ¦¬ν•΄μ•Όν•˜λŠ”λ°μš”. TodoListκ°€ 1개 μ‘΄μž¬ν•  λ•Œλ³΄λ‹€ 훨씬 더 κ³ λ €ν•  것이 λ§ŽμŠ΅λ‹ˆλ‹€ πŸ˜€

🎯 index.html νŒ€ νŽ˜μ΄μ§€ μš”κ΅¬μ‚¬ν•­

  • 1. νŒ€ μΆ”κ°€ν•˜κΈ°
  • 2. νŒ€ 리슀트 λΆˆλŸ¬μ™€μ„œ 화면에 보여주기

🎯 kanban.html νŒ€μ˜ νˆ¬λ‘λ¦¬μŠ€νŠΈ νŽ˜μ΄μ§€ μš”κ΅¬μ‚¬ν•­

  • 1. νŒ€μ— 멀버 μΆ”κ°€ν•˜κΈ°
  • 2. νŒ€μ›λ³„ todoList 뢈러였기
  • 3. νŒ€μ›λ³„ todoItem μΆ”κ°€ν•˜κΈ°
  • 4. νŒ€μ›λ³„ todoItem μ‚­μ œν•˜κΈ°
  • 5. νŒ€μ›λ³„ todoItem completeν•˜κΈ°
  • 6. νŒ€μ›λ³„ todoItem contents λ‚΄μš© μˆ˜μ •ν•˜κΈ°
  • 7. todoItem의 μš°μ„  μˆœμœ„ μ •ν•˜κΈ° (defulatκ°’:0, 1μˆœμœ„:1, 2μˆœμœ„: 2)
  • 8. todoList의 우츑 ν•˜λ‹¨μ˜ 전체 μ‚­μ œλ²„νŠΌμ„ λˆ„λ₯΄λ©΄ ν•΄λ‹Ή μœ μ €μ˜ μ•„μ΄ν…œμ„ 전체 μ‚­μ œν•˜κΈ°

🎯🎯 kanban.html 심화 μš”κ΅¬μ‚¬ν•­

  • 1. todoItem의 μš°μ„  μˆœμœ„μ— 따라 μ •λ ¬ν•˜κΈ°



πŸ“ API

νŒ€ μΆ”κ°€

method uri
POST /api/teams
{
 requestBody: {
   "name": "string"
 },
 response: {
   "_id": "string",
   "name": "string",
   "members": [...]
  }
}

νŒ€ 뢈러였기

method uri
GET /api/teams/${itemId}
{
 response: {
   "_id": "string",
   "name": "string",
   "members": [...]
  }
}

νŒ€ 리슀트 뢈러였기

method uri
GET /api/teams
{
 response: [
  {
   "_id": "string",
   "name": "string",
   "members": [...]
  }
  ...
 ]
}

νŒ€ μ‚­μ œ

method uri
DELETE /api/teams/${teamId}
{
 response: {}
}

νŒ€μ— 멀버 μΆ”κ°€

method uri
POST /api/teams/${teamId}/members
{
 requestBody: {
   "name": "string"
 },
 response: {
   "_id": "string",
   "name": "string",
   "members": [...]
  }
}

νŒ€μ›λ³„ TodoList 뢈러였기

method uri
GET /api/teams/${teamId}/members/${memberId}
{
 response: [
  {
    "_id": "string",
   "name": "string",
   "todoList": []
  }
 ]
}

νŒ€μ›μ˜ TodoItem μΆ”κ°€ν•˜κΈ°

method uri
POST /api/teams/${teamId}/members/${memberId}/items
{
 requestBody: {
   "contents": "string"
 },
 response: [
   {
   "_id": "string",
   "contents": "string",
   "priority": "string",
   "isCompleted": "boolean",
   }
   ...
 ]
}

νŒ€μ›μ˜ TodoItem μ‚­μ œν•˜κΈ°

method uri
DELETE /api/teams/${teamId}/members/${memberId}/items/${itemId}
{
 response: {}
}

νŒ€μ›μ˜ TodoItem toggleν•˜κΈ°

method uri
PUT /api/teams/${teamId}/members/${memberId}/items/${itemId}/toggle
{
 response: {
   "_id": "string",
   "contents": "string",
   "priority": "string",
   "isCompleted": "boolean",
   }
}

νŒ€μ›μ˜ TodoItem contents μˆ˜μ •ν•˜κΈ°

method uri
PUT /api/teams/${teamId}/members/${memberId}/items/${itemId}
{
 requestBody: {
   "contents": "string"
 },
 response:    {
   "_id": "string",
   "contents": "string",
   "priority": "string",
   "isCompleted": "boolean",
   }
}

νŒ€μ›μ˜ TodoItem μš°μ„ μˆœμœ„ μˆ˜μ •ν•˜κΈ°

method uri
PUT /api/teams/${teamId}/members/${memberId}/items/${itemId}/priority
{
 requestBody: {
   "priority": "FIRST"
 },
 response: {
   "_id": "string",
   "contents": "string",
   "priority": "string",
   "isCompleted": "boolean",
 }
}

νŒ€μ›μ˜ TodoItem μ „λΆ€ μ‚­μ œ

method uri
DELETE /api/teams/${teamId}/members/${memberId}/items/
{
 response: {}
}



β˜•οΈ μ½”λ“œλ¦¬λ·° λͺ¨μž„ - Black Coffee


'ν›Œλ₯­ν•œ μ˜μ‚¬μ†Œν†΅μ€ λΈ”λž™μ»€ν”Όμ²˜λŸΌ 자극적이며, 후에 μž λ“€κΈ°κ°€ μ–΄λ ΅λ‹€'.
A.M. λ¦°λ“œλ²„κ·Έ(미ꡭ의 μž‘κ°€, μˆ˜ν•„κ°€) -


λΈ”λž™μ»€ν”Όμ²˜λŸΌ μ„œλ‘œλ₯Ό μžκ·Ήν•΄μ£Όκ³ , 동기뢀여 ν•΄μ£Όλ©°, κ·Έ μ„±μž₯κ³Όμ •μœΌλ‘œ 인해 μ˜λ―ΈμžˆλŠ” κ°€μΉ˜λ₯Ό λ§Œλ“€μ–΄λ‚΄κ³ μž ν•˜λŠ”
ν”„λ‘ νŠΈμ—”λ“œ μ½”λ“œλ¦¬λ·° λͺ¨μž„ β˜•οΈ Black Coffeeμž…λ‹ˆλ‹€.


βš™οΈ Before Started

Tip λ‘œμ»¬μ—μ„œ μ„œλ²„ λ„μ›Œμ„œ μ†μ‰½κ²Œ static resources λ³€κ²½ 및 ν™•μΈν•˜λŠ” 방법

λ‘œμ»¬μ—μ„œ μ›Ήμ„œλ²„λ₯Ό λ„μ›Œ html, css, js 등을 μ‹€μ‹œκ°„μœΌλ‘œ μ†μ‰½κ²Œ ν…ŒμŠ€νŠΈν•΄ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό μœ„ν•΄μ„œλŠ” μš°μ„  npm이 μ„€μΉ˜λ˜μ–΄ μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€. ꡬ글에 npm install μ΄λž€ ν‚€μ›Œλ“œλ‘œ 각자의 μš΄μ˜μ²΄μ œμ— λ§žκ²Œλ” npm을 μ„€μΉ˜ν•΄μ£Όμ„Έμš”. 이후 μ•„λž˜μ˜ λͺ…λ Ήμ–΄λ₯Ό 톡해 μ‹€μ‹œκ°„μœΌλ‘œ μ›ΉνŽ˜μ΄μ§€λ₯Ό ν…ŒμŠ€νŠΈν•΄λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

npm install -g live-server

싀행은 μ•„λž˜μ˜ μ»€λ§¨λ“œλ‘œ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

live-server 폴더λͺ…

πŸ‘¨β€πŸ’» Code Review πŸ‘©β€πŸ’»

μ•„λž˜ 링크듀에 μžˆλŠ” 리뷰 κ°€μ΄λ“œλ₯Ό 보고, 쒋은 μ½”λ“œ 리뷰 λ¬Έν™”λ₯Ό λ§Œλ“€μ–΄ λ‚˜κ°€λ €κ³  ν•©λ‹ˆλ‹€.


πŸ‘ Contributing

λ§Œμ•½ λ―Έμ…˜ μˆ˜ν–‰ 쀑에 κ°œμ„ μ‚¬ν•­μ΄ 보인닀면, μ–Έμ œλ“  자유둭게 PR을 λ³΄λ‚΄μ£Όμ„Έμš”.


🐞 Bug Report

버그λ₯Ό λ°œκ²¬ν•œλ‹€λ©΄, Issues 에 등둝 ν›„ @eastjunμ—κ²Œ dm을 λ³΄λ‚΄μ£Όμ„Έμš”.


πŸ“ License

This project is MIT licensed.

js-todo-list-step3's People

Contributors

eastjun-dev avatar wmakerjun avatar wooooooood avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.