js

✅ 1. JavaScript 소개 및 개발 환경 설정

📌 요약 설명

이 단원에서는 JavaScript가 웹에서 수행하는 역할과 퍼블리셔에게 필요한 이유를 이해하고, 본격적인 학습을 위한 개발 환경을 함께 구성합니다. 또한 브라우저에서의 실행 흐름, 코드 삽입 위치, 개발 도구 활용 방법까지 순차적으로 배워봅니다. —

🧭 1.1 JavaScript란 무엇인가?

개념 정리

퍼블리셔가 JavaScript를 배워야 하는 이유

✅ 실무 활용 예시

| 기능 | HTML/CSS만으로 구현 가능? | JavaScript 필요 여부 | |——|————————–|———————-| | 탭 메뉴 전환 | ❌ | ✅ 클릭 이벤트 필요 | | 모달 팝업 열기/닫기 | ❌ | ✅ DOM 제어 필요 | | 입력 실시간 검사 | ❌ | ✅ 이벤트 처리 필요 | | 이미지 슬라이더 | ❌ | ✅ 타이머, 애니메이션 필요 | —

🖥 1.2 JavaScript 동작 방식 이해

DOM과의 관계

실행 흐름

  1. HTML이 먼저 해석됩니다.
  2. <script> 태그가 실행됩니다.
  3. JavaScript가 DOM을 조작합니다.(※ 단, DOM 생성 전 실행되면 오류가 발생할 수 있습니다.)
<body>
  <h1 id="title">안녕하세요</h1>
  <script>
    document.getElementById('title').textContent = 'Hello, JavaScript!';
  </script>
</body>

🧰 1.3 개발 환경 구성

추천하는 코드 에디터

✅ VS Code

✅ WebStorm

항목 VS Code WebStorm
가격 무료 유료 (학생 무료)
속도 빠름 안정적이지만 무거움
확장성 매우 뛰어남 기본 기능 강력
추천 대상 초·중급 학습자 실무자 및 팀 협업자

프로젝트 폴더 구성 예시

my-js-project/
├── index.html
├── js/
│   └── main.js
└── css/
    └── style.css

HTML에 JavaScript 연결하기

<!-- HTML 안에 직접 작성 -->
<script>
  alert('JS 시작!');
</script>

<!-- 외부 파일 연결 -->
<script src="./js/main.js"></script>

🧪 1.4 개발자 도구 (DevTools) 콘솔 활용

console.log('콘솔 출력 테스트');
let name = '퍼블리셔';
console.log('안녕하세요, ' + name + '님');

🧠 마무리