Main project 회고 - 카카오 로그인, jwt, css, 기획 등

1. 기획 

- 직장인일때는 블라인드를 많이 보았다 

너무 많이 보아서 시간을 절약하기 위해 앱을 지우고 웹으로만 종종 보자는 결단을 내릴 정도였다 

- 개발자로 커리어 전환을 꿈꾼 후 정보를 찾느라 고생했다 

부트캠프들은 자신들의 회사, 커리큘럼 홍보에는 열심이었으나, 구체적으로 협력 회사들이 어떤 것이 있는지 알 수 없었고, 수료생들의 후기들은 가뭄의 콩나듯 보였다 (심지어 한 부트캠프를 시작하면서도 협력 회사 리스트를 중간에 볼 수 없었다.. 수료하면 볼 수 있을지 궁금하다..)

- 부트캠프를 수강하는 인원들이 자유롭게 소통할 수 있는 공간의 필요성 

개발자의 문화는 'open source'인만큼, 더 다양하게 정보와 고민을 나눌 수 있는 창구가 있으면 좋겠다고 생각했다 

 

 

2. 멘토링 

- 지식 

매주 숙제아닌 숙제를 내주심..

1주차: axious를 사용할 것 vs graghQL을 사용할 것? 
2주차: useMemo, reactMemo 등 메모리제이션 관련 개념 다지고 오기 
3주차: 3주차에는 진도 관련 이야기를 주로해서 별도로 없었음 (cors 오류 관련 부분에 대한 조언)
4주차: 각종 질문을 받으심(알고리즘 공부법, 프로젝트 막히는 부분 알려주시기 등등)

 

- 오류 잡기 

팀원이 4명이다 보니 여러가지 파일을 공유하면서 localhost에서 문제가 생겼다

나는 5500으로 보고 있었는데, 팀원의 local호스트가 3000번이라 볼 수 가 없었다 

1. 멘토님의 피드백
(먼저 package.json)파일 확인  
스크립트 부분에 3000번 포트 심어서 실행해 보실래욤?
"PORT=3000 react-scripts start"
3000번 포트 딴데서 쓰고있으면 에러나니 조심하셔요~
-> 하려고 하였으나 stackoverflow로 해결한 뒤 답장이 와서 하지는 않음 

2. 팀원들의 조언 
http://localhost:3000/ 를 직접 입력하기
-> 하지만 안됨
vscode의 live server의 번호를 수정하기 
-> 이 블로그(https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md) 참고했지만 안됨

3. stackoverflow 조언
역시 갓택오버플로우..
정확한 url은 지금 찾기 어려우나 터미널에 띄어진 오류를 복붙해서 검색해본 결과, 정확한 답변을 통해 오류를 드디어 해결...! 

이것 외에도 로그인/회원가입 구현 뒤 네트워크의 오류를 해결해주셨다 

https를 localhost앞에 붙이니 문제가 해결되었다 

 

 

3. 기술 구현 

• 사용 기술 스택
  • 공통
    • Git & GitHub
    • GitBook
    • Google Docs
    • Notion
  • 프론트엔드
    • JavaScript
    • HTML/CSS
    • React
    • Node.js (네트워크 환경 설정)
    • Redux-toolkit (전역 상태 관리)
    • axios (비동기 통신)
    • MUI(Material-UI) (UI 템플릿 제공)
  • 백엔드
    • Java
    • Spring Framework (Core, Boot, Web, Data JPA, Cloud, Security)
    • JWT (토큰 방식 보안 적용)
    • Map Struct (데이터 매핑)
    • Database (RDS - MYSQL)
    • Amazon Web Service (EC2, S3, RDS)
• 서비스 기능 시연
  • 가능한 부분이 있다면 시연
  • 핵심 기능 위주로
    • 로그인
    • 게시판 글 쓰기
    • 부트캠프 정보 표시
    • 리뷰 표시

작업이 워낙 동시다발적으로 이루어졌지만 내가 주로 작업한 것은 로그인 구현, jwt구현, 전체 css구현이었다 

아래는 내가 작성한 프로젝트 후기이다 

- 카카오, 구글 로그인 구현 
부트캠프 커뮤니티의 특성 상, 개발업무를 하고 있거나 개발에 관심을 갖춘 사람이 방문할 것이라고 생각했습니다. 이에 개발자라면 갖고 있는 깃허브 아이디로 로그인할 수 있도록 깃허브, 구글 로그인을 구현할 수 있는 파이어베이스를 만들었습니다. 
그리고 REST-API를 활용하여 카카오 로그인을 구현했습니다. 먼저, 애플리케이션을 생성한 후, 인가 코드를 받아왔습니다. 카카오 API홈페이지에 들어가서 cliend_id와 redirect_uri를 받아와서 {REST_API_KEY}와 {REDIRECT_URI}에 넣었습니다. 
cliend_id는 kakao developers에서 내 애플리케이션을 추가했을 때 생기는 REST_API 키를 넣는 것을 수행하였으며 Redirect URI를 설정했습니다. 이 과정에서 프론트엔드에서 접근할 수 있는 host로 지정하였습니다. 인가 코드를 받고 넘기는 등의 모든 과정을 여기서 진행하기 때문이었습니다. 
또, 웹(web)에서 사용할 것이기 때문에 플랫폼을 지정하여 도메인을 추가했습니다. 이러한 과정을 잘 관리하기 위해 컴포넌트를 새로 생성했습니다. js파일을 생성하여 미리 만들어 놓은 로그인 버튼을 눌렀을 때 위에서 만든 url주소로 연결을 시켰습니다. 버튼을 누르면 카카오톡 로그인 화면으로 이동이 되고, 이메일과 비밀번호를 입력하여 동의하기 버튼이 나오도록 설정했습니다. 
동의하고 계속하기 버튼을 누르면 Redirect url화면으로 이동이 되는 것을 확인할 수 있습니다. 
저는 위 경로에 도달했을 때 보여줄 컴포넌트를 생성하고 app.js에 route를 걸었습니다. 인가 코드를 받아온 후 axious를 활용해 코드를 백엔드에 넘겨줄 코드도 작성했습니다. 서버에 데이터를 보낼때에는 url뒤에 파라미터로 담고 GET메서드를 활용하였습니다. 
로그인에 성공한 것을 확인 한후에는 사용자를 메인화면으로 보냄으로서 소셜 로그인을 완성했습니다. 
추가로, 회원가입 시 멘토님께 프론트엔드로서 다뤄야 할 예외 처리에 대한 설명을 듣고 개념을 세울 수 있었습니다. 
먼저, 기본적인 회원가입 준비(비밀번호가 8자리 이상이면서, 영어 소문자, 대문자, 숫자, 특수문자 포함)을 하지 않을 경우, 알림창이 뜨는 것을 설계, 조건이 충족되지 않는다면 회원가입 API를 부르지 않도록 하는 것(API를 한번 부르는 것도 다 돈이 소요된다고 말씀하심)
1. 실패 (서버의 이슈로)
2. (회원가입) 중복된 id
3. (로그인) 없는 id(로그인)
4. id는 있으나 비밀번호가 틀린 경우
위 사례에 해당하는 경우 어떻게 처리해야할지 개념을 미리 구상할 수 있었습니다.
구글 로그인을 구현하면서는 연동한 파이어베이스에 사용자의 아이디와 비밀번호가 업로드되는 모습을 확인할 수 있었습니다. 서버통신이 잘되는 것을 가시적으로 확인할 수 있었던점이 기억에 남습니다.
로그인 기능은 거의 모든 홈페이지에 있는 기능이라 배운 점이 많았습니다.

 

 

- jwt토큰 방식 보안 적용 

express를 활용해서 코드를 작성했다 

401에러와 403에러가 났을 경우를 대비하여 코드를 작성했는데 굉장히 흥미로웠다 

멘토링 첫 시간에 멘토님이 위 두 에러의 차이에 대해 질문하셨는데 답을 못했었는데 이제는 직접 코드를 구현했다는 것이 신기했다 

 

- css

팀에서 작성한 피그마를 참고하여 작성했다 

기본적인 css, html이외에도 bootstrap과 mui를 참고하여 작성했다

무엇보다 '별점기능'을 추가하기 위해 mui를 막판에 사용했는데, 처음 다루는 프로그램이라 어려웠다 

 

 

4. 발표 

팀별로 어떤 기능을 어떻게 구현했는지 발표할 자료를 작성하고 있다 영상도 만들고 글도 만들며 준비를 하고 있다

메인 프로젝트가 끝나감이 느껴지고 있다 

배포링크: http://cs-project-020.s3-website.ap-northeast-2.amazonaws.com/home

소개영상: https://www.youtube.com/watch?v=CtKb_G4rCo8&t=1s 

소개자료: https://docs.google.com/presentation/d/1TICPkUE7rwPFjQRc6uFgFlAdLWCzD964dTJp4k3CR4c/edit#slide=id.p