2023-10-19 본 캠프 11일차 / 30일차 TIL
주요 진행사항
- 내일배움캠프 개인과제 완성 (영화정보사이트)
repository
GitHub - kms99/movieInfoPage: 내일배움캠프 개인과제-영화정보사이트
내일배움캠프 개인과제-영화정보사이트. Contribute to kms99/movieInfoPage development by creating an account on GitHub.
github.com
DEMO
Mov_Ie
Trailer Reviews
movie-info-page.vercel.app
자바스크립트 모듈 활용
프로젝트를 진행하면서 공통된 기능을 서로 다른페이지나 반복적으로 사용하는 경우가 있었다.
예를들어 TMDB API 데이터를 가져올 때 URL 만 변경하였으면 동일한 로직에 의해 데이터를 가져올 수 있었으며, 여러 js 파일 내에서 사용하였다.
이런 반복을 모듈을 통해서 효율적으로 구성해 보았다.
일단 자바스크립트의 모듈에 대해서 간단히 알아보자.
자바스크립트의 모듈은 ES6에 등장했다.
모듈의 등장으로 자바스크립트의 분할성과, 확정성이 크게 개선되었다.
방법은 다음과 같다.
1. export 할 js 파일 생성
// (1) message.js
// 공유할 식별자 앞에 export 선언
export const message = "hello";
// 공유할 식별자 앞에 export 선언
export const messageLog = function(name){
console.log(`${name} say ${message}`);
};2. import 할 js 파일 생성
// (2) main.js
// 모듈을 가져올 때는 import {가져올 식별자} from '대상 파일 경로' 의 형식을 사용한다.
import {message, messageLog} from './message.js';
console.log(message); // 'hello'
messageLog('Kim'); // 'Kim : hello'3. html </body> 윗줄에 type='module'로 메인파일 스크립트 선언
<body>
<script type='module' src='./main.js'>
</body>
위와 같은 방법으로 해당프로젝트에서는 API 호출부를 분리 시켰다.
1. tmdbAPI.js
2. main.js
API 호출 시 해당기능을 사용하였다.
앞으로 프로젝트에서는 모듈을 더 적극적으로 활용할 예정이다.
더 효율적인 방식으로 코드를 작성하기 위해서 고민해보겠다.
'내일배움캠프 TIL' 카테고리의 다른 글
| 2023-10-21 주말 TIL (0) | 2023.10.21 |
|---|---|
| 2023-10-20 본 캠프 12일차 / 31일차 TIL (과제 예외처리 및 미니 튜터활동) (0) | 2023.10.20 |
| 2023-10-18 본 캠프 10일차 / 29일차 TIL (carousel 제작) (0) | 2023.10.20 |
| 2023-10-17 본 캠프 9일차 / 28일차 TIL (0) | 2023.10.17 |
| 2023-10-16 본 캠프 8일차 / 27일차 TIL (2) | 2023.10.17 |
