🎄 성장일지 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/>

🔑 오늘의 학습 키워드

• Observer Pattern
• tsconfig
• 컴포넌트 별 상태 교환

4.14(금)

고민 사항

1. 기존 MVC 패턴 컴포넌트와 Observer 패턴 컴포넌트의 조화

단순하게 생각하면 둘 다 element 형식의 객체만 반환할 수 있다면 그 안에서 template을 만들든, 이벤트를 붙이든 등등 여러 작업을은 역할과 책임 부여만 잘해주면 다 될 것 같다. 문제는 하나의 부모 컴포넌트에서 다른 패턴으로 구현된 컴포넌트를 관리할 때일 것 같다. 데이터 전달 로직이 다르니까 조금 복잡해질 것 같다. 일단 배우는 단계니까 적용해보자. 아마도 MVC와 Obsever 패턴 간의 충돌은 크게 없을 것 같다.

2. tsconfig path 설정 오류

import 해오는 파일들의 상대경로가 너무 길어져서 tsconfig path 설정을 해주었다.

"paths": {
       "@src/*": ["src/*"],
       "@components/*": ["src/components/*"],
       "@styles/*": ["src/styles/*"],
       "@utils/*": ["src/utils/*"],
       "@types/*": ["src/types/*"],
     },      

헌데 이상하게, @types만 계속 에러가 발생한다.

<img width="689" alt="스크린샷 2023-04-14 09 57 18" src="https://user-images.githubusercontent.com/86241737/231914108-ab761683-ef83-40aa-a864-b0e4b71788b5.png">

처음엔 이유를 모르겠다가, 가만 보니까 @types 이름이 문제였다... 이렇게 지으면 다른 라이브러리의 타입을 가져오듯이 처리가 되어서 declare 파일을 찾게 되는 것이었다!!!! ex) @types/node 이름을 @custom-types으로 수정해서 해결!!!

3. 같은 계층의 컴포넌트끼리 서로의 상태를 변경하는 방법

같은 계층의 컴포넌트 A와 B가 있을 때, A의 View를 클릭하면 B의 상태가 변경되는 방법이 쉽지가 않다. 결국엔 서로의 공통 분모인 부모 컴포넌트를 통해야지만 가능할 것 같은데... 이 부분이 해결되어야 grid에서 list view로 전환되는 것을 구현할 수 있다. 좀더 고민하고 다양하게 시도해보자..!

undefined