진행되고있던 프로젝트에 합류한다는게 얼마나 힘들고 적응하는게 어렵다는걸 이번에 깨달았다. 폴더 구조 부터 server에서 사용할 action을 나누어 넣고 사용하는것 등등 여러 처음보는 방법들로 되어있는 구조들이 너무 재밌고 새롭게 느껴졌다.
폴더구조와 패턴에 대한 생각
재사용성을 높이면서 가독성을 높인다.. 생각 보다 두가지가 많이 다르다... 처음에는 재사용성을 높인면서 만드는 컴포넌트를 사용하면 페이지에서있는 코드들은 가독성이 좋지 않을까?라는 생각을 했는데 실제 컴포넌트로 나누어 작업을 하다보니 오히려 컴포넌트가 너무 많은 prop를 사용하고 넘기때문에 그저 책임 전가 밖에는.. 정해져있는 폴더구조가 아닌 알잘딱깔센으로 코드를 잘 나누어 해야된다.. 아직은 사이드 프로젝트 레벨에서 복잡한 코드 atomic pattern , FMC pattern 등등 여러 패턴을 어떻게 사용해되는지 판단이 안된다. 해당 프로젝트는 페이지,컴포넌트,엔티티로 나누어져있고 그안에 또다른 컴포넌트들과 액션, 타입 등으로 나누어져있다.
페이지: 실제 라우틴되는 페이지들
엔티티: 페이지에서 사용되는 컴포넌트
컴포넌트: 공용 컴포넌트 (Feat. shadcn)
온보딩 모달 그런데 대화창을 곁들인
처음 맡게된 부분은 온보딩을 할때 대화창 처럼 나오는 모달을 구현하는것이다.
사실 폴더구조를 이해하고 적용하기까지 이틀, 스토리북 간단한 사용법 하루 정도 걸린것같다. 실제 구현하는데에는 시간이 많이 걸리지는 않았다. 처음에는 만들어진 폴더구조를 따라갈려 해서 맞는 폴더구조에 넣었지만, 실제 사용되는 페이지에 컴포넌트로 넣는게 맞다고 판단되었다.
대화 메신저 처럼 만들어 버튼을 누르면 다음 대화로 넘어가는 온보딩을 해주는 기능
대화는 delay를 setinterval로 주고 => setTimeout되면 버튼 활성화 => 반복
원하는 만큼 기능은 잘 작동하지만 여기서 끝이 아니다,
원하는 만큼의 리팩토링을 하고싶어!
마음만큼은 최적의 코드를 만들어서 새로 만나는 팀원들에게 자랑하고싶었다. 하지만 인생은 실전이다 애송이. 기능 자체도 복잡하지 않고 따로 서버 액션도 필요없는 기능 이였지만 그래도 멋있게 만들고 싶어 여러 방식을 시도해보았고 제일 괜찮다고 생각되는 방법으로 구현하였다.
팀원들의 리뷰 그런데 고민을 곁들인
당연히 여러 오타 또는 불필요한 부분들이 있어서 팀원들이 짚어주었고 쉽게 수정할수있었다 (예: 괄호 생략, 스타일 컬러코드 설정되어있는거 쓰기)
하지만 문제 발생! 컴포넌트로 나누지말고 JSX Element로 하드코딩.
처음에는 무슨 말인지 몰라서 재차 물어보았다.
컴포넌트로 나누어서 props로 className까지 받은 데이터로 컴포넌트를 생성해서 사용하는것이 아니라 아에 element로 만들어서 넣어서 사용.
대화 내용은 하드 코딩으로 들어가있다
- 한줄에 폰트 두께가 달라 className,
- 리스트이면 번호를 넣어주는 불린
- 아이콘 위치 && 아이콘
같은 parameter들이 길어지고 많아지면서 하드코딩이 하나의 엄청 긴 배열이 되었다.
처음에는 " 오 그러면 엘레멘트로 넣으면 조금 더 깔끔할까?" 바로시도해보았지만 생각보다 복잡했다 엘레멘트가 그러면 몇개가 필요한거여.. 데이터만 가지고 만들었을때 분명 넘기는게 많았지만 그만큼 사용할때의 넘기는 코드는 간결했다. 해당 고민은 계속 하겠지만 내가 구현한 방식으로 남겨놓기로 결정.
마무리?
이제 기능하나 끝났다고 생각하는 순간. 아차 온보딩을 계속해야되나 ? 한번만 하면되지않나?
그 하루동안 안보기 기능 같이 쓰면 안되나?
-> 거의 로컬 스토리지의 저장해서 사용 하지만 처음만 보여주면 됨
그럼 처음가입하는 유저라는 판단을 뭘로 할까?
기준들을 여러가지이다
- 가입일
- 추가적인 값 [새로운 유저? : 불린 ]
- 특정 데이터 (질문 생성 값들이 있는지,등)
글계속쓰자 다음 이시간에 계속....
