웹 개발 기초집LESSON 17

JavaScript 연결과 데이터

난이도입문

예상 시간25분

선수지식이전 강의

17강. JavaScript 연결과 데이터

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

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

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

학습 목표

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

2. 핵심 개념

프로그램은 사용자가 몇 강까지 들었는지, 포트폴리오가 공개됐는지, 화면에 어떤 이름을 보여 줄지 기억해야 합니다. 변수는 값을 다시 사용할 수 있도록 붙인 이름입니다. JavaScript에서 변수는 값 자체를 상자에 고정하는 표현이라기보다, 현재 값에 접근할 이름을 만든다고 이해하면 좋습니다.

값의 종류가 다른 이유는 할 수 있는 일이 다르기 때문입니다. 숫자는 더할 수 있고, 문자열은 글자를 이어 붙일 수 있으며, 불리언은 조건문의 판단에 사용합니다.

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

용어 정리와 사용 상황

값의 종류	예	웹페이지에서 쓰는 상황	주의할 점
문자열(string)	`"웹 포트폴리오"`	제목, 이름, 안내 문구	숫자처럼 보이는 `"17"`도 계산용 숫자가 아님
숫자(number)	`17`, `2.5`	강의 수, 가격, 진행률	정수와 소수를 모두 `number`로 다룸
불리언(boolean)	`true`, `false`	공개 여부, 로그인 여부	따옴표를 붙인 `"false"`는 문자열이며 조건에서 참처럼 취급될 수 있음
`null`	`null`	주소가 아직 없다고 의도적으로 표시	객체처럼 자동 생성되는 값이 아님
`undefined`	`undefined`	아직 대입하지 않은 값	빠진 값인지 의도한 값인지 구분해 사용

가장 작은 예제로 시작하기

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

첫 줄은 이름이 바뀌지 않는 프로젝트 제목이므로 const가 알맞습니다. 둘째 줄은 현재 완료 수가 16임을 기억합니다. 셋째 줄의 =는 "같다"가 아니라 오른쪽 값 17을 왼쪽 이름에 대입한다는 뜻입니다. 따라서 출력되는 완료 수는 이제 16이 아니라 17입니다.

숫자와 문자열은 눈에 보이는 글자가 같아도 결과가 다릅니다.

console.log(17 + 1);     // 18: 숫자 덧셈
console.log("17" + 1);   // "171": 글자 이어 붙이기
console.log(typeof 17);  // "number"
console.log(typeof "17"); // "string"

폼 입력값은 대개 문자열로 들어오기 때문에 계산 전에 Number(...) 변환이 필요한 경우가 있습니다. 변환 결과가 유효한 숫자인지도 함께 확인해야 합니다.

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}`);

코드 한 줄씩 이해하기

코드	기억하는 값	다시 대입 가능 여부
`const portfolioTitle = ...`	페이지에 보여 줄 글자	불가능
`const totalLessons = 30`	전체 강의 수	불가능
`let completedLessons = 17`	현재 완료한 강의 수	가능
`const isPortfolioPublished = false`	공개 여부	이름 자체에는 재대입 불가능
`const publishedUrl = null`	주소가 아직 없다는 의도	불가능
`let nextTopic`	아직 값이 정해지지 않아 `undefined`	가능

console.log의 첫 인자는 설명 문구, 다음 인자는 실제 값입니다. 백틱으로 감싼 템플릿 문자열 안에서는 ${completedLessons}처럼 변수 값을 끼워 넣습니다. 마지막 대입이 실행된 후에만 completedLessons가 18로 바뀝니다.

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

python -m http.server 5500

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

예상 실행 결과와 값의 흐름

게임과 웹을 공부하는 개발자
진행 상황: 17/30
공개 여부: false
공개 주소: null
다음 주제: undefined
다음 강의 완료 후: 18/30

위에서 아래로 실행되므로 처음 진행 상황에는 17이 출력됩니다. 그 뒤 completedLessons = 18이 실행되고 마지막 출력만 18을 사용합니다. 값을 25로 바꾸면 두 번째 줄은 25/30, 마지막 줄은 현재 코드대로라면 18/30이 됩니다. 서로 어긋나는 이유는 마지막에 18을 직접 대입했기 때문이며, 실제 기능에서는 completedLessons += 1처럼 이전 값에서 증가시키는 방법을 고려할 수 있습니다.

4. 코드가 동작하는 이유

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

5. 자주 하는 실수

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

6. 실습

실습 목표

포트폴리오 상태를 문자열·숫자·불리언 변수로 표현하고, 값을 변경했을 때 출력과 조건 결과가 달라지는 과정을 확인합니다.

시작 전 상태

portfolio/index.html의 head에 defer 스크립트 연결을 추가하고 portfolio/js/main.js를 준비합니다. 서버를 켠 뒤 Console을 열고 이전 오류가 없는지 확인합니다.

1단계: 따라 하기

예제 코드를 직접 입력하고 예상 출력과 실제 Console을 한 줄씩 비교합니다. 각 값에 typeof를 적용해 string, number, boolean, object(null의 역사적인 언어 특성), undefined를 확인합니다.

2단계: 값을 바꾸고 결과 비교

completedLessons를 25로 바꾸고 진행 문자열을 확인합니다. isPortfolioPublished를 true로 바꾸고 출력도 비교합니다. 다음으로 숫자 25를 문자열 "25"로 바꿔 completedLessons + 1의 결과가 26이 아닌 "251"이 되는지 확인한 뒤 숫자로 복구합니다.

3단계: 조건과 연결하기

진행 수가 20 이상일 때만 다른 메시지가 나오도록 작성합니다.

if (completedLessons >= 20) {
  console.log("포트폴리오 프로젝트를 시작할 수 있습니다.");
} else {
  console.log("기초 강의를 조금 더 진행하세요.");
}

17과 25를 번갈아 대입해 어느 문장이 출력되는지 확인합니다. 비교 결과가 불리언이 되고, if가 그 참·거짓에 따라 한 블록만 실행한다는 점을 말로 설명합니다.

4단계: 직접 적용

자신의 포트폴리오를 나타내는 변수 세 개를 새로 만듭니다. 예를 들어 프로젝트 이름, 남은 작업 수, 모바일 대응 여부를 서로 알맞은 자료형으로 선언합니다. 정답 코드를 복사하지 말고 변수 이름만 읽어도 용도가 드러나는지 확인합니다.

막혔을 때

Assignment to constant variable 오류: 바뀌어야 하는 값이라면 선언을 let으로 바꾸고, 바뀌면 안 되는 값이라면 재대입 줄을 제거합니다.
main.js가 실행되지 않음: Network 탭에서 요청 상태와 src="js/main.js" 경로를 확인합니다.
숫자 계산이 글자로 이어짐: typeof로 값을 확인하고 입력 문자열을 Number(value)로 변환합니다.
오류 뒤의 출력이 전부 사라짐: Console의 가장 첫 오류와 줄 번호부터 고친 뒤 새로 고칩니다.

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

7. 이해 점검 질문 3개

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

핵심 요약

변수는 프로그램이 다시 사용할 값에 이름을 붙입니다. 기본은 const로 선언하고 실제로 재대입이 필요한 값만 let을 사용합니다.
문자열·숫자·불리언은 가능한 연산과 사용 목적이 다르며, null과 undefined도 같은 "빈 값"이 아닙니다.
Console의 실제 값과 typeof, 값 변경 전후 출력을 함께 보면 데이터 흐름을 추적할 수 있습니다.

다음 강의 연결

이번 강의에서 만든 불리언과 비교 결과는 프로그램의 실행 경로를 선택하는 데 사용됩니다. 18강. 조건과 반복 흐름에서 if와 반복문으로 화면에 필요한 판단을 확장합니다.

MINI QUIZ