프론트

프레임워크

• 기본은 React.js를 사용해도 되지만, 현재 시장에서는 Next.js가 대세; 만약 Next.js를 사용해서 구현할 예정이라면, SSR를 추천

전역 상태 라이브러리

• 지역상태만으로 구현이 가능하나, Zustand 라이브러리를 적용해서 진행해보시기를 추천 드립니다.

페이지 정보

디자인은 자유롭게 적용하셔도 괜찮습니다. 굳이 이쁘지 않아도 됩니다. 각각의 페이지가 제공해야 하는 기능만 온전하게 제공될 수 있으면 됩니다.

1. 로그인 페이지

   • [ ] 로그인 - /sign

     • [ ] Request Message

       {
       	"username": "JIN HO",
       	"password": "12341234"
       }
       

     • [ ] Response Message

       {
       	"token": "eKDIkdfjoakIdkfjpekdkcjdkoIOdjOKJDFOlLDKFJKL",
       }
       

2. 회원가입 페이지

   • [ ] 회원가입 - /signup

     • [ ] Request Message

       {
       	"username": "JIN HO",
       	"password": "12341234",
       	"nickname": "Mentos"
       }
       

     • [ ] Response Message

       {
       	"username": "JIN HO",
       	"nickname": "Mentos",
       	"authorities": [
       			{
       					"authorityName": "ROLE_USER"
       			}
       	]		
       }
       

3. 로그인 후, 사용자 정보가 보여지는 페이지

백엔드

프레임워크

• 기본은 Express를 사용해도 되지만, 현재 시장에서는 Nest.js가 대세;

비즈니스 로직 작성

• [ ] 백엔드 로직을 node로

  • [ ] 회원가입 - /signup

    • [ ] Request Message

      {
      	"username": "JIN HO",
      	"password": "12341234",
      	"nickname": "Mentos"
      }
      

    • [ ] Response Message

      {
      	"username": "JIN HO",
      	"nickname": "Mentos",
      	"authorities": [
      			{
      					"authorityName": "ROLE_USER"
      			}
      	]		
      }
      

  • [ ] 로그인 - /sign

    • [ ] Request Message

      {
      	"username": "JIN HO",
      	"password": "12341234"
      }
      

    • [ ] Response Message

      {
      	"token": "eKDIkdfjoakIdkfjpekdkcjdkoIOdjOKJDFOlLDKFJKL",
      }