1단계 회고
드디어 레벨 2의 마지막 미션인 장바구니 협업 미션을 하게 되었다.😎
이번 미션은 저번 장바구니 미션에서 이어지는 미션이였지만, 처음 겪어 보는 일들이 많았다.
우선은, 내 코드가 아닌 코드로 미션을 시작하게 되었다! 😱
서로 다른 팀이였던 페어끼리 만나서 둘 중 하나의 코드를 골라서 미션을 진행했어야 했다. 둘 중 누구꺼를 해야 하나에 대해서 거진 한시간 정도를 이야기 했다. ✍️
주로 기능과 스타일을 어떻게 구현했고, 장바구니를 관리 방식등을 이야기 했다. 무엇보다 미래의 api 연결이 뭐가 더 쉬울 것인가 등을 중요하게 보았다. 이렇게 유세지와 얘기를 충분히 한 뒤에 유세지 코드로 하기로 결정 되었다.
다른 사람의 코드를 중간에서 부터 이어받아서 해본 경험은 처음이였기에 이번에도 페어의 도움을 많이 받았다. 내 코드가 아니니 질문도 많이하고 대화도 자연스럽게 더 많이 하게 되었다. 그리고 정말 사소한 것까지도 유세지가 친절하게 설명 해줘서 미션을 잘 마무리 할 수 있었다.
그리고 두 번째로 처음 겪어본 것은 백엔드와의 협업이다 👩🏻💻
정식 미션을 백엔드와 함께 해본 것은 처음이라 기대되고 걱정도 되었다.
그리고 한 편으로는 이번 1단계에서 구현해야하는 것이 유저 관련 로그인, 회원가입, 회원정보 수정 등의 거의 모든 웹의 필수적인 기능이였기에 자료도 많고 어느정도 정제화가 되어 있기에 쉬울줄 알았다.
그런데 막상 회의에 들어가 보니, 뭔가 소통이 되는 것 같은데 안되고 있어⁉️라는 기분이 들었다.
간단한 기능인데도 프론트와 백엔드가 보는 관점이 달랐다. 아니 정확히 말하면 사람마다 보는 관점이 달라서 였던 것 같다.
예를 들어서, 로그인 성공할 때에 userId 값을 보내 줄 것인지,
(2단계에서의 기능이긴 하지만) 장바구니의 수량을 서버에 저장할 것인지 말 것인지 등이다.
정답이 정해져 있는 것이 아니라 서비스를 어떻게 제공해줄 것이냐에 대한 관점에 대한 차이라 듣다 보면 다 맞는 말이여서 신기한 경험이였다.
포키, 정, 조시, 케이 다들 친절하고 서로가 의견을 잘 듣고 이야기를 할 수 있어서 좋은 경험이였다.👍
리뷰받은 내용들
스타일링에 더 쉬운길이 있었어..🎢
이번에 color theme을 사용하게 되었다.
그래서 역할에 따라서 색의 이름을 부여하는 것이 아니라
GRAY_100, GRAY_200식으로 네이밍을 하였다.
이 과정에서 색을 하나하나 찾아서 아니면 대충 계산해서 부여해줬었는데,
이 색깔 범위를 정해주는 사이트가 있었다.🥲 (아사님은 천사야..🧚♀️)
앞으로 특히, 3단계 때에 미션을 진행할 때에 유용하게 사용할 것 같다는 예감이 들어서 해당 사이트를 발견하고 기분이 정말 좋았다.😆
그리고, 브라우저에 기본적으로 적용되어있는 tag들의 스타일링을 지워버리는 reset css도 귀찮아하면서 매번 설정을 해줬었는데
이것도 reset해주는 라이브러리가 있었다. (아사는 진짜 천사..❤️)
둘 다 꼭 지금이 아니더라도 앞으로 계속해서 사용할 수 있을 것 같아서 유용한 꿀팁이였다🍯
API 🧪
이번에 API 관련해서 설계를 하면서 궁금한 점들이 몇 가지 있었다.
첫번째로, userId를 어디서 받아와야 하나?
유저가 로그인을 성공했을 때에, 유저의 이름을 알아두어야 했다.
로그인 이후에 회원정부 수정과 같은 작업에서 프론트 쪽에서 그 정보를 들고 계속해서 사용해야 했기 때문이다.
문제는 userId를 어떻게 받아오냐였다.
주변의 프론트 크루들과 이야기를 했을 때에는,
로그인 요청이 성공하면, userId를 응답값으로 받아오는 것이 요청도 한 번만 보내고 깔끔하지 않겠냐 라는 생각이 들었다.
그런데 백엔드 크루들과 이야기 했을때에는, 자세히는 모르지만 POST인 로그인 요청에 대해서 userId 값을 보내주게되면 순환참조문제가 발생한다고한다.
그래서 로그인 성공 -> 응답값으로 accessToken을 받아옴 -> 해당 accessToken 값을 토대로 정보 조회 요청 -> 응답값 받아와서 저장하기
방식으로 진행해야 한다고 한다.
솔직히, 상당히 귀찮아지긴 했지만😥
백엔드 쪽에서도 코드의 퀄리트를 높이기 위해서는 타협할 수 없는 부분인 것 같아 이 부분에 대해서는 받아드려야 했다.
두번째로는 그래서 userId 어디서 관리할 건가?
redux에 값을 관리하게 되면, 새로고침이 발생했을 때에 redux 내의 값이 날아가 버린다. 이렇게 되면 회원 정보 페이지에 접근할때나 유저가 로그인 중이였을때에 갑자기 접근이 안된다던지의 원하는 정보가 보이지 않는등의 문제가 발생할 수 있다.
그래서 우리가 선택한 방법은 sessionStorage을 활용하는 것이였다.
userId 값을 받아왔을 때에 sessionStorage에 저장을 해둔다.
그리고 redux에서 userId에 대한 initialState값을 설정해 줄때에, sessionStorage에 userId에 대한 저장된 값이 있으면 해당 값을 초기값으로 주고 그렇지 않으면 null 값을 넣어준다.
sessionStorage는 새로고침을 해도 값이 날아가지 않기 때문에 해결했다고 생각했었는데
코드를 완성하고 보니 이렇게 관리를 하게되면 굳이 redux를 사용할 필요 없이 sessionStorage만을 사용하면 된다.🤔🤔🤔
그래서 이 부분을 리뷰어님께 질문하였을 때에 redux-persist라는 라이브러리를 소개시켜주셨다.
해당 라이브러리를 사용하게 되면 새로고침했을 때에 값이 초기화 되버리는 redux의 단점을 보안할 수 있다
그런데 여기서도 sessionStorage활용해서 값 보전하는건 안 비밀
2단계에서는 해당 라이브러리를 사용해서 코드를 개선해보고자 한다.
