본문 바로가기

전체 글

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.. 더보기
test . 더보기
The Movie DB API Key The Movie DB API Key 생성하기 https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 회원가입 및 로그인 나의 계정 설정에서 api key 확인 The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기 npm install axios --save api 환경변수 등록 및 axios 인스턴스화 및 사용할 url 더보기
리액트 유용한 컴포넌트가 정리된 레포지토리 https://github.com/brillout/awesome-react-components 더보기
이슈에 대한 대처 양식 이 프로젝트를 통해서 최소 하나 얻어갈 인사이트를 기록 1.issue 2.problem 3.solution 4.what i learn 예시 1 1.issue 사용자들이 에러를 직면한 이슈가 발생 배포한 서버를 업데이트 하기 위해서 코드를 수정하는 작업을 하는 동안 사용자들이 에러를 직면하는 이슈가 발생했다. 2.problem 스테이지 단계와 프로덕션 단계의 서버를 나누어 놓지 않는게 원인 3.solution 단일 서버에서 배포단계를 나워서 설계해서 개선 원래 프로젝트는 단일 서버로만 진행했었던 것을 배포단계로 나눠서 설계함 4.what i learn 내가 이런 상황에 놓였을 때 프로덕션 서버 하나로 위와 같은 이벤트로 알게 되었다. 예시 2 1.issue 특정 API 에서 응답 수집 시간이 200% 딜레.. 더보기

티스토리툴바