저장을 습관화
230605 TIL - 모듈 Module 본문
0. 에러인가 기능인가
자바스크립트의 module화를 공부하기 위해
기존 프로젝트가 가지고 있던 js파일을 여러개로 쪼개고 있었다.
각 기능별로 1.js, 2.js, 3.js, 4.js로 나누었고(파일 이름은 예시)
html 파일에서 아래와 같이 사용할 js파일들을 지정해주었다.
<body>
<script src="./1.js"><script>
<script src="./2.js"><script>
<script src="./3.js"><script>
<script src="./4.js"><script>
</body>JS파일을 여러갈래로 쪼갰으니 에러가 발생할 것이라 예상했는데 전혀 지장이 없없다.
왜 그럴까 궁금하여 ChatGPT에게 물어봤다.
나: dir라는 디렉토리에 a.html과 b.js, c.js 파일을 만들었어
a.html 안에 <script src="./a.js"></script>
<script src="./b.js"></script> 라는 내용을 넣었고
a.js 안에 const test = 'test string' 이라는 변수 선언을 하였는데
b.js 안에서 test 변수를 이용한 코드를 사용할 수 있었어
서로 다른 파일에 있는 변수나 함수 등 코드를 사용하려면 import export 선언이 필요한 것으로 알고있는데 이러한 import export 선언 없이도 b.js에서 a.js가 선언한 변수를 사용할수 있었던 이유가 뭐야?
ChatGPT: 일반적으로 자바스크립트에서 서로 다른 파일에 있는 변수나 함수 등을 사용하기 위해서는 `import`와 `export` 구문을 사용하여 모듈을 정의하고 가져와야 합니다. 이를 통해 파일 간의 의존성을 명시적으로 선언하고, 다른 모듈의 내용을 사용할 수 있습니다.
그러나 웹 브라우저에서 실행되는 자바스크립트에서는 모듈 시스템을 지원하는 브라우저가 제한적이었습니다. 과거에는 `import`와 `export` 구문을 지원하지 않는 브라우저가 많았기 때문에, 단일 파일로 구성된 스크립트에서는 별도의 모듈 시스템 없이도 전역 범위에서 변수나 함수를 공유할 수 있었습니다.
따라서, 예시로 제시해주신 상황에서 a.js와 b.js가 모두 a.html에서 로드되는 단일 파일로 구성되어 있다면, 브라우저에서는 자바스크립트 파일들이 하나의 전역 범위에서 실행되기 때문에 b.js에서 a.js에 선언된 변수를 직접 사용할 수 있습니다.
하지만 이는 전역 범위의 오염과 충돌 등 여러 가지 문제를 야기할 수 있으므로, 모듈 시스템을 사용하여 명시적인 의존성 관리와 모듈 간의 격리를 실현하는 것이 좋습니다. 최신 브라우저는 모듈 시스템을 지원하므로 `import`와 `export`를 사용하여 모듈을 구성하고 가져올 수 있습니다.
나: 무슨 의미인지 이해하지 못하겠어. 내가 예시로 든 상황에선 a.js 와 b.js는 서로 구분된 별개의 파일이었고 단일 파일이 아니었어. 또한 import와 export로 모듈화 또한 하지 않았고.
ChatGPT: 죄송합니다. 이해에 혼동을 드린 것 같습니다. 제가 이해를 잘못하고 답변을 드린 것 같습니다. 예시로 든 상황에서 a.js와 b.js는 서로 별개의 파일이며, import와 export로 모듈화되지 않았습니다.
따라서, a.js와 b.js 파일은 독립적으로 동작하며 서로의 변수나 함수를 사용할 수 없습니다. a.js에서 선언된 변수를 b.js에서 사용하기 위해서는 해당 변수를 export하여 외부에서 접근 가능하게 만들고, b.js에서는 해당 변수를 import하여 사용해야 합니다.
다시 한 번 사과드리며, 이해를 혼동시켜 드려 죄송합니다. 필요한 경우에는 모듈화와 import/export를 사용하여 파일 간의 상호작용을 구현해야 합니다.
나: 그런데 지금 두 js 파일이 서로의 변수를 공유할 수 있었던 이유가 궁금한거야
어떻게 이런일이 가능한거지? a.html 파일에서 a.js파일과 b.js 파일을 <script src="">로 명시하고 있어서인가?
ChatGPT: 네, 맞습니다. 두 개의 JavaScript 파일(a.js와 b.js)이 모두 a.html 파일에서 `<script>` 태그를 통해 명시되어 있기 때문에 변수가 공유될 수 있었습니다.
웹 브라우저는 HTML 파일을 로드하면서 `<script>` 태그 내에 있는 JavaScript 코드를 실행합니다. 이때, a.js와 b.js 파일은 순차적으로 로드되고 실행됩니다. 그 결과, 두 파일에서 선언된 변수는 모두 동일한 전역 스코프에서 공유되게 됩니다.
따라서, a.js에서 선언한 변수를 b.js에서 사용할 수 있는 것은 파일이 같은 HTML 문서에서 동시에 실행되기 때문입니다. 이는 변수가 전역 스코프에서 공유되는 것으로, 변수의 값이 변경되면 다른 파일에서도 변경된 값을 참조할 수 있게 됩니다.
그러나 이러한 방식은 파일 간의 의존성과 네임스페이스 충돌 등의 문제가 발생할 수 있으므로, 일반적으로는 모듈화와 import/export를 사용하여 명시적으로 파일 간의 상호작용을 관리하는 것이 좋습니다.
답변은 받았지만 여전히 찜찜했다.
정말 단순히 HTML에 같이 등록되어있다고해서 JS파일이 서로 영향을 주면 에러가 발생할 위험이 너무 크지 않나?
1. 테스트
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./2.js"></script>
<script src="./3.js"></script>
<script src="./4.js"></script>
</body>
</html>2.js
const test = "testString";3.js
window.alert(test);4.js
const test = "isThisWork?";HTML 실행 결과
정말 접점이 HTML에 같이 쓰인것 외에는 없지만, JS파일들이 서로 영향을 주고 있다.
그런데 이러면 변수 이름의 충돌도 문제지만 모듈화의 존재 이유가 없지 않아..?
2. 궁금한게 풀렸다.
감사하게도 늦은 시간까지 자리에 계셨던 우준호 튜터님께 여쭤봤다.
HTML에는 스코프란 개념이 없다.
HTML은 쓰여진 내용을 위에서부터 브라우저로 보낼 뿐이다.
2.js와 3.js, 4.js를 서로 나눴기 때문에 별개의 파일이라고 생각할 수도 있지만
HTML의 입장에서 봤을때는 아래 두 내용은 차이가 없다.
<body>
<script src="./2.js"></script>
<script src="./3.js"></script>
<script src="./4.js"></script>
</body><body>
<script>
const test = "testString";
window.alert(test);
const test = "isThisWork?";
</script>
</body>
만약 아래와 같이 썼다면 변수 선언을 받지못한 3.js에서 undefined 에러를 출력했을 것이다.
<body>
<script src="./3.js"></script> // undefined error
<script src="./2.js"></script>
<script src="./4.js"></script> // SyntaxError: Indentifier 'test' has already been declared
</body>
추가로 모듈화 import export를 사용하지 않고도 각 JS 파일의 변수간 영향을 주고 싶지 않다면
이번 예시에서는 4.js에서 변수 선언의 내용을 {중괄호}로 묶어주면 된다.
const와 let은 중괄호 안에서만 영향력이 있기 때문이다.
var는 중괄호 밖에까지 영향력이 있지만 그렇기 때문에 var가 더 이상 쓰이지 않는 것이다.
3. 그래서 모듈은 왜 쓰는 것일까?
3-1. 나의 좁은 식견 때문에 생긴 오해
맨 처음 js파일을 쪼개던 작업때 js가 에러없이 잘 작동하던 이유는
사용할 변수들의 선언이 모두 1.js에 모여있었기 때문이었다.
만약 변수 선언들을 그때그때 마구잡이로 해서 이곳저곳 흩어져있었다면
예를 들어, 3.js에서 했던 변수 선언을 읽지못한 2.js의 기능에 오류가 발생했을 경우도 있다.
html은 1.js, 2.js, 3.js, 4.js 순으로 JS를 읽어오기 때문에.
3-2. ※현재 내가 만드는 기능에 충실하기 위해서
오늘은 모듈을 변수로만 사용했기에 잘못 이해했지만, 사실 모듈은 더 복잡한 함수 등의 코드를 가져올때 쓰인다.
모듈화는 다른 사람이 잘 만든 기능을 가져다가 내가 붙이고 싶은 내용을 추가해서 완성하는데 의의가 있다.
질문) 그럼 라이브러리 같은 느낌이라고 생각하면 되나요?
답변) 그렇다. 사실 라이브러리와 모듈화의 구분은 모호하다.
앞으로 더 공부하다보면 이번처럼 용어가 나뉘어져 있지만 사실 비슷한 역할을 하는 기능을 많이 만나게 될 것이다.
이 기능들을 잘 판별해서 사용하는 것이 중요하다.
import와 export의 사용 예시는 다음편에 이어서...
오늘 느낀점)
chatgpt는 도움이 잘 안되는 경우가 많다
궁금한걸 잘 묻는 것도 실력이다
'공부 > TIL' 카테고리의 다른 글
| 230607 TIL (0) | 2023.06.08 |
|---|---|
| 230606 TIL - 모듈 Module (2) (0) | 2023.06.06 |
| 230602 TIL (0) | 2023.06.02 |
| 230601 TIL (0) | 2023.06.02 |
| 230530 TIL (0) | 2023.05.30 |
