CL
Coding Learning Lab기초 학습부터 실습 채점까지
8개 기초 모듈
01시작하기
JavaScript가 웹에서 하는 일
JavaScript는 버튼 클릭, 입력값 확인, 화면 변경, 서버 데이터 처리처럼 사용자의 행동에 반응하는 코드를 만듭니다.
핵심코드는 위에서 아래로 실행되고, 함수로 동작을 묶습니다.
실무 예문의 폼 제출 전 필수 입력값을 확인합니다.
주의HTML/CSS 수정과 동작 코드를 구분합니다.
function showMessage() {
return "학습을 시작합니다";
}바로 확인 문제
showMessage()가 값을 돌려주려면 return이 필요합니다.02변수와 값
값을 이름으로 저장하기
const와 let은 값에 이름을 붙이는 도구입니다. 상품 가격, 로그인 상태, 선택 항목처럼 화면 로직에 필요한 값을 담습니다.
핵심바뀌지 않으면
const, 바뀌면 let을 씁니다.실무 예가격과 배송비를 더해 결제 금액을 만듭니다.
주의숫자와 문자열을 섞으면 예상과 다른 결과가 나옵니다.
const price = 12000;
const shippingFee = 3000;
const total = price + shippingFee;바로 확인 문제
price + shippingFee의 결과는 15000입니다.03함수
입력받고 결과 반환하기
함수는 반복되는 계산이나 판단에 이름을 붙여 재사용하는 방법입니다. 매개변수로 값을 받고 return으로 결과를 돌려줍니다.
핵심입력, 처리, 반환을 분리해서 생각합니다.
실무 예금액 계산, 권한 체크, 입력값 검증에 자주 씁니다.
주의
return이 없으면 undefined가 반환됩니다.function sum(a, b) {
return a + b;
}바로 확인 문제
sum(2, 3)은 5입니다.04조건문
상황에 따라 다른 결과 만들기
if와 else는 조건에 따라 다른 코드를 실행합니다. 버튼 활성화, 권한 체크, 점수 등급처럼 판단이 필요한 곳에 쓰입니다.
핵심조건식은 보통
true 또는 false로 평가됩니다.실무 예로그인 여부에 따라 메뉴를 다르게 보여줍니다.
주의성공 경로뿐 아니라 실패 경로도 값을 반환해야 합니다.
function isEven(num) {
if (num % 2 === 0) {
return true;
}
return false;
}바로 확인 문제
isEven(5)는 false입니다.05반복문
여러 값을 하나씩 처리하기
반복문은 목록을 순회하거나 값을 누적할 때 사용합니다. 배열 합계, 문자열 반복, 목록 렌더링의 기본이 됩니다.
핵심누적값은 반복문 밖에서 만들고 반복문 안에서 갱신합니다.
실무 예주문 목록의 총액을 계산합니다.
주의
return 위치가 너무 이르면 첫 값만 처리됩니다.function arraySum(numbers) {
let total = 0;
for (const number of numbers) {
total += number;
}
return total;
}바로 확인 문제
arraySum([1, 2, 3])은 6입니다.06배열
목록 데이터를 다루는 기본기
배열은 여러 값을 순서대로 담습니다. 프론트엔드에서는 상품 목록, 사용자 목록, 검색 결과가 대부분 배열로 들어옵니다.
핵심
map, filter, reduce는 배열 실무의 핵심입니다.실무 예상품 목록에서 품절 상품만 제외합니다.
주의
forEach는 새 배열을 반환하지 않습니다.const prices = [12000, 8000, 3000];
const total = prices.reduce((sum, price) => sum + price, 0);바로 확인 문제
reduce의 마지막 0은 초기값입니다.07객체
실제 데이터 모양 이해하기
객체는 관련된 값을 이름 있는 속성으로 묶습니다. API 응답, 사용자 정보, 주문 정보는 대부분 객체 또는 객체 배열입니다.
핵심
user.name처럼 속성에 접근합니다.실무 예활성 사용자만 필터링해서 목록에 표시합니다.
주의속성명이 API 응답과 다르면 값이 나오지 않습니다.
function getActiveUsers(users) {
return users.filter(user => user.active);
}바로 확인 문제
filter 안의 조건이 true인 사용자만 남습니다.08DOM/비동기
화면과 서버 데이터를 연결하기
DOM은 화면 요소를 JavaScript로 다루는 방법이고, 비동기는 서버 응답처럼 시간이 걸리는 작업을 처리하는 방법입니다.
핵심요소를 찾고, 이벤트를 연결하고, 결과를 다시 화면에 반영합니다.
실무 예검색 버튼 클릭 후 API 결과를 목록으로 보여줍니다.
주의로딩, 실패, 빈 결과 상태를 함께 처리해야 합니다.
async function fetchUser() {
const response = await fetch("/api/user");
return response.json();
}바로 확인 문제
await는 Promise가 끝날 때까지 기다립니다. 실제 서비스에서는 try/catch도 함께 씁니다.다음 단계
이 페이지를 한 번 훑은 뒤 실습 랩에서 JavaScript 30문제를 순서대로 풀어보세요. 막히는 주제는 해당 모듈로 돌아와 핵심과 흔한 실수를 다시 확인하면 됩니다.