[Hoc] 코드스테이츠 리포트 (7)
12월 1일, 여섯 번째 스터디
지난번 스터디 때 수업 방식에 대한 아쉬움을 뒤로한 채 여섯 번째 스터디를 시작했다. 발표 방식을 조금 다르게 시도해보는 날이기도 하면서, JavaScript의 객체와 Scope, Closure을 발표하는 날이다. 조건문 같은 다른 언어에도 통용되는 개념보다 JavaScript만의 특징이 강한 개념들이어서 오늘 주제는 다소 중요도가 높았다. 그래서 다들 어려워하기도 했고, 이걸 다른 사람에게 어떻게 하면 쉽게 설명할지에 대해서 나뿐만 아니라 모든 발표자들이 고민했다.
나 같은 경우 객체를 발표했다. 객체의 경우 JavaScript에 있어서 핵심 중 하나여서 어떻게 하면 쉽게 설명할 수 있을까에 대한 고민을 많이 했다. 그렇다고 깊은 부분까지 하기엔 기초 부분을 담당한 Do it! 시리즈에 있는 객체 부분이어서 심화 과정을 하기도 애매했다. 그래서 선택한 것이 아주 기초적인 객체 문법을 직접 작성해보고 객체가 이래서 편리하다는 것을 강조하자는 것이었다.
실습은 about:blank 를 이용했다. 어려운 코드가 아니라 단순한 js 코드기 때문에 따로 IDE 툴은 사용하지 않았다. 보통 디버그를 고칠 때 자주 사용하기도 하고 웹브라우저에서 돌아가는 js 특성상 편리하기도 하기 때문에 선택했다. about:blank를 웹 브라우저에서 연 뒤 코드를 치면 내가 한 번씩 돌아가며 점검해보고 맞는 부분이 있으면 맞다고, 아닌 부분이나 어려운 부분이 있으면 고쳐서 알려드리는 방법으로 행했다.
또한 js 특징인 자유로우면서 논리적이지 않은 부분에 대해서도 알고 계셨으면 해서 위와 같은 예제를 선택하기도 했다. 위 문제의 가장 핵심은 객체의 '속성' 이 아니라 속성'값'에 함수를 넣고 불러온다는 것. 실제로 일을 할 때는 일반적으로 배우는 형식보다는 위와 같이 함수 안에 객체를, 객체 안에 함수를 넣는 식으로 복합적으로 사용한다는 것을 조금이나마 가르쳐드리고 싶었다.
예를 들어 위에서 가져온 코드처럼 js를 실무에서 쓸 경우 구조가 다양하다는 것을 보여드리고 싶었다. 그냥 책에 있는 예제를 사용하면 초급자 (스터디 원 모두 초급자긴 하지만)에 맞춘 정형화된 js 코드에 익숙해질 것이라 생각했기 때문이다. 변수에 함수를 넣고, 함수에 객체를, 객체에 변수를, 함수에 조건문을 넣는 것이 js의 특징 중 하나이기 때문에 코드 작성 시 이를 염두에 두고 편견 없이 코드를 짜줬으면 해서 인용한 부분이다.
프로토타입과 인스턴스에 대한 설명도 했다. 이 부부은 깊게 나가면 어려울 수 있어서 우선은 대략적으로 프로퍼티를 그대로 가져온 것이 인스턴스라는 기초적인 설명만 했다. 이것에 대한 디테일한 부분은 나중에 배우기로 스터디 원과 말했기 때문에 기본적인 개념만 잡았다.
그래도 간단한 코드 예제가 있었으면 좋을 것 같아서 위와 같은 예제도 가져왔다. 예를 들어 변수 a가 new 키워드를 이용해 a 변수 안에 Date()라는 객체를 넣으면 Date() 객체가 복사되고 이 복사된 객체는 Date() 객체와 같은 기능을 한다는 것을 예제로 들었다. 그래서 a.getDay() 하면 Date() 안에 있는 기능을 사용하는 것과 같게 된다는 것을 설명하고 싶었다.
직접 만들어보는 예제도 넣고 싶었지만 책에 있는 예제에 this가 나오는 관계로 this에 대해서 모른채 예제를 만들면 어영부영 넘어갈 것 같아서 일단 넘겼다! 대신 나중에 this에 대해 깊이가 생기면 객체에 대한 예제는 다시 보기로 했다.
두 번째는 스코프를 발표했다. js의 특징 중 하나이고 초보자들이 어려워 하는 부분 중 하나여서 발표자 분도 준비할 때 많이 고민했다고 말씀해주셨다. 나 역시도 Scope를 발표 준비한다고 하면 많이 어려웠을 것이다. 그래도 알고 가면 좋은 부분이기 때문에 한 번쯤은 이렇게 머리를 싸매는 것도 좋은 경험이라고 생각하고 발표 자료를 열심히 들었다.
스코프에 대해서 어느정도는 알고 있긴 했지만 catch나 with에 대해서는 몰랐기에 이번 발표를 통해 알게 돼서 좋았다. 보통 function나 변수 키워드에 따른 스코프만 알고 있는 상태여서 새로운 개념이었다. 공부해보니까 catch는 try~catch 문으로 에러가 발생했을 때 띄울 출력이나 에러를 피하기 위해 사용하는 구문이었고, with의 경우는 거의 사용하지 않지만 스코프 체인 내에 있는 부분을 불러올 수 있는 기능을 하고 있는 타입이었다.
발표자 분의 설명 중 이 부분에 대한 점은 없어서 조금 아쉬웠다. 그래도 워낙 어려웠던 스코프였기에 고생하셨을 걸 알아서 발표 자료를 만들어 주신 것에 대해 감사의 인사를 드리고 싶다. 스코프는 후에 가서 조금 자세하게 짚고 넘어가야 할 것 같다.
세 번째는 클로저다. 스코프와 다르게 개념이 아직 생소한 부분이기도 하다. 전에 했던 책이 정말 기초 수준의 책이었어서 더 어렵게 느껴지기도 했다. 함수에 대한 기초가 없이는 전혀 들을 수 없는 부분이기도 해서 발표하신 분도 함수에 대해 어느정도 짚고 넘어가며 발표를 하는 부분 들이 보였다. 내부 함수나 콜백 함수에 대한 개념도 그렇고, 어떻게 보면 함수의 심화된 개념 같은 느낌이기도 했다.
사실 주니어 단계인 우리 입장에선 많이 어려운 개념이기도 했다. 발표자 분 께서 최대한 쉽게 알려주시긴 했지만 쉬운 개념은 아니어서 서로 알려주고 답해가며 들었던 발표였다. 아직 누가 더 뛰어나게 잘하고, 못하고의 개념이 없는 상태인지라 발표하는 내내에도 서로 알려주고 물어가며 하는 방식이 굉장히 좋았다. 이런식의 다같이 하는 방향이 (다들 한 번씩 누군가에게 설명했으면 좋겠어서) 선택한 방식이어서 발표를 일방적으로 하는 것 보다 좋다고 느꼈다. 나중에 할 발표 때는 이런 방식을 좀 더 차용해야겠다.
위는 내부 함수에 대한 내용이다. 처음에 js를 공부 할 때는 python 만큼이나 쉽다고 알려진 언어로 알고 있었는데, 막상 깊은 개념을 접하니 어려운 부분이 많았다. 특히 함수 안에 함수가 있는 것은 다른 언어에서는 쉽게 볼 수 있는 방법은 아니기에 이해하는 데 약간 물음표를 띄우는 부분들이 많았다. 선수 개념이 필요한 부분들이 많아서 그랬던 거일 수도 있다. 사진 속 예제도 간단해보이지만 스코프 체인이라는 선수 개념이 필요한 부분이었다. 다행히 선수 부분에 대한 부분을 발표자 분께서 잘 설명해주셔서 이해하는데 어려움은 없었지만 그래도 쉽지만은 않았다.
사진 속 예제의 경우 inner() 함수가 한 번 실행 되고 사라졌는데 값은 남아있어서 (스코프는 남아 있어서) outer() 함수에 inner() 안에 있는 a++ 값이 담기게 되고 그래서 outer() 값이 감긴 변수를 출력하면 1, 2, 3이 출력되는 것이다. 또한 변수가 outer() 변수 안에 있는 변수 a는 전역변수이고 inner() 안에 있는 변수는 outer() 함수 안에 있어 참조할 수 있으므로 출력값이 위와 같이 찍히는 것이다.
발표자는 위와같은 개념을 이용해 과거 변수 키워드가 var 밖에 없었을 때 private 한 변수를 생성 시 주로 사용했다고 하다. (es6 이후 새로운 변수 let과 const가 나옴)
이런 발표를 토대로 선수 개념이 있어야 다음 심화 단계로 넘어갈 수 있다는 것을 알게 됐다. 비록 어렵긴 했지만 js의 기본적인 함수나 앞에서 배운 스코프의 개념을 알고 있는 상태여서 비교적 쉽게 들을 수 있었다. 앞으로도 이런 심화 과정을 배우기 전에 이해하기 쉽게 선수 개념을 확실히 잡고 가야할 것 같다.
오늘 스터디는 여기서 끝났다. 나 같은 경우 이 때 시험을 네 개나 치고 스터디에 온 것이어서 살짝 정신이 없긴 했다. 그래도 알고 개념이 많아서 좋았다. 발표가 끝난 후엔 평소처럼 간단한 피드백을 하면서 마무리를 했다. 또 본격적인 웹 페이지를 만들 기 전에 만들면 좋은 회원가입 페이지에 대한 이야기도 하면서 선수로 마크업만 사용한 회원가입 페이지를 만들기로 숙제를 잡고 스터디를 마무리 했다! 피곤했지만 좋은 하루 였다.