개인적인 문제 해결을 시작으로 성장하자!
🍑JS 파일 분할
<!-- 1 -->
<body>
<button id='btn' onclick='alert("HI")'>btn</button>
<script src='js파일 경로'></script>
</body>// 2
document.querySelector('#btn').addEventListener('click', () => {
alert('HI');
}- 1번의 html파일에 적힌 onclick을 2번의 JS파일을 통해 이벤트 처리함수로 처리할 수 있다.
- 이것의 장점으로는 html파일의 가독성을 높히고 유지 보수나 각종 함수 및 변수의 재사용이 가능하다는 점이 있다. 그리고 웹 브라우저에서 캐싱을 하기 때문에 첫 로드시에만 다운로드하게되고 이는 성능 향상과 연결된다.(정적 소스의 특징)
🍉그럼 어디에 삽입해야해?
- 이것을 알려면 웹 브라우저가 html파일을 읽어오는 과정을 이해해야한다.
- 먼저 기본적으로 브라우저는 동기적으로 파싱을 진행하고 html파일을 파싱하던 중
<script>를 만나면 파싱을 중지하고 JS리소스를 요청해 받아온다. 그렇기 때문에<script>파일의 위치가 중요하다.
- head에 위치, body 상단에 위치
<head>
<script src='script.js'></script>
</head>
<body>
<script src='script.js'></script>
...
</body>- 파싱을 하던 중 잠시 멈추고 script.js파일의 실행까지 마친 후 나머지 파싱을 진행
js파일에서 body의 태그를 사용 시 오류가 발생한다.(아직 파싱 전이기 때문, 존재하지 않음)
- body 최하단에 위치
<body>
...
<script src='script.js'></script>
</body>- 모든 태그의 파싱이 끝난 후기 때문에 태그를 정상적으로 불러와서 사용할 수 있다.
다만 페이지가 js에 의존적인 경우 페이지가 실행 전까지 페이지가 부실해 보일 수 있다.
- 그 밖의 경우
- async 키워드 사용
<head> <script async src='script.js'></script> </head> <body> <script async src='script.js'></script> ... </body>- async script를 만나면 파싱을 계속 진행하면서 비동기적으로 스크립트 파일 저장, 이후 실행하게 되면 파싱을 멈추고 실행, 끝나면 파싱 이어서 진행
- 마찬가지로 파싱되지 않은 태그를 사용하면 오류가 발생하고 js에 의존적인 태그는 다운로드되는 중에는 부실해보임
- 반대로 js에 의존적인 태그가 파싱되자마자 js파일이 실행된다면 UX측면에서 상당한 이점을 얻을 수 있음.
- defer 키워드 사용
<head> <script defer src='script.js'></script> </head>- defer script를 만나면 파싱을 계속 진행하고 파싱이 끝난 후에야 js파일을 실행한다.
파싱이 멈추지 않기 때문에 화면 로딩속도가 빠르지만 마찬가지로 js에 의존적인 태그는 부실해보인다. - 파싱을 진행하면서 다운로드하기 때문에 파싱이 끝나면 바로 실행할 수 있고 어떤 태그를 사용해도 오류가 발생하지 않는다.
🍑 import & export
const a = () => {...}
export function b() {...} // 1
export default a; // 2
export { a, b as bbbbb}; // 3, 4import { b } from '파일명.js' // 1
import a from '파일명.js' // 2
import { a, b } from '파일명.js' // 3
import a as abc from '파일명.js' // 4🍉 export
- 외부에서 사용할 함수 혹은 변수 앞에 export 키워드를 붙이면 다른 파일(html, js)에서 사용이 가능하다. (아래 예시는 ES module 방식으로 작성됨)
- export하고 싶은 함수나 변수 앞에 export 키워드를 붙이면 import하는 쪽에선 {}를 붙여서 사용
- export default로 내보내면 {}없이 사용가능
- 여러 개의 함수, 변수를 내보낼 땐 {}로 묶고 import에서도 구조 분해 할당으로 받아서 사용
- as '문자열'을 이용해 사용할 때나 내보낼 때 이름을 바꿀 수 있다.
🍉 import
- 다른 파일에서 export로 내보낸 것들을 사용하기 위해선 import를 추가해줘야 한다.
- import '사용할 것의 이름' from '경로';
- html파일 안의 script태그로 사용하려면 type='module'을 지정해야 한다.
<script type='module' src='script.js'></script> - module로 지정된 것은 모든 스크립트가 load된 후 실행(defer 옵션이 자동으로 추가)
공부할 게 너무 많아요