230220 포트폴리오 프로젝트(28)

geenee·2023년 2월 20일
0

Portfolio

목록 보기
34/38

소셜로그인(+회원가입) - 카카오

SNS 로그인 기능 구현
React.js 카카오 로그인, 사용자 프로필 가져오기
REST-API 활용한 카카오 소셜 로그인 구현(feat. React) 백엔드까지 구현할 자신은 없어서 그냥 내용만 참고~
[React + Node.js] 카카오 로그인 API로 소셜 로그인 구현 (실패한) 기록

필요한 라이브러리
1. react-router-dom
2. qs

npm install react-router-dom
npm install qs

KAKAO SDK 사용하여 로그인 기능 구현

axios는 죽어도 안되는데 왜 ajax는 잘 될까요...?ㅠㅠ
구글링 잔뜩해도 토큰 요청하는 kauth주소는 axios 사용할 수 있다는데 왜 나만 안될까요...cors에러가 나는데 이유를 모르겠음..
음..데이터 베이스에 어떻게 넣어야할지...넣으면 지금까지 짰던 쿼리 다 수정해야할판..;;
그냥 api 확인정도만 해본걸로 만족할래...
아예 처음부터 소셜 로그인까지 고려해서 데이터베이스를 설계했어야했다는...

AWS 배포

kakao api 사이트 도메인 추가

AWS에 계정 추가하고 서버 결제
보안규칙에 필요한 포트들 넣어줌(mysql:3306,server:5000,http:80)
git에서 프로젝트 다운로드
npm run build해서 리액트 만들어준다..뭐 다른 설정들도 있었음..
mysql 설치/기존에 테스트하던 데이터베이스 백업
pm2로 서버 계속 실행되게 설정
sudo systemctl start nginx

npm run build에서 자꾸 오류가 나서 로컬에서 빌드하고 업로드 함
서버까지 연결 했고 디비도 연결 함!

갑자기 디비 안됨 디비가 말썽이네;;
mysqld_safe 명령어 없을 때 MySQL root 비밀번호 초기화 방법
[AWS] 10-1.EC2 MySql 설치
디비에 접근하는 문제는 위 사이트로 해결
root 계정(내부서버에서접속)의 비밀번호 바꾸고 사용자 추가(외부접속)

또 오류가 나서 보니 대문자 소문자......
JSON_EXTRACT 쓸 때 문자 "" 붙이기
map 돌면서 쿼리 날리는 부분이 한군데 있는데 비동기처리가 안되서 데이터베이스에 적용이 안됨 ->map(async ()=>{await DB쿼리}) 이렇게 수정..
윈도우 환경의 로컬에서는 문제없이 잘만 돌아갔었는데 리눅스로 가니까 말썽이네 진짜 아오

어쨌든 기능 다 확인했다ㅠㅠㅠㅠㅠㅠㅠㅠ 드디어 끗
사이트 배포 금방 할 줄 알았는데 여기서 막히고 저기서 막히고..
진짜 한 10시간은 붙잡고있었던덧..


로컬이 아니어도 잘뜨는 내 사이트 장하다ㅠㅠ

git upload만 몇번을 했는지...ㅋ

profile
코딩 공부 기록용

0개의 댓글