세팅

0. npm, node

1. pnpm 설치 : npm install -g pnpm

2. 프로젝트 설치( t3) : pnpm create t3-app@latest notetaker

3. 데이터베이스 설치( SuperBase)

4. IDE로 프로젝트 로드( VScode)

1. prisma 스키마에 postgresql 설정

2. .env 파일에 데이터베이스 url 등록

3. 터미널에서 db push : pnpm prisma db push

5. 인증

1. github > 개발자 세팅 > 클라이언트 ID 발급 > 클라이언트 인증키 생성

dev Client ID 7******************9 Client secrets 6**************************************d

prod*( 임시 url로 지정 후 나중에 vercel에서 도메인 생성 후 실제 url로 수정)* Client ID 5******************b Client secrets 9**************************************d

2. .env.mjs에서 기본 튜토리얼 key인 DISCORD를 github으로 수정하고 터미널에서 github인증을 등록한다

export GITHUB_CLIENT_ID= “7******************9 ” export GITHUB_CLIENT_SECRET= “6**************************************d ”

3. .env에서 Next Auth의 암호를 생성( 주석 가이드 따라하기)하고 등록한다.

6. github 로그인 확인

1. 터미널에서 pnpm dev

2. 브라우저에서 http://localhost:3000/

3. 로그인 성공 확인

7. 로컬 코드를 github에 연동

1. github : 레파지토리 생성 https://github.com/normalstory/notetaker

2. local : 기존 파일을 git에 추가 git add -A

3. local stage로 commit git commit -m "first commit”

4. 원격 설정 git remote add origin <https://github.com/normalstory/notetaker.git>

5. github에 업로드 git push -u origin main

8. vercel에 프로젝트 생성

1. github 연동

2. .env 파일 등 환경 변수 설정 *prod용으로 등록( github, Next Auth url )

3. deploy https://notetaker-4mzz.vercel.app

4. github 로그인 확인

구축

1. GUI 세팅: Daisy

1. 설치 pnpm add daisyui @tailwindcss/typography -D

2. tailwind.config.ts 파일에서 plugins: [] 안에

설정 값 추가 require("@tailwindcss/typography", require("daisyui")

2. 데이터 테이블 세팅: Adding Tables

• 1. the Schema 작성
• 2. supabase로 Schema push

3. 백-엔드 세팅

• 1) 개요 - TRPC procedure 구성 리뷰
• 2) 구성 - Server와 DB 연결 by RPC

4. 프론트-엔드 세팅: Querying TRPC

• 1. 튜토리얼 index.tsx리뷰
• 2**)** index.tsx에서 튜토리얼 부분을 제외한 로우 코드로 수정

5 Adding A Header

1. 새 디렉토리와 파일 생성 : src/components/Header.tsx

• 2. 페이지 상단에 넣을 Header 구성
• 3. Build to the Topics on the side
• 4. Note 기능 구현하기

1. Re-Deploying The App To Verce

   The way that we do that is we send it off to GitHub.

   git add -A