안녕하세요! 자바스크립트를 처음 배우시는 분을 위해 간단한 프로젝트 구조와 파일 간의 관계를 설명해 드리겠습니다.
이 프로젝트에서는 index.html, App.js, 그리고 index.js라는 세 가지 파일을 사용합니다.
1. index.html 파일
HTML 파일인 index.html은 웹 페이지의 기본 구조를 정의합니다.
여기에는 웹 페이지의 내용과 자바스크립트 파일을 로드하는 스크립트 태그가 포함됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My JavaScript Project</title>
</head>
<body>
<!-- 웹 페이지 내용 -->
<!-- App.js 파일 로드 -->
<script src="App.js"></script>
<!-- index.js 파일 로드 -->
<script src="index.js"></script>
</body>
</html>- index.html 파일은 웹 페이지의 기본 구조를 정의하고, 자바스크립트 파일을 로드합니다.
- App.js 파일과 index.js 파일을 스크립트 태그로 로드합니다.
2. App.js 파일
App.js 파일은 웹 페이지에서 사용할 자바스크립트 코드가 포함된 파일입니다. 이 파일은 주로 웹 애플리케이션의 로직을 정의하고, 웹 페이지의 동작을 제어하는 데 사용됩니다.
// App.js 파일 내용
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("Alice");- App.js 파일은 greet 함수를 정의하고, 이 함수를 호출하여 콘솔에 메시지를 출력하는 간단한 자바스크립트 코드를 포함합니다.
3. index.js 파일
index.js 파일은 주로 애플리케이션의 진입점(entry point) 역할을 합니다. 이 파일에서는 웹 페이지가 로드될 때 실행될 초기화 코드를 작성하고, 다른 자바스크립트 파일과 상호 작용할 수 있습니다.
// index.js 파일 내용
document.addEventListener("DOMContentLoaded", function() {
// 웹 페이지가 로드될 때 실행되는 초기화 코드
greet("Bob");
});
- index.js 파일은 웹 페이지가 로드될 때 실행되는 초기화 코드를 포함하고, App.js 파일에서 정의한 greet 함수를 호출합니다.
파일 간의 관계
아래 그림은 이 세 가지 파일 간의 관계를 시각적으로 나타낸 것입니다:
- index.html 파일은 웹 페이지의 기본 구조를 정의하고, App.js와 index.js 파일을 로드합니다.
- App.js 파일은 자바스크립트 코드를 포함하고, greet 함수를 정의합니다.
- index.js 파일은 웹 페이지가 로드될 때 실행되는 초기화 코드를 포함하고, App.js 파일에서 정의한 greet 함수를 호출합니다.
이렇게 구성된 프로젝트에서는 웹 페이지가 로드될 때 index.js 파일의 초기화 코드가 실행되며, 이 코드에서 App.js 파일에서 정의한 함수 등을 활용할 수 있습니다. 이러한 구조를 활용하여 웹 애플리케이션을 구축하고 확장할 수 있습니다.