코딩이 모래?

시작하기 앞서 이 과정은 pscale이 연결되어야 가능함 따라서 콘솔에서 pscale connect - [프로젝트명]을 입력해주자 로그인 로직은 다음과 같은 과정을 거친다 1. email이나 phone을 백엔드에 넘기기 --있음?--> login, --없음?-->sign in 2. 토큰 생성 -- 랜덤숫자를 생성하여 유저와 연결 3. Twillo를 사용해 유저에게 토큰(랜덤숫자)를 문자 or 메일보내기 4. 토큰을 입력하여 백엔드로 보내고 일치하다면 로그인하기 1️⃣ 로그인 화면에서 DB에 유저정보 있는지 확인하기 위의 창 에서 유저정보를 로그인하거나 생성할 것이다. email이나 phone 정보를 입력했을 때 그 정보를 통해 유저가 있는지 확인하고 없다면 새로운 유저 정보를 만들어 줄 것이다. // /..

React/당근마켓 클론 2023. 2. 10. 19:59

1️⃣ useForm 사용하여 데이터 생성 pages/enter.tsx에 들어가서 useForm을 사용해주자 //pages/enter.tsx interface EnterForm { email?: string; phone?: string; } ... const [submitting, setSubmitting] = useState(false); const {register, handleSubmit, reset} = useForm(); ... const onEmailClick = () => { reset(); // email을 눌러서 데이터를 전송하고 또 phone을 눌러서 데이터를 전송하면 // 두 가지 데이터가 동시에 전송되므로 reset사용하여 하나만 전송시켜준다 setMethod("email") }; ..

React/당근마켓 클론 2023. 2. 9. 18:13

백엔드 접근을 처음 해보지만.. 강의내용을 토대로 정리해보자 어려웡 ㅜㅜ Prisma란? nodejs, typesciprt의 ORM(Object Relational Mapping) js or ts와 데이터베이스 사이에 다리를 놓아주는 역할을 한다 (번역기라고 생각하면 됨) Prisma를 사용하기 위해서 먼저 Prisma에 DB가 어떻게 생겼는지 데이터의 모양을 설명해줘야 하는데 이 때 schema.prisma를 사용한다. Prisma가 타입에 관한 정보를 알고 있으면 client를 생성해 줄 수 있는데client를 이용하면 TS로 DB와 직접 상호작용 가능하다. Prisma Studio : Visual Database Browser, DB를 위한 관리자 패널같은 것. 설치방법 npm install pri..

React/당근마켓 클론 2023. 2. 8. 19:35