Why 클론 프로젝트?
위코드 12기 시작을 약 한 달 앞두고, 나는 매일 벽에 머리를 박는 기분이었다. Codecademy와 freeCodeCamp를 통해 개념 한 개씩 익히는 과정을 매일 반복했는데, 세상에 이렇게도 지루할 수가 없었다. 이미 다 구조가 짜여진 코드에 한 줄씩 추가하고 넘어가는 과정의 무한반복. 나중에는 마치 밀린 학습지를 해치우는 초등학생 마냥, 진도율 올리겠다고 페이지만 미친듯이 넘겨댔다.
하지만 지루함보다 더 무서운 건 '과연 내가 이걸 제대로 알고 있나?'하는 의구심이었다. 분명 손은 기계적으로 움직이고 있는데, 객관식 퀴즈를 풀면 꼭 몇 문제 틀렸다. 주어진 보기 중에서 고르는 것도 제대로 못 하는데, 어떻게 백지에서 출발해서 웹페이지를 만들지? Codecademy에서 html과 css 진도를 마치고, javascript로 넘어가야 할 시점에 고민이 되었다. 남은 진도만 따라가기도 빠듯했지만, 배운 지식을 진짜 내 것으로 만드는 게 보다 중요하다는 결론을 내렸다.
처음엔 몰랐지, 이게 이렇게 어려울 줄이야
그래서 시작한 프로젝트는 'Google 홈페이지 클론하기'. 예전에 독학할 때 참고했던 theodinproject에서 발견한 과제였다. html 및 css 기초를 끝낸 초보라면 도전해볼만한 난이도라고 하길래, Google 홈페이지를 열어보니 내용도 별로 없고, 꽤 단순해보였다. 앉은 자리에서 끝낼 각오로 vscode 빈 창만 덜렁 열어둔 채, 손 가는대로 마구 타이핑을...
...해야하는데, 어디서부터 시작하지?
html 문서 첫 줄부터 턱 막혔다. 시작조차 못하는 스스로에게 굴욕감을 느끼며 !DOCTYPE html부터 구글링을 해야 했다. 그 뒤에도 개념들이 머릿속에 둥둥 떠다니는데, 그걸 어떤 순서로 어떻게 배치해야 할지 감이 잡히지 않았다. 마구잡이로 몇 개 태그를 넣어보니, 이상하게도 의도하지 않은 구성들이 휙휙 바뀌기도 했다. 적을 수 있는 코드는 고작 열댓 줄. 코딩 인생 2주차에 최대 시련이 덮쳤다. 아, 이 길은 내 길이 아닌 것인가!?
레퍼런스의 도움을 받아 첫 걸음을 딛다
자료에 의존하고 싶지 않았지만, 이대로는 무리였다. 열심히 구글링을 하다보니 나와 동일한 클론 프로젝트를 한 유튜브 비디오를 발견했다. 한 줄 한 줄 코드를 작성하는 화면을 녹화하면서, 중간에 시행착오를 겪으며 구글링 하는 과정까지 생생하게 담겨있었다. (도저히 답이 안 나올때 찰지게 욕하는 것도 매우 리얼해서 마음에 들었다!)
우선 인강처럼 천천히 시청하며, 내가 막혔던 부분들에 대한 답이 보이면 이를 필기해두었다. 또한 단계별로 소스코드와 중간 결과물을 캡처해서 필기와 함께 보관해두었다. 그리고 그 단계별로 조금씩 코드를 쌓아가며, 새롭게 배운 점과 풀리지 않는 의문을 따로 정리해보았다. 그리고 그 결론은?
허접하고 휑한 화면이지만, 내 손으로 완성한 첫 번째 결과물이다! 그 노고가 헛되지 않도록(?) 작업하며 배운 점들 위주로 TIL을 남겨보려 한다.
To be continued!
