[항해99] 부트캠프 2주차 회고

김두루 (FrontEnd Developer)·2022년 1월 23일

항해99 부트캠프 회고록

목록 보기

2/8

1주차에는 미니 프로젝트 위주의 팀 공부가 메인이였다면 2주차는 개인이 스터디 위주로 진행되었다. 알고리즘으로 문제 해결력을 기르고 React 주특기를 맛보는 의미있는 2주차였다.

알고리즘 ( 프로그래머스 )

2주차의 메인 주제는 알고리즘이였다. 팀 스터디로 진행됐고 팀끼리 진도를 정하고 각자 문제를 풀고 공부한 다음 매일 모여서 코드 리뷰를 하는 방식이였다. 프로그래머스 Lv.1 문제들을 풀었고 그 문제들에 대한 리뷰는 벨로그에 올려 놨으니 생략하겠다. 대신 2차례 진행됐던 알고리즘 테스트 문제 리뷰를 올려보겠다.

알고리즘 테스트

한 주 동안 몇시간 공부했는 지 기록할 수 있는 알고리즘을 만들어보자.

체크아웃을 할 때 익일 시간은 24+a 로 계산한다. 즉 새벽 2시는 24+2 인 26으로 표기한다.
체크인 페이지는 새벽 5시까지 체크아웃이 되어 있지 않으면 체크아웃을 깜빡한 것으로 간주한다.
따라서 체크인 시스템은 새벽 5시 정각이나, 새벽 5시를 넘겨서 체크아웃을 하게 되면 자동으로 체크아웃을 오후 9시(21:00)로 한 것으로 처리한다.
시간 단위까지만 계산한다.

제한 조건

체크인(checkin)과 체크아웃(checkout)을 진행한 시간이 담긴 배열 두 개가 주어진다.
각 배열에는 월요일부터 일요일까지 체크인/아웃을 한 시간이 담겨있다.
checkin과 checkout 배열의 길이는 각각 7 이다.

풀이

function solution(arr1, arr2){
   let answer=0;
  for(i=0; i<arr1.length; i++) {
    if(arr2[i] >= 29) {
      answer += 21 - arr1[i];
    } else {
      answer += arr2[i] - arr1[i]
    }
  }
   return answer;
}

이 문제는 체크아웃이 5시(29시)를 넘어가면 오후 9시(21시)로 처리한다는 것을 조건으로 만들면 쉽게 해결 가능했다.

항해를 98일동안 진행했을때 98일 뒤의 날짜를 구하는 알고리즘을 만들어보자.

윤년은 고려하지 않는다. (2월은 28일로 통일)

풀이

function solution(month, day){
  let end_day = [31,28,31,30,31,30,31,31,30,31,30,31]
  let target_month = month+1
  let target_day = 98 - (end_day[month-1] - day)

  while(true){
    target_day -= end_day[target_month-1]
    target_month++
    if(target_month > 12) target_month = 1

    if(target_day < 0){
      target_day += end_dey[target_month-2]
      target_month--
      break
    }
  }
  return `${target_month}월 ${target_day}일`
}

각 달의 끝일을 배열로 만들어주고 시작하는 달의 남을 일수를 없애고 시작하고 싶어서 처음 구하려는 달과 날짜 변수를 할당할 때 target_month 에는 +1을 해줘 다음 달로 넘겨주고 target_day 에는 98일에서 (해당 달의 끝일값 - 해당 일값) 을 빼주고 시작했다. 무슨 소리냐 하면 예를 들어 시작하는 날짜가 1월 18일이면 해당 달의 끝일값인 31에서 18을 뺀 13일을 98일에서 빼주고 시작한다는 얘기다. 굳이 이렇게 한 이유는 깔끔하게 다음 달 첫 일에서 계산을 시작하기 위해서이다. 이렇게 변수를 할당하고 while 문을 조건이 맞을때까지 돌려주는데 우리가 이미 구해놓은 target_day 값에서 해당 달의 끝일값을 누적해서 빼주고 빼줄때마다 target_month 값은 하나씩 올려준다. 해당 반복문을 반복하다가 target_day 값이 음수가 되면 target_day 값에서 그 전 달 끝일값을 빼주고 target_month 값은 하나 빼주고 break로 while 문을 빠져나오면 된다. 근데 굳이 이렇게 복잡하게 풀 필요 없이 new Date 내장 함수를 이용하면 쉽게 풀 수 있다. 내장 함수를 이용하지 않고 풀어보려다가 고생을 많이 했다...

다른 풀이

function solution(month,day) {
  let result = '' 
  const date = new Date(`${month}.${day}`);
  var d_day = new Date(date.setDate(date.getDate() + 98));
  
  let g_month = d_day.getMonth() +1
  let g_day = d_day.getDate()
  
  result = `${g_month}`+ "월" + `${g_day}` +"일"
  
  return result 
}

전화번호 앞에 0이 사라져 "1012345678" 로 보이는데 앞에 다시 0을 붙여
"010-1234-5678" 형식으로 바꾸는 알고리즘을 만들어보자.

풀이

function solution(phone){
	let result=""
  let num = "0" + phone;
  result = num.slice(0,3) + "-" + num.slice(3,7) + "-" + num.slice(7,11);
	return result;
}

문자열의 덧셈과 문자열 자르기를 이용하면 쉽게 해결할 수 있었다.

2번 문제에 분 단위까지 계산할 수 있는 알고리즘을 만드는 문제.

입출력 예

checkin	checkout	result
["7:51" ,"8:58", "8:56", "8:35", "9:00", "8:46", "8:56"]	["22:24" ,"21:51", "25:30", "29:10", "29:12", "22:15", "21:31"]	"94시간 29분"

풀이

function solution(arr1, arr2){
   let answer=0;

   let a = arr1.map((el) => {return el.split(":")})
   let b = arr2.map((el) => {return el.split(":")})
   let target_h = 0;
   let target_m = 0;
   console.log(a,b)

   for(let i =0; i<a.length; i++) {
     if(b[i][0] > 28) {
       b[i][0] = 21;
       b[i][1] = 0;
     }
     target_h += (b[i][0] - a[i][0])
     target_m += (b[i][1] - a[i][1]) 
   }
   console.log(target_h, target_m)
   if(target_m >= 0) {
     while(target_m >= 60) {
       target_m -= 60;
       target_h += 1;
     }
   } else {
     while(target_m < 0) {
       target_m += 60;
       target_h -= 1;
     }
   }
   console.log(target_h, target_m)
   answer = target_h + "시간 " + target_m + "분"
   return answer;
}

이 문제의 핵심은 배열을 ":" 을 기준으로 split 해줘서 시간과 분을 나눠서 계산할 줄 아느냐 였던거 같다. 일단 배열을 시간과 분으로 나누고 나면 나머지 조건 주는건 복잡했지만 어렵지는 않았다.

알고리즘 공부를 통해 얻은 점

알고리즘 공부를 할 때 문제가 안풀려도 몇 시간씩 매달려서 하기보다는 한 문제당 고민하는 시간이 30분 ~ 1시간이 넘어가지 않게 하고 30분 ~ 1시간씩 고민해도 안 풀리는 문제는 해답을 보고 그 해답을 독해해서 이해하고 넘어가는 방식으로 공부했다. 처음에는 아예 어떻게 풀어야 될 지 감도 안잡혔지만 이런식으로 문제 수를 늘려가다 보니 신기하게도 이런 이런 식으로 풀면 되지 않을까? 하는 감이라는게 조금씩 생겼다. 앞으로 꾸준하게 하루에 1~2문제라도 풀어주면 문제 해결 능력을 많이 기를 수 있을 것 같다.

아쉬웠던 점

많은 문제를 접하고 코드 리뷰를 통해 어느정도 감이라는게 생기기는 했지만 문제를 풀 때 대부분 for 문과 if 문을 이용한 때려맞추기식 풀이여서 과연 계속 이런식으로 때려맞추기를 해도 문제 해결 능력이 길러질까 하는 고민이 많았다. 아직은 알고리즘이라는 영역에 걸음마를 땐 것에 불과하기 때문에 첫술에 배부를 수는 없는 것 같다.

React - JavaScript의 ES란?

ES란, ECMASCRIPT의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.

ES5 vs ES6

뒤에 숫자는 버전을 뜻하는데 ES5(2009년) ES6(2015년) 출시되었다. 두 버전간의 시간 차이가 있기 때문에 추가된 기능이 많이 있다.

ES5

배열에 forEach, map, filter, reduce, some, every 와 같은 메소드 지원
Object 에 대한 getter / setter 지원
자바스크립트 strict 모드 지원
JSON 지원

ES6

let, const 키워드 추가
- 기존의 변수는 함수 scope를 가진 var 키워드를 이용하여 선언하였다. 때문에 block scope 를 가진 let과 const 키워드를 추가하였다. 기존에는 상수형 키워드가 없어 CONST_TEST 와 같이 대문자로 상수임을 표시했다면, ES 6부터 const 키워드가 추가되어 값의 변경을 통제한다.
arrow 문법 지원
iterator / generator 추가
module import / export 추가
Promise 도입
- 자바스크립트의 비 동기 callback hell 을 해결해 줄 기법