230713(목)

🚤 성장일지 6.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!
🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기!
🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기.

• 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자

🌈 오늘의 감정

비가 많이 오는 날 조용히 노래 틀어놓고 코딩하는 건 참 즐겁고 행복하구나~

🫧 오늘의 고민

• ReactDOM.createPortal로 만든 component에 어떻게 복잡한 props를 전달할 것인가?
• 프로젝트 MVP를 어떻게 잡을 것인가?
• 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하고 자식 컴포넌트에서 이를 state로 두어 변경하는 건 좋은 방법인가?
  • input을 변경하는 것이니 순수함수에 위배되는 게 아닌가?

☀️ 오늘의 경험

ReactDOM.createPortal로 만든 component에 복잡한 props 전달하기

portal을 통해 만든 모달 창에서 삭제 버튼을 누르면 특정 동네를 지우는 기능을 구현해야했다. UI적으로는 모달 구현은 어렵지 않았다. 헌데 특정 동네를 지우기 위해 그 동네의 id 값을 가져와서 filter 처리해야하는데, 모달을 위해 구현된 portal 컴포넌트에 동네 id 값을 전달할 방법이 없었다. 고민하던 끝에 선택된(삭제할지말지를 위해) 동네의 id를 state로 담고 그 state를 portal 컴포넌트의 삭제 버튼에 전달하는 방법으로 구현했다. 별거 아닌 것 같은데, 처음엔 왜 그렇게 헤매고 고민했는지…😂

프로젝트 MVP를 어떻게 잡을 것인가?

기획이 따로 없다보니 MVP를 어디서부터 어떻게 잡아야할지 알 수가 없었다. 너무 최소한의 기획만 하자니, 나중에 추가될 것으로 예측되는 기능 하나를 추가하는 데에도 꽤 많은 시간이 걸릴 것 같고… 그렇다고 규모를 키우자니 이게 MVP가 맞나..? 싶었다. 다시 말해 비즈니스 로직에 관한 MVP를 잡는 게 쉽지 않았다. 그래서 나는 일단 프론트엔드 개발자이기 때문에 UI에 관한 MVP를 잡기로 했다. 프로젝트의 UI를 구성하는 데에 필요한 컴포넌트를 먼저 구현하는 방향으로 갈까 한다. 근데… 디자이너도 없어서 일단 정말 최소한의 디자인으로 피그마를 그렸다.(ㅋㅋㅋㅋㅋㅋ) 개발하면서 디자인을 보완해가는 방식으로 해보려한다.

부모 컴포넌트에서 자식 컴포넌트로 props를 전달하고 자식 컴포넌트에서 이를 state로 두어 변경하는 건 좋은 방법인가?

처음엔 이렇게 하는 게 너무 흔하지만 순수함수를 위배하는 것 같아서 잘못된 것이라 생각했다. 헌데 생각해보니 props로 전달받은 값을 state로 두는 건 순수함수를 위배하는 게 아니라는 것을 깨달았다. 순수함수를 위배하는 건 props를 직접 변경하는 것이다. props를 직접 변경하는 것은 불가능하다. 해서 props를 state로 두고 setState 함수로 변경하는 것은 props 자체를 변경하는 것이 아니라 새로운 state를 만들어서 변경하는 것이기 때문에 순수함수를 위배하지 않는다.

🐾 오늘의 교훈

비 오는 날, 노래 틀어두고 개발하면 잘 된당.

기획자와 디자이너 없이 프로젝트를 시작하는 건 참 쉽지 않다. 그래도 이렇게 진행하는 방식도 재미있으니까..!

api 명세를 백엔드와 잘 맞춰놓는 게 얼마나 중요한지 알게 되었다. api 명세만 잘 맞았으면 금방 해결할 문제였는데, 프론트 로직 문제인 줄 알고 한참을 헤맸다… 애초에 이렇게 한참을 헤매야하는 코드인 게 문제일지도..? 🥲

redux를 안좋아하는 편이었는데(제대로 배운 적도 없으면서 🤪), 배우면 배울수록 뭔가 매력적이다. 조금 투박하지만 뭔가 열심히 상태관리하려고 노력한 흔적들이 보인다고 해야하나…ㅋㅋㅋㅋㅋ

🪵 참고

• 없음