[우테코 프리코스] 1주차 회고

내가 우테코를 지원한 이유

처음 우테코를 알게 된 건 유튜브를 통해서였다. 알고리즘에 우테코 브이로그가 떠서 봤는데 그 영상에 나오는 크루들의 모습이 너무 좋아보였다. 내가 개발자가 되었을 때 저런 환경에서 공부하고 일하면 좋겠다- 생각했던 그 모습 그대로였던 것 같다. 아침에 커피톡을 하고 강의를 듣고 페어 프로그래밍을 하는 등, 사무실에 얽매여 일만 하는게 아닌 자유분방한 분위기에서 토론을 하고 같이 코딩을 하는 분위기가 너무 좋아보였다.

그래서 나도 우테코에 들어가 내 주변환경을 저렇게 만들어놔야겠다고 생각했다. 어쩌다보니 개발을 10개월 동안 독학을 했는데 이제는 함께 공부하고 의견을 나눌 동료를 찾고싶었고, 단순 알고리즘 문제가 아니라 실제 세상의 문제를 해결해보는 경험을 해보고 싶었다. 우테코는 하나하나 떠먹여 주는 것이 아닌 문제만 제공하고 스스로 문제를 해결하고 피드백을 받는 프로세스여서 나에게 지금 딱 필요한 코스라고 생각했다.

 

그래서 우테코에서 이루고 싶은 것들은?

1. 자생력 있는 개발자가 되기
   우테코에서 긴 시간동안 삽질하면서 스스로 문제를 풀어가는 능력을 키우고 싶다. 부딪히다보면 언젠가는 그것에도 내성이 생겨 길이 보일 것이라고 생각한다.
2. 각종 개발 개념들을 파고들어 코드에 녹여내기
   최종적으로는 “자바스크립트적인” 코드를 구현하고 싶다. (지금은 코딩테스트 준비로 “파이써닉한” 코드를 작성하는 것 같다..) 인터넷 강의를 들으면 들을 때는 모든 게 이해되는 것 같지만 강의가 끝남과 동시에 대부분의 지식들을 사라지는 것 같았다. 우테코에서는 자연스럽게 내가 부족한 부분을 자발적으로 공부하게 될 것이고 그걸 이용해 문제를 해결하면 모르던 개념들을 내 것으로 만들 수 있겠다고 생각했다.
3. 가장 중요한 것, 함께 할 동료를 찾기!
   소프트웨어 전공자가 아니다보니 주변에 개발에 대한 얘기를 나눌 친구가 없었다 ㅠㅡㅠ 이번 기회를 통해 함께 공부할 좋은 크루들을 만나고싶다.

---

이제 진짜 1주차 회고!

문제는 어땠나

1주차 문제는 환경세팅이나 언어에 적응하는 시간으로 다소 문제를 쉽게 냈다고 했다. 문제는 총 7문제로, 미션은 기능 요구 사항, 프로그래밍 요구 사항, 과제 진행 요구 사항 세 가지로 구성되어 있다. 프로그래밍 요구사항이나 과제 진행 요구 사항은 우테코 측에서 아주 친절하게 설명해줘서 생각보다 금방 환경설정을 끝마칠 수 있었다.

7문제 모두 알고리즘 구현문제 같은 느낌이었는데, 제한사항이나 예외사항이 불분명한 것들이 꽤 있어서 커뮤니티에서 의견이 분분한 모습을 보았다. 나는 요구사항을 읽으면서 당연하다고 생각했던 것들이 다른 사람들은 다른 의견을 가지고 있어서 문서를 보다 꼼꼼히 읽고 요구 사항을 좀 더 다양한 시각으로 봐야겠다는 것을 느꼈다.

1번부터 5번까지는 금방금방 아이디어가 떠오르는 문제였고, 6, 7 번의 경우는 기능 목록을 최대한 정리하지 않으면 복잡할 수 있었던 문제였다. 복잡했지만 “어떻게든 동작하게 코드를 짠 다음에 리팩토링하자” 라는 마인드로 코드를 작성했고, 결국엔 혼자 힘으로 풀어냈다. (진짜 기뻤다….!)

2, 3번 문제에서는 문자열에서 특정 문자를 포함하는지 확인하기위해 정규식을 새로 배워서 사용했다. 맨날 includes나 indexOf 함수만 쓰다가 정규식을 사용하니 코드가 훨씬 짧아지고 가독성도 좋아진 것 같았다.

// Problem 2
for (let letter of alphabet) {
      const regex = new RegExp(`${letter}{2,}`, "g");
      if (deduplicatedString.match(regex) !== null) {
        deduplicatedString = deduplicatedString.replace(regex, "");
        duplicateCount += 1;
      }
 }

// Problem 3
function find369(number) {
  const regexp = /3|6|9/;
  let found369 = [];

  for (let n = 1; n < number + 1; n++) {
    if (regexp.test(n)) {
      found369.push(n);
    }
  }

  return found369;
}

4번 문제는 암호해독 문제였는데, 아스키코드의 규칙을 찾아서 해결했다. 이때 똑같은 기능을 하는데 약간 다른 함수를 2개를 만들어서 중복코드가 되었는데 이걸 클래스로 묶지 못한 것이 아쉬움이 남는다.

// Problem 4
function transCapital(asciiNum) {
  if (asciiNum <= M) {
    return String.fromCharCode(asciiNum + (ALPHABET_GAP - (asciiNum - A) * 2));
  } else {
    return String.fromCharCode(asciiNum - (ALPHABET_GAP - (Z - asciiNum) * 2));
  }
}

function transSmall(asciiNum) {
  if (asciiNum <= m) {
    return String.fromCharCode(asciiNum + (ALPHABET_GAP - (asciiNum - a) * 2));
  } else {
    return String.fromCharCode(asciiNum - (ALPHABET_GAP - (z - asciiNum) * 2));
  }
}

6, 7번 문제는 기능을 최대한 단순화해서 함수형 프로그래밍을 하려고 노력했다. 작은 단위로 함수를 만들어 놓으니 리팩토링할 때 훨씬 쉽다는 것을 느꼈다. 다만 두 문제 모두 자료구조나 알고리즘도 사용할 수 있었을텐데 완전탐색으로 풀려고 했던 것 같아서 좀 아쉽다.

 

내가 노력한 것들

사실 문제를 푸는 것보다 아래의 작업들을 하는 데 더 많은 시간을 쏟았던 것 같다.

• 읽기 좋은 커밋메세지 작성하기
  나만의 커밋컨벤션을 정하기 위해 자료조사를 하면서 개발자들이 통상적으로 쓰는 컨벤션이 있다는 것을 알게되었다. 이것들을 취합해 나는 “[문제이름] 커밋타입: 내용” 이런 형식으로 작성했다. 커밋타입은 feat, refactor, fix, style 등 어떤 타입의 문제를 해결한 커밋인지 명시해줄 수 있어서 유용하게 사용했고, 내가 보기에도 편한 커밋메세지를 만들 수 있었다.
  추후에 다른 사람들의 커밋메세지를 보니 영어로 쓰는 것이 더욱 보편적인 것 같아서 다음 주차부터는 영어로 작성해보려고 한다. 커밋 타입은 다음 블로그를 참고하였다.
  커밋메세지 컨벤션 참고
• 의미있는 변수명 만들기
  첫번째 규칙으로 자바스크립트는 함수나 변수에 카멜 케이스를, 생성자 함수, 클래스의 이름에는 파스칼 케이스를 이용한다고 한다. 케이스 별 변수명 특징은 다음과 같다. 

<script>
// 카멜 케이스
var firstName;

// 스네이크 케이스
var first_Name;

// 파스칼 케이스
var FirstName;

// 헝가리언 케이스;
var strFirstName; // type + id
var $elem = documnet.getElementBtId('id'); // DOM 노드
var observable$ = fromEvent(document, 'click'); // RxJS옵저블

</script>

따라서 모든 변수명을 카멜케이스로 바꾸고 해당변수나 함수가 하는 일을 설명하는 변수명을 지으려고 노력했다. 그리고 나중에 보면 알기 힘든 상수들도 의미를 담은 변수에 할당해서 코드의 직관성을 높였다.

const EMAIL = 0;
const NICKNAME = 1;

function checkNameContainsCase(form, word) {
    for (let index = 0; index < forms.length; index++) {
      if (forms[index][EMAIL] === form[EMAIL]) continue;

      if (forms[index][NICKNAME].includes(word)) {
        answer.push(forms[index][EMAIL]);
        answer.push(form[EMAIL]);
      }
    }
  }

• 함수를 작은 기능 단위로 쪼개기
  이중 for문을 최대한 지양하는 것이 좋다고 해서 for문을 대체로 함수로 뺐다. 이렇게 작은 단위로 함수를 쪼개놓으니 오류가 생겼을 때 테스트하기도 좋고, 코드를 리팩토링하는데도 시간이 절약되는 느낌이어서 쪼개기의 중요성을 알게되었다.
• 클린코드 작성
  “클린코드” 책을 정리해놓은 링크가 있어서 이걸 보고 많은 참고가 되었다.
  내용이 너무 많아서 다 보지는 못했고 아직 부족한 점이 많은 채로 코드를 제출했지만 앞으로 꾸준히 보면서 더 좋은 코드를 작성하기 위해 노력할 것이다.
  https://github.com/qkraudghgh/clean-code-javascript-ko

 

느낀 점

일단 배울게 너어어어어어무 많아졌다. 문자열 함수를 배우니 자바의 프로토타입 객체에 대해서도 알아야할 것 같고, 클래스도 배워서 적용하고싶고 아무튼 배우고 싶은게 너무 많아져버렸다. 이제 이것들을 천천히 해치우면서 성장해가겠지 생각하고 있다.

그리고 정말 솔직히 과제를 제출하고 다른 사람들의 코드를 보고 현타?랄까 좌절감이 많이 들었다. 실력이 좋은 사람들이 정말 많은 것 같아서 그 기에 눌려 자존감이 하루정도 뚝뚝 떨어졌는데, 그래도 잘하는 사람들의 코드를 분석해서 내것으로 만들고 그를 통해 성장하는 과정이라고 생각하자며 마음을 다잡았다. 코수다에서 포비님도 얘기했지만 어제의 나보다 성장한 오늘의 내가 되자!!! 가 목표가 되었다.

무엇보다 “자바스크립트적인” 코드를 하루 빨리 작성하고싶다. 그러기 위해서는 map, reduce같은 고차원 함수(?)를 많이 써봐야겠다는 생각이 들었다. 그리고 중복코드를 없앨 방법을 찾아봐야 할 것 같다.

프리코스 첫주차인데도 너무 많은 것들을 배웠다는 생각이 든다. 문서 꼼꼼히 읽기, 문제 예외사항 생각해내기, 나만의 컨벤션 정하기, 자바스크립트 기본서 기능별 독서, 리팩토링 경험, 깃 PR 사용, 커뮤니티 활용(좋은 질문 하는 방법) 이 모든 것들에 대해 고민하고 경험해보는 시간이었다. 일주일간 너무 모니터를 봐서 지금도 눈이 시릴정도로 몰입하고 즐겼는데, 다음 2주차도 누구보다 열심히 문제를 해결해나가고 싶다!! 😛

 

나의 1주차 문제 풀이 링크이다.
부족한 점이 정말 많지만 한 번 구경와주시고 리뷰를 남겨주시면 많은 도움이 될 것 같습니다!!!
https://github.com/woowacourse-precourse/javascript-onboarding/pull/220 

[온보딩] 최예송 미션 제출합니다. by to06109 · Pull Request #220 · woowacourse-precourse/javascript-onboarding