[Hoc] 코드스테이츠 리포트 (6)

 

스터디 발표 DOM 발표 ppt 캡쳐본

11월 24일, 다섯 번째 스터디

 

24일은 내 생일 겸, 스터디 날이었다. 그리고 새로운 스터디 원이 온 날이기도 하다! 16일 있었던 meet-up 뒤풀이 자리에서 자연스럽게 스터디와 관련된 얘기를 하고 있던 도중, 내 바로 앞에 계셨던 분이 자기가 신청했던 스터디 같다며 메일 보냈었는데 답장을 못 받아서 아쉬웠다는 식의 이야기를 했다. 알고 보니 G-mail이 스터디 원 이메일을 스팸으로 인식해서 자동 차단이 되어 서로 답장을 못 받았다고 착각한 것이었고 16일 기준 17일이 바로 스터디하는 날이어서 24일 날 만나 뵙기로 한 뒤 스터디로 들어오시게 된 것이다.

 

오랜만에 간단하게 새로운 분도 오신 겸 자기소개를 했다. 그래도 다행히 새로운 분 오신 첫날, 모든 멤버가 스터디에 올 수 있어서 다행이라 생각했다. 일주일에 한 번 보는 만큼 한 번이라도 얼굴을 더 볼 수 있다는 것이 얼마나 소중한 것인지는 스터디를 하면서 매번 느꼈으니까 말이다.

 

24일 발표 주제는 DOM, 폼과 js, BOM에 대한 내용이었다. 책에 있는 마지막 파트 세 개를 발표하는 날이었다. 막 변수 파트를 한 지가 엊그제 같은데 벌써 책 한 권이 끝이라니. 뭔가 아쉬웠다. 그래도 나 혼자 했으면 족히 두 달은 걸렸을 분량을 몇 주 안에 끝냈다는 것에 뿌듯함을 갖기로 했다.

 

DOM에 대해 설명하고 있는 스터디 원

DOM의 경우 내용이 굉장히 많아서 간략하게 소개만 하고 넘어갔다. 대충 내용은 이러했다. JavaScript는 객체지향 언어이고 객체지향 언어가 HTML을 손쉽게 만지기 위해서 생긴 개념이라는 것. 또한 동적인 웹 구현을 위해 여러가지 event 등을 만들 때도 사용한다고 말씀해주셨다. 또 getElementById()와 getElementsByClassName()에서 s를 왜 쓰고 안 쓰는지, 노드를 추가하고 연결하는 방법 등에 대해서 알 수 있었다. 추가적으로 발표한 분께서 HTML이나 CSS를 굉장히 잘 만지셔서인지 style 예약어 사용시 자주 사용하게 되는 display none과 visiblity hidden의 차이점에 대해서도 제대로 알 수 있었다.

 

한 가지 아쉬웠던 것은, event 예약어를 자주 사용하는 만큼 한눈에 들어오는 예제가 있었으면 좋았겠다는 점이었다. 그래도 DOM? 루트? 트리? 정도만 알고 있었던 개념을 한 번 더 짚고 넘어갈 수 있어서 좋았다. (그래서 참고해서 나중에 js 전반적인 개념 발표 때 예제를 보여주면서 스터디 원에게 개념을 설명할 까 싶다.)

 

폼과 자바스크립트에 대한 내용을 발표하고 있는 스터디 원

폼과 자바스크립트 발표 시 활용한 자료

폼에 대한 내용은 간단한 코드를 보면서 확인했다. 주로 input 태그에 대한 기초적인 내용과 input 태그를 JavaScript로 유동적이게 접근하는 방법에 대해서 배웠다. 앞서 배웠던 것들을 복습하는 느낌이었다. 그래서 내용은 많이 어렵지 않았다. 대신 위와 같이 만들어 보는 실습이 있었으면 더 좋았겠다는 생각도 같이 했다. 코드를 보는 것과 구현 해보는 것은 꽤 다르기 때문이다. 그래서 나중에 input 태그와 JavaScript를 이용한 간단한 회원가입 폼 만드는 것을 스터디 원과 같이 해보자고 제안을 해볼까 한다.

 

BOM에 대해 발표하고 있는 스터디 원

BOM은 사실 DOM 보다 낯설고 많이 접해보지 못 한 개념이어서 생소했다. 나뿐만 아니라 다른 스터디 원들도 BOM은 생소하게 느껴지고 어렵다면 어렵게 느껴졌을 것 같다. 그래도 window 객체를 이용한 웹 사이트 크기 조절 방법이나 팝업 창을 띄우는 방법 등에 대해서 알 수 있어 좋았다. 그중 Navigator 객체에 대한 이야기가 가장 도움이 됐다. 브라우저마다 왜 웹문서를 해석하는 것이 다른지, Navigetor가 어떻게 브라우저의 종류를 구별하는지 등에 대해 알 수 있었고,  chrome://version 와 같은 사이트에서 브라우저의 버전 정보를 파악하는 방법에 대해서도 배웠다. 나중에 내가 스터디 원에게 설명해주고 싶은 크로스 브라우징이나 can i use...? 등의 사이트에서 브라우저가 해당 태그를 지원하는지 하지 않는지에 대해 알려줄 때도 다시 한번 Navigetor을 인용해 설명해도 좋겠단 생각을 했다.

 

발표가 그렇게 끝이 났다!

 

다들 많으면 많고 적으면 적은 사람들이 보는 앞에서 발표를 하려니 많이 떨린 모양이었다. 내가 시켜드린 과제와 발표를 7명 이상이 보고 있는 앞에서 발표를 순조롭게 해준 스터디 원들이 자랑스러웠다. 한 명씩 돌아가면서 하는 게 발표 원칙이어서 새로 오신 분을 제외하고 전부 다 한 번씩 발표를 하게 됐는데 다들 그래도 직접 누군가를 가르치겠다는 생각으로 ppt를 만들어오고, 발표를 연습하면서 꽤 많은 공부를 했다고 한다. 나 역시도 가장 쉬운 변수 파트였지만 내용이 워낙 짧다보니 es6에 대한 내용이나, Data Type 등에 대한 부분을 추가적으로 넣으면서 더 많은 공부를 하게 됐다. 많은 사람과 공유하면서 하는 공부의 장점이 이런 것일까?!

 

또 발표 할 때 아쉬웠던 점에서도 얘기했다. 위에서도 서술했지만 책에 대한 내용을 설명하는 것보다는 사소한 구현을 해보면서 공부를 하는 것이 좋겠다는 의견을 나눴고 거의 만장일치로 동의했다! 다만 아직 고민되는 것은 전부 주니어 단계여서 어떤 프로그램을 만들면서 설명을 할 것이냐의 문제인데 이거에 대해선 차근차근 생각해보는 걸로 하고 지금은 공부 방법을 조금 수정하는 방식으로 잡기로 했다.

 

전 주에 했던 배열이나 24일 배운 DOM, 폼, BOM 등을 같이 복습할 수 있는 회원가입 페이지에 대한 이야기도 나눴다. 이제 어느정도 기초를 공부했고, 많지는 않지만 책에 있는 사소한 기초 문제를 풀어봤기 때문에 약간은 어려운 난이도의 문제가 있었으면 좋겠다고 생각했다. 대신 숙제가 아니라 즉석에서 만드는 식으로 모각코 (모두가 각자 코딩), 혹은 해커톤 느낌으로 회원가입 페이지를 만들고 서로 코드 리뷰를 하는 식이었으면 좋겠다고 말씀드렸다. 다행히 다들 좋아해 주셨고 다음 주나 늦으면 다다음주에는 회원가입 페이지를 만들어보고 리뷰하는 식으로 약속을 잡았다.

 

다른 이야기로는 회원가입 페이지를 만든 후, 자신이 못 한 부분 (회원가입 페이지 구현해본 후) 은 개인 노션에 내가 이런 부분 (예를 들어 배열을 for문에 담기 등)에 약했고, 이런 건 잘했다 식의 피드백을 개인적으로 남기기로 했다. 회원가입 페이지 얘기를 하다보니 자연스럽게 프로젝트에 대한 말이 나왔는데 서버의 경우 아직은 다른 걸 더 우선하되 대신 나중에 JavaScript를 이용한 node.js 등을 사용하자고 의견이 모아졌다.

 

알고리즘의 경우 JavaScript 특성상 논리가 없다는 장점 겸 단점 때문에 구현하기 애매하다는 의견과 문제의 난이도가 너무 쉬워 실력 향상에 도움이 될지 의문이라는 말이 나와 책에 있는 예제를 복습 차원에서 더 풀어보는 식으로 했다.

 

이렇게 24일 스터디가 끝났다! 스터디 마무리 후, 스터디 원들과 근처 레스토랑에서 간단한 저녁식사도 했고 많은 이야기를 나눌 수 있어서 좋은 하루였다. 스터디를 하면서 다 같이 공부하는 것에 대한 재미를 느끼고 있는 중이다. 설명하고 배우고 피드백받는 경험들이 서로서로를 더 성숙하게 만들거라 의심치 않는다.