정소영
디콰에 첫 로그를 올릴 때는 굉장히 낯설고 부끄러웠는데, 오히려 이렇게 올리고 나니 정리가 되서 좋다. 그리고 둘러보다가 좋은 글도 읽게 되어 굉장히 유익하다고 느낀다.
<역행자>에서 이런 얘기가 나온다. 경제적 자유를 얻고 싶다면 그 사람들이 모인 집단에 들어가면 된다. 꾸준히 나가다보면 저절로 물들게 된다고 나와있다. 디콰를 하면서 느끼는 게 그거였다. 개발자가 되려고 한다면 개발자들이 모인 집단에 들어가야 한다는 말이다.
처음 디콰에 글을 올릴 때만 해도, 낯설고 부끄러웠다. 글 올리기가 부담스러워서 우물쭈물 하기만 했다면 나 혼자 TIL을 마무리 하지 못한 채 쌓여만 갔을 것이다. 하지만 그 낯섦을 깨고 오늘 내가 한 개발 공부를 올리게 되면서 스스로 뿌듯함과 정리된 생각을 얻게 됐다.
덤으로 얻게 된 건, 현업 개발자들이 하는 고민, 공부, 관심기술 같은 것들을 둘러보게 되고 나 또한 그들의 정보를 얻어 시야(?)를 점점 넓힐 수 있게 되었달까. 여튼… 오늘은 디콰를 둘러보다가 ‘컴포넌트 분리’에 대한 좋은 블로그 글을 알아가서 굉장히 좋았다.
오늘의 로그는 아직 개발 진행형인 내용들이다.
homepage의 diaryItme을 grid와 list형식으로 보여주기
list와 grid일 때의 디자인은 각각 구현하였으나 컴포넌트 렌더링 과정에서 문제가 발생했다. 기존 grid상태의 뷰를 보여주는 컴포넌트는 db데이터를 받아와 화면을 렌더링하는 서버 컴포넌트였다.
이에 list라는 상태를 변화시켜 주기 위해 state를 사용하였으나, 이미 db데이터를 사용하고 있어 클라이언트 컴포넌트 변경이 안된다는 에러를 발생시키고 있다. =_=…. 고 한다…
이곳저곳에 있는 modal을, hooks으로 만들기를 시도했다.
이미 다 구현해놓고, 공통화를 한다는 건 참 힘든 일인 것 같다ㅋㅋㅋㅋ ’일단 공통인 부분을 찾아보자!’ 해놓고 코드부터 손을 댔는데, 한참을 헤멨다. 하나를 고치면 하나에서 에러가 나고, 공통인 부분을 찾았는데 모두 다 똑같이 생긴 모습은 아니어서 어디까지 공통 컴포넌트로 구현할 것인가에 대한 선택도 해야 했다.
교통 정리가 필요했다. 코드를 보면서 구현을 바로 하는 게 아니라. 각 모달이 어떤 기능과 형태를 가지고 있는지 정리를 먼저 해봤어야 했다
어디까지 공통 컴포넌트로 만들 것인가?
모달 디자인을 공통으로 만들 것인가? 나눌 것인가? ( 크게 두 디자인의 모달이 있다. )
모달의 공통기능
- 버튼을 클릭하면 모달이 생긴다- 배경( 검정 반투명 ) 과 Box 형태가 같다.
- 기능을 하는 버튼들이 있다.
- 취소하기 버튼 → 모달이 꺼진다.
- 배경을 클릭해도 → 모달이 꺼진다
모달의 다른 기능
- 모달 다자인이 크게 두 종류로 구분 ( 버튼리스트 / input+버튼 )- input + 버튼 디자인 모달
⇒ title / 버튼 공통 ( 함수 기능 )
⇒ 입력 부분은 차이
정리의 결과
hooks을 생성해 전체적인 공통 기능인 모달 on/off를 관리하는 state및 함수를 만들고, ModalForm 컴포넌트를 생성해서 배경과 Box는 모달 공통 style로 구현했다. 그리고 hooks을 만들어 모달 공통 기능 on/off와 그를 관리하는 state 및 함수를 구현했다.
ModalForm과 hooks에 있는 함수를 연결해 basic-Modal을 구현함. 빨간 네모는 모달 안의 children을 받아와서 ..어찌 해보면 될거 같다. 여러 가지 모달의 형태가 나올 수 있을 것 같지만 그건 내일의 나에게 맡긴다.
