2024-05-13 내배캠 스탠다드 1일차

JS 문법 확인 문제풀이

문제 1 (for문)

문제

다음 문자열 배열에서 stop 문자를 만났을 때 반복을 중지하고, skip 문자를 만났을 때 해당 반복을 건너뛰고 나머지 문자열들을 출력하세요.

let words = ['apple', 'banana', 'skip', 'cherry', 'stop', 'date', 'elephant'
];

풀이

// Pseudo Code
// 1. words 배열을 순회하면서 stop을 만나면 break;
// 2. 순회하면서 skip을 만나면 continue;
// 3. [apple, banana, cherry] -> "apple, banana, cherry"

let words = ['apple', 'banana', 'skip', 'cherry', 'stop', 'date', 'elephant'
];

// for문으로 해결하기
const resultArr = [];
for (let i = 0; i < words.length; i++) {
    if (words[i] === 'stop') break; // stop을 만나면 for문을 빠져나감.
    if (words[i] === 'skip') continue; // skip을 만나면 for문 아래를 실행 안 하고 다음 반복으로 넘어감.
    resultArr.push(words[i]);
}
// for문 안에는 3개가 오는데, i라는 인덱스 변수를 보통 0으로 초기화 하고
// 조건문을 씀. (i < 인덱스의 개수만큼 반복하라)
// 여기서 words.length는 7이다. 배열의 요소의 개수를 말함.
// for(1, 2, 3) {} 형태로 작성하는데, 1은 초기값, 2는 조건, 3은 {} 코드블럭 실행 후 마지막으로 실행할 내용.

팁

VSCode에서 Debugger를 사용하는 법을 숙지하면 코드가 어떻게 돌아가는지 이해하기 편하다.

문제 2 (단축 속성명)

문제

아래 변수들을 사용하여 단축 속성명을 이용한 객체를 생성하세요.

let a = "hello";
let b = "world";

const obj = {};

해답

단축 속성명을 이용한다.

const a = 1;
const b = 2;
const obj = {
    a: a;
    b: b;
}

// 위 객체를 보면 보통은 아래와 같이 쓸 것.
const obj = {
    a: 'a',
    b: 'b'
}

// 그런데 맨 위의 값에는 따옴표가 없으니 a, b라는 변수를 가리키는 게 된다.

let a = "hello";
let b = "world";

const obj = {
    a: a,
    b: b
};

// 이런 형태일 때 a: a는 그냥 a 하나로 줄여서 쓰는 것이 단축 속성명이다.
let a = "hello";
let b = "world";

const obj = {
    a,
    b
};

// 한 줄로 더 줄이면
const obj = { a, b };

문제 3 (스프레드 연산자)

문제

아래의 배열을 전개구문을 사용하여 새로운 배열에 복사하세요.

let fruits = ['apple', 'banana', 'cherry'];
let newFruits;
// 여기에 코드를 작성하세요.
newFruits = fruits;
console.log(newFruits === fruits); // true

// 테스트
// newFruits 배열이 ['apple', 'banana', 'cherry']인지 확인하고
// 원본 fruits 배열과는 다른 참조를 가지고 있는지 확인하라.

풀이

let fruits = ['apple', 'banana', 'cherry'];
let newFruits;
// 여기에 코드를 작성하세요.
newFruits = [fruits];
// 대괄호를 씌우면 값을 새로 입력하는 게 돼서 참조만 복사하는 게 아니라
// 새로운 값이 만들어진다.
console.log(newFruits === fruits); // false

// 그런데 문제가 있다. fruits 자체가 [] 배열인지라 [[]] 배열 밖에 배열을 또 씌운 형태라
// 이중 배열이 된다.
// 괄호를 벗기고 넣어야 하기 때문에
// ...fruits와 같이 spread operator를 사용해서 괄호를 벗기고 넣어야 함.

let fruits = ['apple', 'banana', 'cherry'];
let newFruits;
newFruits = [ ...fruits ];
console.log(newFruits === fruits); // false

문제 4 (비동기 코드)

사전 학습

Promise란

3가지 상태를 갖는다.

• pending: 결과가 아직 안 나옴
• resolve: 성공했으면...
• reject: 실패했으면...

이 부분은 어려워서 강의 흐름을 놓침.

별도로 학습 예정.

문제 5

문제

아래 html 문서에 리스트를 하나 더 만들어 'mango'를 하나 더 만드시오.

<ul id="myList">
<li>apple</li>
<li>banana</li>
</ul>

풀이

<ul id="myList">
<li>apple</li>
<li>banana</li>
</ul>

<script>
    const ul = document.getElementById('myList');
    const li = document.getElementById('li');
    li.textContent = "mango"; // li 요소에 들어갈 텍스트를 만듦.
    ul.appendChild(li); // ul 안에 자식요소로 li을 하나 더 만듦.
</script>

React 프로젝트 세팅하기

미학습한 부분으로 추후 학습 예정.