C-1: JavaScript 입문
안녕하세요, 홍순구 튜터입니다. 지난 시간까지 우리는 HTML로 뼈대를 세우고 CSS로 옷을 입혀서, 모든 화면에서 예쁘게 보이는 인스타그램을 완성했어요. 로그인 화면, 피드, 프로필까지 진짜 인스타그램과 거의 똑같이 생겼죠.
그런데 지난 시간 끝에 솔직하게 인정한 게 하나 있었어요. 우리 화면은 멈춰 있다는 거예요. 좋아요 버튼을 눌러도 숫자가 안 올라가고, 하트를 눌러도 아무 일이 없어요. 그냥 그림이죠. 사진을 인쇄해서 벽에 붙여둔 것과 다를 게 없어요.
오늘부터 그 멈춰 있던 화면에 생명을 불어넣습니다. 좋아요를 누르면 숫자가 실제로 올라가고, 조건에 따라 다른 메시지가 뜨고, 반복되는 일을 자동으로 처리하는 것. 이 "동작"을 담당하는 언어가 바로 JavaScript예요.
여기서 한 가지 구분을 해둘게요. CSS 애니메이션(하트가 통통 튀는 효과)도 곧 배우지만, 그건 "어떻게 보이느냐"의 문제예요. JavaScript는 "무엇을 하느냐"의 문제죠. 좋아요 숫자가 41에서 42로 진짜 바뀌는 것 — 그건 보이기의 문제가 아니라 동작의 문제고, JavaScript의 일이에요. 그래서 움직임(애니메이션)보다 논리(JavaScript)를 먼저 배웁니다.
HTML CSS JavaScript
뼈대 옷·화장 움직임·논리
┌──────┐ ┌──────┐ ┌──────────────┐
│ 무엇이│ │ 어떻게│ │ 무엇을 하는가 │
│ 있는가│ → │ 보이는가│ → │ (좋아요 +1!) │
└──────┘ └──────┘ └──────────────┘
집의 구조 페인트·가구 전기·수도가 흐름
오늘은 JavaScript의 가장 기초인 변수(값을 담아두기), 자료형(값의 종류), 연산자(계산·비교·판정), 조건문(상황마다 다르게), 반복문(같은 일을 여러 번), 그리고 결과를 확인하는 콘솔을 배웁니다. 마지막엔 이걸 다 모아서 좋아요 카운터를 직접 만들어요.
💡 오늘 수업의 핵심 — "변수에 값을 담고, 연산자로 계산하고, 조건문·반복문으로 흐름을 제어해서, 멈춰 있던 화면에 '동작'을 만든다. 결과는 콘솔에 바로 찍어 확인한다." 🎯
🎯 학습 목표
<script>태그로 HTML에 JavaScript를 연결하고, 개발자 도구 콘솔에서 결과를 확인합니다.console.log()로 값을 출력하며 "코드를 치면 바로 결과가 보이는" 즉시성을 체감합니다.- 변수
let·const·var의 차이를 알고, 값을 담고 바꿉니다. - 자료형(숫자·문자열·불린·undefined·null)을 구분하고
typeof로 확인합니다. - 산술·비교·논리 연산자로 값을 계산하고 조건을 판정합니다.
- 조건문
if/else/switch로 상황마다 다른 동작을 실행합니다. - 반복문
for/while/for...of로 같은 작업을 여러 번 수행합니다. - 변수·연산자·조건문·반복문을 모아 좋아요 카운터를 완성합니다.
Step 1: JavaScript 첫 만남 — console.log()로 결과 확인하기
JavaScript를 배우는 가장 빠른 길은, 코드를 한 줄 쓰고 결과가 바로 찍히는 걸 눈으로 보는 거예요. 이론은 그다음이에요. 먼저 손부터 움직여봅시다.
개발자 도구 콘솔 열기
브라우저에는 개발자를 위한 비밀 공간이 있어요. 바로 개발자 도구(DevTools)예요. 크롬에서 F12 키를 누르거나, 화면에 마우스 오른쪽 버튼 → "검사"를 누르면 열려요. 거기서 Console(콘솔) 탭을 클릭하세요.
콘솔은 JavaScript의 결과가 찍히는 칠판이라고 생각하면 돼요. 우리가 코드로 "이거 출력해줘"라고 시키면, 그 답이 여기에 나타나요.
HTML에 JavaScript 연결하기
CSS를 <link>로 연결했듯이, JavaScript는 <script> 태그로 연결해요. 우리 feed.html의 맨 아래, </body> 바로 앞에 이 한 줄이 들어가 있어요.
<!-- instagram-clone-frontend/feed.html -->
<script src="js/main.js"></script>
이렇게 연결해두면, feed.html을 열 때 브라우저가 js/main.js 파일에 적힌 JavaScript 코드를 위에서부터 차례대로 실행해요.