230711(화)

🚤 성장일지 6.0

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

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

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

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

🌈 오늘의 감정

뭔가 많이 한 것 같으면서도 적게 한 기분..? 다행히 오늘 할 일을 체크한 기록이 있어서 자각할 수 있는 것 같다.

🫧 오늘의 고민

기존 confirm api 대신 modal component를 만들어서 사용하려 했다. 일단 구현은 했는데, state를 handle하는 부분을 어떻게 전달해야할지 고민이다. handle 함수에 특정 townId를 전달해서 어떤 로직을 처리해야하는데, modal component를 ReactDOM의 portal로 구현을 해둬서 전달할 방법이 떠오르지 않는다. 어..? 근데 지금 글을 쓰면서 왠지 해결 방법을 알 것도 같다. 어차피 portal을 이용해서 렌더링 되는 건 #modal-root니까 townId를 전달할 수 있는 위치에 portal을 위치시키면 될 것 같은데..?!

☀️ 오늘의 경험

ReactDOM.createPortal

처음엔 굳이 이걸 왜 사용하는거지..? 생각이 들었다. 헌데 portal을 사용하면 modal과 같은 컴포넌트를 렌더링할 위치를 지정할 수 있는 장점이 있다. 이게 왜 장점이냐면 실제 portal 컴포넌트가 위치한 곳에서 props는 전달받으면서 렌더링되는 위치만 다른 곳에서 할 수 있기에 부모의 position이나 z-index를 신경쓰지 않아도 된다. 또, modal이나 dim 컴포넌트같은 경우 어떤 특정 page나 component에서 렌더링되기보다 #root와 대등한 위치(?)에서 렌더링되는 게 의미적으로 맞기 때문에 portal을 사용하는 것이 좋다.

Redux

사실 리덕스 자체를 배우려고 하진 않았는데, 상태관리 라이브러리의 시초이기도 하고 React가 발표한 Flux 아키텍처에 대한 구현체라는 점에서 공부해보려고 한다. Redux의 가장 중요한 3원칙은 반드시 기억하고 있자.

1. 진실된 상태의 원천은 오직 하나여야한다.
2. 상태는 오로지 읽기 전용이어야 한다.
3. 상태 변화는 순수 함수를 통해 이뤄져야 한다.

🐾 오늘의 교훈

몰입하자. 나는 충분히 몰입할 수 있다! 몰입이 잘 안될 때는 생각해보자. 오늘 내가 죽는다면 그냥 침대에 누워 있을 것인지 조금이라도 뭔가를 하려고 할 것인지

🪵 참고

• Flux 아키텍처
• Redux
• ReactDOM.createPortal