핀터레스트 클론 코딩하기
클론코딩 주간에 팀장을 하게 되었다.
우리 팀은 핀터레스트 클론 코딩을 하게 되었는데
프론트엔드 입장에서는 단순히 보여지는 부분들도 상당히 도전적인 부분들이 많았다.
특히 이미지 목록들이 폭은 같지만 크기에 따라 다른 높이로 배열되는 masonry 레이아웃으로 배치되며
스크롤을 내릴 때 이미지가 추가되어야 하는 부분들은
결국에는 일반적인 무한스크롤 형태의 게시글 목록을 조회해오는 부분과 같지만
그 UI적인 것 자체가 도전이었다.
중요하게 여겼던 것은
결국 핀터레스트처럼 저 형태로 보여지게 하는 것 그 자체를 반드시 완성시키자라는 마음을 가지고 개발했다.
채팅, 알림 등을 챌린지 기능으로 넣긴 했지만
가장 중요한 것은 이미지 게시글을 업로드 할 수 있고 목록으로 잘 보여지게 하는 것이었다고 생각한다.
핀터레스트라는 주제가 정해지자마자 저 레이아웃을 표현해줄 수 있는 라이브러리부터 찾아보았었다.
다행히도 네이버에서 만든 npm 라이브러리가 있었고 문서나 스토리북이 잘 구성되어있어서
적용하는데는 크게 어려움이 없었지만
역시나 외부의 것을 사용하다보니 로직적으로 좀 더 완벽하게 구성하고 싶었는데 처음에 어려움이 있었다.
프로젝트 완료 기간까지 동작은 잘 했지만 분명히 사용하다보면 어떤 오류가 나올법한 상황이 충분히 있었을 것으로 보였다.
너무 많이 렌더링되어 성능적으로 문제가 발생한다던가 스크롤했을 때 안나온다던가 하는 문제가 없을거라 생각하진 않았다.
중요하게 여기고 싶었던 것은
사람
늘 중요하게 여기는 것은 사람이었다.
사실 이전에 팀장은 아니었지만 프로젝트를 수행하는 사람 그 자체를 잘 관리하지 못해 매우 크게 실패해보았다.
팀원의 상황을 늘 파악할 수 있어야 한다고 생각했고
저번주에는 작게나마 그라운드 룰, 팀 협업 등 사람과 관련된 것들을 먼저 제안하고 같이 만들어가며 시작했던 것 같았다.
이번에는 뭔가 그러지 못했다.
프론트엔드는 단 두명이라 큰 룰이 없어도 개발 그 자체에는 어려움이 없었지만
팀 전체적으로 보았을 때 생활 패턴이나 성격, 실력, 의지, (항해를 하는) 목적이 모두 다른 듯 했고
모두를 쉽게 하나의 팀으로 모을 수 없었던 것 같았다.
그런 면에서 미니 프로젝트이긴 해도 팀장으로써 본인의 역할 수행을 실패했다고 할 수 있다.
코드
특히 같은 파트(프론트엔드) 끼리는 서로가 어떤 기능을 구현하기 위해 어떤 코드를 작성했는지 파악하고 있어야만 한다고 생각한다.
그러기 위해서는 코드나 파일의 위치가 구조적으로 일관성이 있어야 하고 코드 그 자체도 사람이 읽기 좋아야 한다고 본다.
구체적이고 어려운 룰을 제시하지는 않았지만 적어도 코드를 작성할 때 다른 사람이 읽기 좋은 지,
변수 또는 상수는 필요할 때만 만들었으며 의도를 명확하게 나타내고 있는지,
함수는 본인의 책임을 잘 대표하는 이름을 가지고 있으며 역할이 너무 많지는 않은지
등을 생각해보면서 개발하자고 제안했다.
컴포넌트를 작성할 때의 코드 구조 순서도 규칙을 정했고
간단한 디렉터리 구조, 파일,폴더명 규칙 등도 정했고
팀원 분이 제안해주셔서 import 순서도 규칙으로 어느정도 정했다.(시간 관계상 지키지 못했다 ㅠㅠ)
저번 주에 진행했을 때 styled component 이름이 너무 중구난방이었던 것이 기억나
나름대로 styled-component 네이밍 룰도 만들어 진행했었는데 이 부분은 매우 잘 지켜졌었던 것 같아 기뻤다!
물론 지정했던 룰 자체가 적절한지는 다시 생각해보아야 할 것 같다는 생각이 들었다.
### Styled~~ 붙이기 금지, ~~Wrapper 금지
> 예시
div 태그: '컴포넌트명'Box
section 태그: '컴포넌트명'Section
ul 태그: '컴포넌트명'List
li 태그: '컴포넌트명'Item
p 태그: '컴포넌트명'Paragraph
span 태그: '컴포넌트명'Span or '컴포넌트명'Text
**`div`는 반드시 지키도록 하며** 역할과 의미만 잘 부여되면 됨
<br>
### 최상위 컴포넌트에는 `컴포넌트명`+`layout`을 붙임좀 급하게 찾아보고 룰을 지정했던 터라 적절해보이진 않았는데
팀원 분이 워낙 코드도 깔끔하게 작성하시고 코드 구조에도 신경쓰시는 분이었어서
styled-component 컴포넌트 네이밍도 무슨 역할을 하고 있는지 명확하게 작성하신 편이었어서
읽기 좋았던 것 같았다.
결국 중요한 것은
본인인 것 같다.
나부터 잘하고 나부터 정확하게 판단할 수 있어야 하고 나부터 무엇이든 할 수 있어야 한다.
이번 프로젝트 기간 동안 본인의 나약함에 대해서 너무 뼈저리게 느낄 수 있었다.
앞으로는
이제 최종 프로젝트를 부팀장이라는 역할로 진행하게 된다.
사실 자신없지만
부족함에도 부팀장 역할을 제안해준 팀장과 같이 노력해나가려는 팀원들에게
가치를 증명해보이기 위해 많은 노력을 하고자 한다.
