CodeStates 프리코스를 끝내면서 (2)

프리코스 중반 (Level 3)

Level 3에서는 내가 프리코스 기간 중에 가장 재미있게 했고 고민도 많이 하고 공부도 많이 했던 부분인 front-end 개발에 대해서 학습하였다. 

 

먼저 웹 브라우저의 틀을 만들어 주는 HTML에 대해서 학습하였는데 HTML은 어떻게 구성이 되고, 자주 사용되는 Tag에 대해서 배웠다. VSCode를 통해서 HTML 문서를 작성하고 이를 크롬 브라우저에 띄워서 개발자 콘솔을 이용하여 내가 작성한 HTML 문서가 어떻게 표현되는지 볼 수 있었다. 

 

그다음으로는 이렇게 만들어진 HTML를 꾸며주는 CSS에 대해서 학습하였다. CSS로 HTML에서 만든 각 element에 줄 수 있는 다양한 효과들에 대해서 배웠고, 또한 CSS를 통하여 HTML로 만들어진 웹 브라우저의 Layout을 어떻게 짤 수 있는지 학습하였다. Layout과 관련된 다양한 개념으로 브라우저의 좌표계, 다양한 display 요소들, Box model, position 등에 대해서 배웠다.

 

CSS를 배울 때 중요한 개념 중 하나로 Selector에 대해서 배웠는데 Selector란 CSS에서 element를

선택하는 규칙이다. HTML의 각 element에 class나 id를 부여하고 이렇게 부여한 class와 id를 CSS에서 선택해서 해당 element에 적용할 수 있는 방법이다. 

 

HTML과 CSS를 통하여 웹 브라우저의 틀을 잡고 CSS를 통하여 그 브라우저를 꾸밀 수 있었다. 하지만 여기에서 끝난다면 단순히 디자이너, 혹은 publisher의 영역일 것이다. 이때까지 배워왔던 JS를 통하여 이 HTML 문서를 interactive 하게 만들 수 있다. 

 

HTML은 트리 구조를 가진 객체이다. 즉 DOM이라고 하는데, 그렇기 때문에 JS를 이용하여 접근할 수 있다. 앞서 배웠던 Selector 개념을 이용하여 마찬가지로 JS를 통하여 접근할 수 있는데 이를 통해 HTML에 element를 추가하거나 내용을 바꿀 수 있고, 삭제는 물론 HTML을 동적으로 만들어 주는 event handler를 element에 추가할 수 있다. HTML 뿐만 아니라 CSS도 JS를 통하여 접근할 수 있다.

 

이렇게 HTML, CSS, JS를 이용하여 어느 정도 구색을 갖춘 웹 브라우저를 만드는 방법을 학습할 수 있었다. 이 과정을 들으면서 진행했던 과제가 있는데 바로 'Twittler'이다.

 

유명한 소셜 네트워크 서비스인 트위터의 클론을 만들어 보는 과제이다. 프리코스 통틀어서 제일 시간을 많이 들였고, 많이 공부했고, 제일 공들였던 과제였던 것 같다. 수업 때 배운 HTML과 CSS의 개념들을 모두 사용한 것은 물론이고 그걸로도 잘 구현이 안되어 부족하다고 생각해서 다른 강의도 참고하고 하루 종일 구글링 했던 것 같다. 그러다가 수업시간에 Template tag라는 매우 강력한 기능을 접하고 일주일 동안 만들었던 것을 갈아엎고 다시 만들기도 하였다.

 

트위틀러 과제를 하면서 HTML과 CSS와 DOM에 대해서 정말 많은 공부가 되었고, 남들이 보기에는 엉성해 보일 수도 있지만 나름(?) 글쓰기 기능과 작성한 사람 이름으로 필터링도 되고 작성한 시간도 표시되는 나만의 트위틀러를 완성할 수 있어서 정말 좋았다. 아직은 back-end의 server-side 기술을 배우지 않아서 새로고침 하면 리셋이 되지만 뭔가 그래도 있어 보이는 것을 만들어 냈다는 것에서 정말 뿌듯했다.

---

프리코스 후반 (Level 4)

프리코스 후반인 Level 4 단계에서 9주 차까지는 JS에 대한 여러 심화 개념들을 배웠다. 

 

앞서 배웠던 callback 개념과 비동기 호출, 이를 이용한 타이머 API와 function method(call, apply, bind), prototype 확장, 그리고 fetch를 통해 서버를 호출하여 API를 이용하는 방법 등에 대해서 학습하였다. 

 

또한 recursion (재귀)에 대해서 배우고 재귀가 무엇이고 어떻게 사용할 수 있는지, 어떤 경우에 유용하게 사용되는지를 학습하였다. 재귀는 일종의 반복이라고 볼 수 있는데 이론상 모든 반복문을 재귀로 표현할 수 있고 재귀 또한 반복문으로 표현할 수 있다.

 

어떠한 알고리즘을 표현할 때 재귀로 표현하는 것이 반복문보다 좀 더 알아보기 쉽게, 즉 가독성이 좋게 표현할 수 있다. 하지만 재귀는 자기 자신을 다시 호출하는 함수이기 때문에 실행할 때마다 callstack이 쌓여서 반복문보다 메모리를 많이 사용하여 느려질 수 있는 점이 있다.

 

이 기간 동안에는 'underbar' 과제와 'recursion' 과제를 진행하였는데 underbar과제는 유용한 함수들을 제공해주는 JS 라이브러리인 underscore.js 를 다시 구현해보는 과제이다.

 

underbar 과제를 하면서 이때까지 당연하게 써왔던 여러 method 들을 직접 다시 구현했는데 이 과정에서 배웠던 method들에 대해서 다시 복습도 되었고, arguments나 rest parameter, callback, call, apply 등에 대해서 좀 더 심도 있는 공부가 되었던 것 같다. 무엇보다 내장되어있는 여러 method의 소중함(?)을 느낄 수 있었다.

 

recursion 과제는 JS에서 사용하는 'getElementsByClassName'과 'JSON.strigify' 를 재귀의 개념을 이용하여 구현해보는 것이다. 이 과제를 하면서 배운 점은 트리 구조를 탐색하는 등의 알고리즘이 필요할 때 재귀를 사용하는 것이 유용하다는 것을 알 수 있었다.

---

프리코스를 끝내면서...

프리코스 9주 차까지 내가 배웠던 내용과 어떤 것을 했는지 간략하게 정리해보았다. 사실 이렇게 블로그 2회분 정도로 압축되어 정리되었지만 실제로는 정말 많은 것들을 배웠고, 공부도 많이 했었다.

 

첫 번째 블로깅을 했을 때 프리코스를 진행하면서 내가 개발자가 될 수 있겠다는 생각이 조금씩 든다고 했었다. 프리코스가 끝나가는 지금 느끼는 것은 아직은 부족하고 엉성하고 앞으로도 배울 것이 엄청 많겠지만 '개발자'로써 한걸음 내디뎠다고 생각한다. 프리코스를 통해서 개발과 코딩에 대해서 아무것도 모르던 비전공자인 내가 정말 많은 것을 배울 수 있었고 '개발자'라는 꿈에 한걸음 더 가까워질 수 있었다고 생각한다.

 

이제 프리코스가 1주 남았다. 남은 1주도 열심히 공부하고 배워서 유종의 미를 거두고 싶다. 그리고 이번 프리코스 35기가 끝나고 곧 개강하는 이머시브 16기 과정을 신청하였는데, 곧 있을 pass-me와 we-win 인터뷰도 성공적으로 마쳐서 내가 바라던 '개발자'로써 또 한걸음 내딛을 수 있기를 바란다.