[개인 프로젝트]To_Do_List 회고

이창훈·2022년 12월 6일

회고

목록 보기

1/9

To_Do_List

깃허브 : 링크
배포링크 : 링크

1) ✨ 프로젝트 개발 동기

원티드 프리온보딩 선발과제였던 API를 사용하였습니다.
선발과제에서는 사용 가능한 라이브러리의 제한이 있었습니다. ~~React-Query,Next.js~~

프리온보딩 수료 이후 라이브러리 제한 없이 그동안 학습한 역량을 총동원하여 가장 근본적인 프로젝트인 ToDoList를 완성하였습니다.

코드스테이츠 메인 프로젝트에서 얻은 피드백

optimistic update => React-Query를 사용하여 보완
DarkMode의 상태를 컴포넌트들마다 직접 입력했던 부분 => ThemeProvider로 보완
window.alert으로 상호작용했던 부분 => Modal창을 직접 만들어 사용

특별히 염두한 부분

컴포넌트들을 기능에 맞게 잘 분리 할 것
custom hook을 이용한 코드의 캡슐화

2) 🚀 개발 의도

1. Next.js를 사용하지 않고 CRA을 사용한 이유

CSR이 SEO에 취약한 것은 사실이나 TODOLIST의 개인정보를 보호하기 위해 SEO가 일어나지 않게끔 하기 위해 CRA를 선택하였습니다.

2. alert사용을 지양하고 modal을 만들어 사용한 이유

window.alert를 이용하여 빠르고 간단하게 프로젝트에 적용할 수 있는 장점이 있으나, 대화 상자가 떠있는 동안 스크립트가 일시정지하여 닫기전까지 다른 모든 인터페이스에 접근 할 수 없습니다.
또한 위치, 모양 등을 스타일링이 불가능한 단점이 있습니다.
이번 프로젝트에서는 더욱이 mobile first design strategy를 지향하였기 때문에 모바일 환경에서 손가락을 접근하기 쉬운 위치에 모달창을 위치하도록 커스터마이징을 하고 싶었기 때문에 직접 modal 컴포넌트를 만들어 상호작용하였습니다.

3) KPT 회고

Keep

1. Custom Hook을 사용하여 캡슐화 및 코드의 중복을 개선했다.
2. mobile first design strategy를 지향하며 반응형 웹 어플리케이션으로 제작하였습니다.

Problem

1. 모달 상태 관리
-로그인/회원가입 페이지에서는(/) 모달의 상태가boolean으로 표현할 수 있었다.
-하지만 todo(/todo)페이지에서는 모달의 상태가 3가지가 필요했다.
-'logout'(로그아웃 하시겠습니까?), 'submit'(제출하시겠습니까?), 'delete'('정말 삭제하시겠습니까?')
-처음에는 '/'페이지에서는 boolean을 사용하고 '/todo'페이지에서는 위의 상태들을 숫자를 사용하여서 구분했다.
Try
-useState를 사용하여 boolean 또는 string을 받도록하여 custom hook을 만들어 해결하였다.
2. 모달의 위치가 모바일 상태에서 입력창을 누를 경우 키보드가 올라오면서 모달을 가리는 현상이 발생했다.
-ToDo가 많아서 스크롤이 생기더라도 수정, 삭제 버튼을 누를 경우 화면의 고정적인 위치에 모달이 나타나도록 디자인했다. 마찬가지로 ToDo입력시 나타나는 모달도 화면의 고정적인 위치에 나오도록 하니 모바일 환경에서는 input을 터치할 경우 화면 아래에서 키보드가 올라왔고 모달의 아랫 부분을 가려버렸다.
Try
-미디어쿼리를 이용하여 스크린의 너비에 따라 모달이 뜨는 위치를 달리하였다.
-엄지로 모달을 컨트롤하기 적합한 위치에 모달이 나오도록 하였다.

-키보드가 올라와야 하는 모달의 경우 모달의 위치를 조금 더 위쪽에서 나오도록 변경하였다.

4) 마무리

코드스테이츠 부트캠프, 원티드프리온보딩을 통해 학습한 React 역량을 총 동원하여 만들었다.
TypeScript, React-Queyry, Recoil(상태 관리 라이브러리), DarkMode,반응형 웹, custom hook
앞으로의 학습 목표, 도전해보고 싶은 기술 스택
- React-Query를 이용한 무한 스크롤
- 카카오맵, 네이버지도 API를 이용한 프로젝트(모바일 청첩장 프로젝트로 진행중)
- 구글 지도 API를 이용한 GPS이용 프로젝트
- Next.js의 더 많은 기능들을 사용한 프로젝트

5) 🔥new!! 음성 인식 기능을 추가했다!

2023년 03월 28일 작성

제작 당시에는 TypeScript, 커스텀 훅, React Query, 커스텀 modal과 같은 새로 학습한 요소들을 적용해 볼 수 있는,

로그인, 회원가입 기능이 존재하고 CRUD 작업을 할 수 있는 적절한 API를 얻었다는 기쁨에 TypeScript를 연습했던 프로젝트였다.

하지만 이번에 포트폴리오를 제작하면서 To Do List 프로젝트에 대한 아쉬움이 남았다.

그래서 음성 인식으로 할 일을 추가할 수 있는 기능을 추가하기로 했다.

음성 인식 은 우리 39기 동기들에게 상징적인 존재이지 싶다.

계산기 기능 구현에 버거워 하고 있을 때 음성 인식으로 모두에게 충격을 가져다준 환민님

"언젠가 나도 음성 인식과 같은 특별한 기능을 넣어 보고 싶다." 다짐 했었다.

5-1) 음성 인식 구현

1) 음성 인식 버튼을 누르면 내가 말한 텍스트가 입력 창에 담겨 있도록 하자

기존의 'todo'는 "react-hook-form" 라이브러리를 사용하여 입력상태 관리했다.

그랬다보니 다른 컴포넌트에서 'todo'를 변경할 수 없었다. 따라서 'todo'를 전역에서 상태 관리를 하기로 코드를 변경했다.

음성 인식으로 todo를 추가하는 절차
1. Play버튼을 클릭하여 SpeechRecognition.startListening 이벤트를 시작시킨다.
2. 음성을 인식의 결과로 transcript(string)를 얻는다.
3. useEffect를 통해 전역 상태 todo를 변경시킨다.
4. TodoForm컴포넌트에서 +(할 일 더하기 버튼)을 클릭하면 모달이 열리고 '네'버튼을 누르면 할 일이 추가된다.

헤이 빅스비, 기가 지니 처럼 특정 단어를 감지했을 경우 자동으로 할 일을 자동으로 작성하는 코드를 작성해봤다.

하지만 '화분정리입력'을 말하면 split을 통해 ['화분정리',''] 이렇게 나눠질 경우
화분정리가 할 일에 추가되는데 까지는 성공했으나, 인식을 성공하는 확률이 너무 낮았다.

그래서 항상 성공하는 내가 말하는 단어를 input창에 올려 놓는 기능까지만 구현하기로 했다.

6) todo 로 변수를 통일하고 그 과정에서 마주한 컴파일 에러

프로젝트 내에서 todo를 경우에 따라 toDo, ToDo, todo이렇게 통일되지 못한 모습을 보였다.

그래서 앞 문자를 대문자로 사용해야 할 경우에는 Todo, 아닐 경우에는 todo를 사용하기로 통일 했고 프로젝트 전체 코드를 바꿨다.

그리고 다시 배포하는 과정에서 에러를 마주했다.

Failed to compile.
Module not found: Error: Can't resolve '../components/Todo/TodoForm' in '/vercel/path0/src/page'
Error: Command "npm run build" exited with 1
BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

Error: Command "npm run build" exited with 1

"npm run build" 명령어 실행 중에 오류가 발생했다는 것을 나타냅니다.

"exited with 1"은 프로세스가 종료되었음을 나타내며, 종료 코드 1은 일반적으로 "일반적인 오류"를 나타냅니다. 따라서 "npm run build" 명령어가 실행되는 동안 어떤 오류가 발생했을 것으로 추측됩니다.

실제로 무엇이 잘못되었는지 파악하려면, "npm run build" 명령어를 실행하는 과정에서 출력된 로그를 살펴보는 것이 좋습니다. 로그에서 어떤 오류가 발생했는지 확인하고 해당 오류를 해결해야합니다. 일반적으로 이러한 종류의 에러는 종류가 다양하기 때문에, 로그를 읽어보는 것이 최선의 방법입니다.

BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

이 에러는 빌드 도구에서 "npm run build" 명령어 실행 중에 오류가 발생했다는 것을 나타내며, 앞서 말한 것과 동일한 오류입니다.

"BUILD_UTILS_SPAWN_1"은 빌드 도구에서 생성된 로그 메시지입니다. 일반적으로 이러한 종류의 메시지는 빌드 도구에서 실행되는 명령어의 출력을 기록하기 위해 사용됩니다.

따라서 "npm run build" 명령어 실행 중에 오류가 발생했으므로 해당 오류를 해결해야합니다. 위에서 언급한 것과 같이, 로그를 확인하고 어떤 오류가 발생했는지 파악한 다음 해당 오류를 수정해야합니다.

'module not found' error?
vercel 공식 Guides How do I resolve a 'module not found' error?

npm run build를 통해 빌드 된 파일에서 선언된 경로에서 파일을 찾을 수 없을 때 나타나는 구문 오류이다.

이런 오류가 발생하는 이유는

파일 시스템에서 대소문자를 구분하지 않지만, vercel 배포 에서는 대소문자를 구분하는 파일 시스템을 사용하기 때문이다.
이 부분을 읽고 뭔가 쎄함을 느꼈다. todo를 변경하는 과정을 마치고 로컬 환경에서는 아무 문제 없이 작동했다. 그리고 어떤 이유에선지 파일명을 Todo.tsx로 변경했지만 커밋 과정에서 이 변경이 적용되지 않은걸 확인 할 수 있었다.