웹 프로그래밍(HTML5+CSS+javaScript) - 3 (Javascript)

JavaScript 필수 정리 (프론트엔드용)

---

1. 기본 문법 (기초 중의 기초)

항목설명예시

변수 선언	데이터를 저장	let x = 10; const PI = 3.14;
자료형	숫자, 문자열, 불리언, 배열, 객체 등	number, string, boolean, object
연산자	+, -, *, /, %, ===, &&, `
템플릿 문자열	문자열 안에 변수 넣기	`Hello, ${name}!`
조건문	분기 처리	if, else if, else, switch
반복문	반복 실행	for, while, for...of, forEach()

 

---

 

 

 

2. 함수 (Function)

구분설명예시

선언형 함수	기본적인 함수	function greet() { console.log("Hi!"); }
익명 함수	이름 없는 함수	const greet = function() { ... }
화살표 함수	간결한 표현	const add = (a, b) => a + b;
매개변수 기본값		function greet(name = "Guest") { ... }
return 문	함수의 반환값	return result;

 

 

 

 

---

 

 

3. DOM 조작 (웹 인터랙션의 핵심)

HTML 요소를 선택하고, 속성 변경, 이벤트 연결 등을 수행하는 부분

기능설명예시

요소 선택		document.querySelector('div'), getElementById('btn')
내용 변경		element.textContent = "Hello";, innerHTML
속성 변경		element.setAttribute('src', 'img.png');
스타일 변경		element.style.color = 'red';
클래스 조작		element.classList.add('active');
요소 추가/삭제		append(), remove(), createElement()

 

예시

const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
  document.body.style.backgroundColor = "lightblue";
});

 

 

 

 

 

---

 

 

 

 

4. 이벤트 처리 (Event Handling)

메서드설명예시

.addEventListener()	이벤트 리스너 등록	btn.addEventListener("click", func);
.removeEventListener()	이벤트 해제	btn.removeEventListener("click", func);
주요 이벤트	click, input, submit, change, mouseover, keydown 등

 

 

예시

const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault(); // 새로고침 방지
  console.log("폼 제출됨");
});

 

 

 

 

 

---

 

 

 

5. 배열 & 객체 조작

기능설명예시

배열 생성		let fruits = ['apple', 'banana'];
배열 메서드		.push(), .pop(), .map(), .filter(), .forEach(), .find()
객체	key-value 형태의 데이터	let user = { name: 'Lee', age: 21 };
객체 접근		user.name 또는 user['age']
객체 순회		for (let key in user) { ... }

 

예시

const users = ["kim", "lee", "park"];
users.forEach((u) => console.log(u.toUpperCase()));

 

 

 

 

 

---

 

 

 

6. 조건부 렌더링 & 토글

HTML/CSS와 함께 자주 쓰이는 핵심 기능.

 

const menu = document.querySelector(".menu");
const btn = document.querySelector("#toggle");

btn.addEventListener("click", () => {
  menu.classList.toggle("active"); // on/off 전환
});

 

 

 

 

---

 

 

 

7. Fetch API (데이터 통신)

기능설명예시

1. GET 요청: 서버에서 데이터 가져오는 요청

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data));

 

 

2. POST 요청: 서버로 데이터를 전송하는 요청

fetch("/submit", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Hyun", age: 20 })
});

 

 

3. async/await을 사용한 버전

async function loadData() {
  const res = await fetch("/api/user");
  const data = await res.json();
  console.log(data);
}

 

 

 

 

 

---

 

 

 

8. 로컬 스토리지 & 세션 관리

기능설명예시

 

localStorage.setItem()	데이터 저장	localStorage.setItem("theme", "dark");
localStorage.getItem()	데이터 읽기	const t = localStorage.getItem("theme");
localStorage.removeItem()	데이터 삭제	localStorage.removeItem("theme");

 

// 다크모드 저장
toggle.addEventListener("click", () => {
  localStorage.setItem("theme", "dark");
});

 

 

 

 

---

 

 

 

 

 

9. 모듈화 (프론트엔드 필수적이라고 )

개념설명예시

export	외부로 내보내기	export function add(a,b){return a+b}
import	불러오기	import { add } from './utils.js';

<script type="module" src="main.js"></script>

 

위의 코드를 사용하면 모듈을 사용할 수 있다.

리액트의 컴포넌트 단위로 개발을 하는것과 같은 원리인 듯 하다.

 

 

 

 

 

---

 

 

 

10. 자주 실무에서 사용하고 헷갈리는 패턴

 

 

1. 다크모드

const body = document.body;
document.querySelector("#mode").onclick = () => body.classList.toggle("dark");

 

 

2. 스크롤 시 네비게이션 고정

window.addEventListener("scroll", () => {
  document.querySelector("nav").classList.toggle("fixed", window.scrollY > 100);
});

 

 

3. 폼 유효성 검사

if (!email.includes("@")) alert("이메일 형식이 올바르지 않습니다.");

 

 

 

---

 

이로서 html, css, js의 필수적인 요소 학습이 끝이 났다. 다음번에는 이를 활용하여 제작한 서버리스 대시보드 프로젝트를 포스팅 하도록 하겠다.