프론트엔드 실무 코딩 랩

JavaScript 기초 학습 – 프론트엔드 기초 로드맵

Coding Learning Lab실무 코드 리뷰 노트

JavaScript Code Review Path

개념을 읽은 뒤 같은 실수 문제로 바로 넘어갑니다

각 단계는 한 가지 실무 실수만 다룹니다. return 누락, 조건 분기, 배열 누적, 객체 필터링을 확인하고 바로 연결된 문제에서 채점하세요.

8단계 노트 보기 return 누락 문제 풀기 filter return 문제 풀기
1단계JavaScript 실행 흐름함수 return, 조건문, 배열/객체 흐름을 먼저 잡습니다.
2단계TypeScript 데이터 계약값이 없거나 형태가 다른 API 응답을 타입으로 막습니다. 3단계React 화면 상태상태 변경이 화면에 반영되는 흐름으로 연결합니다.

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입니다.
추천 문제: sum, isEven바로 문제 풀기
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도 함께 씁니다.
추천 문제: DOM 렌더링, fetch 헬퍼바로 문제 풀기

다음 단계

이 페이지를 한 번 훑은 뒤 실습 랩에서 JavaScript 30문제를 순서대로 풀어보세요. 막히는 주제는 해당 모듈로 돌아와 핵심과 흔한 실수를 다시 확인하면 됩니다.

JavaScript 30문제 풀기 TypeScript/React 샘플 보기