[260706월 06일차] Mini-Project, JavaScript

# JavaScript 학습일지

[JS 1일차] JavaScript 첫걸음 + Netlify 배포
변수 · 데이터 타입 · 연산자 · 조건문 · 함수

2026.07.06 · 학습 범위: JS 01번 ~ 07번 + 배포(Netlify)

📋 오늘 다룬 것들

드디어 JavaScript에 들어갔다. HTML이 뼈대, CSS가 옷이라면 JS는 움직임과 반응을 담당한다. 오늘은 버튼을 눌러 제목을 바꾸는 "Hello world"부터 시작해, 값을 담는 변수, 값의 종류(데이터 타입), 계산·비교하는 연산자, 갈림길을 만드는 조건문, 그리고 명령을 묶는 함수까지 — JS의 가장 기본이 되는 문법들을 하나씩 손으로 만들어봤다. 모든 예제는 let·const·화살표 함수·템플릿 리터럴 같은 ES6+ 최신 문법으로 작성했다. 마지막엔 만든 결과물을 인터넷에 공개하는 Netlify 배포까지 다뤘다.

DOM 조작

querySelectortextContentaddEventListener

변수

letconst.value

데이터 타입

StringNumberBooleantypeof

연산자

+ - * /===!==

조건문

ifelse ifelse

함수 & 문법

화살표함수템플릿 리터럴

배포

Netlify드래그&드롭GitHub 연동

🚀 배포 — Netlify (04_netlify)

지금까지 만든 페이지는 localhost로 열어 내 컴퓨터에서만 볼 수 있었다. 배포는 내가 만든 파일을 인터넷 서버에 올려 누구나 접속하는 URL을 받는 것이고, Netlify는 완성된 HTML·CSS 파일을 그대로 올리는 호스팅 서비스다. 폴더를 드래그&드롭만 하면 되고, 무료라 학습·포트폴리오용으로 충분하다.

① 드래그&드롭 배포 (가장 쉬움)

Git 없이 파일 폴더를 끌어다 놓기만으로 1분 안에 공개된다. 시작 파일 이름은 반드시 index.html이어야 한다.

1가입app.netlify.com 접속 (무료 가입)

2드롭 영역Sites 화면의 "Drag and drop" 영역 찾기

3폴더 투척my-site 폴더를 통째로 끌어다 놓기

4URL 발급자동 업로드 → https://random-name-123.netlify.app

수정했으면 폴더를 다시 드래그&드롭하면 새 버전이 반영된다. Site settings → 이름 변경으로 URL도 정리할 수 있다.

---

② GitHub 연동 자동 배포 (한 단계 위)

드래그&드롭은 수정할 때마다 다시 올려야 한다. GitHub 저장소를 연결해두면 git push만으로 자동 재배포된다 — CI/CD를 처음 체험해본 셈.

# ① GitHub에 올리기
git init
git add .
git commit -m "first deploy"
git branch -M main
git remote add origin https://github.com/내아이디/my-site.git
git push -u origin main

이후 Netlify에서 Add new site → Import an existing project → GitHub 순으로 저장소를 연결하면(정적 HTML·CSS면 빌드 설정은 비워둠) 공개 URL이 발급된다. 그 다음부터는 코드 수정 → push → 몇 초 뒤 사이트가 자동 갱신된다.

---

③ 사이트 관리·배포 철회 (Danger zone)

배포한 사이트를 내리는 건 Danger zone에서 처리한다. Deploys 탭에서 Production · Published 표시가 현재 공개 중이라는 뜻이다.

동작	위치 · 의미
자동 배포 중단	배포 클릭 → Lock to stop auto publishing
임시로 내리기	Site → Configuration → General 하단 → Disable project (언제든 재활성화)
영구 삭제	Delete this project — 사이트 + URL 영구 삭제 (되돌릴 수 없음)

---

④ 커스텀 도메인 · HTTPS

기본 주소(iridescent-halva-e95c8e.netlify.app)를 보기 좋게 바꿀 수 있다. 서브도메인 이름만 바꾸거나, 내 도메인을 연결하는 두 방법이 있다.

1이름만 변경Domain management → Options → Edit project name → my-site.netlify.app (무료)

2내 도메인Add a domain → 보유 도메인 입력 → DNS 설정(Netlify DNS 또는 외부 CNAME)

HTTPS는 무료 자동(Let's Encrypt, 설정 불필요). 단, 도메인 구매는 별도(가비아·Cloudflare 등)다.

🎨 미니 프로젝트 — 직접 만들어 배포

배운 걸 실제로 써먹어 보려고, HTML·CSS만으로 한 페이지 웹사이트를 직접 만들어 Netlify에 배포했다. 제목은 「Yun:D 미니 프로젝트」. 상단 내비게이션(마음에 드는 사이트 · HTML/CSS 정리 · 퀴즈)으로 구획을 나누고, 스크롤해도 따라오는 position: fixed ↑ 버튼, 시맨틱 구조(header·nav·main·section·article·footer)까지 그동안 배운 요소를 최대한 담았다.

🔗 배포 주소 — https://hyj-mini-pr.netlify.app/  ·  GitHub 저장소

① 마음에 드는 웹사이트 분석 — Apple

애플 공식 홈페이지를 골라 정보 구조 · 비주얼 · 마케팅 설계 세 관점으로 뜯어봤다. 쇼핑몰인데도 가격·구매 버튼을 앞세우지 않고 큰 이미지와 짧은 카피로 "먼저 감상시키고 나중에 사게" 하는 흐름, 여백과 제품 사진이 주인공인 절제된 비주얼, Trade In·Apple Card·구독 서비스로 생태계에 묶어두는 설계를 정리했다. 좋은 점(20년 넘게 지킨 일관성·명확한 정보 위계)과 아쉬운 점(가격·스펙 탐색이 한 단계 더 필요, 제품 비교가 번거로움)까지 내 의견으로 마무리했다.

② HTML · CSS 정리

페이지 안에 그동안 배운 내용을 실제로 동작하는 예제와 함께 정리해 넣었다. HTML은 문서 기본 구조부터 제목·문단, 텍스트 강조, 목록, 링크·이미지, 표, 폼, 미디어, 시맨틱 구조까지 9개 항목. CSS는 적용 3가지 방법·선택자·박스 모델·크기/색·flex·grid·position·가상클래스/가상요소·transform/transition/animation·꾸밈 효과·반응형 @media·CSS 변수/리셋까지 12개 항목. 코드와 그 결과를 나란히 보여줘서 "이 코드가 이렇게 그려진다"를 바로 확인할 수 있게 했다.

③ HTML · CSS 퀴즈

정리한 내용을 스스로 점검하도록 객관식·단답 퀴즈 5문제를 넣고, "정답 보기"를 누르면 답과 해설이 펼쳐지게 했다(ol vs ul, href/src, margin/padding, :hover, display: flex). 읽기만 하는 정리를 넘어 복습까지 되도록 구성한 부분이다.

이 프로젝트에 녹인 것들 — 시맨틱 태그 구조, flex·grid 배치, position: fixed 고정 버튼, :hover·transform·transition 인터랙션, @media 반응형, 앵커 링크(#id) 내비게이션. HTML·CSS 파트에서 배운 대부분을 한 페이지에서 실제로 써봤다.

🔁 회고 — 잘한 점과 아쉬운 점

처음으로 기획부터 배포까지 혼자 끝까지 해봤다는 게 가장 뿌듯했다. 특히 "마음에 드는 사이트 분석"에서 애플 홈페이지를 정보 구조·비주얼·마케팅 관점으로 파고든 부분은 스스로도 꽤 만족스러웠다.

다만 아쉬운 점이 하나 분명했다. 사이트 분석이 마케팅·브랜드 관점으로 치우쳤다는 것. "왜 이렇게 팔리게 설계했나"는 열심히 봤는데, 정작 내가 이번 주에 배운 코드 관점 — 시맨틱 태그를 어떻게 썼는지, 레이아웃을 flex/grid 중 무엇으로 짰는지, 반응형은 어떻게 처리했는지 — 로는 거의 뜯어보지 못했다. 웹개발 공부의 일환인데 정작 "개발자의 눈"으로 보는 연습을 놓친 셈이다.

다음엔 이렇게 — 사이트를 고르면 F12로 실제 DOM을 열어 header·nav·main·section·article·footer를 어떻게 나눴는지, 메뉴는 flex인지, 카드 그리드는 grid인지, 브라우저를 줄였을 때 @media가 어디서 꺾이는지를 함께 기록하려 한다. 마케팅 분석 + 코드 분석을 한 세트로 보는 습관을 들이는 게 이번 회고의 목표다.

🗂️ 항목별 메모

01 — JavaScript란?

웹 페이지는 세 파일이 역할을 나눠 맡는다. HTML은 뼈대, CSS는 옷과 색깔, JavaScript는 움직임과 반응이다. JS로는 버튼 클릭 시 글자·그림 바꾸기, 사용자가 적은 이름 기억하기, 계산해서 결과 보여주기, 게임·애니메이션 같은 움직임을 만들 수 있다.

이 과정의 코드 규칙 — 전부 ES6+(2015년 이후 최신 문법)
· 변수는 let, 상수는 const (옛날 var는 안 씀)  · 함수는 화살표 함수 ( ) => { }  · 문장 조립은 템플릿 리터럴 `${ }` (옛날 + 이어붙이기 대신)

---

02 — Hello world! (첫 JavaScript)

페이지의 큰 제목(h1)을 JS로 바꾸는 첫걸음. HTML이 제목을 만들고, CSS가 꾸미고, JS가 글자를 바꾸는 — 세 파일이 협동하는 가장 작은 예제다. 핵심 흐름은 "요소를 찾아서(querySelector) → 이벤트를 연결하고(addEventListener) → 내용을 바꾼다(textContent)".

// id가 "title"인 제목을 찾아 상자에 담기
const title = document.querySelector("#title");
const btn = document.querySelector("#btn");

// btn을 클릭하면 안쪽 함수 실행 (이벤트 연결)
btn.addEventListener("click", () => {
  title.textContent = "Hello world!";  // 제목 글자 교체
});

구분	뜻
const	상수(constant) — 한 번 담으면 다시 안 바뀌는 상자
querySelector("#title")	메서드 — id로 요소 하나 찾기
() => { … }	화살표 함수(ES6) — 이름 없이 그 자리서 쓰는 함수
textContent	속성(property) — 요소 안 글자 내용

속성 vs 메서드 — 점 뒤 이름에 괄호 ( )가 붙으면 메서드(동작), 안 붙으면 속성(값). 그리고 같은 id 하나로 셋이 연결된다: HTML id="title" → CSS #title → JS querySelector("#title").

왜 CSS는 <head>에, <script>는 </body> 앞에?
위치가 문법상 강제는 아니지만(spec상 둘 다 어디든 허용) 관례가 있다. CSS를 <head>에 두는 건 그리기 전에 스타일을 알아야 스타일 안 입은 화면이 번쩍이는 현상(FOUC)을 막기 때문. <script>를 </body> 앞에 두는 건 HTML을 다 그린 뒤 실행돼야 querySelector가 요소를 찾을 수 있어서다(위에 두면 아직 요소가 없어 null). 실무에선 <head>에 두고 defer 속성을 붙이는 걸 권장(다운로드는 병렬, 실행은 파싱 후, 순서 보장).

---

03 — 변수 (값을 담는 상자)

변수는 이름표 붙은 상자다. 그 안에 숫자·글자 같은 값을 넣어두고, 상자 이름만 부르면 안에 든 값이 따라온다. 입력칸에 친 글자를 .value로 꺼내 변수에 담고, 템플릿 리터럴로 인사 문장에 끼워 넣었다.

const nameInput = document.querySelector("#name");

document.querySelector("#greet").addEventListener("click", () => {
  let myName = nameInput.value;      // .value = 입력칸 글자
  out.textContent = `안녕, ${myName}!`;  // 템플릿 리터럴
});

let vs const — let은 값을 나중에 바꿀 수 있는 상자, const는 한 번 담으면 고정. 그리고 =는 "이 값을 상자에 넣어"라는 뜻이지 "같다"는 비교가 아니다. 템플릿 리터럴 `안녕, ${이름}!`은 백틱 안 ${ }에 값을 끼우는 것 — 옛날 "안녕, " + 이름 이어붙이기의 최신 표기다.

---

04 — 데이터 타입 (값의 종류)

상자에 담는 값에도 종류가 있고, 종류에 따라 쓰는 법이 조금씩 다르다. 버튼 7개로 각 타입의 값과 typeof 결과를 확인했다.

종류	설명	예시
String	글자 (따옴표로 감싸기)	"Bob"
Number	숫자 (따옴표 없음)	10
Boolean	참 또는 거짓	true, false
undefined	값을 아직 안 넣음 (선언만)	let x; 뒤의 x
null	의도적 "비어있음" 표시	null
Array	여러 값을 한 줄에 묶기	[1, "Bob", 10]
Object	거의 모든 것 (덩어리)	{ name: "Bob" }

typeof 값 — 그 값의 타입을 글자로 알려준다("string"·"number"·"object" 등). 유명한 함정 하나: typeof null은 "object"로 나온다 — JS의 오래된 버그다.

---

05 — 연산자 & 주석

연산자는 값을 더하고 비교하는 기호, 주석(// 뒤)은 컴퓨터는 무시하고 사람만 읽는 메모다. 두 숫자와 기호를 골라 계산하는 예제로 익혔다.

기호	역할	예시
+	더하기 / 글자 잇기	6 + 9 → 15
- * /	빼기·곱하기·나누기	8 * 2 → 16
=	상자에 값 넣기	let x = 3;
===	같은지 비교 (참/거짓)	x === 3 → true
!==	다른지 비교	x !== 5 → true

+는 숫자끼리는 더하기, 글자끼리는 이어 붙이기. =는 넣기, ===는 같은지 비교 — 헷갈리지 않기. 입력칸 글자는 .value로 꺼낸 뒤 Number( )로 숫자로 바꿔야 계산이 된다.

---

06 — 조건문 (만약 ~라면)

"만약 이렇다면 이것을, 아니면 저것을 해"라고 컴퓨터에게 시키는 갈림길. if(만약)와 else(아니면)로 길을 나누고, 갈림길이 여럿이면 else if로 이어붙인다.

document.querySelector("#check").addEventListener("click", () => {
  if (flavor.value === "chocolate") {
    result.textContent = "와! 초코 좋아! 🍫";
  } else if (flavor.value === "vanilla") {
    result.textContent = "바닐라도 깔끔하지! 🍦";
  } else {
    result.textContent = "음... 그래도 초코가 최고인데...";
  }
});

⚡ === vs == — ===는 값뿐 아니라 타입까지 같아야 참이다. ==는 타입이 달라도 대충 맞춰 비교해서 헷갈리는 결과를 낸다. 실무에서는 항상 === 권장.

---

07 — 함수 (재사용하는 명령 묶음)

함수는 자주 쓰는 명령을 하나로 묶어 이름 붙인 것. 이름만 부르면(호출) 묶어둔 일을 척척 해준다 — 자판기 버튼 하나로 음료가 나오듯. 두 숫자를 곱하는 multiply 함수를 만들어 버튼으로 호출했다.

// (num1, num2 = 받아올 재료 = 매개변수)
// => 뒤가 한 줄이면 { return } 없이 그 값이 바로 반환됨
const multiply = (num1, num2) => num1 * num2;

document.querySelector("#calc").addEventListener("click", () => {
  out.textContent = `${a.value} × ${b.value} = ${multiply(Number(a.value), Number(b.value))}`;
});

화살표 함수 — 중괄호와 return의 관계 (main.js 주석 정리)

// ① 중괄호 없는 버전 — 결과를 자동으로 return
const multiply = (num1, num2) => num1 * num2;

// ② 중괄호 있는데 return 없음 — undefined 반환 (❌)
const multiply = (num1, num2) => {
  num1 * num2;      // 계산만 하고 버림
};

// ③ 중괄호 쓰려면 return 필요 (✅)
const multiply = (num1, num2) => {
  return num1 * num2;
};

즉 => 뒤가 한 줄이면 return·중괄호를 생략할 수 있지만, 중괄호를 열면 반드시 return으로 값을 돌려줘야 한다. 옛 표기 function multiply(){ return … }와 같은 동작이고, 화살표가 더 짧다.

💡 오늘 새로 알게 된 것 — 화살표 함수의 "조용한 함정"
가장 헷갈렸고, 그래서 가장 크게 남은 부분이다. 나는 막연히 "화살표 함수는 알아서 값을 돌려준다"고 생각했는데, 그게 중괄호를 안 썼을 때만 그렇다는 걸 오늘 처음 알았다. 중괄호 { }를 여는 순간 "이제부터 여러 줄 코드 블록"이라는 뜻이 되고, 그 안에서는 return을 직접 써야 값이 나온다. 안 쓰면 계산은 하지만 그 결과를 버려서 undefined가 반환된다 — 에러도 안 나서 더 헷갈리는 종류의 실수다.

num1 * num2;         // 중괄호 안: 계산만 하고 버림 → undefined
return num1 * num2;  // return 붙여야 값이 나옴 ✅

정리하면 "한 줄이면 생략 OK, 중괄호를 열면 return 필수". 앞으로 함수가 undefined를 뱉으면 제일 먼저 이 중괄호/return부터 확인하려고 한다.

✍️ 마치며

CSS까지는 "화면을 어떻게 보이게 하나"였다면, JS는 "화면이 어떻게 반응하나"라서 처음으로 페이지가 살아 움직이는 느낌이 들었다. 특히 querySelector로 요소를 잡고 addEventListener로 클릭에 반응시키는 이 세 줄 패턴이 오늘 배운 모든 예제의 뼈대라는 게 눈에 들어왔다. 그리고 그동안 HTML·CSS로 배운 것을 모아 직접 만든 미니 프로젝트를 인터넷에 배포까지 해보니, 흩어져 있던 조각들이 하나의 결과물로 이어지는 게 뿌듯했다. 다음엔 JS 이벤트를 더 깊게 다루고, 배열·객체로 실제 데이터를 굴려볼 예정이다.

🏷️ JavaScript  |  ES6  |  DOM  |  배포  |  미니프로젝트  |  학습일지