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

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

1. 이번 주 목표

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

2. 커리큘럼 학습 내용

금요일, 수요일은 김태원 강사님의 알고리즘, 월요일, 화요일은 박영웅 강사님의 자바스크립트, 그리고 수요일 저녁 시간에는 김시현 멘토님의 현업자 멘토 강의가 있었습니다.

김태원 강사님 금요일 시간에는 스택 큐와 관련된 알고리즘과 시간 복잡도 관련된 알고리즘에 대해서 학습하였는데 둘 다 간단한 원리만 이해한다면 쉽게 접근할 수 있는 문제들이었습니다. 그러나 처음 접해 본 문제들이다 보니 원리를 이해하는 데에 여러움을 느꼈었습니다.

스택, 큐, 힙

간단하게 원리를 작성해 보겠습니다. 보통 문제들이 ()를 이용한 문제들이 많았습니다. 스택에서는 )를 만나면 stack에서 (를 삭제해 주어서 카운트를 해 주는 방식으로 문제를 풀었습니다.
큐는 push와 shift 메소드를 둘 다 사용해 주어야 해서 헷갈리지 않게 코드를 작성해야 합니다.

시간 복잡도

시간 복잡도에서는 O(n), O(n^2), O(logn)과 같은 방식을 보았는데 특히 O(n^2)에서 복잡도를 줄이는 코드들을 확인할 수 있었습니다. 그리고 예제들은 슬라이딩 윈도우를 사용해서 풀었는데 매개변수로 오는 수만큼 윈도우 사이즈를 만든 후 조건에 맞는 윈도우가 나올 때까지 이동하는 방식이었습니다. 처음엔 고정된 윈도우였지만 후반 문제들은 윈도우의 사이즈가 변경되어서 이해하는 데에 어려움을 느끼기도 했습니다. 그래도 몇 번 익숙해지니 어떤 패턴인지 이해할 수 있었습니다.

부분 수열

자연수로 이루어진 수열이 주어집니다. 이 수열에서 부분 수열의 합이 특정 숫자 m이 되는 경우가 몇 번 있는지 알고 싶습니다. 만약 m = 6이고, 수열이 다음과 같다면 [1, 1, 2, 1, 3, 1, 1, 1, 2] 합이 6이 되는 부분 수열은 [2, 1, 3], [1, 3, 1, 1], [3, 1, 1, 1]로 총 3가지입니다. 매개변수 nums에 수열이 주어지고, m이 주어지면 부분 수열의 합이 m이 되는 경우의 수를 반환하는 프로그램을 작성하세요.

입출력 예

nums	m	result
[1, 1, 2, 1, 3, 1, 1, 1, 2]	6	3
[1, 1, 1, 1, 1, 1, 3]	3	5
[1, 2, 1, 2, 1, 2, 1]	3	6
[5, 5, 5]	5	3

답안

function solution(nums, m) {
  let answer = 0
  let sum = 0
  let left = 0
  for (let right = 0; right < nums.length; right += 1) {
    sum += nums[right]
    if (sum > m) {
      sum -= nums[left]
      left += 1
    }
    if (sum === m) answer += 1
  }
  return answer
}

수요일 수업은 지난 시간 복잡도에 이어서 정렬까지 진행하였습니다. 정렬 파트에서는 간단히 sort만 사용하면 될 것 같은데 왜 이렇게 해야 할까? 싶은 순간이 있었는데 정렬 방식을 활용한 문제도 있었기 때문에 패턴을 잘 이해한다면 다양한 문제를 풀 수 있을 것 같습니다.

정렬

선택 정렬

function solution (nums) {
  let answer = []
  for (let i = 0; i < nums.length - 1; i += 1) {
    let minIndex = i
    for (let j = i + 1; j < nums.length; j += 1) {
      if (nums[j] < nums[minIndex]) minIndex = j
    }
    if (i !== minIndex) {
      [nums[i], nums[minIndex]] = [nums[minIndex], nums[i]]
    }
    answer = nums
    return answer
  }

버블 정렬

function solution (nums) {
  let answer = []
  for (let i = 0; i < nums.length - 1; i += 1) {
    for (let j = 0; j < nums.length - i - 1; j += 1) {
      if (nums[j] > nums[j + 1]) {
        [nums[j], nums[j + 1]] = [nums[j + 1], nums[j]]
      }
    }
  }
  answer = nums
  return answer
}

삽입 정렬

function solution(nums) {
  let answer = []
  for (let i = 1; i < nums.length; i += 1) {
    let tmp = nums[i]
    let j
    for (j = i - 1; j >= 0; j -= 1) {
      if (nums[j] > tmp) nums[j + 1] = nums[j]
      else break;
    }
    nums[j + 1] = tmp
  }
  answer = nums
  return answer
}

박영웅 강사님 자바스크립트 시간에는 메소드나 자바스크립트의 기본적인 문법이 끝나고 API 관련된 수업이 이어졌습니다. DOM 파트에서 노드에 대한 정의를 말씀해 주셨는데 가끔 검색 결과나 콘솔창에서 NodeList를 보고 저게 뭘까? 그냥 객체인 걸까? 했었는데 노드란 화면에 출력할 수 있는 최소한의 단위라고 해 주셨습니다. HTML에 주석으로 표현하는 것도 노드가 될 수 있습니다. 노드라는 포괄적인 의미 안에 HTML의 요소(element)가 있는 것입니다.

스택, 큐, 힙에 관한 이야기도 있었는데 함수가 실행되는 순서는 다음과 같다.
main(), console.log(), showText(), setTimeout()
그러므로 setTimeout() 함수에 시간을 0으로 두어도 마지막에 실행된다.

김시현 멘토님 강의에서 그룹 스터디 관련하여 조언을 들을 수 있었습니다. 많은 조에서 알고리즘 테스트 관련하여서 공부를 많이 하는데 멘토님은 그 시간에 많은 할애를 하였고, 방향성을 잃은 적도 있었다면서 설명을 해 주시는데 앞으로 공부의 방향성을 어떻게 잡아야 할지 조금은 알 것 같은 느낌이 들었습니다. 다른 그룹들의 발표를 보면서 인상 깊었던 것들을 작성해 보겠습니다.

• 알고리즘은 토익 같은 것이다, 너무 많은 시간 할애하지 않기
• TIL 공유로 서로 공부 의지 올리기
• 한가지 언어에 강점 두기
• 팀원끼리 깃 활용해 보기
• 팀에서 맡고 있는 것들 기록하기
  • 왜 그런 프레임워크를 사용하였고, 왜 그런 문제점이 생겨서 어떻게 해결했는지, 내가 왜 그런 일을 맡게 되었는지와 같은 근거, 이유를 작성하기
  • 공유가 가능한 플랫폼에 작성하면 포트폴리오에 도움이 된다

3. 그룹 스터디 학습 내용

최근에 영화 API 과제가 있어서 이번 스터디는 조금 느슨하게 가지기로 했었습니다. 지난 월요일에 DEEP DIVE와 알고리즘 수업 관련하여서 진행하였고 DEEP DIVE는 17장 생성자 함수에 의한 객체 생성과 알고리즘은 해싱 관련한 코드 작성이었습니다. 알고리즘 코드는 크게 다른 것 없이 변수 이름이 다르거나, 과정을 조금 더 풀어서 쓰거나 하는 방법들이었는데 그래도 다른 사람들은 어떻게 쓰는지 보는 것이 꽤나 도움이 되었습니다. 저는 제가 헷갈려서 조금 풀어서 쓰는 편이었는데 간략하게 쓰는 다른 팀원을 보고 저 방법이 괜찮겠구나! 하는 아이디어를 얻었습니다.

4. 개인 학습 내용

꾸준히 프로그래머스 0단계를 진행하고 있고(최근 들어서 점점 어려운 문제들이 나오는 기분), 영화 API 과제를 제출 후에는 멋쟁이 사자처럼에서 구매했던 애플 스토어 강의를 듣고 있습니다. react를 본격적으로 사용하여 클론을 하는 건 처음이라 이것저것 헤매고 있긴 한데 react 내에 있는 것들을 import해서 함수를 사용하거나, clayful API를 사용하는 부분에서 꽤나 흥미를 느끼고 있습니다. 특히 clayful API가 스토어를 편리하게 해 주는 부분이 신기했던 것 같습니다.

애플 스토어 GitHub

그리고 꾸준히 기초부터 완성까지, 프론트엔드 책은 정리 중인데 분량이 길어서 그런지 바로 업로드를 할 수 없어서... 그치만 차곡차곡 작성 중입니다!

5. 주간 회고

영화 API 과제를 끝내고 나서 다시 개인적인 공부를 하려고 하니 할 것이 너무 많아 보이는 한 주였습니다. 그래도 차근차근 하나씩 끝내는 중이고, 알고리즘 공부도 꾸준히 해내고 있어서 뿌듯함을 많이 느끼는 요즘입니다!

6. 다음 주 목표

• 영화 API 과제 리뷰 작성
• 멋사 강의 듣기
• 기초부터 완성까지, 프론트엔드 읽기
• 전에 만들었던 JS 강의 안 보고 다시 구현하기

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