반응형
1. 프로그램은 작고 단순한 것에서 복잡한 것으로 진화.
2. 코드의 재활용성 높임. 유지보수를 쉽게 할 수 있는 기법 개발.
3. 자주 사용되는 코드는 별도의 파일로 만들어서 필요시 재활용함.
4. 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않음.
5. 하지만 자바스크립트가 구동되는 호스트 환경에 따라 모듈화 방법이 각각 존재함.
6. 예를 들어 node.js는 서버 측에서 실행되는 자바스크립트.
7. 모듈화 예시. greeting.js 파일을 head에 연결시키면 호출된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="greeting.js"></script>
<title>Document</title>
</head>
<body>
<script>
function welcom() {
return 'Hello world'
}
alert(welcome());
</script>
</body>
</html>
8. body에 있는 functiond을 greeting.js에 붙여 넣고 다시 실행해보면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="greeting.js"></script>
<title>Document</title>
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>
위 예시는 간단한 함수였지만, 복잡한 함수가 있다면 html 코드를 줄일 수 있다. 코드 가독성이 좋아진다.
9. sub.html을 만들고 다시 welcome(); 함수 호출이 가능하다.
<!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">
<script type="text/javascript" src="greeting.js"></script>>
</head>
<body>
<script type="text/javascript">
welcome();
</script>
</body>
</html>
10. 자주 느끼지만 나는 오타가 잘난다. welcome과 welcom은 다르다. 더블체크하자.
11. 다음에는 node.js를 사용해서 모듈을 알아보자.
반응형
'Javascript' 카테고리의 다른 글
| [React] create-react-app 설치하기 (0) | 2023.07.29 |
|---|---|
| [React] 리액트의 정의. 웹사이트에 React.js 추가하기 (0) | 2023.07.23 |
| Javascript 코드를 크롬에 입력했을 때, undefined가 나오는 이유 (0) | 2023.04.04 |
| Javascript 무한스크롤 구현 (0) | 2023.04.03 |
| Javascript BMI 계산하는 문제 (0) | 2023.04.03 |
