[항해 취업 리부트 코스] 페이지는 다 만들었는데......

이강혁·2024년 4월 22일
1

항해99

목록 보기
13/13

이번 주 항해 취업 리부트코스에서 내가 구현한 기능은 무엇인가요?

커머스 프로젝트가 시작되면서 아예 기획에서부터 디자인까지 처음부터 하게됐다. 기획은 처음에는 "스스므"와 "무신사"를 합친 것 같은 리뷰를 SNS처럼 사용하는 서비스를 만들려고 했는데 (실제 페이지는 예전 Harulog SNS 디자인을 가져와서 대충 디자인 해봤다.) 기본 기능 구현이 먼저인 것 같아서 쇼핑몰 기본 페이지를 먼저 디자인하고 user flow 그리고 작업 하려고 했다.
멘토링 시간 때 그렇게 어려운 주제가 아니니 그냥 빠르게 구현하고 저수준 구현을 도전해보라고 해서 장바구니, 결제, 결제완료 페이지를 그리다가 던지고 바로 구현에 들어갔다. 그리고 금요일에 모든 페이지를 모양만 갖추게 하는 것을 끝냈다.

금요일에 페이지 구현이 끝난 후 기능을 붙이기 시작했다. 기능 붙이면서 멘토링 때 본 객체지향 프로그래밍하는 법을 활용해서 리팩토링도 같이 진행했다. 토요일까지 로그인, 회원가입 기능 구현 및 리팩토링과 상품 등록, 상세 기능을 완료했다.

이번 주 겪은 트러블 슈팅이 있다면 무엇인가요?

빠르게 구현하기 위해서 예전에 하던 것처럼 한 파일 안에 뷰로직과 비즈니스 로직이 들어있는 방식으로 구현했었는데 이렇게 했을 경우에 요구사항 변경에 유연하게 대처하기 어렵다는 점을 말씀해주시면서

이런식으로 컴포넌트 안의 요소들을 추상화해서 뷰 로직과 비즈니스 로직을 분리한 후 합성컴포넌트를 활용해서 다시 구성하는 모습을 보여주셨다.

이후 다른 코드에서 이와 비슷하게 진행해보려고 했으나 합성 컴포넌트와 컨테이너 패턴에 대한 이해가 부족해서 당장 적용하지는 못했고 로그인/회원가입 기능을 구현하면서 리팩토링을 했는데 가능한 비즈니스 로직과 뷰 로직을 분리하는데 초점을 맞췄다. 그리고 내부 요소도 추상화시켜서 로그인과 회원가입에서 공유하는 부분이 많이 있었는데

그 결과 이렇게 생긴 코드가
https://github.com/GangHyeokLee/hanghae99-front-commerce/commit/7dc742ac6e6859b1d18b5e7af386d0661e321a23#diff-5398e93fcf11b2ca16af33ab623e60bdcbf200391af9d6fe8f8cec9dc188b52c


이렇게 바뀌었다. onSubmit도 따로 뺄까 고민이었는데 오늘 조합 컴포넌트라는 레이어가 있다는 것을 알게됐고, 상태 레이어 - 훅 레이어 - 조합 레이어 - 뷰 레이어 이렇게 구성되게 만들면 좋다는 이야기를 듣고 onSubmit도 내일이나 모레 쯤 분리할 예정이다.
리팩토링에 너무 집중하지 말고 일단 엉망진창이라도 돌아가는 서비스를 만들고 나서 그 다음에 코드를 개선하는 작업을 하는게 낫다고 해서 그리고 실제로도 회사에서 기획이나 다른 팀에서는 내부 로직을 얼마나 잘 짰냐 보다는 돌아가는 서비스를 주는게 더 옳기 때문에 기능 구현에 집중해서 끝내고 나중에 리팩토링 할 예정이다.

profile
사용자불량

0개의 댓글