Javascript Koans가 뭐야? 설명과 테스트 후기

Javascript Koans 설명과 테스트 후기

바닐라코딩 사전 학습 가이드의 5번째 단계로 Javascript Koans가 있다. 처음 봤을 때는 무려 10년 전 깃허브 레포지토리의 자료라서 당황스러웠고, 다 영어라서 꺼려졌다.

무언가 압도되는 javascript-koans 레포지토리

 

koans가 뭐야?

큰 스님들이 제자들을 인도하던 사실을 기록하여 후세에 공부하는 규범

일단, 이걸로 뭘 하라는 건지 알 수 없었다. 제목에 떡하니 있는 koans라는 단어의 뜻이 매우 궁금해졌다. 그래서 찾아봤더니 ... koans의 koan은 공안(公案)으로, '간화선'이라는 불교 수행법 안의 개념이다. 공안은 공부안독의 준말로, 관공서(官公署)의 문서라는 뜻인데, 선종의 큰 스님들이 심지, 즉 마음자리를 밝게 깨달은 기연 또는 큰 스님들이 제자들을 인도하던 사실을 기록하여 후세에 공부하는 규범이 된 것을 말한다(출처).

즉, 위 정의에 의하면, javascript koans는 자바스크립트의 큰 스님(?), 아니 자바스크립트 고수들이 초보들을 가르치는 사실을 기록하여 후세에(10년이 지난 지금까지!) 공부하는 규범이라고 스스로 칭한 것이다.

그래서 어떻게 공부하면 될까?

레포지토리의 README를 읽으면 알 수 있다. 자세히 말하자면, javascript-koans 레포지토리를 git clone 하거나 zip 파일을 다운로드해 KoansRunner.html을 실행하면 된다.

클론의 경우 간단히 설명하자면, 레포지토리의 Code를 클릭해 나오는 url를 복사해 다음과 같이 터미널에 입력하면 현재 터미널의 경로에 레포지토리가 복사된다.

git clone https://github.com/mrdavidlaing/javascript-koans.git

레포지토리의 디렉토리 구조는 다음과 같다. KoansRunner.html을 실행시켜보면 아래와 같은 화면이 출력된다.

너는 아직 깨달음에 이르지 못했다 ...

이제부터 우리가 할 것은 javascript-koans/koans경로의 자바스크립트 파일을 수정하는 것이다!

KoansRunner.html의 소스코드를 보면, 엄청나게 많은 자바스크립트 파일이 로드되어 있다. 그 파일들이 현재 html 화면을 제어하는 것이다. koans 폴더에 있는 자바스크립트 파일을 제외한 파일들은 모두 koans 수행을 돕기 위한 파일들이다. 우리는 koans 수행에 집중하면 된다.

그렇다면 koans에서 가장 먼저 로드되어 있는 AboutExpects.js 의 소스코드를 보자.

커다란 describe 함수에 it 함수와 expect 함수가 공통적으로 들어가 있다. 이는 같은 레포지토리의 jasmine 폴더 안에 정의되어 있는 함수들로 자세히 알 필요 없다. 우리는 koan을 배우기 위해 다음의 것들만 알면 된다.

• KoansRunner.html를 실행해 문제를 확인한다. 문제는 이 html 파일에서 불러온 koans 폴더 안의 자바스크립트 파일에서 비롯된다.

• describe → 큰 주제 (배열, 상속 함수 등)를 설명하고 내부의 문제(또는 테스트)를 실행시킨다.

• it → 단일 문제(테스트)를 설명한다.

• expect → 이 함수의 인자로 표현식이 전달되고 그 결과를 반환한다. 이후 점 연산자(.)를 통해 호출되는 함수(메서드), toEqual, toBe ... 를 통해 참과 거짓이 판별된다.

• 거짓이면 아래와 같이 빨간색 박스가 생기며 어떤 문제가 발생했는지 출력된다.

• 자바스크립트 파일 안의 FILL_ME_IN을 알맞게 수정하여 문제를 해결한다. (첫번째 문제는 expect(false).toBeTruthy();를 expect(true).toBeTruthy();로 수정해야 한다. 통과하면 아래와 같이 출력된다. 첫 번째 문제를 해결해서 두 번째 문제가 출력된 것을 알 수 있다.

• 계속 해보면 어떻게 해야 할지 알 수 있을 것이다!

• 이것을 53개 하면 끝난다.

후기

총 하루에 걸쳐 했다. 테스트 통과에만 집중하면 몇 시간 안에 끝날 것 같다. 하지만 위 설명한대로 초반에 jasmine 코드를 몰라서 의미를 찾아 해맸고, 자잘하게 모르는 개념이 나오면 mdn을 찾느라 해맸다. 가장 흥미롭고 당황스러웠던 것은 underscore(_) 변수였다. 테스트에서 underscore라는 외부 라이브러리의 함수가 활용됐다. 그것도 모르고 mdn에서 그 함수에 대한 정의를 찾았는데 없었다. 그리고 그냥 함수 이름만 구글링해도 안 나와서 도대체 뭐지?!!?! 매우 혼란스러웠다.

하지만 테스트의 난이도가 상승해서, 레벨업 하는 기분으로 할 수 있어 좋았다. 중간에 몰랐던 자바스크립트 개념도 세세하게 알아서 알찼다. 그리고 현재 만들고 있는 프로그램의 테스트코드를 짜고 싶었는데 테스트코드가 어떻게 돌아가는지 간접 경험할 수 있어서 값진 경험이었다.

이 글을 보는 분들도 첫 화면에 압도되더라도 한 번 레포지토리를 다운로드 받고 53개 중 첫 테스트를 통과해보기 바란다. 의외로 쉽고 간단하며 성장한다는 쾌감까지 얻을 수 있을 것이다. 그리고 테스트 주도 개발 방법을 사용하고 싶은데, 테스트코드를 모르는 사람들에게도 무척 도움이 될 것이다.

---

출처 및 참고문헌

• https://book.vanillacoding.co/starter-kit/step-5/javascript-koans
• https://github.com/mrdavidlaing/javascript-koans
• https://ko.wikipedia.org/wiki/간화선
• https://en.wikipedia.org/wiki/Jasmine_(JavaScript_testing_framework)
• https://underscorejs.org/
• https://github.com/jashkenas/underscore