들어가기 전 잡담

처음에 아무 것도 모른 상태로 블로그에 기록을 남기고 싶어서 네이버 블로그를 시작했었다.
velog는 몇 달 전부터 알고 있었는데 네이버 블로그에 써놓은 글을 날리는 것 같아 아쉬워서 섣불리 바꾸지 못했다.
하지만 우아한테크코스 3주차를 마무리하면서 느낀점도 쓰고, 다시 한 번 새로운 마음으로 시작하자는 의미에서 velog를 시작해보려고 한다.
태그가 있다는 것이 참 신기하고, 기능이 정말 많은 것 같다. 또한, 네이버 블로그보다 훨씬 깔끔하다.
진작에 넘어올 걸 그랬다..

우아한테크코스 프리코스 3주차

지하철 노선도 구현하기

프리코스 3주차는 지하철 노선도를 만드는 미션이였다. 1주차, 2주차 때에도 힘들다고 생각했었는데, 솔직히 난 처음에 이 미션을 보고 절대로 하지 못할 것 같다는 생각을 했었다.
간략하게 구현해야 하는 기능을 적어보자면,

• 지하철 역
  • 역 추가 기능
  • 역 삭제 기능
• 지하철 노선
  • 노선 추가 기능
    • 상행/하행 종점을 받아 노선을 추가한다.
      이때, 존재하는 역을 select 태그를 사용해 값을 선택한다.
  • 노선 삭제 기능
• 지하철 구간
  • 구간 추가 기능
    • 존재하는 역을 select 태그를 사용해 값을 선택한다.
    • 순서를 입력받아 순서에 받게 배치한다.(종점이 바뀔 수 있다.)
  • 구간 삭제 기능
• 지하철 노선도
  • 노선의 상행 종점부터 하행 종점까지 순서대로 역 목록을 화면에 출력한다.

위와 같이 나타낼 수 있다. 이렇게 구현해야 할 기능만 보면 쉬워보일 수 있는데, 난 처음에 이 기능 자체를 어떻게 구현해야 할지 생각하는 것에만 2일이 걸렸다.

어려웠던 점과 나만의 해결방법

1. 가장 기초적인 것부터 어려웠는데, 역 관리를 누르면 역 관리 화면이 나오고, 노선 관리를 누르면 노선 관리 화면이 나오는 것을 어떻게 구현해야 할지 막막했다.
   처음에는 역 관리 버튼을 누르면 기존에 있던 화면을 모두 삭제하고 역 관리를 추가하는 것이 좋을 것 같다는 생각을 했다. 하지만 이렇게 되면 화면을 삭제하는 것도 성능에 문제가 있을 것 같고, 화면을 삭제했다가 다시 필요한 화면을 추가하는 것이 마음에 들지 않았다.
   왜냐하면 버튼을 누를 때마다 데이터가 새로 갱신되어야 하기 때문인데, 만약 데이터가 크다면 성능이 저하될 것이기 때문인다.
   그래서 난 html에 필요한 모든 태그를 미리 만들어 둔 후에 필요한 화면만 보여주는 식으로 이번 미션에 임했다.

2. data속성을 활용하여 데이터 값들을 관리하라는 요구사항이 있었는데, 도무지 이해할 수가 없었다.
   data속성을 처음 보기도 했고, 사용하는 방법은 그렇게 어렵지 않은데, 어디에 어떻게 써야할지 감이 오질 않았다.
   오랜 고민 끝에 역이나 노선, 구간을 삭제하고 로드할 때 data속성을 사용했다. 이유는 예를 들어 역을 삭제하기 위해 삭제 버튼을 누를 때, 함수에게 어떤 역이 삭제되길 원하는지 알려줘야 하는데 그때 data속성을 넘겨주면 좋을 것 같다고 생각했고, 그래서 버튼에 data속성을 사용했다.
   data속성과 밑에서 언급할 localStorage를 사용하다가 엄청나게 멘붕이 왔었던 적이 있는데, 분명 data를 제대로 불러왔다고 생각헀는데 화면에는 [object, object]와 같이 요상한 것이 출력되는 것이었다. 이 문제는 parse와 stringify로 해결할 수 있었다.

3. localStorage를 이용해 새로고침하더라도 가장 최근에 작업한 정보를 불러올 수 있게 하라는 요구사항이 있었고, 이것 자체는 어렵지 않았지만 내가 고생했던 것은 localStorage의 value였다. localStorage는 key와 value를 가지고 있는데, 하나의 key에는 하나의 value가 담긴다.
   즉, value에 여러 개의 값을 담고 싶으면 객체를 사용해야 한다. 하지만 객체에 값을 추가하거나 제거하는 것을 어떻게 해야할지 감이 오질 않았다.
   이것 또한 엄청난 구글링 끝에 객체를 받아와서 추가/제거를 한 뒤에 다시 key에 덮어씌우면 된다는 것을 깨달았다.
   해결 방법을 알고 난 후에는 나도 충분히 생각할 수 있었던 것이라서 너무나도 허무했다.

4. 아래의 기능 요구사항에 관련된 것인데, 이 부분은 아직도 정확하게 의미를 파악하지 못했다.

   • 노선에서 갈래길은 생길 수 없다.
   • 중복된 지하철 노선 이름이 등록될 수 없다.

   이해가 되지 않는 부분은 노선에서 갈래길은 생길 수 없다. 라는 조건이 왜 있는지에 대한 것인데, 실제로 5호선인 강동 역을 보면 문촌동, 길동역으로 나뉘는 것을 볼 수 있다.
   즉, 같은 노선인 경우에만 갈림길이 생길 수 있는데, 중복된 지하철 노선 이름이 등록될 수 없기 때문에 중복이 불가능하고, 애초에 갈래길은 생길 수 없는 구조인 것이다.
   사실, 이 부분만 반나절 이상 고민한 것 같다. 예외처리가 중요하다는 피드백을 봤기 때문에 예외처리만큼은 확실하게 해야 한다는 생각이 있었고, 이해가 안된 상태에서 넘어가고 싶지 않았다.
   하지만 결국 중복된 지하철 노선을 불가능하게 하면 갈래길이 생길 수 없다는 생각을 하면서 넘어갔다.
   

5. 지하철 구간 추가 시 순서에 맞게 정렬되는 기능을 구현하는 것이 매우 어려웠다.
   사용자가 입력한 순서에 맞게 데이터를 넣고, 실시간으로 화면에 추가가 되어야 하는데 방법을 전혀 모르겠어서 구간을 추가할 때마다 구간 테이블을 삭제하고, 다시 데이터를 로드하는 방법으로 구현했다. 이 방법은 정말 성능에 좋지 않은 것을 알고 있기 때문에 너무나도 아쉽고, 난 이번 미션에 실패했다고 생각한다. 하지만 고치기에는 시간이 없고, 미션을 제출해야 하기 때문에 제출한 후 오프라인 테스트까지 남은 시간 동안 꼭 고쳐볼 것이다.

3주간 프리코스를 진행하면서 느낀 점

새로 알고 배운 것들이 너무 많아서 머리가 터질 지경이지만 정말 즐거운 3주간의 프리코스였다.
느낀 점을 순서대로 정리하려고 한다.

• 난 이번 프리코스를 진행하기 전까지 누구에게도 피드백을 받아본 적이 없다. 그래서 기능만 잘 동작하면 된다는 생각을 하고 있었고, 내가 본 유튜브 강의나 인프런 강의에서는 클린 코드, 컨벤션 같은 것을 알려주지 않았기 때문에 깔끔한 코드가 존재한다는 것조차도 몰랐다.
  하지만 프리코스를 진행하면서 한 번도 빠지지 않고 나왔던 것이 자바스크립트 컨벤션을 지키며 프로그래밍을 하는 것과 함수가 한 가지 일만 잘 하도록 길이를 짧게 구현하는 것이었다.
  또한, 피드백에서는 변수 명이 가장 중요하며, 의도를 잘 드러내는 것이 중요하기 때문에 길어져도 상관 없고 시간을 투자해야 한다고 했다.
  나에게 함수가 한 가지 일만 잘 하도록 길이를 짧게 구현하라는 것이 처음에는 가장 힘든 조건이었다. 왜냐하면 함수를 짧게 할 능력도 안되고, 짧게 하기 위해 다른 함수를 만드는 것이 맞는 것일까? 하는 의문이 생겼기 때문이다. 하지만 지금은 당당히 말할 수 있다. 함수를 잘게 쪼개는 것이 맞고, 그렇게 해야 재사용성도 높아질 수 있고 가독성도 좋아진다.
  그리고 더이상 함수의 길이 제한은 두렵지 않다. 이제는 코딩을 할 때 알아서 함수를 쪼개고 있고, 쪼개다 보니 비즈니스 로직과 UI 로직을 구분하게 되고, 함수가 한 가지 일만 잘 하고 있는 모습을 볼 수 있게 되었다.
  자바스크립트 컨벤션을 지키기 위해 eslint도 사용하고, prettier도 사용하고 있다. 그래서 컨벤션 지키는 것은 그렇게 힘들지 않다.
  아직도 정말 어렵고 시간도 오래 걸리는 것이 변수/함수/클래스 이름을 짓는 것이다. 확실히 프리코스를 하기 전에 아무렇게나 지었던 것과 비교하면 놀라울 정도로 가독성이 좋아졌다.
  하지만 아직도 많이 부족하고, 어제는 잘 지었다고 생각했던 이름이 오늘 다시 봤을 때 이해가 안 되는 경우도 있기 때문에 더 확실하게 이름을 지어야 되겠다고 항상 다짐한다. 내 목표는 프로그래밍을 아예 모르는 사람이 봐도 변수 명만 보고 파악할 수 있게 만드는 것이다.

• 항상 요구사항에 README.md를 상세히 작성하고, 기능 구현 목록을 실시간으로 업데이트 하라는 것이 나온다. 또한, README.md에 작성한 기능 구현 목록 단위로 commit을 하고, commit도 상세히 작성해 해당 작업 내용을 이해할 수 있도록 해야 한다.
  처음에 정말 어려웠고, 이걸 왜 할까? 라는 생각이 들었다. 이전에는 commit은 작업이 다 끝난 후 한 번 하거나 밥 먹기 전에 한 번 하는 정도였다. commit의 중요성을 몰랐던 것이다.
  README.md도 역시 내가 하는 프로젝트의 이름 정도만 작성해놓고 건들이지도 않았었다.
  그래서 처음에는 이 요구사항을 지키기 위해 고생을 많이 했다. 간단한 숫자 야구 게임을 만들 때에도 기능 구현 목록을 작성하는 데 반나절이 걸렸었다. 하지만 정말 신기하게도 내가 생각한 기능 구현 목록 순서대로 코드를 작성하다 보니 중간에 다른 길로 새지도 않고, 빠르게 기능을 구현하는 모습을 발견했다. 게다가 기능 구현이 완료된 것을 실시간으로 업데이트하면서 숙제를 하나씩 해내고 있다는 생각이 들어 재미있었다.
  다시 예전으로 돌아가 보면 전날에 하던 작업을 다음날이 되었을 때 어디까지 했는지 기억도 나지 않고 내가 짠 코드지만 이해할 수 없던 적이 많다. 아니 대부분 그랬었다.
  README.md에 기능 구현 목록을 정리하고, 실시간으로 업데이트하면서 위 현상이 아예 사라졌다. 다음날에 내가 어디까지 했는지 잘 모르겠으면 README.md를 참고하면 바로 기억이 난다. 그리고 기본 틀도 잡지 않았던 전과 비교했을 때 능률 자체가 달라졌다.
  내가 만들어야 하는 것이 무엇인가에 대해 확실하게 알고 넘어가도록 도와주는 것이 README.md라고 생각한다.
  commit도 자세하게 작성을 해두면 다른 사람들이 볼 때 기능을 잘 이해할 수 있고, 나도 그때 왜 그렇게 작업을 했는지 파악할 수 있기 때문에 중요하다고 생각해서 열심히 자세하게 작성하고 있다.

• 프리코스 1주차에는 함수 쪼개기, 2주차에는 모듈화하기, 3주차에는 여러 개의 모듈 간에 서로 관계를 맺는 것을 연습했다. 난 1주 차부터 다른 사람들의 코드를 보면서 모듈화를 연습했었는데, 정말 어려웠다. 그때는 모듈화를 하면 괜히 파일만 더 많이 생기고, import, export를 해야 하기 때문에 가독성이 더 안좋다고 생각했었다.
  하지만 모듈화를 계속 하다 보니 장점이 엄청 많은 것을 알 수 있었다.
  우선 내가 처음에 생각했던 가독성 문제는 잘못된 생각이었다. 모듈화를 통해 기능별로 파일을 구분할 수 있고, 그렇기에 파일만 봐도 무슨 기능을 할지 알 수 있었다. 가독성이 굉장히 좋아진 것이다. 또한, 전역 변수에 대한 걱정이 많이 사라졌다. ES6부터 지원하는 모듈은 각 파일 별로 스코프를 가지기 때문에 기존 자바스크립트에서 모든 파일이 동일한 스코프를 가져서 다른 파일에서 선언된 변수 명을 사용하지 못하던 문제가 사라졌다. 물론, 변수 명을 중복되게 지으면 안 되겠지만 실수로라도 잘못 지었을 때 큰 문제가 발생할 수도 있었던 기존 자바스크립트의 단점을 상쇄시켜준다.
  또한, 문제가 발생했을 때, 곧바로 찾을 수 있고, 재사용성과 유지보수성이 좋아진다는 것을 느낄 수 있었다.
  이번 프리코스 미션을 하면서 MVC디자인 패턴도 사용해 봤는데, 예전에는 아무리 읽어봐도 이해가 되지 않던 MVC패턴이 어느 정도 이해가 됐고, 실제로 적용도 할 수준까지 되었다. 또한, 리팩토링 과정을 통해 모듈화를 반복하다 보니 처음 함수를 구현할 때 어느 정도 모듈화를 하면서 코딩을 하는 모습을 볼 수 있었다. 이 모든 것은 지속적인 모듈화와 함수 쪼개기 연습을 통해 이루어질 수 있었다고 생각한다.

마무리하며

마지막으로 우아한테크코스에 합격하지 못하더라도 정말 좋은 기회였고, 제대로 된 많은 공부를 할 수 있는 기회가 되었기에 값진 경험이라고 생각한다. 혼자 독학으로 6개월 동안 공부를 하면서 혼자서는 도저히 알 수 없었던 부분을 많이 알게 되었다.

프리코스를 시작하기 전에 난 자바스크립트가 어느 정도 됐다고 생각하고 조현영 님의 강의를 들으면서 NEXT로 트위터 클론 코딩을 하고 있었다. 그때만 해도 난 코딩을 잘 하고 있고, 이대로라면 프론트엔드 개발자도 금방 될 수 있을 것이라는 꿈을 꿨었다. 하지만 프리코스는 순수 자바스크립트로만 진행하기 때문에 자바스크립트를 다시 공부하게 되었고, 내가 얼마나 헛된 꿈을 꾸고 있었는지 알게 되었다. 난 자바스크립트를 전혀 알지 못하는 사람이었다. 정말 처음에는 DOM을 조작하는 것, event를 등록하고 제거하는 것도 어려웠다. 한 번은 form에 등록된 submit 이벤트를 제거하기 위해 하루 종일 고민했던 적도 있다. 정말 하루 내내 고민했었다.

프리코스 덕분에 내가 기본기가 얼마나 약했는지 알게 되었고, 바로 모던 자바스크립트 Deep Dive 책을 구매해 기본기를 다졌다. 이 글을 읽는다면 꼭 모던 자바스크립트 Deep Dive 책을 보는 것을 추천한다. 자바스크립트에 대한 모든 것이 나와 있고, 쉽게 이해할 수 있게 설명이 되어 있어서 정말 좋은 기본서라고 생각한다.

실행컨텍스트, 클로저, this바인딩, 콜백함수, scope, DOM, 원시/참조 타입, get/set, prototype, ...

위는 이 책을 통해 이해하고 학습하게 된 개념들이다.

이를 통해 내가 앞으로 어떤 방향으로 공부를 해 나가야 할지 알게 되었고, 이것 하나만으로도 프리코스는 의미가 있다고 생각한다.
아, 그리고 이번에 지하철 노선도 미션을 하면서 리액트가 얼마나 대단한 프레임워크인지 알게 되었다. 리액트로 했으면 쉽게 했을 것 같다는 생각이 미션 내내 들었다. 그리고 리액트를 사용하지 않고도 리액트와 같은 효과를 낼 수 있다는 것도 알게 되었다.

프리코스는 다른 사람들이 짠 코드를 볼 수 있는데, 이것이 정말 많은 도움이 되었다. 독학이기도 하고 비전공이기도 한 나는 다른 사람들의 코드를 볼 기회가 없었다. 그래서 맞게 하고 있는 것인지 몰랐었고, 다른 사람들은 어느 정도 수준에 있는지도 몰랐었다.
프리코스를 진행하면서 다른 사람들의 코드를 보며 감탄하기도 하고, 나랑 비슷하다고 안심하기도 하면서 다른 사람이 짠 코드를 완벽하지는 않지만 어느 정도 해석하는 능력이 생겼고, 다들 열심히 하고 있다는 생각에 동기부여가 돼서 나도 열심히 하게 되었던 것 같다.

이제 4일 후면 우아한테크코스 온라인 테스트를 보고 합격자가 결정되게 된다. 우아한테크코스를 정말 간절히 원하기에 3주 동안 열심히 달려왔고, 결과가 어찌되었든 열심히 한 사람에게 좋은 결과가 있을 것이라고 생각하면서 받아들이고 항상 우아한테크코스 캡틴들께 감사하며 살 것 같다.
또한, 얼굴도 모르는 지원자들에게 무료로 피드백도 해주고, 공부 방향과 올바른 코딩 습관을 가질 수 있게 해주셔서 감사하다는 말을 끝으로 글을 마무리 한다.