📚금일 학습 내용
JS to TS 리팩토링
🔎TS 리팩토링
기존에 진행했던 vanilla JS 과제를 TS로 변환했다. 순수 TS는 vanilla TS인가..?
몇 가지 선택사항이나 어려움에 대해서 복기해보자.
클래스형 컴포넌트 vs 함수형 컴포넌트
나는 개발을 함수형 컴포넌트로 시작했다. 내가 개발을 시작할 때 타이밍 좋게도 함수형 컴포넌트의 장점이 더 부각되기 시작했고 그래서 함수형 컴포넌트를 쭉 사용했기에 나는 오히려 클래스형 컴포넌트가 어색하다. 그러한 이유에서인지 나는 여전히 this키워드나 constructer, super의 개념에 대한 이해도가 상대적으로 부족한 편이다.
그러한 이유로 이번에도 함수형 컴포넌트를, 그리고 const func = () => {} 형태의 함수 표현식을 사용했다. 특히 함수 선언식을 사용한 이유는 Airbnb JavaScript Style Guide 를 보면 왜? 함수 표현식을 사용하는 지에 대한 설명이 나와있다. 해당 내용을 보고 간략하게 요약해보면 가독성과 유지보수성 때문이다. 선언식의 경우 표현식과 다르게 코드 실행 전에 변수나 함수 선언이 메모리에 호이스팅되어 함수가 예상하지 못한 곳에서 참조될 수 있기 때문에 표현식을 권장하고 있다.
함수 선언식과 함수 표현식의 차이
주요 차이점은, 호이스팅에서 차이가 발생한다고 한다. 출처함수 선언식은 함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다.
함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 됩니다. 선언부만 호이스팅하게 됩니다.
그런데 기존에 구현되었던 과제와 비교했을 때 구현 하는 부분에서 어려움이 있었다. 기존 과제는 함수 선언식인 function 함수명() { // 구현 로직 } 형태로 진행했는데 나는 표현식 형태로 진행하니 많은 문제가 생겼다.
첫 번째로 new 키워드에 관련된 내용이였다. 엄청 당황했고 문제 해결에 생각보다 오랜 시간을 투자했다.
궁금했다. 위 코드에서 new 키워드를 없애주면 정상동작했는데, 왜? 왜? 왜? 왜일까? 왜 함수 표현식의 형태에서는 this키워드도 new 키워드도 사용할 수 없지만 왜 객체가 새로 생성되고 잘동작할지 너무 궁금했고 알아보고 싶었다.
나는 멍청이다.. 꽤 오랜 기간 알아봤지만 내용 이해가 잘 되지 않아서 결국 멘토님께 질문을 남겼고 해당 주제에 관해서 멘토님 조언을 얻어보려고 한다.
참고했던 레퍼런스들
국내 사이트
https://taenami.tistory.com/86
https://dc2348.tistory.com/18
https://codingapple.com/unit/es6-3-arrow-function-why/외국 사이트
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
https://github.com/airbnb/javascript?tab=readme-ov-file#functions
https://262.ecma-international.org/6.0/#table-6
https://www.quora.com/Why-is-it-not-possible-to-use-the-new-keyword-with-an-arrow-function-in-JavaScript-ES6
https://stackoverflow.com/questions/57825669/how-to-create-constructor-with-arrow-functions
https://stackoverflow.com/questions/53146914/arrow-function-and-this-inside-a-constructor-function
https://stackoverflow.com/questions/37587834/why-can-i-not-use-new-with-an-arrow-function-in-javascript-es6
❔TS관련?
생각보다 TS 관련해서 큰 문제를 겪은 것은 없었다. 아마 사용하는 데이터 형식이 그렇게 어렵지 않았기 때문인 것 같은데 하나 걸리는 점이라면 any를 사용하지 않기 위해 | 키워드로 예외처리를 한 부분이나, 제네릭을 사용하지 않은 것이 조금 걸린다.
🔎JEST 관련 내용
TDD는 회사에 가면 할 가능성이 높은 최신 개발 방법론이다.
지난 캡스톤 디자인 수업을 들으며 해당 내용을 들었었다. 그에 따라 Jest나 cypress와 같은 JS 테스트 라이브러리에 관심이 있었고 이번에 설치해서 사용해보려고 했다. 그 중 좀 더 사용이 쉬워 보이는(?) Jest로 진행을 해봤다. 새로 설치한 패키지는 다음과 같다. jest, ts-jest, ts-node, jest-environment-jsdom, identity-obj-proxy, @types/jest, @testing-library/jest-dom, @testing-library/dom를 설치했다.
ts를 파싱하기 위한 라이브러리와 테스팅 관련 라이브러리들을 설치해주었다. 여러 역경을 겪으며 설치를 완료했고 기본적인 렌더링 확인과 form을 통한 todolist 제출이 정상적으로 이루어지는 지를 테스트했다.
이슈1. "jest import style.css error" 에러
말 그대로 테스트를 하던 도중 css파일을 Import하는 과정에서 에러가 발생하였다.
원인은 Jest가 CSS파일을 마치 JS 파일처럼 Import하려고 시도해서 발생하였다. CSS import는 import "./style.css"; 이런 형식으로 진행되었기에, 에러가 발생했고 해당 부분에 대한 예외 설정을 진행해주어야 했다.
여러 해결 방법이 있었지만 가장 최신의 방법은 identity-obj-proxy라는 개발 종속성 패키지를 설치, 불러와서 jest.config.ts파일에서 예외처리하는 코드를 입력해주면 됐다.
moduleNameMapper: {
"\\.(css|scss)$": "identity-obj-proxy",
},참고한 레퍼런스 주소
이슈2. "window is not defined" 에러
테스트 옵션에서 테스트 환경을 node로 설정했더니 해당 문제가 발생했다. 처음에는 이 레퍼런스의 방식 처럼 jest.config.ts에 global 설정 코드를 추가해서 해결하려고 했으나, 추후 발생하는 문제로 인해서 결국 테스트 환경을 jsdom으로 바꾸면서 자연스럽게 해결되었다.
이슈3. "document is not defined" 에러
이 에러 역시도 테스트 환경을 node로 설정한 탓인 것 같았다. 관련 내용을 검색해서 레퍼런스를 살펴보니 결국 jsdom으로 바꿔야하는 것이 정답처럼 느껴졌고, npm install -D jest-environment-jsdom을 통해서 해당 개발 종속성 패키지를 설치해주고 테스트 환경을 jsdom으로 바꾸어 문제를 해결했다.
이슈4. Jest 사용 경험 부재로 인한 각종 에러
이 이슈는 사용 경험의 부족으로 인한 문제점들로 검색하면 충분히 찾을 수 있는 쉬운 내용... 이 많았다..
📖소회
오랜만에 하루 밀려서 쓰는 TIL
하지만 어제 쓰기에는 몸 컨디션이 너무 안 좋았다. 오늘도 좋은 편은 아니지만?ㅎ 개발이 재미있다. 코딩도 재미있지만 요즘 이전에는 추상적으로 관심 있던 주변 라이브러리들 혹은 개발 환경, 배포 환경 세팅이 정말 재미있다고 느껴진다. 다만 컨디션 관리가 좀 더 잘 되었으면 하는데 바쁜 탓에 몸을 움직이지 않아 그런 것 같아서 강제로라도 운동을 하려고 한다. 내일도 잘 해봅시다!🔥🔥🔥
인터넷을 떠돌다 본 맥북 청소 관련 상남자님...ㅋㅋㅋㅋㅋㅋ
TIL 작성 소요시간 약 1시간
