[Frontend] #02. JavaScript

Minseo Kim·2026년 1월 23일

[GDGoC PKNU]

목록 보기

4/10

들어가면서...

JS는 생활코딩 및 제출했던 과제를 예제로 삼아 문법 위주로 복습하려고 한다.

1️⃣ JavaScript

JavaScript는 동적인 웹 페이지를 만들기 위한 필수 스크립트 언어다.

JavaScript 소개

JavaScript는 HTML과 CSS로 구성된 정적인 페이지에 동적인 기능을 추가하는 언어다. 브라우저에서 실행되는 클라이언트 기반 언어로, 사용자와의 상호작용을 관리하거나 서버와 데이터를 주고받는 데 주로 사용된다.

JavaScript의 주요 특징

인터프리터 언어: 브라우저가 즉각적으로 소스를 해석하여 실행.
이벤트 기반: 사용자와의 이벤트(클릭, 입력 등)에 반응.
크로스 플랫폼: 어떤 운영체제에서든 브라우저를 통해 실행 가능.

자바스크립트 포함 방법

HTML 내부에 자바스크립트를 작성하거나 외부 파일을 연결하여 사용한다.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 예제</title>
</head>
<body>
  <h1 id="title">Hello, JavaScript!</h1>
  
  <!-- 1️⃣ HTML 내에서 작성 -->
  <script>
    console.log("JavaScript 실행 중!");
    document.getElementById("title").textContent = "JavaScript로 제목 변경 완료!";
  </script>
  
  <!-- 2️⃣ 외부 파일 연결 -->
  <script src="script.js"></script>
</body>
</html>

JavaScript 주요 개념

1️⃣ 변수 선언과 데이터 타입

변수를 선언하여 데이터를 저장하고 활용한다.
var는 재선언과 호이스팅 (Hoisting) 문제를 일으킬 수 있어 사용이 권장되지 않는다. 대신 let과 const를 사용한다.

// 변수 선언
let name = "생활코딩";   // 값 재할당 가능
const pi = 3.14;       // 값 재할당 불가

// 데이터 타입
let age = 25;          // Number
let isStudent = true;  // Boolean
let colors = ["Red", "Blue"]; // Array
let person = { name: "Min", age: 30 }; // Object

2️⃣ 조건문과 반복문

// 조건문
let score = 80;
if (score >= 90) {
  console.log("A 학점");
} else if (score >= 80) {
  console.log("B 학점");
} else {
  console.log("C 학점 이하");
}

// 반복문
for (let i = 1; i <= 5; i++) {
  console.log("반복 횟수: " + i);
}

3️⃣ 함수와 이벤트

코드를 재사용하기 위한 함수 정의
함수를 이용해 다양한 작업을 수행 가능

// 함수 정의
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("생활코딩"));

// 버튼 클릭 이벤트
document.getElementById("myButton").addEventListener("click", function () {
  alert("버튼 클릭됨!");
});

DOM 조작 (Document Object Model)

DOM은 HTML 문서를 프로그래밍적으로 조작할 수 있도록 제공되는 인터페이스다.

// HTML 요소 선택
let title = document.querySelector("#title");

// 컨텐츠 변경
title.textContent = "JavaScript DOM 조작 완료";

// 스타일 변경
title.style.color = "blue";
title.style.fontSize = "24px";

배열과 객체 활용

배열

let fruits = ["사과", "바나나", "오렌지"];
fruits.push("포도"); // 배열에 값 추가
console.log(fruits[0]); // "사과"

객체

let user = {
  name: "Min",
  age: 35,
  sayHi: function () {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
};
console.log(user.name);
user.sayHi();

🌱 과제: Todo List 제작

📌 과제 요구사항

Todo list 생성

이미 존재하는 할 일 목록 배열을 화면에 출력

아무것도 없는 상태에서 사용자가 직접 입력한 할 일을 추가할 수 있도록 구현

완료 / 미완료 상태 변수 적용

상태 값에 따라 필터링 기능 구현

배운 문법 적극 활용

DOM 조작, 배열 메서드 등 활용 가능

할 일 관리 기능

등록된 할 일을 삭제할 수 있는 기능 추가

등록된 할 일을 완료/미완료 상태로 설정할 수 있는 기능 추가

🔗 Repository Link 1️⃣
🔗 Repository Link 2️⃣

할 일 데이터(todos)를 id, text, completed 속성으로 구분하여 JSON 파일로 관리하고, 이를 불러와 렌더링하는 구조로 설계

필터 버튼(전체/미완료/완료)을 통해 할 일 목록을 조건별로 분류하여 보여줄 수 있도록 구현

각 할 일 항목은 DOM을 동적으로 생성하여 표시하며, 완료 여부를 토글할 수 있음

상태 정보 영역에서 전체, 완료, 미완료 개수를 실시간으로 집계하여 사용자에게 제공

목록이 비어 있을 때 상황에 맞는 안내 메시지를 출력

할 일 추가 입력창 및 버튼을 통해 새로운 할 일을 직접 입력하여 추가 가능

입력값을 검증하여 빈 값은 추가되지 않도록 처리

할 일 추가 시 목록이 자동으로 갱신되어 즉시 반영됨