Skip to content

README.md

Latest commit

 

History

History
104 lines (77 loc) · 2.62 KB

README.md

File metadata and controls

104 lines (77 loc) · 2.62 KB
Raw

과제 (V1)

개요

리액트를 활용해서 명세대로 간단한 투두리스트를 만들어본다.

디자인

피그마 링크 확인

기본 과제

  1. 검색창에 글을 검색하고 추가하면 메모가 추가되도록 해보기
  2. 메모들의 우측상단의 버튼을 누르면 삭제버튼이 보인다. 한번 더 누르면 삭제 버튼이 사라진다.
  3. 삭제버튼을 누르면 메모가 삭제된다.
  4. memo의 저장은 localstorage를 활용해서 저장할 수 있다.

목표

  1. 컴포넌트간 데이터를 전달할 수 있다.
  2. 삭제버튼의 visibility를 관리하기 위해서 useState hook을 사용할 수 있다.
  3. 간단한 webstorage API(localstorage)를 활용해볼 수 있다.

추가 과제1

메모데이터를 localstroage에 저장하는 대신에 서버의 db에 저장해보고 가져와 보자. api는 아래 참조 부탁. 그리고 서버 base url은 개인 문의 부탁

목표

  1. 서버와 통신하면서 비동기 처리를 이해할 수 있다.
  2. 컴포넌트의 라이프 사이클을 이해할 수 있다.
  3. 함수형 컴포넌트에서 useEffect hook을 사용할 수 있다.
  4. .env에 안전하게 base url정보를 저장할 수 있다.

api

  1. GET /api/v1/memos

    response

    {
    "data": [
        {
            "content": "포스트맨에서 작성해봅니다.",
            "createdAt": "2024. 7. 5.",
            "id": "971cb97f-5a92-4e31-8a27-5a0d2944f3b5"
        }
    ]
}

  2. POST /api/v1/creatememo

    body parameter

    {
    "content" : "메모내용을 남겨보자"
}

    response

        true

  3. POST /api/v1/deletememo

    body parameter

    {
    "id" : "971cb97f-5a92-4e31-8a27-5a0d2944f3b5"
}

    response

        true

  4. 공통 에러 코드

    • 400

      {
    'message' : '유효하지 않은 값입니다.'
}

    • 500

      {
    'message' : '서버 오류입니다. 잠시후에 시도해주세요.'
}

추가 과제2

메모의 버튼을 누르면 상세보기 페이지로 이동한다.

목표

  1. 클라이언트 사이드 라우팅기술을 이해할 수 있다.
  2. 이를 위해 react-router-dom라이브러리를 활용할 수 있다.

주의사항

cors에러 방지를 위해 프론트 페이지 주소는 http://localhost:5173으로 유지해주세요.