구현 사항
- Todo List 서비스 구현
- 주어진 베이스 코드를 기반으로 하여 미완성 기능 완성, 기능 추가, 예외 상황 처리, 버그 수정
Points
- TypeScript
- 라이브러리 사용 (moment, ant design)
- React.memo()
- localStorage
Things I learned
-
타입스크립트를 쓰면 디버깅이 쉬워진다
타입스크립트를 써 본 것은 처음이지만 베이스 코드가 codesandbox에 주어져서, 그 곳에서 직접 작업을 진행할 때는 큰 어려움 없이 진행할 수 있었다. 그런데 코드를 깃허브로 가져와서 배포하려고 하자 문제가 발생했다. 여태까지의 습관대로 깃허브 레포를 클론하고 npm install을 했다가 일단 npm install 자체가 안 되어 멘붕. 컴파일시 오류가 우수수 쏟아져 계속 멘붕... (포스팅 하단에 발생했던 오류와 해결을 따로 정리한다.) 타입스크립트가 만나자마자 좀 싫어지려는 순간, 타입스크립트의 장점을 느껴볼 수 있는 에러 메시지를 컴파일 중 만났다.Object is possibly 'null' ...객체가 비어 있을 수도 있는데 해당 객체에 접근하여 내부 메소드를 사용하거나 키에 값을 넣어주려고 할 때 발생하는 에러라고 한다. 자바스크립트로 작성했다면 아마 브라우저에서 에러 메시지- ㅇㅇㅇ is not a function 등등.. -를 만났을 텐데, 타입 스크립트를 쓰면 이런 상황에서 버그를 명확하게, 미리 캐치하는 장점이 있다는 것을 경험할 수 있었다. 위 에러는 옵셔널체이닝을 사용하여 해결했다.
-
웹 스토리지는 문자형(string) 데이터 타입만 지원한다
Moment 객체를 type로 interface에 추가했더니 계속 에러가 발생했다. JSON.stringfy와 JSON.parse를 써놓고 잊어버린 것이다. Moment 객체가 로컬스토리지에 갔다 오는 순간 내부의 메소드 같은 건 모두 사라진다는 사실을...
Object.setPrototypeOf() 메소드와 클래스 타입을 이용하여 복원(?)하는 방법(여기)이 있는 것 같은데, 나는 과제 기한 내로는 시도할 수 없을 것 같아서 ^^;; 참고만 해두었다.
-
memoization - 불필요한 리렌더링을 줄이는 방법
베이스 코드가 React.memo()를 사용하고 있어서 개념을 다시 정리해 보았다.
React.memo()를 사용하면 먼저 컴퍼넌트를 렌더링한 뒤, 이전 렌더된 결과와 비교하여 다를 경우에만 DOM 업데이트를 진행한다.
두번째 인자로 비교하는 함수를 전달하지 않을 경우 기본적으로 얕은 비교(원시 값은 값을 확인, 참조 값은 주소 값 확인)를 진행한다.
콜백 함수를 prop으로 사용하는 컴퍼넌트의 경우, 함수 객체는 오직 자신에게만 동일하므로 메모이제이션이 중단된다. 이런 경우 useCallback()을 이용하면 항상 같은 함수 인스턴스를 반환하기 때문에 메모이제이션이 의도한대로 동작할 것이다.
그런데... 투두리스트는 그다지 복잡한 로직을 수행하지 않고 사이즈도 작은 편인데 memo를 꼭 사용해야 할까? 🤔 memo를 사용하지 않을 때와 사용할 때의 차이를 Dev tools로 확인해 봐야겠다.
-
구현 요구 조건에 ant design의 DatePicker 컴포넌트를 사용하는 것이 있었다. DatePicker는 moment.js 객체를 사용한다. 지난번 과제 때 '자바스크립트에서 시간 다루기의 어려움'을 느껴본 적이 있는데, moment를 사용하니 간단하게 풀리는 문제가 많았다.
moment.isBefore를 사용하여 할일 목표 일정 입력시 예외 상황을 처리하거나 목표 일정 임박 여부를 표시하고, 시간 표기 방법 변경도 moment.format을 사용하여 간단하게 처리할 수 있었다.
(번외) 타입스크립트 + 리액트 설정시 발생한 오류와 해결
-
error message :
Could not resolve dependency: npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@4.0.1
-> npm install typescript를 한 후에도 계속 발생하여npm install --legacy-peer-deps로 해결했다. -
error message:
Cannot invoke an expression whose type lacks a call signature, using moment
-> codesandbox에서 멀쩡히 동작했던 moment()가 갑자기 에러를 뱉는다. 구글링 해본 결과에 따라 require를 쓰거나, import * as moment를 쓰거나, ES6 모듈 사양 관련 문제라 하여 "moment-es6"에서 import 하는 것으로도 바꿔봤는데 잘 되지 않았고, tsconfig 컴파일 옵션을 변경한 후 해결되었다.{ "compilerOptions": { "esModuleInterop": true, ... }, } -
error message:
... Property xxx does not exist on type 'div' ....
styled-components props 관련으로 발생한 에러. npm install @types/styled-components로 해결! -
이외에 antd 관련으로도 에러가 발생해서 @types/antd로 해결을 했는데.. 지금 확인해보니 deprecated된 라이브러리이다;; 공식 문서를 꼭 읽자... 😂
