[250113 월요일]
과제를 하다보니 코드가 길어지고 몇몇 코드들은 나눠서 사용하는게 편하겠다라는게 절로 느껴졌다.
html파일 내에 css파일 링크나, js파일을사용하는 방법은 기본으로 사용했으나 이번에는 js코드를 나눠서 다른 js파일에서 내보내고 불러오는 방식을 찾아봤다.
🛸 module
자바스크립트내에서 기능별로 코드를 나눠서 파일로 저장한 후 내보내거나 불러와서 사용할수 있는 단위가 모듈이라고 한다.
이렇게 모듈단위로 나눠서 파일을 만들면 관리와 재사용면에서 용이하다.
모듈단위로 사용한다면 html파일에서 <script type="module" src="파일경로.js"></script> 스크립트 타입을 모듈로 설정해 주어야 모듈로 인식하여 사용 가능하다!
🛸 export & import
여러번 사용가능 할수 있도록 해당 파일에 있는 변수나 함수등을 export로 내보내줘야 다른 파일에서도 import하여 사용이 가능하다.
- named_exports.js
// 변수, 함수등을 하나씩 내보내기 export const name1 export const naem2 ="name" export function func(){} export class ClassName{} // 변수명, 함수명을 모아서 목록으로 내보내기 export {name1, name2,..} export {func,ClassName,..}
- main.js
import { name, func } from './named_export.js'
이런식으로 사용을 한다.
default 내보내고 가져오기, 비동기로 가져오기같은 여러 방법들도 있지만 이번에 내가 과제를 수행하며 사용한 부분에 대해서만 먼저 기록한다.
API키값등을 노출시키지 않고 가져올때도 사용하는 방법이라 찾아봤다.
one setp