회고 Side Project

여기어때를 모티브로한 Side-Project 나는어때

🔶  개요: 여행지 주변의 모텔, 호텔, 게스트하우스를 예약할 수 있는 사이트

🔶  참여 인원: Front-End 3명

🔶  제작 기간: 2022.07.07 ~ 2022.07.14

🔶  협업 툴: Slack, Notion

🔶  회의 방식: Sprint회의를 진행해서 티켓을 관리하고 StandUp meeting을 통해 팀원의 진행도를 체크

🔶  기술 스택

• React: 나는어때 페이지가 React로 제작되지 않아서인지 상당히 느렸기 때문에 React로 진행했다
• Styled-components: 더욱 동적으로 제작하기 위해서 사용하였다.

🔶  담당 구현 파트: Nav, Main-page, Footer

🔶 시현영상 : https://www.youtube.com/watch?v=B9UGGxGt4L4&t=6s

이번 프로젝트의 목표는 챌린지!

이번 Side-Project의 목표는 해보지 않았던 챌린지적인 요소나 그동안 학습을 위해 제한되었던 라이브러리의 사용, 공식문서를 읽고 적용해보는 연습이 주된 목적이었다.

이전 Project의 실수를 반복하지 않다!

☀️ 초기세팅이 2시간 → 15분 내외로 단축

첫 Project를 진행할때는 초기세팅으로 시간을 많이 소모했었다. 익숙하지도 않았고, 그 익숙하지 않음으로 인해 문제가 생겼기 때문인데, 그런 문제를 반복하지 않기 위해 그대로 따라하면 아무 문제 없도록 블로깅을 해두었다.

밑의 링크는 해당 블로깅 글이다.

https://conqueror-g.tistory.com/199

☀️ 크로스핏을 시작하고 활기찬 마음과 몸으로 프로젝트 진행!

첫 프로젝트 때에는 다소 이상한 행동으로 체력을 엄한데 소모했었고, 그동안 약해진 체력으로 인해 멘탈을 관리 할 수 없었다. 나는 7월 4일부터 크로스핏이라는 기록, 경쟁형 운동을 시작했고, 운동을 바탕으로 프로젝트를 끝날 때까지 온전한 몸과 마음가짐으로 진행할 수 있었다.

아쉬운점이 너무 큰 첫 날

팀원들의 급한 사정으로 인해 자동으로 PM이 되어 혼자 페이지를 기획하게 되었지만, 아무래도 혼자 진행할 수 없다는 판단으로 이 사이트에 대한 내 의견을 정리하고, 팀원들과 공유해서 팀원들이 도착한 다음 다시 페이지를 기획하여 진행하게 되었다.

👎 아쉬웠던점 : 챌린지 적인 요소와 1주일이라는 제작기간을 생각해서 이전에 했던 기능들은 PM으로서 모두 컷 했어야 했다는 아쉬움이 남는다. Redux를 비롯한 여러 라이브러리에 익숙해질 수 있는 기회였고 사용자적인 관점에서 프로젝트를 진행해볼 수 있는 기회였는데, 또 다시 팀원 개개인이 프로젝트 기간내 기능 구현에만 집착하게 되었다.

1차원적인 나의 페이지 분석력…

첫 프로젝트 때부터 Nav를 너무 해보고 싶었기 때문에 Nav에 대해서는 사용자적인 관점에서 제대로 기획하고 진행할 수 있었지만 나머지 페이지에 대해서는 너무 기능 구현에만 치우쳐있지 않나 생각한다. 이전 주제와 겹치는 내용이지만 사용자의 입장에서 페이지에 대한 분석력이 너무 나도 부족하다!

3명 모두 너무나도 다른 Styled-components 사용 방법

3명 모두 CSS in JS 라는 방식을 처음 사용해보았는데, 3명 모두 다른 방법으로 적용했다.

나는 styled-components의 사용 목적에 맞게 사용했다고 생각한다. 정답은 없다고 생각하지만 우리의 코드는 항상 누군가에게 읽혀지기 때문에 가독성과 재사용성이 좋은 것이 정답이라고 생각한다. 그런점에서 내 코드는 정답일까..? 아닐까..?

🔻 자주 사용하는 함수는 varables.js에 작성해두었고, 자주 사용하는 font나 color 관련 속성들은 theme.js에 작성해두고 이렇게 재사용 했다.

늘어만 가는 모달창으로 인해 Custom Hooks를 만들다.

페이지 곳곳에 모달과 같이 true or false를 저장하고 있는 state가 많아질 것을 예상하여, Custom Hooks를 만들어서 유용하게 재사용하였다. return 값을 Array로 하여 각 해당하는 JS파일에서는 이름을 달리하여 사용하여 가독성을 좋게하였다.

💥  다만 원래 이름은 useHandle 모시깽이였는데, 가독성이 안좋다는 조언을 받아들여 Toggle이라는 이름으로 정해지게 되었다.

라이브러리나 외부API는 나의 지식보다는 공식문서를 많이 참고해야한다

나는 React-slick을 사용해서 Carousel을 구현하고자 했는데, 자동으로 플레이되도록 하고 기본적으로 달려있는 버튼을 없애고자 했다. 수많은 삽질을 하다가 공식문서를 보고 1초만에 사라지게 만들었다…

Back-End 없이 진행된 카카오 소셜 로그인

가장 하고 싶었던 카카오 소셜 로그인을 맡아서 진행하게 되었다. 이번 프로젝트의 목표는 챌린지 였기 때문에 정답이 나와있는 다른 블로깅한 글 보다는 공식 문서를 최대한 참고해서 진행하려 했지만, 그런건 애초부터 될 일이 없었고.. 블로깅한 글을 참조해서 만들되, 막히는 부분이 생길때마다 공식 문서에 해당 내용이 없는지 참고하면서 진행했다.

한글로 작성된 공식문서였지만 언어와는 별개로 경험이 부족해서 그런지, 해석하는 데에도 많은 시간이 소요됬다.

Back-End 없이 진행했기 때문에 로그인은 이렇게 진행하였다.

• 클라이언트가 카카오톡으로 로그인하기 버튼을 클릭하면 서비스 서버가 카카오 인증 서버에게 인가 코드를 요청한다.
• 카카오 인증 서버가 인증 및 동의 요청을 한다.
• 인증 및 동의하는 페이지로 이동된 클라이언트가 카카오톡 로그인을 하고, 동의를 한다.
• 카카오 인증서버에서 인가 코드를 발급한다.
• 서비스 서버에서 토큰 발급 요청을 한다.
• 카카오 인증 서버에서 토큰을 발급한다. 여기서부터 백앤드 서버와 통신이 시작되지만, 바로 로컬스토리지에 저장한다.
• 로컬 스토리지에 토큰이 있다면 로그인되고, 아니라면 알람창이 띄워진다.

👎  아쉬웠던 점 : 라우터에서 Nav의 위치로 인해 토큰이 저장되어 있는 state가 업데이트 되어도 렌더링 되지 않는 문제가 있었는데, Redux를 사용해서 변경하지 못하고, 새로고침하여 렌더링 되는 것으로 구현했다. 아쉬운 부분이기에 꼭 Redux로 리팩토링하고 싶은 부분이다.

멘토님의 조언 + 나의 생각 바탕으로 진행된 사용자적 관점에서 구현하게된 Nav

🟦  여기어때 사이트는 앱 기반 웹이기 때문에 웹을 이용하는 유저에게 상당히 이상한 경험을 준다

🔵  여기어때 : menu에 mouseOver를 했을 때 어두운 흰색에서 흰색이 됩니다. 유저가 무엇을 보고 있는지 인지하기 쉽지 않다.

🟢  나는어때 : mouseOver를 하게되면 menu아래에 흰색 바가 생기며 유저에게 확실하게 인지하게 할 수 있다.

🔵  여기어때 : 해당 menu로 이동했을 때 하이라이팅되지 않는다. 내가 이동한 페이지가 어떤 페이지인지 처음 사용하는 유저입장에서 쉽지 않다.

🟢  나는어때 : 해당 menu로 이동했을 때 하이라이팅된다. 아쉬운 부분은 Redux로 구현해보고 싶었지만 css적인 요소로만 구현하게되었다. active되었을 때 흰색바가 커진상태로 고정된다.

❓ 의문점 : 리덕스를 사용해서 할 수 있는 방법이 있다고 들었는데, 이 부분에 왜 리덕스를 사용해야하는걸까? css로도 처리는 되는데 말이다

또 다시 발표를 하게되었고, 전 Project때보다 여유로워졌다.

이번에도 발표를 맡게되었는데, 이번에는 전보다 여유로워졌다는 것을 많이 느꼈다. 발표도 하다보면 느는가 보다! 아주 많이 떨던 나에서 조금은 성장했다! 조금 더 하면 더더 여유로워지겠지? ✌️ 발표할래요? 물어보면 네 할래요 정도까지 성장했다. 모두의 앞에서 발표하는 것은 이번으로 3번째다!

👎  다만 아쉬운점이 있다면 발음이 어눌한 것 같다. 내가 말하고 싶은 내용이 잘 전달되었을까?

하지만 그와는 별개로 내 코딩 실력은 늘고 있는 걸까? 😿

내 코딩 실력은 정말 떨어진다고 생각한다.. 나는 과연 이 프로젝트에서 1인분을 했을까? 같이 일 하고 싶은 개발자 중 1명이었을까? 내 의견은 상대방에게 잘 전달되었을까? 상대방의 의견을 나는 제대로 알아들었을까?

수많은 고민을 가지게 해주는 회고였다.