[To Do List] Front-End Task #1

woorim960 · 2021-02-27T14:26:52Z

🗒 To Do List 구현

시험 시간: 3시간

📌 문제

SW 개발 동아리 소속인 우애는 주어진 API 명세를 보고 UI 기능을 구현하는 업무를 맡고 있다.
구현해야할 기능은 3가지다.

등록
수정
삭제

"HTML 구조"와 "API 명세"를 이해하고 todolist.js 를 완성해야한다.

HTML 파일 위치: app/src/views/todolist.ejs (확장자: ejs)
Javascript 파일 위치: app/src/public/js/todolist.js (확장자: js)

아래의 Front-End 구현 방법과 API 명세서를 참고하여 우애의 Front-End 기능 개발을 도와주도록 하자.

🧾 과제 다운로드

여기로 이동하여 ZIP 압축 파일을 다운로드 받아주십시오.

참고.jpeg

💣 주의할 점

todolist.js 외 파일이 변경될 시 채점에 불이익이 있을 수 있습니다.
- HTML(확장자: ejs) 파일도 포함.

💡 Front-End 구현 방법

초기 UI와 HTML

<body>
  <div>
    <h2>To Do List - Wooahan Agile</h2>
    <label for="name">Name</label>
    <input id="name" type="text">
    <label for="description">Description</label>
    <input id="description" type="text">
    <button>등록</button>
  </div>

  <div id="table">
    <table>
      <tr>
        <th class="th-name">Name</th>
        <th class="th-description">Description</th>
        <th class="th-update">Update</th>
        <th class="th-delete">Delete</th>
      </tr>
    </table>
  </div>
</body>

등록되었을 때 UI와 HTML

Name과 Description을 입력한 후 등록을 클릭하면 하단 테이블 태그<table>에 추가되도록 구현해야한다.
이때, 각 To Do에는 index 번호가 지정되어야 한다는 점을 유의하자.
아래 HTML 참고.

<body>
  <div>
    <h2>To Do List - Wooahan Agile</h2>
    <label for="name">Name</label>
    <input id="name" type="text">
    <label for="description">Description</label>
    <input id="description" type="text">
    <button>등록</button>
  </div>

  <div id="table">
    <table>
      <tr>
        <th class="th-name">Name</th>
        <th class="th-description">Description</th>
        <th class="th-update">Update</th>
        <th class="th-delete">Delete</th>
      </tr>
      <tr index="661f2f841dcfd6348d20">
        <td>개발하기</td>
        <td>로그인 기능 구현하기</td>
        <td><button id="td-update">수정</button></td>
        <td><button id="td-delete">삭제</button></td>
      </tr>
    </table>
  </div>
</body>

수정되었을 때 UI와 HTML

Name과 Description을 입력한 후 수정을 클릭하면 입력한 값으로 수정되어야 한다.
즉, 하단 테이블 태그<table> 안에 클릭된 tr 태그<tr>의 HTML이 수정되도록 구현해야한다.
이때, 서버에서 응답해 준 index와 동일한 tr 태그<tr>가 수정되어야함을 유의하자.
아래 HTML 참고.

<body>
  <div>
    <h2>To Do List - Wooahan Agile</h2>
    <label for="name">Name</label>
    <input id="name" type="text">
    <label for="description">Description</label>
    <input id="description" type="text">
    <button>등록</button>
  </div>

  <div id="table">
    <table>
      <tr>
        <th class="th-name">Name</th>
        <th class="th-description">Description</th>
        <th class="th-update">Update</th>
        <th class="th-delete">Delete</th>
      </tr>
      <tr index="661f2f841dcfd6348d20">
        <td>수정합니다</td>
        <td>우아한 애자일</td>
        <td><button id="td-update">수정</button></td>
        <td><button id="td-delete">삭제</button></td>
      </tr>
    </table>
  </div>
</body>

삭제되었을 때 UI와 HTML

삭제를 클릭하면 클릭된 To Do가 삭제되어야 한다.
즉, 하단 테이블 태그<table> 안에 클릭된 tr 태그<tr>가 삭제되도록 구현해야한다.
이때, 서버에서 응답해 준 index와 동일한 tr 태그<tr>가 삭제되어야함을 유의하자.
아래 HTML 참고.

<body>
  <div>
    <h2>To Do List - Wooahan Agile</h2>
    <label for="name">Name</label>
    <input id="name" type="text">
    <label for="description">Description</label>
    <input id="description" type="text">
    <button>등록</button>
  </div>

  <div id="table">
    <table>
      <tr>
        <th class="th-name">Name</th>
        <th class="th-description">Description</th>
        <th class="th-update">Update</th>
        <th class="th-delete">Delete</th>
      </tr>
    </table>
  </div>
</body>

개발이 완료되었다면 조용히 손을 들고 멘토의 검증을 받은 후 PR(Pull Request)를 보냅니다.

💡 API 명세서

등록

Request

URL : /api/todolist
Method : POST
Content-type : application/json; charset=utf-8

{
   name: String,
   description: String
}

예시

 { name: "개발하기", description: "로그인 기능 구현하기" }

Response

Status

성공 : 201 (Created)
실패 : 400 (Bad Request)

Content-type : text/html; charset=utf-8

성공

(String) 새로 등록된 To Do에 대한 index 값

예시

"661f2f841dcfd6348d20"

실패

(String) 실패 메세지

예시

"To Do 등록에 실패하셨습니다."

수정

Request

URL : /api/todolist/:index /api/todolist/661f2f841dcfd6348d20
Method : PUT
Content-type : application/json; charset=utf-8

{
   name: String,
   description: String
}

예시

 { name: "개발하기", description: "로그인 기능 구현하기" }

Response

Status

성공 : 201 (Created)
실패 : 400 (Bad Request)

Content-type : text/html; charset=utf-8

성공

(String) 수정된 To Do에 대한 index 값

예시

"661f2f841dcfd6348d20"

실패

(String) 실패 메세지

예시

"To Do 수정에 실패하셨습니다."

삭제

Request

URL : /api/todolist/:index /api/todolist/661f2f841dcfd6348d20
Method : DELETE
Content : Null (Body를 통해 데이터를 전달하지 않습니다.)

Response

Status

성공 : 200 (OK)
실패 : 400 (Bad Request)

Content-type : text/html; charset=utf-8

성공

(String) 삭제된 To Do에 대한 index 값

예시

"661f2f841dcfd6348d20"

실패

(String) 실패 메세지

예시

"To Do 삭제에 실패하셨습니다."

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[To Do List] Front-End Task #1

[To Do List] Front-End Task #1

woorim960 commented Feb 27, 2021 •

edited

Loading

[To Do List] Front-End Task #1

[To Do List] Front-End Task #1

Comments

woorim960 commented Feb 27, 2021 • edited Loading

🗒 To Do List 구현

📌 문제

🧾 과제 다운로드

💣 주의할 점

💡 Front-End 구현 방법

💡 API 명세서

woorim960 commented Feb 27, 2021 •

edited

Loading