Reporch
문제
랭킹
포럼
챌린지
소개
IDE
로그인
회원가입
JavaScript 기초 | Reporch
목록
학습 경로
JavaScript 기초
변수, 조건, 함수, 배열과 객체를 사용해 데이터를 다루는 기초를 익힙니다.
0 / 16
0%
01
const로 문자열 저장하기
5
## 이번 단계에서 배울 내용 변수는 값을 다시 사용할 수 있도록 붙이는 이름입니다. `const`는 다른 값으로 다시 대입하지 않을 변수를 만들고, 문자열은 따옴표로 감쌉니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const course = 'JavaScript'; console.log(course); ``` ## 해야 할 일 `message` 상수에 `JavaScript를 시작합니다.`를 저장하고 결과 영역에 표시하세요. ## 완성 조건 - message는 const로 선언합니다. - 결과 영역에 정확한 문장이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
02
숫자와 산술 연산 사용하기
5
## 이번 단계에서 배울 내용 JavaScript의 숫자는 따옴표 없이 작성합니다. `+`, `-`, `*`, `/` 연산자로 계산한 결과를 새 변수에 저장할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const price = 3000; const count = 2; const total = price * count; ``` ## 해야 할 일 `price` 4500과 `count` 3을 곱한 값을 `total`에 저장하고 결과 영역에 표시하세요. ## 완성 조건 - 숫자 4500과 3을 사용해 곱셈합니다. - 결과 영역에 13500이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
03
템플릿 리터럴로 문장 만들기
5
## 이번 단계에서 배울 내용 백틱으로 만든 템플릿 리터럴에서는 `${이름}` 자리에 변수 값을 넣을 수 있습니다. 여러 문자열을 `+`로 이어 붙이는 것보다 읽기 쉽습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const name = '민지'; const greeting = `안녕하세요, ${name}님!`; ``` ## 해야 할 일 `name` 값 `서준`을 사용해 `서준님, 환영합니다!` 문장을 만들고 표시하세요. ## 완성 조건 - 템플릿 리터럴로 name 값을 문장에 넣습니다. - 완성된 환영 문장이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
04
비교 결과를 불리언으로 저장하기
5
## 이번 단계에서 배울 내용 비교식의 결과는 `true` 또는 `false`인 불리언 값입니다. `>=`는 왼쪽 값이 오른쪽 값보다 크거나 같은지 확인합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const age = 20; const isAdult = age >= 19; ``` ## 해야 할 일 점수 `85`가 합격 기준 `80` 이상인지 비교해 결과를 화면에 표시하세요. ## 완성 조건 - `score >= passingScore` 비교를 사용합니다. - 결과 영역에 true가 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
05
if와 else로 조건에 따라 선택하기
5
## 이번 단계에서 배울 내용 `if`는 조건이 참일 때 코드를 실행하고, `else`는 거짓일 때 다른 코드를 실행합니다. 조건에 따라 사용자에게 다른 안내를 보여 줄 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript if (temperature >= 25) { message = '더워요'; } else { message = '선선해요'; } ``` ## 해야 할 일 재고가 3개 있으므로 결과 영역에 `구매 가능`을 표시하고, 재고가 0이면 `품절`을 표시하도록 작성하세요. ## 완성 조건 - stock이 0보다 큰지 if로 확인합니다. - 현재 화면에는 구매 가능이 표시됩니다. - else에서 품절을 처리합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
06
함수로 반복할 동작 묶기
5
## 이번 단계에서 배울 내용 함수는 여러 줄의 동작을 이름 하나로 묶습니다. `function 함수이름() { ... }`로 선언하고 괄호를 붙여 호출합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript function showWelcome() { return '환영합니다'; } ``` ## 해야 할 일 `getCourseName` 함수를 만들고 `프론트엔드 기초`를 반환한 뒤 화면에 표시하세요. ## 완성 조건 - getCourseName 함수를 선언합니다. - 함수를 호출한 반환값이 화면에 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
07
매개변수와 반환값 사용하기
5
## 이번 단계에서 배울 내용 매개변수는 함수를 호출할 때 전달받는 값의 이름입니다. 함수가 계산한 값을 `return`하면 호출한 곳에서 다시 사용할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript function add(a, b) { return a + b; } const result = add(2, 3); ``` ## 해야 할 일 가격과 수량을 받아 곱한 값을 반환하는 `calculateTotal` 함수를 만들고 `6000`과 `4`를 전달하세요. ## 완성 조건 - 함수는 price와 quantity 두 매개변수를 받습니다. - 곱한 값을 return합니다. - 화면에 24000이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
08
배열에 여러 값 저장하기
5
## 이번 단계에서 배울 내용 배열은 순서가 있는 여러 값을 하나의 변수에 저장합니다. 대괄호 안에 값을 쉼표로 구분하고, 첫 번째 값의 위치 번호는 0입니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const colors = ['red', 'green', 'blue']; const first = colors[0]; ``` ## 해야 할 일 `HTML`, `CSS`, `JavaScript`를 배열에 저장하고 두 번째 값을 화면에 표시하세요. ## 완성 조건 - 세 문자열이 순서대로 배열에 들어 있습니다. - 인덱스 1을 사용해 CSS를 표시합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
09
배열에 값 추가하고 길이 확인하기
5
## 이번 단계에서 배울 내용 `push()`는 배열의 끝에 새 값을 추가합니다. 배열의 `length` 속성은 현재 들어 있는 값의 개수를 알려 줍니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const tasks = ['읽기']; tasks.push('연습'); console.log(tasks.length); ``` ## 해야 할 일 두 과목이 있는 배열 끝에 `접근성`을 추가하고 최종 개수 3을 표시하세요. ## 완성 조건 - push로 접근성을 추가합니다. - 배열 length가 화면에 3으로 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
10
객체로 관련 정보 묶기
5
## 이번 단계에서 배울 내용 객체는 서로 관련된 값을 이름이 있는 속성으로 묶습니다. 중괄호 안에 `이름: 값` 형태로 작성합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const book = { title: '웹 기초', pages: 120 }; ``` ## 해야 할 일 제목 `CSS 입문`과 진도 `60`을 가진 course 객체를 만들고 제목을 화면에 표시하세요. ## 완성 조건 - course 객체에 title과 progress 속성이 있습니다. - 제목 CSS 입문이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
11
중첩 객체의 속성 읽기
5
## 이번 단계에서 배울 내용 객체의 속성 값으로 또 다른 객체를 넣을 수 있습니다. 바깥에서 안쪽 순서로 점을 이어 `student.profile.name`처럼 읽습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const user = { profile: { nickname: '코더' } }; const name = user.profile.nickname; ``` ## 해야 할 일 준비된 student 객체에서 도시 `부산`을 꺼내 화면에 표시하세요. ## 완성 조건 - 중첩된 address의 city 속성을 읽습니다. - 화면에 부산이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
12
for...of로 배열 순회하기
5
## 이번 단계에서 배울 내용 `for...of` 반복문은 배열의 값을 처음부터 하나씩 꺼냅니다. 같은 계산을 모든 값에 적용할 때 유용합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript let total = 0; for (const number of [1, 2, 3]) { total += number; } ``` ## 해야 할 일 점수 배열 `[10, 20, 30]`을 순회해 합계 60을 화면에 표시하세요. ## 완성 조건 - for...of로 모든 점수를 순회합니다. - 누적한 합계 60이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
13
map으로 새 배열 만들기
5
## 이번 단계에서 배울 내용 `map()`은 배열의 각 값을 변환해 같은 길이의 새 배열을 만듭니다. 원래 배열은 바꾸지 않습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const doubled = [1, 2, 3].map((number) => number * 2); ``` ## 해야 할 일 가격 배열 `[1000, 2000, 3000]`의 각 값에 10%를 더한 새 배열을 만들고 쉼표로 표시하세요. ## 완성 조건 - map을 사용해 새 배열을 만듭니다. - 화면에 1100, 2200, 3300이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
14
filter로 조건에 맞는 값만 고르기
5
## 이번 단계에서 배울 내용 `filter()`는 조건이 참인 값만 모아 새 배열을 만듭니다. 원본 배열은 그대로 유지됩니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const adults = ages.filter((age) => age >= 19); ``` ## 해야 할 일 점수 `[45, 80, 67, 92]`에서 70 이상만 골라 화면에 표시하세요. ## 완성 조건 - filter 조건은 score >= 70입니다. - 화면에 80, 92가 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
15
구조 분해로 필요한 속성 꺼내기
5
## 이번 단계에서 배울 내용 객체 구조 분해는 여러 속성을 짧게 꺼내는 문법입니다. `const { title, level } = course`처럼 속성 이름을 중괄호 안에 씁니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const user = { name: '민수', age: 20 }; const { name, age } = user; ``` ## 해야 할 일 course 객체에서 title과 level을 구조 분해하고 `JavaScript · 초급`으로 표시하세요. ## 완성 조건 - 객체 구조 분해로 두 속성을 꺼냅니다. - 두 값이 가운데 점과 함께 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
16
배열과 함수를 조합해 통계 만들기
5
## 이번 단계에서 배울 내용 작은 기능도 변수, 함수, 배열 메서드를 조합하면 명확하게 만들 수 있습니다. 계산은 함수에 두고 화면 표시는 마지막에 분리하면 읽기 쉽습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript function average(values) { const total = values.reduce((sum, value) => sum + value, 0); return total / values.length; } ``` ## 해야 할 일 `calculateAverage` 함수에서 점수 배열의 평균을 구하고 `평균: 80점`을 표시하세요. ## 완성 조건 - 함수는 scores 배열을 매개변수로 받습니다. - reduce 또는 반복문으로 합계를 구합니다. - 평균 80점이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%