🎄 성장일지 4.0

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

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

🌳 (1.0)키워드<br/> 최대한 간단하게 정리, 추후에 보면서 스스로 설명<br/> 🍉 (2.0)경험 위주로<br/> 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성<br/> ❄️ (3.0)정해진 템플릿에 맞춰서<br/> 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성<br/> (3.1)230102부터 시작되는 학습에 관한 내용 추가<br/> (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!<br/> 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!<br/>

🔑 오늘의 학습 키워드

밀렸던 고민의 흔적들을 한번에 업로드해보기

4.10(월)

고민 사항

1. 점점 깊어지는 폴더구조... 어떻게 관리할까..?

<img width="400" height="600" alt="스크린샷 2023-04-12 21 12 57" src="https://user-images.githubusercontent.com/86241737/231453490-302ac4d6-7b90-4072-827a-24a1874c1e29.png">

위와 같이 폴더 하나 당 MVC 패턴으로 컴포넌트를 구현하다보니, 점점 폴더가 너무 깊어지는 단점이 있다. Model, View, Controller(여기선 Component)마다 폴더를 만드는 방법도 있겠지만, 오히려 컴포넌트 단위에서는 조금 지저분하더라도 Component단위로 하는 게 일단은 나은 것 같다!

4.11(화)

고민 사항

1. 왜 계속 msw가 import 되지 않는 에러가 발생할까..?!

정말 모든 조건 다 갖추고 공식문서에서 하라는대로 다 했는데... 계속 resolve failed msw 에러가 발생했다. 최근 release note(가장 최신인 v1.2.1)를 보니까 약 10일 전에 import msw 에러가 수정되었다라는 문구가 있는데... 이 문제인지 계속 되질 않는다. 그러다 대부분 react에서 msw를 사용하는 예제가 있길래 혹시나 해서 cra로 폴더를 만들고 거기에 msw를 설치하니, 아무일도 없다는 듯이 잘 mocking이 된다... 정확한 원인은 모르겠으나 일단 번들러의 유무가 차이를 만든 게 아닐까 싶다..!

2. 어디까지가 state고 어디까지가 props인가

정말 단순하게 생각하면 부모 컴포넌트에서 자식 컴포넌트한테 전달할 data는 props, 컴포넌트 자체가 갖고 있으면서 변경할 data는 state이다. 문제는 좀더 근본적으로 이 data를 어떤 컴포넌트에서 관리하고 사용할건데?에서 시작되는 것 같다. 그래야만 이걸 props로 전달할지, 혹은 state로 스스로 관리하게 할지 정할 수 있다. 또, 부모 컴포넌트에서 데이터만 다른 동일한 컴포넌트를 만들어야할 때는 무조건 props로 전달해야한다. 그래야만 같은 컴포넌트 클래스 혹은 함수가 다른 data를 인자로 받아서 생긴 게 다른 객체를 만들어낼 수 있기 때문이다!

4.12(수)

고민 사항

1. 각각의 element에 event는 어떻게 등록할까..?

처음엔 view에서 event 등록부터 핸들러 관리까지 전부하려 했다. view가 좀 커지겠지만, 그렇게 하는 게 좀더 직관적이고 편한 느낌..? 그러다 문득 리액트에서 onclick으로 전달하는 핸들러도 하나의 props 즉, 상태라는 생각이 들었다. 해서 component 단에서 핸들러를 메서드로 구현하고 이를 setState를 통해 전달하면 이 핸들러를 받아서 view에서 이벤트를 등록하는 방식을 사용하기로 했다. 이렇게 하면 지금 내가 구현하는 코드에서 component가 너무 커지는 느낌이지만, 이게 좀더 리액트 컴포넌트스럽게 구현한 것 같다.

📝 요약 및 하루 간단 회고

MVC 패턴으로 많이 고생했지만...(솔직히 이제는 안보고 싶...) 덕분에 개발에서 설계, 아키텍쳐, 디자인 패턴이 얼마나 중요한지 알게 되었다. 확실히 어떠한 규칙을 갖고 개발을 진행하니, 추후에 코드를 수정하기가 정말정말 편하다. 너무 크게 자유도를 해치면 안되겠지만, 적당한 범위에서 어떤 패턴대로 코드를 작성하는 방법들은 아주 유용한 것 같다.

오늘은 점심으로 마라샹궈를 먹었는데, 너무 매웠다. 지금 이 글을 적는 순간에도 속이 부글부글... 당분간 매운 건 피해야지.

오늘의 잘한 점

• MVC 패턴을 사용해서 미션들을 해결한 점
• 이 때, state로(정확히는 props로) 이벤트 핸들러를 전달하고 View에서는 이벤트 등록만 하게 한거!(역할 분리가 잘 된 느낌)

오늘의 보완할 점

• Flux 아키텍처 공부를 못했다. 내일부터 Flux 아키텍처 공부하고 직접 구현도 조금은 해보자!

참고

• 없음

undefined