생활코딩 WEB2 JavaScript 강의 후기｜핵심 개념 한 번에 정리하기

JavaSecipt 입문 정리

TIL · JavaScript

생활코딩 JavaScript 입문
강의 듣고 정리한 핵심 개념들

생활코딩 JavaScript 강의를 들으면서 중요하다고 느낀 개념들을 내 방식으로 다시 정리했다.
JS 처음 시작하는 사람들한테도 도움이 됐으면!

2026 · 개발자지니

Table of Contents

1. JS가 뭔지, 왜 배우는지
2. HTML/CSS와 JS의 관계
3. JS 기본 문법 — 데이터타입, 변수, 연산자
4. HTML과 JS의 연결 — script 태그, 이벤트, 콘솔
5. 웹브라우저 제어 — querySelector, style 변경
6. 조건문과 반복문
7. 배열 (Array)
8. 함수 (Function)
9. 객체 (Object)
10. 라이브러리 vs 프레임워크
11. UI vs API
12. 다음에 공부할 것들

01

JS가 뭔지, 왜 배우는지

웹페이지를 만들 때 HTML은 정보를 담는 그릇이고, CSS는 그걸 예쁘게 꾸며주는 역할을 한다. 근데 이 둘만으로는 사용자랑 상호작용하는 동적인 페이지를 만들 수 없어.

그래서 등장한 게 JavaScript. HTML이 멈춰있는 이미지라면, JS는 그걸 움직이게 하는 영화 같은 존재다. 주간모드/야간모드처럼 사용자 행동에 반응해서 페이지를 바꿔주는 게 바로 JS의 역할!

언어	역할	비유
HTML	구조/정보	멈춰있는 이미지
CSS	스타일/디자인	이미지의 색감/구도
JavaScript	동작/상호작용	움직이는 영화

02

HTML과 JS의 연결

HTML 안에서 JS를 쓰려면 <script></script> 태그를 사용하면 된다.

그리고 버튼 같은 태그에 onclick 속성을 달아서, 클릭했을 때 JS 코드가 실행되도록 연결할 수 있어. 이런 걸 이벤트(Event)라고 함.

대표적인 이벤트 종류: onclick (클릭), onchange (값 변경), 그 외 키보드/마우스 이벤트 등 10~20개 정도 있다.

EXAMPLE

<input type="button" value="클릭!" onclick="alert('클릭됨!')">

<script>

document.write('화면에 텍스트 출력');

</script>

💡 팁: 개발자도구 콘솔창에서 바로 JS를 실행해볼 수 있어! 파일 안 만들어도 됨.

03

JS 기본 문법 — 데이터타입, 변수, 연산자

데이터타입(DataType)에는 크게 두 가지가 있어.

• Number (숫자): 1, 2, 100 같은 숫자
• String (문자열): '안녕', "hello" 같이 따옴표로 감싼 텍스트

헷갈리면 안 되는 게, 1+1 = 2지만 '1'+'1' = '11'이야. 타입이 다르면 결과도 달라짐!

변수(variable)는 값이 바뀔 수 있는 그릇. var 키워드로 선언하고, =은 대입 연산자야 (수학의 등호랑 다름!).

EXAMPLE

var name = 'egoing'; // 변수 선언 + 대입

console.log(name); // 'egoing' 출력

name = 'leezche'; // 값 변경 — 변수 덕분에 한 곳만 수정하면 됨

04

웹브라우저 제어 — querySelector

JS로 HTML 태그를 선택하고 스타일을 바꿀 수 있어. document.querySelector()를 사용하면 CSS 선택자로 태그를 잡을 수 있음.

선택자 규칙은 CSS랑 똑같아: 태그 그대로 쓰거나, .클래스명, #아이디명 형식으로 쓰면 됨.

야간모드 구현 예제

document.querySelector('body').style.backgroundColor = 'black';

document.querySelector('body').style.color = 'white';

// 리팩토링: 중복 제거

var target = document.querySelector('body');

target.style.backgroundColor = 'black';

target.style.color = 'white';

05

조건문과 반복문

비교 연산자 ===는 좌항과 우항이 같으면 true, 다르면 false (Boolean)를 반환해.

조건문(if)은 이 Boolean 값에 따라 실행할 코드를 달리함. 야간/주간 버튼처럼 토글 기능 만들 때 필수!

반복문(while)은 같은 코드를 여러 번 실행할 때. 100개 항목에 같은 처리를 해야 한다면? 반복문 없이는 절망적이야 😅

토글 버튼 예제

if(this.value === 'night') {

target.style.backgroundColor = 'black';

this.value = 'day';

} else {

target.style.backgroundColor = 'white';

this.value = 'night';

}

06

배열 (Array)

배열은 여러 개의 값을 하나의 변수에 담는 수납상자. 대괄호 []를 사용해서 만들어.

주요 속성/메소드: .length (개수), .push() (맨 뒤에 추가), 인덱스는 0부터 시작!

var coworkers = ['egoing', 'leezche'];

console.log(coworkers[0]); // 'egoing'

coworkers.push('duru'); // 추가

console.log(coworkers.length); // 3

// 반복문으로 배열 전체 출력

var i = 0;

while(i < coworkers.length) {

document.write(coworkers[i]);

i = i + 1;

}

07

함수 (Function)

함수는 반복되는 코드를 하나로 묶어서 이름 붙이는 것. 입력(parameter/argument)과 출력(return)으로 이루어져 있어.

return을 쓰지 않으면 함수 밖에서 값을 사용할 수 없으니 주의!

이벤트 핸들러 함수에서 this가 전역객체를 가리키는 문제 때문에, 버튼 자신을 참조할 땐 this를 매개변수(self)로 넘겨줘야 해.

function nightDayHandler(self) {

var target = document.querySelector('body');

if(self.value === 'night') {

target.style.backgroundColor = 'black';

self.value = 'day';

}

}

// 호출할 때 this를 넘겨줌

<input onclick="nightDayHandler(this)">

08

객체 (Object)

객체는 연관된 변수(프로퍼티)와 함수(메소드)를 하나로 묶어서 정리정돈하는 도구. 폴더처럼 생각하면 됨.

중괄호 {}로 만들고, 점(.) 연산자로 접근해. document.querySelector()에서 document가 객체, querySelector가 메소드인 것처럼!

객체 전체를 순회할 땐 for...in 반복문을 사용해.

var Body = {

setColor: function(color) {

document.querySelector('body').style.color = color;

},

setBackgroundColor: function(color) {

document.querySelector('body').style.backgroundColor = color;

}

}

// 메소드 호출

Body.setBackgroundColor('black');

09

라이브러리 vs 프레임워크

둘 다 다른 사람이 만든 코드를 활용한다는 공통점이 있어. 차이는 내가 주도권을 갖냐 아니냐.

📚 LIBRARY

내가 필요한 부품을 직접 가져다 쓰는 방식. 내가 코드의 흐름을 제어함. (예: jQuery)

🏗️ FRAMEWORK

이미 만들어진 틀 안에 들어가서 필요한 부분만 채우는 방식. 흐름은 프레임워크가 제어함.

jQuery 예시 — 모든 a태그 색상 변경

// 순수 JS (반복문 필요)

var alist = document.querySelectorAll('a');

// jQuery (한 줄로 해결!)

$('a').css('color', 'red');

10

UI vs API

UI(User Interface)는 사용자가 시스템을 제어하기 위해 사용하는 조작 장치. 버튼, 입력창 같은 것들.

API(Application Programming Interface)는 개발자가 프로그래밍할 때 사용하는 조작 장치. alert()같은 함수들은 웹브라우저 제작자가 미리 만들어두고 약속한 API야. 우리는 그걸 호출해서 사용하는 것.

구분	대상	예시
UI	일반 사용자	버튼, 메뉴, 입력창
API	개발자	alert(), querySelector(), document

11

다음에 공부할 것들

강의 마지막에 앞으로 배워야 할 것들도 알려줬는데, 로드맵으로 기록해두기.

DOM

태그 추가/삭제 등 페이지 구조 조작

Ajax

페이지 리로드 없이 데이터 변경

Cookie

리로드 후에도 상태 유지, 개인화

window 객체

브라우저 자체 제어 (URL, 새창, 화면 크기)

WebRTC

화상 통신 웹앱

WebGL

3D 그래픽, 게임

🎉

생활코딩 JS 입문 완료!

처음엔 막막했는데 강의 다 듣고 나니까 JS의 전체 그림이 보이는 느낌. 이제 프로젝트 하나 만들면서 익혀봐야겠다. 다음 목표는 DOM이랑 Ajax!

개발자지니 · 생활코딩 JavaScript 입문 정리