assignment.md

Waffle Studio Frontend Assignment - 4

due: 2020.11.8(일) 23:59

과제 목적

• API를 사용하는 법에 익숙해진다.

과제 안내 사항

과제를 하시다보면 이런 것까지 해야해? 싶은 경우가 있을 겁니다. 아마, 하시면서 이상하다 싶은 것들의 대부분은 서버에서 담당할 일입니다. 하지만, 저희가 실제 서버를 사용하지 않고, CRUD만 가능한 json-server를 사용하다 보니 어쩔 수 없이 프론트에서 처리하는 것이니 참고하시고 진행하시면 될 듯 합니다.

과제 - 리스트 기능 사이트 만들기

• 과제 3에서 만들었던 사이트에 대해서 몇 가지 조건이 변경/추가됩니다.
• 리스트는 이제 전역으로 관리하지 않습니다. 각 컴포넌트에서 필요한 리스트/아이템을 서버에서 불러와서 사용해주세요.
• 아래를 제외한 조건은 모두 동일합니다.
• Signin Page (/signin)
  • 이메일과 비밀번호를 받는 인풋이 존재합니다.
  • 확인버튼을 눌러 정보를 확인합니다.
    • 일치하는 유저가 있으면, Items Page(items)로 이동합니다.
    • 일치하는 유저가 없으면, 다시 확인해주세요라는 alert를 띄웁니다.
    • 원래는 email, password 값을 서버에 보내고, 이를 서버에서 확인해야 하지만, 서버가 제공되지 않는 관계로 프론트에서 유저 리스트 불러오고 일치하는지 확인해주세요.
  • 회원가입 버튼을 누르면 Signup Page(/signup)으로 이동합니다.
• Signup Page(/signup)
  • 회원가입에 필요한 정보를 입력받습니다.
  • 확인 버튼을 눌러 회원가입을 진행합니다.
    • 단 하나의 input이라도 비어있다면, 다시 확인해주세요라는 alert를 띄웁니다.
    • 그렇지 않다면 유저 리스트에 유저 추가 후, Signin Page(/signin) 로 이동합니다.
• Item Detail Page(/items/:id)
  • 수정, 삭제 버튼은 아이템의 user_id === 유저의 id 인 경우에만 보여야 합니다.
  • 댓글 기능이 추가됩니다.
    • 확인 버튼은 입력란이 공백일 경우 disable 되어야 합니다.
    • 각 댓글은 작성자의 name과 content를 보여줘야 합니다.
    • 자신이 작성한 댓글은 수정이 가능해야 합니다. 단, 빈칸으로는 수정할 수 없습니다.
• Item Edit Page(/items/:id/edit)
  • 작성자가 아닌 유저가 들어올 경우 잘못된 접근입니다라는 alert와 함께 해당 Item Detail Page(/items/:id)로 리다이렉트 시켜주세요.
• 어떤 페이지든 로그인을 하지 않은 상태로 접근하면 로그인 후 이용가능합니다라는 alert와 함께 Signin Page(/signin)으로 리다이렉트 시켜주세요.
• 모든 페이지에 로그아웃 버튼이 있고 이를 누르면 로그아웃 후, Signin Page(/signin)으로 리다이렉트 시켜주세요.
• 자동 로그인 기능이 추가됩니다.
  • 로그인 한 후, 브라우저를 닫기 전까지는 다시 접속해도 로그인이 유지되어야 합니다.
  • 브라우저에 링크를 직접 입력해서 들어갈 때도 포함입니다.
• axios를 사용하여 연결할 서버는 강의 시간에 말했던 json-server 기능을 이용해 주세요.
  • data.json에는 유저 리스트, 아이템 리스트, 댓글 리스트 가 있어야 합니다.
    • 유저 리스트의 각 유저는 아래의 값은 필수로 가져야 합니다.

      {
        id: number,
        name: string,
        email: string,
        password: string,
        logged_in: boolean
      }

    • 아이템 리스트의 각 아이템은 아래의 값은 필수로 가져야합니다.

      {
        id: number,
        user_id: number
      }

    • 댓글 리스트의 각 댓글은 아래의 값은 필수로 가져야합니다.

      {
        id: number,
        user_id: number,
        item_id: number,
        content: string
      }

    • 예시 참고해주세요

예시
아직 과제4에 관한 부분은 업데이트 전입니다.
깃헙 배포의 특성상 새로고침하면 404페이지가 뜹니다. 혹여나 새로고침 하셨으면 위 링크로 다시 접근해주세요. 추가로, 예시 페이지는 /list 가 기본적으로 들어가있는데, 이도 깃헙 배포라 어쩔 수 없는 부분입니다. 과제 하실 때는 위의 스펙에 맞춰주세요!

주의사항

1. 함수형 컴포넌트로 과제를 진행해주세요
2. 초기 데이터가 최소한 3개는 있어야 합니다.(유저 포함)
3. 디자인은 신경쓰지 않을 것 입니다. 그래도 예쁘면 좋아요
4. data.json도 함께 커밋해주세요
5. 커밋은 되도록이면 최대한 잘게 쪼개서 해주세요. 커밋 내용을 지켜보고, 전체적인 진행 상황에 따라 과제 due나 명세를 수정할 수 있습니다. 커밋 메시지도 상세할수록 좋습니다.

제출 방식

1. 과제 3에서 생성했던 레포를 이어서 사용합니다.

2. 과제 3에서 생성한 브랜치는 각자 사용한 grace day를 포함한 제출시간이 지나면 바로 merge 해 주세요.

3. master or main 브랜치를 기준으로 axios라는 브랜치를 생성하시고 이 브랜치에서 진행해주세요.

4. 풀리퀘를 생성하신 후에 commit을 해도 자동으로 풀리퀘에 반영 되므로, 가급적 일찍 생성해주시면 좋겠습니다. 각 브랜치마다 마감 시점의 최종 commit을 확인할 것입니다.

혹시 브랜치 생성 및 풀리퀘 생성에 문제가 있으면 꼭 질문해주시기 바랍니다

참고하면 좋은 것들

• JS 문법