17강. JavaScript 연결과 데이터

이번 강의의 결과물은 외부 JavaScript 파일을 실행하고 포트폴리오 데이터를 변수로 표현해 콘솔에서 확인하는 페이지입니다.

?1. 이번 강의에서 해결할 문제

HTML과 CSS만으로는 사용자의 행동에 따라 데이터를 계산하거나 화면을 바꾸기 어렵습니다. JavaScript 파일을 페이지에 연결하고 프로그램이 사용할 값을 이름 붙여 저장합니다.

✓학습 목표

• HTML과 CSS만으로는 사용자의 행동에 따라 데이터를 계산하거나 화면을 바꾸기 어렵습니다. JavaScript 파일을 페이지에 연결하고 프로그램이 사용할 값을 이름 붙여 저장합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• const: 다른 값으로 다시 대입하지 않을 이름을 선언합니다.
• let: 실행 중 다른 값을 대입할 이름을 선언합니다.
• 문자열: 텍스트 값, 예: "웹 포트폴리오"
• 숫자: 계산 가능한 수, 예: 15
• 불리언: 참과 거짓, true 또는 false
• null: 의도적으로 값이 없음을 표시
• undefined: 아직 값이 정해지지 않은 상태
• console.log(): 개발자 도구 Console에 값을 출력

const projectName = "반응형 포트폴리오";
let completedLessons = 16;
completedLessons = 17;

const와 let은 현재 실행 범위의 이름과 값을 연결합니다. 정확한 언어 정의는 TC39 ECMAScript 표준을 기준으로 합니다.

</>3. 코드 예시

파일 구조:

web-basics/portfolio/
├─ index.html
└─ js/
   └─ main.js

파일명: index.html

head 안에 다음 코드를 추가합니다.

<script src="js/main.js" defer></script>

파일명: js/main.js

const portfolioTitle = "게임과 웹을 공부하는 개발자";
const totalLessons = 30;
let completedLessons = 17;
const isPortfolioPublished = false;
const publishedUrl = null;
let nextTopic;

console.log(portfolioTitle);
console.log(`진행 상황: ${completedLessons}/${totalLessons}`);
console.log("공개 여부:", isPortfolioPublished);
console.log("공개 주소:", publishedUrl);
console.log("다음 주제:", nextTopic);

completedLessons = 18;
console.log(`다음 강의 완료 후: ${completedLessons}/${totalLessons}`);

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

브라우저에서 F12를 누르고 Console 탭을 확인합니다.

→4. 코드가 동작하는 이유

1. 브라우저가 HTML을 읽으면서 main.js를 별도 요청합니다.
2. defer가 문서 해석을 막지 않고 HTML 파싱이 끝난 뒤 스크립트를 실행하게 합니다.
3. 각 선언은 값을 기억할 이름을 현재 스크립트 범위에 만듭니다.
4. let으로 선언한 진행 수는 새 숫자로 바꿀 수 있습니다.
5. 백틱 문자열의 ${...}가 변수 값을 문자열 안에 삽입합니다.
6. console.log는 화면 콘텐츠가 아니라 개발자 도구에 디버깅 정보를 출력합니다.

!5. 자주 하는 실수

• 값이 바뀌지 않는데도 모두 let으로 선언함
• const 변수에 새 값을 대입하려고 함
• 문자열 따옴표를 닫지 않음
• True, False처럼 JavaScript와 다른 표기를 사용함
• 숫자 17과 문자열 "17"을 같은 값으로 생각함
• Console의 첫 오류를 읽지 않고 이후 코드만 수정함

✎6. 짧은 실습 과제

1. js/main.js를 만들고 defer 스크립트로 연결합니다.
2. 자신의 이름, 현재 강의 수, 공개 여부를 알맞은 자료형으로 선언합니다.
3. typeof 연산자로 각 값의 자료형을 Console에 출력합니다.
4. let 값 하나를 변경한 뒤 이전·이후 값을 출력합니다.
5. const에 재대입해 발생하는 오류를 읽고 코드를 원래대로 복구합니다.
6. Network 탭에서 main.js 요청이 200인지 확인합니다.

완료 기준은 Console 오류 없이 다섯 종류의 값을 출력하고 const와 let을 선택한 이유를 설명하는 것입니다.

?7. 이해 점검 질문 3개

1. 값이 바뀌지 않을 이름에는 const를 사용하는 이유가 무엇인가요?
2. 숫자 17과 문자열 "17"은 어떻게 다른가요?
3. 외부 스크립트에 defer를 사용하면 언제 실행되나요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.