[메인프로젝트] 버튼 만들기 + 멘토링 회고

버튼 컴포넌트 만들기

드디어 피그마로 세팅을 픽스하고 작은 컴포넌트 만들기를 시작했다.

가장 많이 쓰이고 기초적인 요소는 아무래도 버튼과 창이어서, 도시님과 각각 나누어 맡았다.

 

일단 Globalstyle에서 되도록 공통적인 스타일을 미리 정해두고, 각 페이지의 중간 단계 컴포넌트마다 사용하는 특징적인 형태에 맞춰 덮어썼다.

사용처 별 사용 방식을 생각해서 짜다 보니 생각보다 오래 걸렸다. props로 값을 받아 재사용시켜야 하는 경우도 있고, 데이터 배열에서 map 돌려서 텍스트를 넣는 경우도 있고..

이 단계에서 자연스럽게 페이지 구조와 컴포넌트 구조도 나누게 됐다.

 

* 검색한 것 : 버튼에 이모지 삽입하는 방법. 이모지도 결국 유니코드로 표현되는 것이라 텍스트로 취급하면 되는 거였다.

https://dev.to/beumsk/how-to-add-emoji-s-in-your-website-using-html-css-or-javascript-4g6g

---

피드백

일주일 간 궁금했던 부분들을 모조리 질문했다.

기획 관련

- 기능 요구사항 정의서와 화면정의서가 기본을 잘 지키고 있다. 우선순위도 상/중/하로 잘 나뉘어 있어서, 개발 순서도 이 순서를 따라가면 무리 없겠다.

기능 관련

- 캘린더 제작과 무한스크롤 기능에 도전하는 것이 아주 좋다. 현업에서 많이 쓰기 때문에 여기서 만들어보고 가면 좋겠다.

- sorting이 있는 것은 좋지만, 아무래도 검색 바가 없는 것이 아쉽다. 새로운 기능을 많이 시도하기 위해 뺀 것이라면 프론트에서 sorting 이후 단계에서라도 검색을 구현해 주면 좋겠다.

- 위젯을 props를 통해 상위에서 커스텀 가능하도록 구현한 것이 좋다. 재사용성이 매우 높아져서 현업에서도 자주 쓴다.

뷰 관련

- 뷰 수가 상당히 적고 눈에 보이는 게 많이 적은 편이기는 하다. 하지만 한 뷰에 많은 기능이 압축되어 있어서 큰 마이너스는 아니다. 후순위로 미루어져 있는 마이페이지까지 모두 구현할 수 있으면 좋겠다.

- 정렬 시 display:flex를 너무 작은 부분까지는 쓰지 않는 것이 낫다. line-hight나 margin 등 더 기본적인 방법을 먼저 생각해 보면 좋다.

폴더구조 나누기

- 컴포넌트별로 세세하게 폴더를 나누는 것은 좋은 습관이라고 본다. 협업하거나 리팩토링할 때 하려는 것이 무엇인지 의도가 한 눈에 보이고, 기능을 찾아가기도 쉽다.

- 특정한 컴포넌트에 속하지 않고 여기저기서 자주 쓰이는 것들은 widget 폴더를 따로 만들어서 관리하는 것이 좋다. 그리고 쓰이는 곳에서 조금씩 커스텀이 필요하다면 그것도 가능하도록 유연하게 만들면 좋다.

댓글/타임라인에 이미지 업로드

- 거창한 에디터 라이브러리를 생각하면 어렵다. 그냥 사용자는 파일 첨부 기능으로 이미지 파일을 업로드하고, 그걸 받아서 뷰에 그릴 때는 정해진 양식에 맞춰 보이도록 하드코딩해도 충분하다.

---

프리프로젝트 회고에서 개선하고 싶다고 생각했던 많은 것들이 벌써 많이 개선된 것 같아서 기분이 좋다.

기본적인 기능 구현과 코드 품질 높이기를 우선하면서 타입스크립트를 놓은 건 아쉽지만, 그걸 놓고 보니 더 집중했어야 하는 다른 것들이 눈에 보여서 더 잘 됐다 싶다.

사실 40분짜리 강의 하나 잡고 차려진 걸 집어먹었을 뿐이라 좀 민망하기도 했지만, 남의 코드 잘 가져다 붙이는 것도 쉬운 건 아니라고 스스로 칭찬해줬다.

이제는 처음하는 것이라고 겁먹지 말고 지금 하는 것처럼 필요한 걸 잘 집어다 먹으면 되겠다.