본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
날이 더워도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!
22일차 공부 시작!
오늘의 강의 주제는 '파일의 분리, 더욱 성장할 앱을 위한 준비'이다.
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
- 파일의 분리, 더욱 성장할 앱을 위한 준비 -
* 파일을 분리해야 하는 이유
애플리케이션의 규모가 커지면 모든 코드를 app.ts 하나의 파일에서 관리하는 데 한계가 생긴다. 코드가 길어질수록 관리와 유지보수가 어려워지고 각 기능이 어디에 있는지 파악하기도 힘들어진다. 이런 상황에서는 파일을 기능별로 분리해서 관리하는 것이 훨씬 효율적이다. 이렇게 하면 코드의 구조가 명확해지고 각 역할에 집중하여 개발할 수 있다.
* 폴더 구조 설계와 파일 분리
먼저 types 폴더를 만들어서 프로젝트에서 사용할 타입들을 정의하는 index.ts 파일을 생성한다. 타입을 별도의 파일로 분리하는 이유는 여러 곳에서 참조하거나 확장할 수 있도록 하기 위함이다. 타입 정의를 한 곳에 모아두면 중복된 코드가 줄고 타입이 변경될 때 유지보수도 쉬워진다.
core 폴더에는 핵심 로직을 담당하는 파일들을 둔다. 예를 들어, api와 관련된 코드는 api.ts에, 라우팅 관련 코드는 router.ts에 View 클래스 등 화면에 직접적으로 관계된 코드는 view.ts에 위치시킨다. 각각의 파일이 자신의 역할에만 집중하도록 설계하면 코드의 가독성이 높아지고 모듈화의 장점도 누릴 수 있다.
또한 page 폴더를 만들어 구체적인 페이지와 관련된 코드들을 분리한다. 이렇게 하면 페이지 단위로 기능을 하나의 파일에 모아둘 수 있어 각 페이지별로 필요한 수정이나 추가 작업을 쉽게 할 수 있다.
마지막으로 url이나 기타 설정 요소는 config.ts와 같은 파일을 만들어 관리한다. 설정 관련 코드를 분리하면 환경에 따라 쉽게 설정을 변경하고, 코드 전체에 영향을 주지 않으면서 관리할 수 있다.
* 타입 정의와 확장
각종 데이터 구조는 타입이나 인터페이스로 정의한다. 예를 들어 Store, News, NewsFeed 같은 인터페이스는 데이터 구조를 명확히 하고 잘못된 타입 사용을 사전에 방지할 수 있다. TypeScript의 장점 중 하나는 타입 체킹을 통해서 버그를 줄일 수 있다는 점인데 타입을 올바르게 정의하는 것이 곧 안정적인 코드를 작성하는 것이다.
* 모듈 시스템의 이해
파일을 분리한 후에는 필요한 기능이나 클래스를 서로 다른 파일에서 가져와서 써야 한다. 자바스크립트와 타입스크립트에서는 모듈 시스템을 지원하는데 이때 import/export 구문이 필요하다. export는 해당 파일의 클래스나 변수를 다른 파일에서 사용할 수 있도록 외부로 노출하는 역할을 한다. import는 외부로 노출된 것을 실제로 가져와서 사용하는 문법이다.
import 구문은 파일의 맨 위에 배치해야한다.
* 전역 객체와 확장
브라우저 환경에서는 window라는 전역 객체가 있다. 전역 객체에 프로퍼티를 추가하면 프로젝트 어디서든 접근이 가능하다. 하지만 이는 권장되는 방법은 아니고 꼭 필요한 경우에만 신중하게 사용해야 한다. 타입스크립트에서는 전역 객체에 새로운 속성을 추가할 때 declare global 구문을 사용해서 타입 확장도 함께 해야 한다. 이를 통해 전역 객체에 안전하게 접근할 수 있다.
이런 구조화와 모듈화 습관을 들여두면, 프로젝트의 규모가 커져도 관리와 유지보수가 한결 쉬워진다. 앞으로 기능이 추가될 때도 분리된 파일과 폴더 덕분에 각 역할별로 코드를 정리하며 발전시킬 수 있다.
마치며
오늘도 환급 챌린지 24강 공부 완료!!
이번 강의에서는 파일 구조를 분리하는 방법에 대한 내용이었다. 딥한 파일 구조는 아니지만 파일을 어떻게 모듈화 하는지에 대한 내용이어서 재미있게 들었고 유익했다.