[데브코스 16일차] 3주차 과제를 수행 중...

오마이갓... 과제만 하다가 오늘 강의를 하나도 못 들었다... 과제밖에 못했음... 과제를 하면서 커밋이 상당히 많았기에 (원래 이런건가... 나만 커밋 많은 것 아니겠지...?) 커밋을 좀 정리해두어야 할 것 같다. 들었던 생각, 고민을 같이 정리하면 좋을 것 같다.

📌 feat: TodoList.js 렌더링 구현

• TodoList 컴포넌트를 구현했습니다.

📌 feat: index.js 에 App 클래스 추가, 컴포넌트의 렌더링은 App이 담당하도록 모듈화

• index.js 파일을 만들어서 App 클래스를 추가했습니다. 이제 컴포넌트의 렌더링은 App이 담당합니다.
• TodoList를 모듈화해서 App 클래스 안에 추가했습니다.
• 이제 data는 index.js에서 보냅니다.
• TodoList가 data를 받기 위해 initailState 라는 파라미터에 배열 형태의 data를 받습니다.

📌 feat: Title 컴포넌트 구현

• Title.js에 Title 클래스를 추가했습니다. (나중에 Title이 Header로 이름이 변경됨)

📌 feat: TodoForm 컴포넌트를 구현하고 App에서 렌더링로직 추가

• TodoForm 컴포넌트를 구현했습니다.
• App에 TodoForm을 추가했습니다.
• App에서 onSubmit 이벤트를 받습니다. (나중에 TodoForm에 파라미터로 넘깁니다)

📌 refactor: 컴포넌트에 isInit이라는 플래그 추가, TodoList.js 내부 프로퍼티 네이밍 변경

• 각 컴포넌트 내부에 private 프로퍼티 #isInit이라는 플래그를 추가했습니다. (나중에 TodoList에서는 제거됩니다)
• TodoList에서 createElement로 생성되는 div 태그를 좀 더 직관적인 네이밍인 container로 변경했습니다.

📌 fix & feat: onSubmit을 App에서 TodoForm으로 옮김, 제출 시 input을 비우는 로직 추가

• form이 제출될 시 일어나는 submit이벤트에 대한 이벤트, 이벤트 핸들러를 TodoForm으로 옮깁니다.
• form에서 submit이 일어나면 input이 빈 값으로 초기화 됩니다.

📌 fix: isInit 플래그 삭제

• state가 변경될 때마다 렌더링이 되도록 setState를 추가하였습니다.
• TodoList에서는 state가 변경될때마다 렌더링이 되므로 isInit이라는 플래그는 필요가 없어졌습니다.

📌 feat: <할 일 추가> 기능구현 - TodoForm에 onSubmit 콜백함수 구현

• 할 일을 추가하는 기능이 구현되었습니다.
• TodoForm은 반드시 onSubmitCallBack이라는 콜백함수를 인자로 받아야 합니다. onSubmitCallBack은 TodoForm의 submit 이벤트 핸들러인 onSubmit이 일어났을 때, text를 인자로 받습니다.
• submit 이벤트 핸들러인 onSubmit은 외부에서는 사용되지 않을 것 같습니다. 그래서 #을 붙여 private으로 변경했습니다.

📌 refactor: App 클래스 분리, 모듈화

• src/component 폴더 아래에 index.js를 추가하여 component 모듈을 관리하도록 했습니다. 이렇게 되면 컴포넌트를 사용하는 쪽에서 src/component/index.js 에서 모듈을 통합하여 불러올 수 있으므로 효율적입니다.
• index.js에 있던 App을 분리했습니다.
• App을 분리하는 과정에서 initailize 메서드를 생성자 함수에서 render로 옮겼습니다. 그리고 isInit 플래그로 감싸주었습니다.

📌 fix & refactor: Title.js를 Header.js로 변경, params에 defaultParams 추가, App template 추가로 인해 각 컴포넌트의 target을 변경

• Title.js 보다는 Header.js가 네이밍이 더 적합할 것 같아 네이밍을 변경했습니다.
• 각 컴포넌트에 defaultParams를 추가했습니다. 그런데 이렇게 되면 사용하는 쪽에서 에디터 상에 프로퍼티가 보이지 않게 됩니다. (상관없는지? 관련 익스텐션이 있는지? defaultParams를 적용시키는 또 다른 방법이 있는지?)
• App에 템플릿을 추가해서 해당 태그 아래에 렌더링 되도록 변경했습니다. 이제 각 컴포넌트들은 #root에 appendChild 하지 않습니다. 계속 #root에 appendChild 하는 것보다 이런 식의 구성이 좀 더 유연할 것 같아 로직을 약간 변경했습니다.
• App의 initailize 메서드의 가장 첫 줄에 innerHTML을 통해 템플릿을 주입합니다. 이렇게 되면 템플릿이 이미 주입된 상황이므로 컴포넌트들이 렌더링을 할 수 있게 됩니다. 따라서 render로 옮겼던 initailize을 다시 생성자 함수로 옮겼습니다.

---

💡 오늘의 회고...

프로젝트 관련 회고는 위에서 다 했으니... 바닐라JS는 역시 재미있다. but 반성을 해보자면 해야할 다른 것들을 거의 못했다... 오늘 잠을 잘 수 있을지 모르겠다. 허허.. 강의는 천천히 봐야할 것 같고 일단 내일 있을 딥다이브 스터디 공부를 해야지...면접 스터디 관련 공부도 해야하고 함수형 프로그래밍 강의도 들어야 하는데... 😭