1two13 / wanted-10th-3

원티드 프리온보딩 기업과제

Background GIF by kah on Pinterest.

 

💡 A Quote:

💻 My Tech Stack:

📖 Read My Blogs:

  

🏆 My Stats:

     

wanted-10th-3's Issues

수정 사항 및 이유

1. CSS 정리

코드의 가독성을 높이고, 유지보수를 하기 위해
App.css에 전부 작성되어 있던 코드들을 컴포넌트 별로 나누었습니다.

2. 파일 확장자를 ts, tsx로 변경

정적 타이핑 및 에러 핸들링을 위해
기존에 JS로 작성되어 있던 코드들을 TS로 변경했습니다.

3. 여러 컴포넌트에서 동일한 Context 사용할 수 있도록 useContext 사용

여러 컴포넌트에서 사용되고, props로 넘겨 주던 state를 useContext로 관리해주었습니다.

depth가 2이상으로 깊어지는 케이스도 있었고,
동일한 state를 사용하여 계속 업데이트를 해주는 과정이 여러 컴포넌트에서 반복되고 있었기 때문에
여러 컴포넌트에서 동일한 Context를 사용할 수 있게 해주는 useContext를 사용하는 것이 효율적이겠다고 판단했기 때문입니다.

4. 상수 파일 생성

반복되는 코드를 줄이기 위해
constants.ts 파일에서 import하여 사용했습니다.

5. hook 생성

컴포넌트 로직을 분리하고, 재사용성을 높이기 위해
useContext, useDebounce, useFocus, useThrottle 등의 hook을 생성했습니다.

6. 검색어 입력마다 API가 호출되지 않도록 API 호출 횟수 줄이기

useDebounce custom hook을 생성하여 검색어에 debounce를 적용하였고,
사용자가 검색어 입력을 시작한 후 500ms동안 입력이 없으면 API가 호출되도록 구현했습니다.

검색어를 입력할 때마다 api가 호출되지 않기 때문에 UI에서 발생하는 불필요한 반응을 줄일 수 있고,
리소스 사용을 최적화할 수 있기 때문입니다.

7. 검색 결과 무한 스크롤 구현 및 최적화

검색어가 입력되면 dropdown에 검색 결과를 10개씩 받아와 무한 스크롤로 출력되도록 구현했습니다.
useThrottle custom hook을 생성하여 무한 스크롤 구현 시 검색 결과 출력 API 호출을 최적화 했습니다.

[refactor] Todo를 삭제할 때 Optimistic Update 기법을 사용하여 UI 개선

이전 코드 작성 방식

서버와 통신 후에 return 된 값을 화면에 보여줬습니다.

코드를 수정한 이유

Todo를 추가/삭제, 페이지를 새로고침 할 때마다 서버와 통신을 하고,
200 상태 코드를 받은 후에 화면에 데이터를 보여주기 때문에 로딩이 길어지는 문제점이 있었습니다.

화면에 먼저 데이터를 보여주고, 서버와 통신을 함으로써 UI를 개선해주었습니다.

수정된 코드 작성 방식

Optimistic Update 기법을 사용하여 화면에 먼저 데이터를 보여주고, 서버와 통신을 하도록 코드를 개선했습니다.

추가 수정이 필요한 부분

현재 Todo를 삭제하는 경우만 코드를 수정했습니다.
Todo를 추가, 페이지를 새로고침 하는 경우도 수정이 필요하지만, 그럼 UI도 변경이 되어야 하는 문제점이 있어, 보류 중에 있습니다.

[refactor] 여러 컴포넌트에서 사용되고, props로 넘겨 주던 state를 useContext로 관리하기

이전 코드 작성 방식

아래의 state는 여러 컴포넌트(InputTodo, TodoList, TodoItem)에서 사용되고 있었고,
상위 컴포넌트가 하위 컴포넌트에게 state를 props로 전달해주는 방식으로 코드가 작성되어 있었습니다.

const [todoListData, setTodoListData] = useState([]); 

코드를 수정한 이유

depth가 2이상으로 깊어지는 케이스도 있었고,
동일한 state를 사용하여 계속 업데이트를 해주는 과정이 여러 컴포넌트에서 반복되고 있었기 때문에
여러 컴포넌트에서 동일한 Context를 사용할 수 있게 해주는 useContext를 사용하는 것이 효율적이겠다고 판단했습니다.

수정된 코드 작성 방식

1. useContext라는 hook을 생성하여 전역적으로 Context를 사용할 수 있도록 해주었습니다.
2. InputTodo, TodoList, TodoItem을 자식 컴포넌트로 가지고 있는 Main 컴포넌트를 useContext hook으로 감싸고 value 값으로 state을 전달하여 여러 컴포넌트에서 동일한 Context를 사용할 수 있도록 해주었습니다.
3. props로 상태를 전달할 필요 없이, useContext를 사용하여 state를 관리하고, 사용할 수 있게 되었습니다.