clone toy projects 썸네일형 리스트형 Passport 모듈로 로그인 구현하기[카카오] 카카오 로그인이란 로그인 인증 과정을 카오에 맡기는 것을 뜻합니다. clientID는 카카오에서 발급해주는 아이디입니다. callbackURL은 카카오로부터 인증 결과를 받을 라우터 주소입니다. 먼저 기존에 카카오를 통해 회원가입한 사용자가 있는지 조회합니다. 있다면 이미 회원가입되어 있는 경우이므로 사용자 정보와 함께 done 함수를 호출하고 전략을 종료합니다. 카카오를 통해 회원가입한 사용자가 없다면 회원가입을 진행합니다. 카카오에서는 인증 후 callbackURL에 적힌 주소로 access Token, refreshToken과 profile(사용자 정보)을 보냅니다. profile 객체에서 원하는 정보를 꺼내와 회원가입을 하면 됩니다. 사용자를 생성한 뒤 done 함수를 호출합니다. 이제 카카오 로.. 더보기 Passport 모듈로 로그인 구현하기[로컬] 세션과 쿠키 처리 등 복잡한 작업이 많으므로 검증된 모듈을 사용하는 것이 좋습니다. 바로 Passport를 사용하는 것입니다. 이 모듈은 이름처럼 우리의 서비스를 사용할 수 있게 해주는 여권과 같은 역할을 합니다. 요즘에는 서비스에 로그인할 때 아이디와 비밀번호를 사용하지 않고 구글, 페이스북, 카카오톡 같은 기존의 SNS 서비스 계정으로 로그인하기도 합니다. 이 또한 Passport를 사용해서 해결할 수 있습니다. $ npm i passport passport-local passport-kakao bcrypt passport 관련 모듈들 설치 app.js에 passport연결 passport.initialize 미들웨어는 요청 (req 객체)에 Passport 설정을 심고, passport.sessio.. 더보기 데이터베이스 세팅하기 사용자 테이블,게시글테이블, 해시태그 테이블이 필요하다. 소셜 로그인을 했을 경우 provider과 snsId를 저장한다. provider의 EUM 이라는 속성은 넣을 수 있는 값을 제한하는 데이터형식 종류는 local, kakao이며 이를 어겼을때는 에러가 발생한다. 게시글의 내용과 이미지 경로를 저장 게시글 등록자의 아이디를 담은 컬럼은 나중에 관계를 설정 할 때 시퀄라이즈가 알아서 생성한다. 태그 이름을 저장( 태그로 검색을 하기 위해) 모델의 index.js 작성 같은 모델끼리도 N : M 관계를 가질 수 있다. 같은 테이블 간 N:M 관계에서는 모델 이름과 컬럼 이름을 따로 정해야 한다. 모델 이름이 UserUser일수는 없으니까. through 옵션을 사용하여 생성할 모델 이름을 Follow로.. 더보기 프로젝트 구조 갖추기 '노드의 교과서'를 토대로 진행 사용자와 게시물 간, 게시물과 해시태그 간의 관계가 중요하므로 관계현 데이터 베이스 사용. npm install cookie-parser dotenv mysql2 express-session npm install morgan nunjucks sequelize sequelize-cli npm install -D nodemon 필요 패키지 다운 npx sequelize init 위 명령어 입력해서 config, migrations, models, seeders 폴더 생성 .env 에 COOKIE_SERCRET 작성 app.js 작성 page 라우터 작성 및 컨트롤러 작성 /profile /join / 총 3개의 페이지로 구성 및 템플릿 엔진에서 사용할 4개의 변수 res.lo.. 더보기 리액트 쿼리 및 리팩토링 쿼리를 담당하는 custom hook 제작 및 적용 product에 적용 cart도 위와 같이 적용. 더보기 쇼핑카트 필요한 firebase를 사용한 함수 작성 context를 이용해서 사용자의 정보를 받아온 뒤 저장에 사용 저장이 잘 되는것을 확인 쇼핑카트 뱃지 보여주기 장바구니 상태 컴포넌트 생성 나의 장바구니 더보기 제품들 상세 페이지 . use navigate로 인자 받은거 기억 ! 더보기 제품들 보여주기 미리 여러 상품들 업로그 해놓기 ! UseQuery를 이용해서 firebase 데이터베이스에 있는 모든 정보를 가져온다. yarn add @tanstack/react-query 쿼리 우산 씌우기 Home with banner UI bg-banner는 tailwindcss에서 설정한 파일 더보기 이전 1 ··· 3 4 5 6 7 8 다음
