Sprint 4
22.07.11 ~ 22.07.15
만두피 주기
- FollowCard, Modal, ScrollBar, Filter, Tabs 컴포넌트 구현
- 회원가입 페이지 리팩토링, 컴포넌트 버그에 따른 리팩토링
- 로그인 및 회원가입 페이지 백엔드와 연동
- (만두피) 삽질과 삽질의 좋은 결과의 환장의 콜라보레이션
- (주기) 리팩토링하면서 코드가 더 깔끔해지는 걸 볼 수 있었다. (대신 리팩토링 때문에 진도가 안나감)
-
(만두피) storybook 자동배포하려고 github action을 사용하려 했으나 삽질만하고 하지 못하였다. 왜 command를 못찾는지 모르겠다.
-
(만두피) 구글 로그인시에 id_token을 받아오려면 authorization 방법으로 가져와야하는데 이게 보통은 백엔드에서 처리를 하다보니 라이브러리나 예시에서도 프론트에서 처리하는 방법이 없었다. 이를 해결하기 위해서 직접 api를 설계해서 구글 서버에 전송해서 토큰을 받아올수 있었다.부제: 왜 얘도 queryString이지? (구글 문서 가독성 장난아님)
-
(만두피) filter 작업에서 position absolute를 제일 부모 컴포넌트에 넣은것이 화근이었다. 컴포넌트 자체가 absolute가 되어버리면서 페이지 단에서 배치를 할때 다른 컴포넌트를 무시하고 배치가 되어서 이를 해결하려면 margin값을 수동으로 주게되었다 이를 해결하기 위해서 filter 자체를 toggle 형식으로 구현해서 하나는 block이 되고 펼쳤을때는 absolute가 되어서 이를 해결하였다
기존의 문제
block으로 수정했을시에
정상적인 동작 -
(주기) 처음에는 피드 컴포넌트를 확장성을 고려해서 서브 컴포넌트를 나누어서 분리하고, 데이터를 하나하나 prop으로 가져오는 방식으로 했었다. 그런데 구현해보니 받아와야할 데이터가 너무 많아져버렸다. 확장성을 고려한다면 서브 컴포넌트를 나누는게 맞지만, 우리가 디자인 했던 피드는 400x400 사이즈 피드가 끝이기 때문에 분리했던 서브 컴포넌트들을 없애고 Feed 컴포넌트 하나로 진행했다. 그리고 받아오는 방식을 feedData가 담겨있는 객체를 prop으로 받고 컴포넌트 안에서 가져다 쓰는 식으로 리팩토링을 진행했다.
수정 전
수정 후
-
(만두피) 컴포넌트가 늘어나면 늘어날수록 페이지단에서 UI만드는데 걸리는 시간이 엄청나게 줄어든다.
-
(만두피) map함수 사용시에 cloneElement 방법으로 children component에 props를 넘겨줄수 있다 filter와 tabs를 이방법으로 사용하려고 하였고 react-tabs 라이브러리를 뜯어보면서 로직을 익히고 적용했다.
before
after -
(주기) ScrollBar를 처음에는 막연하게 라이브러리 써야지 했는데, 찾아보니까 css로 커스텀하기 쉽게 되어 있어서 라이브러리 안쓰고 UI에 맞게 구현할 수 있었다.
-
(주기) css grid를 처음 써봤다. 팔로워 모달에 들어가는 FollowCard들을 배치하려고 썼다. flex와 마찬가지로 grid도 레이아웃 구현할 때 사용하는 것이다. grid를 공부해보니 flex보다 더 세부적인 배치가 가능해서 신기했다. 나중에 메인 페이지에서 피드 배치할 때에도 grid를 쓸 예정이니 쓰는 법을 익혀둬야겠다고 생각했다.
https://studiomeal.com/archives/533
- (만두피)기업의 사내 프로젝트 한번 까보고 싶다….
- (만두피) 최고는 없다 하나를 얻으려면 하나는 포기해야한다. 알맞는 환경에 알맞게 쓰자
- 유저 프로필 페이지 구현
- 프로필 수정 페이지 로직 구현
- 제보 업로드 로직 구현