# 4/13 수요일

## 오전
- 수업

## 오후

- 2시 ~ 4시까지
- BB: 진행중이신거 마무리... 잘하자..
- Park: 배포

- 4시 부터 ? PR 날릴 준비

- 5시 까지 PR

## PR

### 🧐 어떤 생각으로?

- Git 관련 정리
- 한 주간 프로젝트를 진행하면서 느낀 불편함을 통해서 컨벤션, 템플릿을 수정, 삭제
- Components 폴더 구조
- 협업간 약속된 구조로 Component 들을 생성해야 어떤 depth 에 어떤 Component 가 있을 지 예상이 될 것이라 생각하여 폴더 구조에 대해서 의논
- BE 와 실제 통신을 axios 를 통해 시도
- 스토리를 기반으로 작성한 이슈들을 구현 시도

### 👍 잘했던 || 좋았던점

- `peact.createElement`
- 현재 컴포넌트가 `템플릿 리터럴` 을 반환하는 형태인데, 이와 같은 형태는 템플릿이 만들어 진 이후 `Element` 에 접근할 수 있어 `이벤트 등록` 같은 로직을 사용하기가 어려웠습니다.
- 간단하게 `tag` 를 만들면서 동시에 이벤트도 달아줄 수 있으면 좋겠다는 생각으로 `createElement` 같은 걸 사용해서 `Element` 를 만든 이후, 기존에 `innerHTML` 과 `템플릿` 안에 `템플릿을 반환하는 함수호출` 을 통해 최종적인 템플릿을 만들던 로직에서 `appendChild` 를 통해 `tag` 를 만들 수 있도록 변경하였습니다.

이전방식

function Hello() {
    return `<span>Hello World</span>`;
}

function App() {
    return `
        <h1>App</h1>
        ${Hello()}
    `;
}

### ❗️문제발생 then 해결한 방법

- `addEventAfterRender`
- `setValue`, `useEffect` 에서 사용하던 `setTimeout` 은 모든 템플릿이 렌더링 된 이후에 어떤 것이 먼저 호출되도 아직은 불편함을 못느끼고 있습니다
- 그런데 `addEventListener` 는 `setValue`, `useEffect` 와 순서가 섞일 경우 `Event` 를 달아줄 `Element` 를 찾지못하는 버그가 종종 발생했습니다
- 문제는 근본적으로 컴포넌트가 `템플릿 리터럴` 을 반환하고, 이벤트 리스너를 달아주기 어렵다는 것이기 때문에 `createElement` 같은 것으로 이벤트를 수월하게 달 수 있다면 해결될 수 있는 문제라고 생각했습니다.
- `useEffect`
- 저번 PR 에서 어느곳에서 `useEffect` 를 사용해도 문제가 없다 라고 말씀을 드렸던 것 같은데([1.3.1](https://github.com/codesquad-members-2022/todo-list/pull/86#discussion_r848135930)), `App` 에서 `useEffect` 를 쓴 이후 다른 컴포넌트에서 또 `useEffect` 를 쓸 때 `isMounted` 가 `true` 로 남아서 `useEffect` 안에 있는 `callback` 이 실행되지 않는 문제가 있습니다.
- 모든 데이터를 `fetch` 하는 것은 한번에 하는 게 좋다라는 말을 들어서 현재는 `App` 에서 모든 데이터를 불러와 문제는 없지만, 만약 `useEffect` 를 서브 컴포넌트에서 쓰는 경우에는 문제가 있기 때문에 해당 로직에 대해서 좀 더 고민해보겠습니다.

### ✅ PR 리뷰에서 개선한 점

- `setTimeout` Logic 에 대한 이름을 명시하여 함수의 동작을 예측할 수 있도록 해보았습니다.

- 프론트의 진입점인 `index.js` 에서 `App` 컴포넌트를 등록하는 과정에서 쓰이는 `Element` 탐색 API 를 클래스 사용에서 `id` 사용으로 변경했습니다.

- 현재 컴포넌트가 템플릿 리터럴을 바로 반환하는데, 템플릿 리터럴이 아닌 `HTMLElement` 를 반환하도록 하였습니다.

### 👋 다음 PR엔?

- 드래그앤 드랍 시작과 마무리를 할 수있도록..