- 들어가며

야호! 2주간의 노마드 코더 챌린지가 끝났다. 학교 일정과 병행하면서 개인 공부를 병행하기란 쉬운 일은 아니었지만, 그래도 어떻게든 챌린지를 완주하고 싶어서 시간을 냈다. HTML과 CSS 지식이 제로에 수렴하는 상태로 시작했기에 고생을 꽤나 했다. 학교 수업 듣고 과제하면서 진행하다보니 밤도 여러 번 샜다. 그렇지만 결론적으로는 너무 만족스러웠던 강의였고, 그 과정에서 얻어가는 것도 많았던 것 같아서 글로 쓰며 정리해보려 한다.

📌 시작하게 된 계기

프로그래밍을 전공하고 있지만, 본격적으로 개발자가 되어야겠다고 마음먹은 지는 두달이 채 안됐다. 다른 시험 준비한답시고 전공수업을 단 두 개만 들은 채로 3학년이 됐다. 할 줄 아는 언어라곤 3년 전 입학과 동시에 어리바리한 상태로 배운 파이썬이 전부였는데, 그마저도 휴학을 오래 하면서 다 까먹어버렸다.

이대로는 복학해서 학교 수업 따라가기도 벅차겠다 싶어 독학으로 C언어를 공부했다. 경험해본 사람들이라면 알겠지만, 간절하고 조급하면 그만큼 공부가 잘 된다. 한달동안 알고리즘 문제를 풀며 성실하게 공부했다. 하지만 그렇게 배운 C언어로 당장 무언가를 할 수 있는 게 없었다.

이제부턴 뭘 해야할까? 개강을 앞두고 고민이 많아지던 차에 유튜브를 통해 노마드 코더를 접하게 됐다. 마침 나흘 뒤부터 새로운 챌린지를 시작한다고 했다. 챌린지 제목은 <바닐라 JS로 크롬 앱 만들기>. 우선 나는 백엔드 개발자가 되고 싶어서 node.js를 공부할 계획이 있었지만, 자바스크립트가 뭐 하는 언어인지조차 모르는 상태였다. 자바스크립트부터 먼저 배워봐야겠다 싶은 생각이 들었고, 그렇게 챌린지를 시작하게 되었다.

📌 챌린지 과정

- 시작

챌린지 시작을 정확히 3일 앞두고 신청을 했다. 앞부분의 맛보기 강좌(?) 에서 기초적인 HTML과 CSS 지식이 필요하다는 니꼬 쌤의 말에 무작정 유튜브로 HTML/CSS 기초 50분 완성이라는 제목의 강의를 들었다. 그냥 이런 게 있구나 하면서 들었지만, 머리에 남는 건 별로 없었던 듯하다.

후술하겠지만, 프로그래밍에 있어 최고의 공부 방법은 역시 '직접 해보기'다. 남이 치는 코드 백날 따라 쳐보는 것보다 직접 아이디어를 내고 그걸 구현해내는 과정에서 공부가 많이 됐다.

- 강의에 대하여

먼저 말해두고 싶은 건, 일단 나는 강의 듣는 것 자체를 별로 안 좋아한다. 공부를 할 때도 그랬으니 코딩할 때는 더더욱... 직접 해봐야 느는 거 아는데, 남이 하는 설명 백날 듣는다고 늘겠나 싶었기 때문이었다. 그래서 C언어도 강의를 듣기보단 코딩도장 이라는 사이트를 통해 개념을 읽어보고, 단계별로 문제를 풀면서 모르는 개념은 그 부분만 따로 찾아보며 해결했다.

하지만 이번 챌린지로 매일 꼬박꼬박 정해진 강의를 듣다보니 잘못된 생각이라는 걸 느꼈다. 나처럼 소위 머리에 든 게 없는 상태(?) 에서는 남이 하는 걸 보는 것만으로도 빠르게 는다.

물론 니꼬쌤 설명이 재밌었던 것도 한몫했다. 용어를 쉽게 풀어서 설명해주셔서 아예 자바스크립트로 프로그래밍을 시작하신 분들도 이해하기 쉬울 것 같다는 생각이 든다. 함수의 매개변수 이름들을 토마토나 포테이토, 피자로 하신다거나, 객체 개념을 게임 플레이어에 빗대서 설명하신 게 기억에 남는다.

- 과제들

첫 1주는 주로 15개 남짓의 O/X 퀴즈가 Assignment로 주어진다. 퀴즈는 강의를 들었다면 어렵지 않게 풀 수 있으며, 틀렸다고 해서 과락이 있지도 않기 때문에 부담없이 배운 내용을 확인할 수 있었다.

6일차부터는 코드 챌린지가 시작된다. 매일 주어진 조건을 만족하는 코드를 짜서 제출하면 되며, 역시 그날 분량의 강의에서 설명한 내용을 응용하는 수준이므로 어렵지 않..을 줄 알았으나 니꼬쌤이 슉슉 쉽게 써나가던 코드를 처음부터 직접 써보려고 하니 쉽지 않았다. 밥 로스의 어록이 생각난다.
참 쉽죠?

여담이지만 첫 과제는 이상한 곳에서 꼬여서 밤을 샜다. 자바스크립트에선 아무리 눈을 크게 뜨고 봐도 잘못된 게 없는데, html에서 안 뜨니까 환장할 뻔했다. 알고보니 html 스크립트 부분에 어이없는 오타가.. 다행히 마감시간 직전에 발견해서 무사히 제출했다.

물론 지나고 보니 그런 경험도 나름 도움이 많이 됐던 것 같다. js 코드를 잘못 썼나 싶어서 구글링을 몇시간을 하고, html 코드를 잘못 썼나 싶어 그거대로 구글링을 또 했더니 결과적으로는 언어 자체랑도 많이 친해졌고, 실력도 훅 늘었다. 요즘 학교에서도 웹프로그래밍을 배우고 있어서 과제 내야할 일이 많은데, 덕분에 학교 과제는 일도 아니게 됐다.

- 졸업과제

처음으로 사용해본 Github

마지막 졸업 과제는 72시간이 주어지며, github.io, 즉 깃허브 블로그 형식으로 제출하게 되어 있다. 웹 페이지를 구현해야 하기 때문이다. 부끄럽지만 나는 깃허브를 써본 경험이 없다. 언젠간 써야한다는 것도 알고 있었고, git add, pull, push, merge 와 같은 용어도 본 적 있었지만 써본 적은 없었다. 프로젝트 경험이 없으니 당연한 걸지도...

무튼 졸업과제 제출을 위해 깃허브 블로그를 만들면서 처음으로 레포지토리를 생성해보았다. 근데 레포지토리를 로컬 컴퓨터와 연동하는 과정에서 터미널을 사용했더니 명령어가 좀 꼬였는지 자꾸 에러 fail to push some refs to ~가 발생했다. 로컬에서와 깃허브 저장소에서의 파일이 일치하지 않아서 발생하는 오류라고 했다. 인터넷에 나와있는 해결방법을 따라해봤는데.. 결국 그냥 레포지토리를 삭제하고 vscode 작업창 자체에서 스테이징과 push를 해주는 기능을 사용했다.

나중에 알게 된 사실이지만, 인터넷에 나와있는 대로 따라하다보니 branch 명이 잘못돼서 발생한 오류 같았다. 인터넷에서는 자꾸 master branch로 push하라고 시키는데 처음 깃을 생성하고 나면 master branch가 없다. 거기다가 자꾸 push 시켰던 탓인 듯.

그래도 겁내했던 깃허브를 사용하는 데에 성공했다는 것 자체로 뿌듯함이 컸다. 또한 괜히 추가했다 싶은 기능을 삭제하고 이전 커밋 시점으로 되돌릴 수 있다는 것이 무척 신기했다. 앞으로 팀 프로젝트를 하면서 깃허브 사용할 일이 많을텐데 도움이 많이 될 것 같다는 생각이 든다. 물론... 깃에 대해서는 더 공부할 필요가 있어보인다.

CSS 잘하고 싶다...

역시나 CSS는 큰 복병이었다. 부끄럽지만 CSS라는 단어 자체를 이번 챌린지에서 처음 봤다... 덕분에 레이아웃을 어떻게 짜야 하는지에 대한 개념도 없어서 구글에 떠돌아다니는 템플릿도 사용할 수 없었다. 컨닝도 뭘 알아야 하죠 여차저차 반나절 넘게 씨름해서 2 column 레이아웃을 구현해봤지만 정렬도 맘대로 안되고 괜히 지저분해보여서, 깔끔하게 중앙 정렬 시켜버렸다.

모바일 반응형으로도 만들어보고 싶었는데, 그거까지 하자니 다른 할 일이 너무 많아서 포기했다. 아쉽다. 그래서 모바일에서 내 깃허브 블로그를 보면 비율이 어그러져서 아주 못생긴 페이지가 나온다. 데스크탑에서 보던 화면을 모바일에서 봤을 때 알맞게 화면이 조정되는 게 당연하다고 여겼는데, 이게 다 프론트엔드 개발자들의 업적이었다는 것을 알게 되었다.

📌 내가 공부했던 방식

무작정 따라해보기

초반에는 내용 자체가 어렵지 않아서, 학교 강의 듣듯 들으면서 직접 코딩해보는 식으로 공부했다. 멈춰놓고 이해한 내용을 정리해서 주석으로 달아보기도 했다. 뒤로 갈수록 머리에 넣어야 하는 것도 많고 시간도 부족해서 못했지만, 자바스크립트가 뭐 하는 언어인지도 몰랐어서 도움이 많이 됐다.

추가적인 기능 구현

예제에 있는 코드를 보면서 복습을 하다가 예제에 없는 기능을 구상하고 구현해보는 것도 도움이 많이 됐다. 나는 졸업과제를 진행하면서 예제에 없는 로그아웃 기능을 구현해보고자 했다. 처음 시작할때는 그냥 로컬 스토리지에서 아이템을 지워주면 그대로 로그아웃이 되겠거니 했는데, 한 번의 클릭 이벤트가 발생할 때 수행되는 함수는 하나이기 때문에 이런저런 흐름을 생각해야 했다. 로그아웃 함수를 만드는 데에서 끝나지 않고, login input을 다시 보여줘야 하며, 다시 입력을 받을 수 있도록 해야 했다. 간단한 기능이라 생각했는데 애를 좀 먹었지만.. 그래도 기어이 방문자를 로그아웃 시키는데에 성공했다. 그러면서 자바스크립트랑 더욱 친숙해질 수 있었다.

예습을 추천합니다

챌린지 전까지 강의를 다 듣고 와서, 강의를 복습하며 챌린지 과제를 수행하면 더 좋을 것 같다는 생각이 들었다. 다른 챌린지에도 참여하게 된다면 꼭 그렇게 하고 싶다. 아예 프로그래밍 공부에 올인하는 사람들이라면 몰라도, 직장이라던가 나처럼 학교를 병행하면서 챌린지에 참여해야 하는 사람들에게는 생각보다 시간이 부족하다. 나도 하루 한두시간만 공부하면 할 수 있겠지 했는데, 해결이 안돼서 새벽 일곱시가 다 되어 잔 적도 있었다. 예습은 역시 최고다. 할 수만 있다면...(ㅎㅎ)

📌 마치며

나중의 내가 보면 코웃음 칠 결과물이 되겠지만, 2주간 내가 어떤 어려움을 겪었고, 그럼에도 어떻게 해결해냈는지 기록해두고 싶어서 열심히 적어봤다. 웹 언어들은 확실히 결과물이 눈에 바로 보여서 더 재밌는 것 같다. 크고 작은 어려움에 봉착했었지만 그래도 결국엔 잘 끝낸 나에게 수고했다고 말해주고 싶고, 좋은 강의 열어주신 노마드코더와 니꼬쌤에게 감사의 인사를 전한다.

다음 계획은 node.js 공부하기! 다. 시험기간 전까지 제대로 된 결과물을 내는 게 목표인데... 지금 학교 과제도 있고 알고리즘 스터디도 하고 있어서 어떻게 될지는 모르겠다. 챌린지 하면서 학교 공부를 살짝 소홀히 한 것 같다는 생각이 들어서 당분간은 학교 수업에 집중하면서 SQL 공부하고, 노드제이에스도 시작해보는 걸로.