View Code? Open in Web Editor
NEW
License: BSD 3-Clause "New" or "Revised" License
TypeScript 92.56%
CSS 3.59%
JavaScript 3.84%
chatwit's Introduction
Carrot Market Graduation Project
- 1주일동안 아래 졸업작품을 마무리하고 제출합니다.
- 이때까지 배운 것을 토대로, 미니 트위터 클론을 완성합니다.
- NextJS, Prisma, Tailwind, API Routes 그리고 SWR 를 활용하여 아래 페이지를 완성합니다.
- / : 로그인 여부를 확인하여 로그인이 되어있다면 홈페이지를 그렇지 않다면 계정 생성 / 로그인 페이지로 이동하세요.
- /create-account : 계정을 생성하는 페이지입니다.
- /log-in : 로그인을 진행하는 페이지입니다.
- /tweet/[id] : 트윗의 상세 정보를 보는 페이지 입니다.
- After logging in, in the Home Page, the user should see all the Tweets on the database, the user should also be able to POST a Tweet.
- 로그인이 완료되었을 경우, 사용자는 데이터베이스에 존재하는 모든 트윗을 볼 수 있어야 합니다.
- 또한 트윗을 작성할 수 있어야 합니다.
Tweet Page (/tweet/[id])
- The user should be able to see the tweet + a Like button.
- When the Like button is pressed, save the like on the database and reflect the update using mutate from useSWR.
- 사용자는 id에 해당하는 트윗의 내용과 좋아요 버튼을 볼 수 있어야 합니다.
- 좋아요 버튼을 클릭했을 경우 좋아요의 상태값이 데이터베이스에 저장되어야 하며 useSWR의 mutate를 사용하여 업데이트를 반영해야 합니다.
- 챌린지 blueprint에는 SQLite을 기반으로 한 Prisma가 설정되어있습니다.
- prisma.schema파일을 변경했다면 npm run db-sync를 실행하세요.
- SWR와 tailwind도 챌린지 blueprint에 설정되어 있습니다.
- 오늘의 템플릿: 위의 Today's Blueprint 버튼을 클릭하세요!
- Code Sandbox라는 툴을 이용하되. 이번엔 해당 블루프린트를 다운로드 받아서. 로컬 컴퓨터에서 작업하세요.
- Blueprint > File > Export to Zip
- 컴퓨터에서 열고. npm i을 실행하세요.
- 코딩 챌린지를 완료한 후. 본인의 Github에 과제를 업로드하세요.
- 해당 Repository 주소를 제출합니다.
- 제출기간: 다음주 월요일 오전 6시까지
- 10주 스터디 마지막 과제입니다. 10주동안 정말 고생하셨습니다!
- Prisma 데이터 모델 작성 시 Relation을 활용하세요.
- API를 통하여 값을 받아오고 싶을떈 useSWR을 사용합니다.
- API에 값을 전달하고 싶을땐 fetch API를 사용합니다.
- 로그인을 완료했을 경우 iron-session을 사용하여 로그인 정보를 저장 할 수 있습니다.
- 페이지를 이동하고 싶을땐 useRouter훅을 사용하여 리다이렉션을 할 수 있습니다.
- react-hook-form의 watch 함수를 사용하여 사용자가 값을 모두 입력하지 않았을 경우 버튼을 비활성화 할 수 있습니다.
- try-catch 구문과 setError함수를 사용하면 API에서 오류가 발생했을 경우 원하는 오류 문구를 출력 할 수 있습니다.
- 트윗 상세페이지를 구현할땐 useRouter의 query 객체를 활용합니다.
- useRef를 활용하면 페이지 로딩이 완료된 후 특정 코드를 실행할 수 있습니다.
chatwit's People
Contributors
Watchers
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent