[우아한 테크코스 5기 프리코스] FE 1주차 회고록

우아한 테크코스 포스터

1. 우아한 테크코스 프리코스 1주차 과제

프리코스 1주차 과제

문제는 이미지에서 본 것과 같이 7문제가 주어진다.

쉬운 문제들도 있고 어려운 문제들도 존재했다. (물론 사람마다 다르겠지만)

 

코스 과정에서 주어지는 Repository를 포크하고 나서 클론 후 각 문제별로 기능을 구현하면 된다.

여기서 "Jest"의 테스트로 동작해 확인하는 과정이 신선했다.

"Jest"를 딱 한 번 경험해봤기 때문에 다시 공부해야 했었고 이번 기회에 더 알아갈 수 있겠구나 싶었다.

 

문제를 단순하게 푸는 것보다 중요하게 생각하는 것은 어떻게 구현하는가? 인 것 같았다.

코드를 길게 작성하는 것보다 최대한 짧게, 그리고 함수로 구현하는 것을 목적으로 둔 것 같았다,

그래서 아직 어색하지만 최대한 쪼개서 함수로 구현하려고 노력했다.

 

나중에야 알았지만 기능 단위로 커밋을 하라는 요구가 있었다. 그러기에는 너무 늦게 알았고 나는 문제를 해결할 때마다 커밋을 했다. 다음부터는 기능 단위로 커밋을 해야겠다.

 

2. 코드로 기능 구현

하나의 메소드 혹은 함수에 모든 것을 구현하려고 하지 않기 위해 쪼갤 수 있다고 생각이 되면 쪼개려고 노력했다.

 

function problem1(pobi, crong) {
  let answer = 0;
  const pobiSum = sum(pobi);
  const pobiMul = multiply(pobi);
  const crongSum = sum(crong);
  const crongMul = multiply(crong);

  let pobiMax = 0;
  let crongMax = 0;

  pobiMax = pobiSum > pobiMul ? pobiSum : pobiMul;
  crongMax = crongSum > crongMul ? crongSum : crongMul;

  if ((pobi[1] - pobi[0]) > 2 || (crong[1] - crong[0]) > 2) {
    answer = -1;
    return answer;
  }

  if (pobiMax > crongMax) {
    answer = 1;
    return answer;
  }

  if (pobiMax < crongMax) {
    answer = 2;
    return answer;
  }

  if (pobiMax === crongMax) {
    answer = 0;
    return answer;
  }
}

function sum(arr) {
  const leftArr = Array.from(String(arr[0]), Number);
  const rightArr = Array.from(String(arr[1]), Number);

  let leftSum = leftArr.reduce((prev, curr) => {
    return prev + curr;
  });
  let rightSum = rightArr.reduce((prev, curr) => {
    return prev + curr;
  });

  return leftSum > rightSum ? leftSum : rightSum;
}

function multiply(arr) {
  const leftArr = Array.from(String(arr[0]), Number);
  const rightArr = Array.from(String(arr[1]), Number);

  let leftSum = leftArr.reduce((prev, curr) => {
    return prev * curr;
  });
  let rightSum = rightArr.reduce((prev, curr) => {
    return prev * curr;
  });

  return leftSum > rightSum ? leftSum : rightSum;
}

module.exports = problem1;

실제로 처음에 작성해 본 한 문제의 코드이다.

두 명이 각각 두 개의 점수를 가졌고 이 점수들을 더한 것과 곱한 것 중에서 가장 높은 점수들을 비교해서 결과를 반환하는 것이 문제였다.

여기서 나눈 것은 덧셈 함수와 곱셈 함수다.

다른 부분에서도 나눌 수 있었다고 생각을 하지만 다른 문제까지 풀어야 했기 때문에 시간이 그렇게 많지 않았다.

 

그리고 주어진 요청 사항이 하나 더 있었다. 특정 라이브러리를 사용하지 말고 순수 자바스크립트로 구현해야 한다는 것이다. 사실 다른 라이브러리를 많이 사용해보지 않아서 나한테는 크게 문제가 되지 않았다.

 

function problem3(number) {
  let answer = 0;

  for (let i = 1; i <= number; i++) {
    let strNumber = String(i);

    answer = checkNum(strNumber, answer);
  }

  return answer;
}

function checkNum(strNum, clapCount) {
  for (let j of strNum) { 
    if (j === '3' || j === '6' || j === '9') clapCount++;
  }

  return clapCount;
}

module.exports = problem3;

이렇게 나눌 수 있는 기능을 나누어보니 코드가 짧아지는 것을 느낄 수 있었다. 만약 쪼개서 구현하지 않았으면 하나의 함수에 모든 것을 구현해 코드가 길어져 읽기 어려웠을 것이다.

 

그런데 막상 함수를 쪼개서 구현하려고 할 때마다 심각한 고민이 생겼다.

도대체 이름을 어떻게 작성해야 할까?

함수로 쪼갰으면 해당 함수가 어떤 함수인지 쉽게 알아야 할텐데 말이다. 이 고민은 아직도 가지고 있다. (이름 짓는 게 제일 어려워 😭

 

function problem6(forms) {
  let emailSet = new Set([]);
  let sameNameCount = {};
  let getName = [];

  for (let i = 0; i < forms.length; i++) {
    // 각 배열의 이름 가져오기
    getName[i] = forms[i][1];
    let name = getName[i];

    nameTwoWordsSave(name, sameNameCount);
  }

  for (let i = 0; i < forms.length; i++) {
    let name = getName[i];
    let email = forms[i][0];

    addEmail(name, sameNameCount, emailSet, email);
  }

  const answer = Array.from(emailSet).sort();

  return answer;
}

function nameTwoWordsSave(name, saveName) {

  for (let i = 0; i < name.length - 1; i++) {
    // 이름의 두 글자 가져오기
    let nameCheck = name.slice(i, i + 2);

    // 이름의 두 글자를 가져온 Key 값이 존재하면 값을 +1씩 아니면 1
    if (saveName[nameCheck]) saveName[nameCheck]++;
    if (!saveName[nameCheck]) saveName[nameCheck] = 1;
  }

  return saveName;
}

function addEmail(name, saveName, emailSet, getEmail) {
  for (let i = 0; i < name.length - 1; i++) {
    let nameCheck = name.slice(i, i + 2);

    if (saveName[nameCheck] > 1) emailSet.add(getEmail);
  }

  return emailSet;
}

module.exports = problem6;

 

물론 함수를 쪼개도 길어지는 것은 어쩔 수가 없었다. 아직 알고리즘에 많이 약해서 최대한 짧게 구현하는 것이 어렵다. 아마 알고리즘 공부를 많이 한 사람들은 더 짧고 더 쉽게 구현했을 것이다.

 

3. 1주차 과제를 하고 나서 느낀 것

(1) 코드를 생각하고 작성하는 것

지금까지 코드는 결과만 생각하고 구현했다. "정답만 맞으면 돼!" 라는 생각으로 체계적이고 효율적인 코드를 작성하려는 생각은 크지 않았다. 그런데 이번 기회에 "더 체계적이고 효율적으로 작성하려면 어떻게 해야 할까?" 하는 고민을 자주 했다.

 

"더 읽기 쉽게 작성하고 싶어.", "더 간단하게 작성할 수 있는 방법이 있지 않을까?" 하는 고민들 말이다. 아직 많이 부족하지만 고민을 계속 하다보니 많이 검색하게 되고 더 좋은 방법들을 찾게 됐다. 그렇게 조금씩 효율적으로 작성하려는 노력이 다른 사람들 눈에는 안 보이겠지만 나에게는 조금씩 보이기 시작하고 있는 것 같다.

 

(2) 기능 목록 작성이 필요하다는 것

나는 기능 목록을 작성해야 한다는 것을 예전에 한 번 동영상 강의를 봤을 때 잠깐 듣고 나서 잊고 있었다. 그리고 이번에 다시 듣게 되었는데 과제가 마무리되는 시기에 알게 되서 조금 늦은 감이 있었다.

 

프로젝트를 하거나 무언가를 만들어 보려고 할 때, 기능 목록을 작성하려는 생각보다는 무엇을 어떻게 만들지 생각을 한다. 그래서 이게 왜 필요한 지 이해를 못했었다. 그런데 1주차 문제들을 풀면서 왜 필요한 지 조금은 알게 됐다.

 

기능 목록을 확실하게 해두지 않고 진행을 하니 갈수록 복잡해졌고 진행에 어려움을 자주 느꼈다. 그러나 기능 목록을 확실하게 한다면 더 명확해지고 진행이 전보다 더 수월해질 것이라는 생각이 강하게 느껴졌다.

 

 

(3) 다른 사람 코드를 보고 이해하는 것

다른 사람들이 작성한 코드를 보는 것도 굉장히 좋은 공부가 된다는 것을 다시 한 번 깨닫게 됐다.

다른 사람들의 코드를 보고 "이렇게 구현이 가능하구나.", "이런 기능이 있구나." 하는 것도 알게 됐고 하드 코드로 작성한 내 코드가 조금씩 달라질 수 있게 만들어 주기도 했다.

 

다른 사름들의 코드를 읽고 한 줄 한 줄 제대로 이해하고 그리고 스스로 사용하고 활용해보면서 공부가 많이 됐다.

 

이를 계기로 다른 사람들이 봤을 때도 좋은 코드가 가장 좋은 코드인 것을 느꼈다. 아직 나는 부족하지만 과정이 진행될수록 다른 사람들이 봤을 때도 제대로 이해할 수 있는 좋은 코드로 작성하려고 노력할 것이다.

 

4. 부족한 것

(1) 테스트 코드 작성

테스트 코드를 작성하는 것이 아직 모자라고 어색하다. 테스트 코드에 대한 기본적인 이해와 필요성은 많은 강의를 통해 알고 있었지만 적극적으로 활용하려는 노력은 없었다. 그것이 이번에 제대로 드러났다. 테스트 코드 위주로 어떻게 진행해야 하는지부터 어려움을 느꼈다.

 

이번 코스에서 기본적인 테스트 구현이 있었는데 이 부분만 이해했을 뿐 더 구체적인 부분은 아직 이해가 더 필요하다. 그래서 이번 계기로 테스트에 대한 공부를 진행하고 있다. 최대한 테스트 부분을 제대로 활용해야 겠다고 생각이 든다.

 

(2) 더 많이 공부하고 더 깔끔하게 작성

개발은 하면 할수록 공부가 더 필요하다고 느껴진다. 나는 정말 많이 부족하다는 것도 느꼈다. 그리고 대단한 사람들이 정말 많다는 것도 느꼈다. 그래서 나는 더 많이 공부해야 한다고 생각이 들었다.

 

그리고 아직 코드가 조금 더럽다. 그래서 이해하기 조금 어렵거나 깔끔하지 못하다는 느낌이 든다.

그래서 더 깔끔하게 그리고 더 효율적으로 작성할 필요가 있다. 다른 사람들의 코드를 자주 보고 공부해야겠다고 느꼈다.

 

5. 마무리

이번 우아한 테크코스는 사실 합격보다는 과정을 경험하는데 집중하고 있다. 사실 합격은 많이 어렵다고 생각하고 있기 때문에 이번 기회에 많은 것을 얻어가려고 한다. 다른 사람들의 활동도 보고 코드도 보고 그리고 내 코드도 다시 작성해보며 제대로 공부할 수 있는 4주가 되길 바란다.