Retrospective-프로젝트 회고 2
프로젝트 회고
프로젝트 소개
적용 기술
-
FrontEnd
- React.js, sass, JavaScript, HTMl, CSS
-
BackEnd
- Node.js, Express, Json Web Token, Bcrypt, MySQL, uuid
-
Common
- RESTful API, Git, Github, Trello, Slack, Notion, Postman
팀원들과 협업
NOTION
- Notion 을 통해서 프로젝트 기간동안 구성원들 간 일별 할 일 / 한일에 대해서 내용을 공유하고 Block 사항이 발생하는 일들에 대하여 공유하여 같이 해결할 수 있는 일들에 대하여 고민할 수 있는 시간이다.
TRELLO
- Trello 를 통해 매일 DSM 을 진행하면서 프로젝트 구성원들의 스케줄을 정리하고 팀원들과 공유를 했다.
회원가입 , 로그인, 리스트페이지, 장바구니, 결제 페이지등을 맡아서 진행했다.
메인페이지, 소셜로그인
이번 프로젝트에서 내가 맡은 부분은 메인페이지, 로그인 페이지 이다.
메인 페이지
- 강의의 다양성을 강조하기 위해 카테고리별 강의들을 메인 화면에 나타내고 있음
- 다양한 관심사를 가진 유저들을 최대한 많이 유입하기 위함
- 최상단에 위치한 메인 배너는 사이트가 가장 강조하고 싶은 강의 및 정보를 노출
- 유저가 사이트 접속 시 제일 먼저 보게 되는 위치에 있기 때문
- 카테고리별 캐러셀 기능 구현해서 최대한 다양한 카테고리별 강의들을 노출
- Nav 바에 전체 카테고리 드롭다운을 생성해서 전체 카테고리 목록을 한번에 확인할 수 있도록 구현
로그인 페이지
- 신규 유저 유입 허들을 낮추기 위해서 소셜 로그인을 도입함
- 대한민국 기준으로 카카오톡 유저가 제일 많기 때문에 카카오 로그인을 최상위 위치함 ( 이후 유저가 많은 sns 순서로 배치 )
- 회원가입 버튼이 최하위에 위치한 이유는 데이터베이스에 들어가는 리소스를 최소화하기 위함
- 소셜 로그인으로 신규 유저 정보를 얻는 이유는 이미 기반이 잘 잡힌 기업에 인증 권한을 위임하는 게 안전하기 때문.
- 카카오 API 를 통해 Token 을 요청하고 서버로 전달하는 로직을 구현
- 뒷 배경을 어둡게 해서 로그인 창을 좀 더 강조하고자 함
2차 프로젝트 회고
2차 프로젝트가 시작이 되었고, 팀 내 프론트엔드 분들과 각자 맡아야 할 항목 들을 정하기 이전에 각 페이지 마다 의 난이도를 먼저 확인하였고, 내가 맡은 항목은 메인 페이지 ( list, nav, footer ) 그리고 로그인/ 회원가입 ( kakao 소셜 로그인 ) 이었다.
1차 프로젝트 와는 달리 라이브러리를 사용 할 수 있다는 장점이 있었고, 1차 프로젝트 때 장바구니 등 결제 항목에 해당하는 페이지를 해보았기 때문에 캐러셀 기능이 들어간 메인 그리고 소셜로그인을 활용한 로그인 회원가입 페이지를 맡았을때 나름 재미 있을 것 같았다.
그렇게 프로젝트가 시작이 되었고, 재미와 기대와는 달리 막히기 시작하니 답답했다 하지만 이전 프로젝트와는 달리 막막 함은 없었다. ( 조금 성장 한걸까 ? )
라이브러리를 처음 사용해 보았다. 조금은 더 익숙 해 져야 할듯 하다. 그렇지만, 라이브러리 없이 메인 페이지의 캐러셀 기능을 만들려고 했다면 지금의 나의 기술역량으론 얼마나 시간이 걸렸을지 감이 잡히지 않는다.
라이브러리를 사용 함으로 메인 페이지 캐러셀 기능을 단 하루 만에 완성 하게 되었다. 대단하다 라이브러리.. 너란 자식..
조금 더 많이 친해 지도록 해야 겠다.
메인 페이지 이외에 내게 이번 프로젝트에서 가장 시간이 걸리고 어려웠던 부분은 소셜로그인 이었다.
카카오 소셜 로그인 기능을 구현 했고, 카카오에 인가, 토큰을 받아오는 로직을 만들었고, 받은 토큰을 백엔드 서버로 보내주고, 서버에서 다시 카카오와 통신을 해서 로그인이 되는 그런 기능인데,, 언제나 그랫듯이 처음이라 그런지 만만치 않았지만 결국 온타임내 잘 해냈다.
( 카카오 소셜로그인 부분은 따로 블로그 작성해 올려야지…)
1차 프로젝트 보단 조금은 스스로 성장 한듯 뿌듯함이 있었다. 앞으로 더더 많은 발전을 할 수 있도록 노력 많이 많이 해야 겠다.