2차 프로젝트 1주차 종료
Branch 프로젝트
개인이 호스트가 되어 취향이 담긴 개인 공간에 모여 대화를 나누는 커뮤니티입니다. 1차 프로젝트와는 다르게 기존 사이트의 컨셉과 기능을 그대로 사용하여 클론하였습니다.
다만 메인페이지와 둘러보기 페이지의 기능을 나눌 필요가 없다고 생각되어 메인에서 둘러보기 기능을 사용하도록 하였습니다.
개발 인원 및 기간
개발기간 : 2021/12/13~2021/12/24(종료 예정)
프론트엔드 개발자 3명
백엔드 개발자 3명
적용 기술 및 구현 기능 적용 기술
Front-End : JavaScript, React.js, Styled-Components, React-router-dom
내가 구현한 기능
Kakao social Login
- 카카오 소셜 로그인 javascript 키를 활용하여 로그인,로그아웃,회원탈퇴 기능 구현
- 카카오 서버로부터 전달받은 access_token을 fetch로 백엔드에 전달하여 로그인 토큰을 받은 후 localStorage에 저장
- 카카오 키와 같은 예민한 데이터를 .env에 변수로 저장
Mypage
- state 값을 변경하여 3가지 요소 중 한 가지만 active되도록 onClick 이벤트 작성
예약 페이지
- 여러개의 textarea 데이터를 state에 저장
- styled-components 조건부 렌더링
처음은 언제나 어렵다
새로운 기술 styled-component
1차 프로젝트에서 사용했던 sass는 css와 작성법에서 크게 차이가 있지는 않았다. 그러나 2차 프로젝트에서 사용중인 styled-component는 기존의 기술들과 상당부분에서 차이가 있었고 이를 익히는데 오랜 시간이 걸리고 있다. 사용한지 1주일이 지난 지금은 어느정도 익숙해 졌지만 아직도 모르는 작성법이 있을 것이다. 부족한 부분은 찾아서 해결하는 것이 개발자의 기본 소양이기에 지금은 프로젝트를 진행하는 것을 위주로 하지만 그때 그때 필요한 것이 있다면 찾아서 해결해야겠다.
기록으로 남겨야 나의 것이 된다.
외부에서 API를 받아와 사용하기...
웹사이트를 제작할 때 모든것을 직접 만들지는 않는다고 한다. 대부분은 라이브러리와 같은 이미 만들어진 것을 가져와서 사이트에 맞게 변경하여 사용하는데 그런 종류 중 하나로 이번에 제작한 카카오 소셜 로그인이 있다.
기능부터 레이아웃까지 모든 것이 만들어져있고 그것을 가져다 쓰기만 하면 되는데 이게 그냥 control c/v로 되는 것은 아니다보니 여러가지 시행착오가 있었다.
게다가 같은 로그인 기능이지만 REST API, Javascript 등 만드는 방법 또한 여러가지라서 어떤 것이 나의 상황과 맞는 것인지도 확인하고 사용해야 했다.
이번에는 Javascript 키를 사용했는데 사용한 이유는 팝업으로 사용하기 위해서였다.
내가 공식문서를 재대로 이해한 것이 맞다면 REST API와 Javascript를 사용할 수 있는데 이 중에서 팝업으로 만들 수 있는 것은 후자에 속했다.
한개를 해결하면 꼭 다른 문제가 생긴다!
개발이 참 재밌는게 문제가 생겼을 때 열심히 고민하고 검색하여 해결하면 다른 문제가 생긴다는 것이다. 이게 스트레스이기도 한데 이걸 또 해결하는 재미가 쏠쏠해서 계속 하게 되는데 Javascript 키를 사용하여 작업하니 생기는 문제가 있었다.
로그인과 로그아웃은 잘 되는데 다시 로그인 하려하니 아이디 입력창이 안뜨고 바로 로그인이 되었다. 이유를 찾아보니 카카오와 연결해제를 안해서 그렇다는데 이거 때문에 많이 고생했다.
일단 REST API는 이 기능이 기본적으로 제공하고 있다. 그러나 Javascript 키에서는 제공하지 않고 직접 만들어야하는데 아무리 찾아봐도 알 수가 없었는데 한 사이트에서 Kakao.Auth.loginForm를 사용하라는 글을 보고 아래와 같이 적용해보니 잘 되었다.
이렇게 문제를 해결하는 짜릿함이 코딩의 맛인거 같다. 그런데 어떻게 공식문서에도 없는 것을 글을 작성하신 분은 알고 계신 것일까?...
