본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
여전히 턱이 부어있지만 ㅠㅜ 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!
16일차 공부 시작!
오늘의 강의 주제는 '타입스크립트를 위한 환경설정'이다.
드디어 타입스크립트 파트로 돌입!
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
타입스크립트를 위한 환경설정
* 타입스크립트 환경 구성의 목적
최근 프론트엔드 개발에서 타입스크립트는 필수적인 도구가 되고 있다. 자바스크립트와 달리 타입을 명확히 지정할 수 있기 때문에 코드의 안정성이 높아지고 예측 가능한 결과를 얻을 수 있다. 이러한 장점을 살리기 위해 환경설정을 꼼꼼하게 준비하는 것이 중요하다. 이 과정은 단순한 설정 이상의 의미를 가진다. 프로젝트 규모가 커질수록 타입체크의 중요성도 높아지기 때문에 초기에 제대로 된 환경을 갖추는 것이 추후 유지보수 측면에서도 효율적이다.
* 확장자와 tsconfig.json 파일의 역할
타입스크립트로 코드를 작성할 때 기존 자바스크립트 파일과 구분하기 위해 파일 확장자를 ts로 변경해야 한다. ts 파일이 프로젝트에 도입되면 tsconfig.json 파일을 통해 세부적인 동작 방식을 관리할 수 있다. 공식 문서에 따르면 tsconfig.json은 다양한 옵션을 제공하지만, 대부분의 프로젝트에서는 기본값을 사용하고 특정 옵션만 프로젝트 성격에 맞게 변경하는 방식을 많이 활용한다. 이를 통해 과도하게 복잡해지는 설정을 방지하고 불필요한 오류 발생도 줄일 수 있다.
공식 링크: https://www.typescriptlang.org/tsconfig/
- 주요 옵션: strict와 noImplicitAny
tsconfig.json에서 가장 대표적인 옵션 중 하나가 strict이다. strict 옵션을 활성화하면 타입스크립트의 엄격한 타입 검사 규칙이 적용된다. 완전한 타입 안전성을 목표로 할 때 이 옵션을 true로 설정한다. 모든 변수와 함수의 타입을 명확히 지정해야 하며 이를 통해 예기치 못한 오류를 사전에 막을 수 있다.
noImplicitAny 옵션도 중요한데, 자바스크립트의 기본 특성상 명시적으로 타입을 지정하지 않으면 any 타입이 할당된다. noImplicitAny를 true로 두면, any가 자동 부여되는 상황에서 반드시 명확한 타입을 지정해야 하므로, 타입 안전성이 한 단계 더 강화된다. 이 과정에서 타입 선언을 빠뜨리면 컴파일 시점에 오류가 발생하므로 개발 과정에서 타입에 대한 고민을 자연스럽게 유도한다.
* Parcel과 타입스크립트 컴파일 과정
실행 단계에서는 parcel index.html 명령을 통해 parcel 번들러가 타입스크립트 파일을 자바스크립트로 변환하고 번들링한다. 브라우저는 타입스크립트 코드를 이해하지 못하기 때문에, 최종적으로 배포되는 파일은 자바스크립트다. 이를 통해 타입스크립트의 장점을 누리면서도, 브라우저와의 호환성도 보장할 수 있다.
* 소스맵의 필요성
타입스크립트에서 소스맵 파일의 역할은 매우 중요하다. 개발자는 주로 ts 파일을 수정하지만, 브라우저에서는 변환된 자바스크립트 파일만 읽을 수 있기 때문이다. 코딩 도중 문제가 발생하면, 원본 타입스크립트 코드와 최종 자바스크립트 코드 간에 대응 관계를 찾아야 한다. 소스맵 파일은 이러한 연결을 제공해 준다. 소스맵을 활용하면 브라우저 개발자 도구의 source 탭에서 ts 파일을 직접 확인할 수 있으며 디버깅 시에도 원본 코드를 기준으로 오류 위치를 추적할 수 있다.
마치며
오늘도 환급 챌린지 18강 공부 완료!!
이번 강의는 타입스크립트 환경설정에 관한 내용이었는데 타입스크립트의 목적과 주요한 옵션들에 대해 들을 수 있어서 좋았다.
아직 임파선염때문에 턱에 포도같은게 있고 뭔가 마취한 느낌이 계속 든다.. 언제 나을지 ㅠㅜ