클론코딩
이번 주차는 클론코딩을 했다. 우리조는 '핀터레스트'를 주제로 삼았다. 프론트는 당연히 리액트, 백엔드는 자바 스프링 부트, 프론트 2명, 서버 3명으로 총 5명이 프로젝트를 시작했다.
로그인
로그인 JWT다. 다른 방식을 써보지 않았기도 했고, 또 현재까지는 관리하기도 편하다. 토큰을 받아서 리덕스와 상태를 일치시켜주면 된다. 다만, 서버와 프론트의 expire 시간을 미리 얘기를 해두는 것이 500 에러를 피할 수 있는 길 이었다.
Refresg token까지는 구현하지 못했다. 완전한(보안에는 완전함이 없지만) JWT를 구현하기 위해서는 액세스 토큰과 별개로 Refresh token을 발급하여 운영해야 한다. 다음 프로젝트에서는 Refresh token까지 구현을 해야겠다.
Animation
핀터레스트는 말그대로 애니메이션이 천지였다. 로그인 페이지부터 장난 아니다. 이 페이지를 분석하는데만 하루가 걸린 것 같다. 스크롤 이벤트가 발생하면 아래로 화면이 내려가면서 로그인 폼이 표시된다.
이때 중요한 것은 스크롤이 생기지 않는 다는 것이다. 스크롤로 효과가 나타나는 것이 아니라, 화면의 뷰 자체가 아래로 이동하는 것이다. (?)
react-motion 을 사용했고, 스크롤이 보이지 않는 상태에서 배경을 길게 뽑아 이미지가 아래로 내려가는 듯한 효과를 구현했다. 그리고, 로그인 폼은 fade in 효과를 적용했다. 처음에는 react-motion이 상당히 복잡하고 가독성이 떨어지는 코드 같았는데.. 계속 보다보니 선녀다. 🥲
그리드
핀터레스트는 Stack-grid가 대명사다. 사진의 height가 다르더라도 마치 벽돌집 처럼 이미지들이 빈틈을 채우는 모양으로 그리드가 형성된다. 이걸 아마 바닐라로 구현하려고 했다면, 휴... react-stack-grid를 사용했고, 대부분 우리 팀원분께서 작업해주셨다.
이미지
AWS S3를 사용하는 것이 정신건강상 이로운 것 같다. 그리고 그게 더 효율적이고 빠르며 가볍다. 전 프로젝트에서 레퍼런스를 공유 받은 것이 있어 쉽게 구현했다.
리덕스
늘 하던대로 리덕스, 리덕스 썽크, 리덕스 액션을 사용했다. 썽크함수에 __을 붙이는 특이한 버릇을 우리 착하고 실력이 넘 출중하신 팀원분께서 수용해주셨다...
썽크함수는 __로 명명하고 되도록 action creator와 동일하게 이름을 선언했다. then을 최소화하고 async/await를 사용하고, immer는 최소로 사용한다.
이제 리덕스 모듈을 언제 만들어야 할지, 썽크 함수가 필요할지 필요하지 않을지 대략 각이 잡힌다. 그리고 post 를 하는 api에서 만약 컴포넌트의 전환없이 바로 업데이트가 되야 한다면, post 요청에 response를 post 한 내용으로 받을 수 있도록 서버쪽에 반드시 얘기를 해둬야 겠다.
useEffect
이번에도 clean up을 하지 못했다. 마감시간에 거의 이르니 집중력이 떨어지고,, 이 프로젝트를 이제 그만 놓아주고 싶었는지...... 반성해야 한다.
clean up을 하지 않으면, 상태가 초기화 되지 않아서 다른 게시물을 들어갔을 때 이전 게시물의 내용이 남아 있는 상태가 된다. 따라서 UX적으로 굉장히 부자연스럽다.
다음 프로젝트에서는 반드시.. clean up을...
JWT-decoding
JWT를 디코딩하면, payload에 담긴 정보를 활용할 수 있다. 처음에는 이걸 까서 써도 되나 싶었는데, 굳이 안쓸 필요가 있나 싶다.
Formik
form validation을 쉽게 하게 해주더라. 너무 간단해서 이건 무조건 써야된다.. 더 많은 api를 확인해서 조금 더 강력한 유효성 검증을 해야겠다.
Modal, Drop menu
처음으로 직접 만들었다. 프로젝트를 빨리 끝내고 싶다는 생각에 덕지덕지 붙였지만 아무튼 만들었다. 어려운 것은 모든 의존성을 제외하는 것이 어렵다. 이 컴포넌트를 완전한 블록으로 만드는 것은 쉽지 않았다. 하지만 어떻게 해야하는지 대략 감이 잡혔다. 좋은 CSS 프레임웍이 많지만... 그냥 내손으로 만드는게 가장 뿌듯하다.
이제 드디어 실전.
내일 팀이 정해진다.
나는 누구와 팀을 할 수 있을까....... 좋은 팀에 들어가고 싶습니다......
