코드스테이츠 부트캠프 프론트엔드 44기
Section 1 Unit 9 : [JavaScript] 핵심 개념과 주요 문법
1. Koans?
JavaScript Koans란, 코드스테이츠에서 시행하는 '코딩 퀴즈 과제'를 말한다.
코플릿(Coplit)이 백준/프로그래머스처럼 진행되는 반면, Koans는 주어진 .js 파일들을 알맞게 수정한 뒤 Git을 통해 제출하면 된다.
1.1. 겁 먹을 필요 없다
Koans라는 생소한 단어를 갖다 붙이는 등, 결론을 내리기 전에 깊게 고민해보는 시간을 갖지 않는다면 성장할 수 없다는 등, 배우지 않았던 게 문제에 의도적으로 포함되어 있다는 등, 학생들에게 온갖 겁을 다 먹이고 있다.
하지만 전혀 두려워할 필요 없다. 그냥 '코딩 퀴즈'라고 생각하고 부담 없이 임하자.
1.2. 초심자 가이드
koans 폴더 안에 .js 파일이 10개나 있는데, 겁 먹지 말자. 생각보다 금방 푼다. 왜냐하면 .js 안에 주석으로 설명이 친절하게 나와 있기 때문이다.
특히나 01_Introduction.js부터 03_LetConst.js까지는 푸는 데 1분도 안 걸린다.
1.3. 문제 예시
().to.equal()
expect(1 + 1).to.equal(FILL_ME_IN);만약에 두 괄호 사이가 .to.equal로 되어 있을 경우, 두 괄호의 값을 서로 일치시키면 된다. 그래서 FILL_ME_IN을 지우고 숫자 2를 넣으면 문제 해결!
expect(1 + 1).to.equal(2); // 정답().to.be.true
expect((1 + 1) === FILL_ME_IN).to.be.trueexpect 괄호 안의 결과값을 true로 만들라는 뜻이다. 그래서 FILL_ME_IN을 지우고 숫자 2를 넣으면 문제 해결!
expect((1 + 1) === 2).to.be.true // 정답1.4. 대충 감을 잡았는가?
이런 식의 퀴즈가 파일 하나당 4~7문제 정도 나온다. 다 풀면 끝난다.
내가 푼 문제가 정답인지 확인하고 싶으면? KoansRunner.html을 브라우저로 열면 된다. 그럼 그 .html이 알아서 채점해준다. 뭐가 틀렸고 뭐가 맞았는지, 에러 메시지까지 다 나온다.
AssertionError: expected 2 to equal 3 at n.<anonymous> (koans/01_Introduction.js:79:22)게다가 친절하게(?) 답까지 다 알려준다!
- AssertionError : "너 틀렸어."
- expected 2 : "정답은 2인데"
- to equal 3 : "넌 3이라고 썼어."
- at ~ (koans/01_Introduction.js:79:22) : "koans 폴더에 있는 01_Introduction.js 파일의 79번째 줄을 확인해봐."
그렇기 때문에 KoansRunner.html은 문제를 다 푼 다음에 열어보는 게 좋다. 시험 볼 때 답안지 보면서 풀면 실력이 늘겠는가? 그래서 코드스테이츠는 당신한테 막 풀지 말라고 겁을 줬던 것이다.
이제 두려워하지 말고 Koans에 도전해보자!
2. 오답 노트
07_Array.js
const arr = ['peanut', 'butter', 'and', 'jelly'];
expect(arr.slice(3, 0)).to.deep.equal(FILL_ME_IN);여기서 FILL_ME_IN에 들어갈 값은 무엇인가?
- ①. [ 'jelly' ]
- ②. [ 'peanut', 'butter', 'and', 'jelly' ]
- ③. [ 'jelly', 'and', 'butter', 'peanut' ]
- ④. [ ]
정답은 ④번이다. 나는 ①번을 선택해서 틀렸다. 2번째 전달인자인 0을 무의식적으로 디폴트값이라고 생각해버렸기 때문이다. (참고로 .slice()의 2번째 전달인자 기본값은 undefined이다.)
.slice()가 반환하는 요소의 개수는 '2번째 전달인자 - 1번째 전달인자'의 공식으로 구할 수 있다. 그래서 .slice(3, 0)가 반환하는 요소의 개수는 '0 - 3'이므로 -3개가 된다. 그런데 요소가 -3개라는 건 말이 안 되므로 요소가 하나도 없는 빈 배열이 반환되는 것이다.
08_Object.js
const obj = {
twins: {
'Jared Leto': 'Suicide Squad',
'Joaquin Phoenix': 'Joker',
'Heath Ledger': 'The Dark Knight',
'Jack Nicholson': 'Tim Burton Batman',
},
};
const copiedObj = Object.assign({}, obj);
delete obj.twins['Jared Leto'];이때 copiedObj.twins 안에 프로퍼티 키 'Jared Leto'가 들어 있는가?
- ①. 예
- ②. 아니오
정답은 '아니오'이다. 자바스크립트의 참조 자료형 복사는 얕은 복사(Shallow Copy)이기 때문이다. 얕은 복사란, 중첩된 참조 자료형들 중 '맨 위의 한 단계'만 복사하는 것을 말한다.
한마디로 배열 속 배열, 배열 속 객체, 객체 속 배열, 객체 속 객체는 복사가 안 된다. 밑의 코드를 보자.
console.log(obj === copiedObj); // false
console.log(obj.twins === copiedObj.twins); // trueobj와 copiedObj는 주소값이 다른 반면, copiedObj.twins와 obj.twins는 주소값이 동일하다. 때문에 obj.twins를 수정하면 copiedObj.twins도 같이 수정되고 만다. 그래서 '아니오'가 정답이다.
이를 해결하기 위해서는 깊은 복사(Deep Copy)를 사용하여야 한다. [블로깅] JavaScript의 자료형(Type)과 복사(Copy) 게시물에 더 자세한 내용이 나와 있으니 이쪽을 참고할 것.
<주의 사항>
이 게시물은 코드스테이츠의 블로깅 과제로 제작되었습니다.
때문에 설명이 온전치 못하거나 글의 완성도가 낮을 수 있습니다.
