Giter Club home page Giter Club logo

modern-agile-task's Introduction

👨🏻‍💻 모던 애자일 Front-End & Back-End 과제

Vanila JS를 이용하여 Front & Back 기능을 구현합니다.
주어진 HTML 및 CSS는 수정하지 않는 것을 원칙으로 합니다.


🖍 문제


📝 과제 사용법

여기를 참고.


🧾 과제 다운로드 (파일만 다운로드 받는 법)

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

참고.jpeg 스크린샷 2021-02-28 오전 3 29 14


🚷 라이선스

MIT


💻 모던 애자일 팀


👨🏻‍🏫 출제자

우리밋_woorimIT

modern-agile-task's People

Contributors

woorim960 avatar

Stargazers

avatar avatar

Watchers

avatar avatar

Forkers

jeonsoongu jeongwonji kimjiwonpg98 jsj1510 pho9902 soonki-98 rrgks6221 stupidjoon ohchanghoon seohyunsim rugaheedori jisu3817 bsfla salada17

modern-agile-task's Issues

[To Do List] Front-End Task

🗒 To Do List 구현

시험 시간: 3시간


📌 문제

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

  1. 등록
  2. 수정
  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
스크린샷 2021-02-28 오전 3 29 14


💣 주의할 점

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


💡 Front-End 구현 방법

  1. 초기 UI와 HTML

스크린샷 2021-02-27 오후 11 50 31

<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>

  1. 등록되었을 때 UI와 HTML

스크린샷 2021-02-27 오후 11 52 45

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>

  1. 수정되었을 때 UI와 HTML

스크린샷 2021-02-28 오전 12 01 22

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>

  1. 삭제되었을 때 UI와 HTML

스크린샷 2021-02-28 오전 12 35 23

삭제를 클릭하면 클릭된 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 명세서

  1. 등록
  • 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 등록에 실패하셨습니다."


  1. 수정
  • 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 수정에 실패하셨습니다."


  1. 삭제
  • 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 삭제에 실패하셨습니다."

[Q&A - Check Box] Front-End Task

🗒 질의 응답 구현 (Check Box 이용)

시험 시간: 1시간


📌 문제

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

  1. 선택된 답안을 서버로 전달하여 정답 여부를 응답받는다.
  2. 정답이 맞다면 정답 여부를 화면에 출력한다.

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

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

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


🧾 과제 다운로드

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

참고.jpeg
스크린샷 2021-02-28 오전 3 29 14


💣 주의할 점

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


💡 Front-End 구현 방법

  1. 초기 UI와 HTML

스크린샷 2021-02-28 오전 3 52 51

<body>
  <section>
    <h2>Q&A - Wooahan Agile</h2>
    <h4>Q. 모던 애자일의 <span>선발 기준</span>은 무엇일까요? 🤩</h4>
    <div id="checkbox">
      <label><input type="checkbox" value="열정">열정</label>
      <label><input type="checkbox" value="정의">정의</label>
      <label><input type="checkbox" value="기술력">기술력</label>
      <label><input type="checkbox" value="인성">인성</label>
      <label><input type="checkbox" value="외모">외모</label>
    </div>
    <button id="submit_btn">제출</button>
    <span id="result">답안을 선택한 후 제출을 클릭해주십시오.</span>
  </div>
</body>

  1. 오답을 제출했을 때 UI와 HTML

스크린샷 2021-02-28 오전 3 55 50

Check Box에서 답안을 선택한 후 제출을 클릭하면 버튼 하단 span 태그<span id="result">에 정답 여부가 출력되도록 구현해야한다.
아래 HTML 참고.

<body>
  <section>
    <h2>Q&A - Wooahan Agile</h2>
    <h4>Q. 모던 애자일의 <span>선발 기준</span>은 무엇일까요? 🤩</h4>
    <div id="checkbox">
      <label><input type="checkbox" value="열정">열정</label>
      <label><input type="checkbox" value="정의">정의</label>
      <label><input type="checkbox" value="기술력">기술력</label>
      <label><input type="checkbox" value="인성">인성</label>
      <label><input type="checkbox" value="외모">외모</label>
    </div>
    <button id="submit_btn">제출</button>
    <span id="result">오답</span>
  </div>
</body>

  1. 정답을 제출했을 때 UI와 HTML

스크린샷 2021-02-28 오전 3 56 33
Check Box에서 답안을 선택한 후 제출을 클릭하면 버튼 하단 span 태그<span id="result">에 정답 여부가 출력되도록 구현해야한다.
아래 HTML 참고.

<body>
  <section>
    <h2>Q&A - Wooahan Agile</h2>
    <h4>Q. 모던 애자일의 <span>선발 기준</span>은 무엇일까요? 🤩</h4>
    <div id="checkbox">
      <label><input type="checkbox" value="열정">열정</label>
      <label><input type="checkbox" value="정의">정의</label>
      <label><input type="checkbox" value="기술력">기술력</label>
      <label><input type="checkbox" value="인성">인성</label>
      <label><input type="checkbox" value="외모">외모</label>
    </div>
    <button id="submit_btn">제출</button>
    <span id="result">정답</span>
  </div>
</body>

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



💡 API 명세서

정답 제출 API

  • Request

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

{
   answers: Array,
}
  • 예시
 { answers: ["열정", "기술력", "인성"] }

  • Response

Status

성공 : 200 (OK)
실패 : 오류는 발생하지 않는 것으로 가정한다.

Content-type : application/json; charset=utf-8

  • 성공
// 정답
(Boolean) true

// 오답
(Boolean) false
  • 예시
true

[Q&A - Select Box] Front-End Task

🗒 질의 응답 구현 (Select Box 이용)

시험 시간: 1시간


📌 문제

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

  1. 선택된 답안을 서버로 전달하여 정답 여부를 응답받는다.
  2. 정답이 맞다면 정답 여부를 화면에 출력한다.

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

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

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


🧾 과제 다운로드

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

참고.jpeg
스크린샷 2021-02-28 오전 3 29 14


💣 주의할 점

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


💡 Front-End 구현 방법

  1. 초기 UI와 HTML

스크린샷 2021-02-28 오전 1 57 04

<body>
  <section>
    <h2>Q&A - Wooahan Agile</h2>
    <h4>Q. 모던 애자일의 <span>개설 목적</span>은 무엇일까요? 🤩</h4>
    <select name="selectbox">
      <option value="연애">연애: 내가 그의 이름을 불러 주었을 때 그는 나에게로 와서 꽃이 되었다.</option>
      <option value="도박">도박: 아싸 고도리!</option>
      <option value="유흥">유흥: 성공을 기원하고! 발전을 기원하며!</option>
      <option value="세계정복">세계정복: 자기 자신을 정복하지 못한 사람은 결코 자유로울 수 없다.</option>
      <option value="개발">개발: 실력있는 개발자를 양성함으로 IT 미래를 선도한다.</option>
    </select>
    <button id="submit-btn">제출</button>
    <span id="result">답안을 선택한 후 제출을 클릭해주십시오.</span>
  </div>
</body>

  1. 오답을 제출했을 때 UI와 HTML

스크린샷 2021-02-28 오전 2 00 46

Select Box에서 답안을 선택한 후 제출을 클릭하면 버튼 하단 span 태그<span id="result">에 정답 여부가 출력되도록 구현해야한다.
아래 HTML 참고.

<body>
  <section>
    <h2>Q&A - Wooahan Agile</h2>
    <h4>Q. 모던 애자일의 <span>개설 목적</span>은 무엇일까요? 🤩</h4>
    <select name="selectbox">
      <option value="연애">연애: 내가 그의 이름을 불러 주었을 때 그는 나에게로 와서 꽃이 되었다.</option>
      <option value="도박">도박: 아싸 고도리!</option>
      <option value="유흥">유흥: 성공을 기원하고! 발전을 기원하며!</option>
      <option value="세계정복">세계정복: 자기 자신을 정복하지 못한 사람은 결코 자유로울 수 없다.</option>
      <option value="개발">개발: 실력있는 개발자를 양성함으로 IT 미래를 선도한다.</option>
    </select>
    <button id="submit-btn">제출</button>
    <span id="result">오답</span>
  </div>
</body>

  1. 정답을 제출했을 때 UI와 HTML

스크린샷 2021-02-28 오전 2 03 39

Select Box에서 답안을 선택한 후 제출을 클릭하면 버튼 하단 span 태그<span id="result">에 정답 여부가 출력되도록 구현해야한다.
아래 HTML 참고.

<body>
  <section>
    <h2>Q&A - Wooahan Agile</h2>
    <h4>Q. 모던 애자일의 <span>개설 목적</span>은 무엇일까요? 🤩</h4>
    <select name="selectbox">
      <option value="연애">연애: 내가 그의 이름을 불러 주었을 때 그는 나에게로 와서 꽃이 되었다.</option>
      <option value="도박">도박: 아싸 고도리!</option>
      <option value="유흥">유흥: 성공을 기원하고! 발전을 기원하며!</option>
      <option value="세계정복">세계정복: 자기 자신을 정복하지 못한 사람은 결코 자유로울 수 없다.</option>
      <option value="개발">개발: 실력있는 개발자를 양성함으로 IT 미래를 선도한다.</option>
    </select>
    <button id="submit-btn">제출</button>
    <span id="result">정답</span>
  </div>
</body>

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



💡 API 명세서

정답 제출 API

  • Request

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

{
   answer: String,
}
  • 예시
 { answer: "개발" }

  • Response

Status

성공 : 200 (OK)
실패 : 오류는 발생하지 않는 것으로 가정한다.

Content-type : application/json; charset=utf-8

  • 성공
// 정답
(Boolean) true

// 오답
(Boolean) false
  • 예시
true

[Log In] Front-End Task

🗒 로그인 구현

시험 시간: 2시간


📌 문제

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

  1. 아이디와 패스워드를 서버로 전달하여 코드를 응답받는다.
  2. 서버로부터 응답받은 코드를 이용하여 로그인된 유저인지 정보를 확인한다.
  3. 로그인된 유저라면 서버로부터 로그인 유저의 이름을 전달받게 되며, 해당 이름을 화면에 출력하면 된다.

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

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

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


🧾 과제 다운로드

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

참고.jpeg
스크린샷 2021-02-28 오전 3 29 14


💣 주의할 점

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


💡 Front-End 구현 방법

  1. 초기 UI와 HTML

스크린샷 2021-03-01 오전 11 29 49

<body>
  <div>
    <h2>Log In - Wooahan Agile</h2>

    <label for="id">ID</label>
    <input id="id" type="text">
    <label for="password">Password</label>
    <input id="password" type="text">

    <button id="login">로그인</button>
    <button id="confirm">정보 확인</button>
  </div>

  <div>
    <span id="result">로그인 후 정보확인을 클릭해주십시오.</span>
  </div>
</body>

  1. 아이디와 패스워드를 잘못 입력했을 때 UI

스크린샷 2021-03-01 오전 11 31 35

ID와 PASSWORD를 잘못 입력한 후 로그인을 클릭하면 서버에서 응답한 메세지("아이디와 패스워드를 제대로 입력해 주십시오")를 경고창alert()에 출력되도록 구현해야한다.


  1. 아이디와 패스워드를 정상적으로 입력했을 때 UI

스크린샷 2021-03-01 오전 11 34 51

ID와 PASSWORD를 정상적으로 입력한 후 로그인을 클릭하면 서버로부터 코드를 응답받으며, "코드가 발급되었습니다." 라는 메세지를 경고창alert()에 출력되도록 구현해야한다.


  1. 로그인을 하지 않고 '정보확인'을 클릭했을 때 UI

스크린샷 2021-03-02 오후 2 21 36

로그인을 실패한 채로 정보확인을 클릭하면 서버에서 응답한 메세지("정보확인에 실패하셨습니다." )를 경고창alert()에 출력되도록 구현해야한다.

  1. 로그인에 성공한 후 '정보확인'을 클릭했을 때 UI

스크린샷 2021-03-02 오전 11 59 05

로그인을 성공적으로 수행하면 서버로부터 코드를 응답받게 된다. 이때 응답받은 코드를 정보확인 버튼이 클릭될 때 서버로 전달할 줄 아는 것이 관건이다.

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



💡 API 명세서

  1. 로그인 API
  • Request

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

{
   id: String,
   password: String
}
  • 예시
{ 
   id: "test",
   password: "test"
}

  • Response

Status

성공 : 200 (OK)
실패 : 오류는 발생하지 않는 것으로 가정한다.

Content-type : application/json; charset=utf-8

  • 성공
// 정상적인 아이디와 패스워드를 입력한 경우
{
   msg: String,
   code: String
}

// 비정상적인 아이디와 패스워드를 입력한 경우
{
   msg: String
}
  • 예시
// 정상적인 아이디와 패스워드를 입력한 경우
{
   msg: "success",
   code: "39ej2kns9n4knq0n"
}

// 비정상적인 아이디와 패스워드를 입력한 경우
{
   msg: "아이디와 패스워드를 제대로 입력하십시오"
}

  1. 정보확인 API
  • Request

URL : /api/check?code=:code /api/check?code=39ej2kns9n4knq0n
Method : GET
Content : Null (body에 실어서 보내는 데이터는 없습니다.)

  • Response

Status

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

Content-type : application/json; charset=utf-8

  • 성공
// 정상적으로 로그인을 한 후 코드를 전달했을 경우
{
   msg: String,
   user: {
      id: String,
      password: String,
      name: String.
      code: String
   }
}
  • 예시
{
   msg: "success",
   user: {
      id: "test",
      password: "test",
      name: "모던 애자일".
      code: "39ej2kns9n4knq0n"
   }
}
  • 실패
// 로그인하지 않고 '정보확인'을 할 경우
{
   msg: String
}
  • 예시
// 로그인하지 않고 '정보확인'을 할 경우
{
   msg: "정보확인에 실패하셨습니다."
}

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.