안녕하세요, 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 3기 수료 중인 김당퀔입니다! 이번 3기 수료 기간은 9월 13일부터 4월 14일까지 총 7개월 과정입니다. 7개월 동안 매주 주말 회고록을 작성해 보려고 합니다.

블로그 제출 기한으로 인해서 지난 금요일부터 해당 주 목요일까지의 사이클로 작성됩니다.

1. 이번 주 목표

• 영화 API 과제
• 기초부터 완성까지, 프론트엔드 읽고 정리하기
• 김민태 강사님 강의 다시 시작하기

2. 커리큘럼 학습 내용

수, 금요일엔 김태원 강사님의 알고리즘 수업이 있고, 월, 화요일에는 박영웅 강사님의 자바스크립트 강의가 있습니다.

알고리즘 (코딩 테스트 수업)

모든 문제가 저에게는 난이도가 있는 편이었지만 그 중에서 더욱 (문제조차이해가되지않는...) 어려웠던 문제 몇 개만 작성해 보려고 합니다.

1차원의 배열 시뮬레이션

• 바이토닉 수열

바이토닉 수열이란 수열이 증가했다가 감소하는 수열을 의미한다.
매개변수 nums에 수열이 주어지면 이 수열이 바이토닉 수열인지 판별하는 프로그램을 작성하시오.
만약 [1, 2, 3, 4, 2, 1]이면 바이토닉 수열이다. 하지만, [1, 2, 2, 3, 2, 1]과 같이 값이 연속으로 있다면
바이토닉 수열이 아니다.

nums	result
[1, 2, 3, 4, 5, 3, 1]	YES
[1, 3, 4, 5, 5, 6, 4, 3]	NO
[1, 2, 3, 4, 5]	NO

해답

function solution(nums) {
  let answer = 'YES'
  let leng = nums.length
  let i = 0
  
  while (i < leng - 1 && nums[i] < nums[i + 1]) i += 1
  if (i === 0 || i === leng - 1) {
    answer = 'NO'
  }
  
  while (nums[i] > nums[i + 1]) i += 1
  if (i !== leng - 1) {
    answer = 'NO'
  }
  return answer
}

첫 번째 while문은 i는 0에서부터 시작하는 숫자이며, leng - 1이면서, nums 배열 숫자 중 i번째 숫자와, 그 다음 숫자를 비교했을 때 그 다음 숫자가 크다면 i를 1씩 증가한다. 이때, i가 0이거나 i가 leng - 1 숫자까지 간다면 NO를 반환한다. 왜냐하면 i가 0이라는 것은 배열의 다음 숫자가 크지 않다는 뜻이고, leng - 1숫자까지 갔다면 마지막 숫자가 제일 크다는 의미이므로 바이토닉 수열이 될 수 없다. 두 번째 while문은 nums의 i 번째 숫자와 그 다음 숫자를 비교했을 때 i 번째 숫자가 더 크다면 i를 1씩 증가한다. 이때, i가 leng - 1 숫자가 아니라면 NO를 반환한다. 그 이유는 두 번째 while문은 내림차순을 비교하는 것인데 마지막 숫자가 제일 작지 않다면 바이토닉 수열이 되지 않기 때문인다.

• 수열의 경우의 수

바이토닉 수열이란 수열이 증가했다 감소하는 수열을 의미한다.
매개변수 nums에 수열이 주어지면 이 수열의 연속 부분 수열 중에 바이토닉 수열이 몇 개 있는지 알아내는 프로그램을
작성하시오.
만약 [1, 3, 2, 5, 7, 4, 2, 5, 1] 수열이 주어지면 이 수열의 연속 부분 수열 중 바이토닉 수열은 [1, 3, 2],
[2, 5, 7, 4], [2, 5, 7, 4, 2], [5, 7, 4], [5, 7, 4, 2], [2, 5, 1]로 6개가 있습니다.

nums	result
[1, 3, 2, 5, 7, 4, 2, 5, 1]	6
[1, 2, 3, 4, 5, 3, 2, 1]	12
[1, 1, 3, 1, 2, 1, 3, 5, 6, 7, 2, 1]	10

해답

function solution(nums) {
  let answer = 0;
  let peak = []
  for (let i = 1; i < nums.length - 1; i += 1) {
    if (nums[i - 1] < nums[i] && nums[i] > nums[i + 1]) {
      peak.push(i)
    }
  }
  for (let p of peak) {
    let left = p
    let right = p
    let lcnt = 0
    let rcnt = 0
    while(left > 0 && nums[left - 1] < nums[left]) {
      lcnt += 1
      left -= 1
    }
    while(right < nums.length - 1 && nums[right] > nums[right + 1]) {
      rcnt += 1
      right += 1
    }
    answer += (lcnt * rcnt)
  }
  return answer
}

제일 먼저 i번째 수의 다음 수가 증가하는지 찾아야 합니다. 증가한 수들을 peak 배열 안에 넣어 줍니다. 첫 번째 for 문 안에서 0과 length의 마지막 숫자를 제외한 이유는 제일 처음 숫자와 마지막 숫자가 증가하는 수라면 바이토닉 수열에서 제외되기 때문에 카운팅 하지 않습니다. 두 번째 for문은 꼭짓점이 되는 peak들의 이용하여 왼쪽과 오른쪽이 감소하는지 확인합니다. 첫 번째 while문은 왼쪽, 두 번째 while문은 오른쪽을 확인합니다. 경우의 수를 찾는 것이기 때문에 왼쪽 오른쪽 카운팅 한 것을 곱하여 경우의 수를 답으로 반환합니다.

2차원의 배열 시뮬레이션

• 스카이라인

N*N 격자판에 도시 빌딩의 높이 정보가 주어집니다. 도시를 앞에서 봤을 때, 스카이라인은 왼쪽부터 해서 [7, 8, 9, 8]
의 높이로 보이고, 옆에서 보면 [7, 9, 5, 8] 입니다.
매개변수 board에 도시의 각 빌딩의 높이 정보가 주어지면 도시의 스카이라인은 변함이 없이 각 빌딩의 높이를 최대한
높이고자 합니다. 각 빌딩의 높이를 증가시킬 수 있는 최대 높이의 합 을 구하는 프로그램을 작성하시오.

board	result
[[2, 5, 7, 3], [6, 8, 9, 7], [3, 2, 4, 5], [7, 2, 5, 8]]	28
[[3, 7, 6, 2], [5, 3, 8, 7], [3, 2, 5, 7], [7, 7, 5, 3]]	33

해답

function solution(board) {
  let answer = 0
  let n = board.length
  let row = Array(n).fill(0)
  let col = Array(n).fill(0)
  for (let i = 0; i < n; i += 1) {
    for (let j = 0; j < n; j += 1) {
      row[i] = Math.max(row[i], board[i][j])
      col[i] = Math.max(col[i], board[j][i])
    }
  }
  for (let i = 0; i < n; i += 1) {
    for (let j = 0; j < n; j += 1) {
      answer += Math.min(row[i], col[j]) - board[i][j]
    }
  }
  return answer
}

우선 저는 row와 col 배열을 빈 배열로 시작하고 싶었는데 거기에 대한 해답은 아직 찾지 못 했습니다. ㅠㅠ 찾게 된다면 공유해 보도록 하겠습니다.
row와 col을 board의 수만큼 0으로 채운 배열로 생성합니다. 이중 for문이 돌아가면서 각 열과 행의 최댓값을 찾습니다. 각 열과 행의 최댓값이 모인 배열이 row와 col입니다. 두 번째 이중 for문에서는 각 열과 행의 최댓값을 모은 것의 최솟값을 찾아야 합니다. 최솟값을 찾는 이유는 둘 중에 최댓값으로 스카이라인을 맞추게 되면 처음 board의 스카이라인이 변경되기 때문입니다. 최솟값에서 각 board의 값을 빼 주면 얼마나 더 높혀야 하는지 알 수 있습니다. 예를 들어 0행의 3열에 있는 숫자 3에서 각 행 열의 최댓값의 최솟값은 7입니다. 7 - 3을 해 주어 4라는 값을 얻을 수 있습니다.

3. 그룹 스터디 학습 내용

저희 그룹은 자바스크립트를 활용한 클론 코딩을 목표로 짜여진 그룹입니다.

자바스크립트 DEEP DIVE 14장(전역 변수의 문제점)과 24장(클로저)를 읽고 예제나 개념을 요약하였습니다. 클로저 부분을 읽다가 debugger 를 만나게 되었는데 처음 보게 된 구문이라 책 내용과 같이 실행해 보았습니다.
debugger 중단점 설정 등 현재 사용할 수 있는 디버그 기능을 호출. 사용할 수 있는 디버깅 기능이 없으면 아무런 동작도 하지 않는다. 즉, 버그가 있을 것으로 생각하는 코드를 분석하거나, 한 단계씩 진행해 보는 구문. bar() 함수는 foo() 함수보다 먼저 소멸되기 때문에 foo() 함수를 참조하는 클로저였지만 클로저의 본질에는 부합하지 않다.

---

기본적으로 진행하는 DEEP DIVE 외에 알고리즘 수업 때 풀었던 문제들을 다시 풀어 보며 서로의 풀이를 비교해 보았는데 아무래도 1주차는 조금 간단한 문제 위주였어서 엄청 다른 풀이가 나오진 않았던 것 같다. 그리고 문제를 풀어 볼 때 (총 8문제 정도 풀었음) 처음 4문제 정도는 쉽게 풀렸던 것 같은데 조금만 난이도가 있는 문제가 나오자 바로 어떻게 문제를 풀어야 할지 감이 오지 않아서 어려웠던 것 같다. 앞으로 꾸준히 문제를 풀어 보며 문제를 푸는 방식도 익숙해져서 자연스럽게 코드를 작성할 수 있어야 될 것 같다.

4. 개인 학습 내용

괜히 뿌듯해서 올려 보는 프로그래머스 열심히 하는 짤.
요즘 프로그래머스에 들어가서 4문제씩 꾸준히 풀고 있습니다. 중간에 잘 모르겠는 문제 하나를 다른 사람의 풀이 보기를 했더니... 프로그래머스에서 제공해 주는 문제 순서(?)가 나오지 않아서 정답률이 높은 것 순서대로 매일 4개씩 풀어 보는 중입니다. 그래도 알고리즘 수업을 몇 번 해서 그런 건지 아니면 진짜로 쉬운 문제인 건지... 나름 잘 풀려서 기분도 좋고 앞으로 이렇게 쭉쭉 잘 풀렸으면 좋겠다는 생각이 들었다.

그리고 벨로그에 업로드를 차근차근하고 있는 기초부터 완성까지, 프론트엔드도 꾸준히 읽고 있다. HTML, CSS, 자바스크립트는 관련된 문서를 볼 때마다 새로운 것들이 자꾸 보여서 정말 꾸준히 공부를 해야 될 것 같다는 생각이 들었다.

과제로 진행하고 있는 영화 API 사이트 만들기를 하던 중에 계속해서 오류가 발생하여서 더 진행하기 어렵다고 느끼고 있던 중에 강사님의 도움으로 조금은 진행할 수 있었다.

오류가 있었던 부분은 API가 return 하는 값에 대한 이해도가 떨어져서 발생한 것이었다. consolec창에서 정보를 받아오는 것은 잘 보였는데 막상 내가 만든 HTML을 통해서 출력을 하려고 하면 자꾸 안 되길래 뭐가 문제인가 했는데 return값을 제대로 적어 주지 않아서 발생한 것이었다. 그걸 해결하고 나서 검색어가 없을 때와, 검색어가 짧을 때 알림창이 뜨게 구현해 주었고, more 버튼을 누르면 한 페이지씩 더 로딩되게 만들었다. 앞으로도 더 구현해야 될 것들이 많지만 일단은 이 정도로 만든 것이 굉장히 뿌듯했기 때문에 :)... 만족하는 중.

btnEl.addEventListener('click', async () => {
  if (inputEl.value === ''|| inputEl.value.toString().length < 4) {
    alert('검색어가 너무 짧습니다')
  } else {
    const { movies, totalResults } = await getMovies(inputEl.value)
    moviesEl.innerText = '';
    moviesEl.style.height = '100%';
    btnMoreEl.className = 'btn-more';
    renderMovies(movies)
  }
})

검색 버튼을 눌러서 출력하는 코드만 살짝 올려 보자면! value가 없거나, value의 길이가 4 미만이면 검색어가 너무 짧다는 알림을 주고, 그 외에는 moviesEl를 수정해 주면서 그 안에 렌더링 된 영화 정보들을 넣게끔 만들어 주었습니다. 처음에는 moviesEl를 수정하는 것들이 전부 renderMovies함수 안에 있었는데 그렇게 코드를 작성하였더니 more 버튼을 눌렀을 때 정보가 추가되는 것이 아니라 페이지가 바뀌는 걸 확인할 수 있었습니다. moviesEl 수정하는 것을 검색을 처음 했을 때만 하는 것으로 바꾸어 주니 원하는대로 잘 동작하였습니다.

5. 주간 회고

수업 듣다가 노린재가 나타나질 않나... 그 친구 잡아서 버렸더니 변기가 막히질 않나... 다사다난했던 한 주였습니다!
모르는 것은 재빨리 질문을 하자! 괜히 쫄아서 강사님께 질문을 안 했었는데 질문을 하고 나니 시원하게 작업이 진행되는 모습이 좋았습니다. 다음부터는 그냥 막히면 조금만 고민해 보고 질문하는 걸로...! 과제는 해야 될 것 같고, 아직 뭘 제대로 공부해야 될지 모르겠어서 아직도 조금은 방황하고 있긴 하지만 강의나 책들을 하나씩 보면서 지식들을 습득하는 중입니다. 주말에 조금 더 집중하는 시간이 늘어야 될 것 같고, 밤에도 넷플릭스 그만 보고 일찍 자기 ^^.... 아좌작.

6. 다음 주 목표

• 영화 API 과제 제출
• 김민태 강사님 강의 듣기
• 멋사 강의 듣기 (돈 내고 안 들을 수 없다...)
• 기초부터 완성까지, 프론트엔드 읽고 정리하기
• 조금 더 일찍 자고, 일찍 일어나기!

지금까지 9주차의 기록을 읽어 주신 여러분, 감사합니다! 김당퀔은 이만 공부하러. 🥕🥕