[패스트 캠퍼스] MegaByte Shcool 프론트 엔드 3기 회고 - 8주차

당근 먹는 쿼카·2022년 11월 3일

MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

회고록

목록 보기

9/38

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

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

1. 이번 주 목표

TypeScript 강의 다 듣기
영화 API 과제 시작하기
기초부터 완성까지, 프론트엔드 읽기

2. 커리큘럼 학습 내용

지난 금요일 (28일)에 있었던 김태원 강사님의 알고리즘~~이라고 쓰고 코테 수업이라고 읽는다~~ 수업 때 map 메소드에 대한 문제 풀이들이 있었다. map이라는 메소드에 대해 정확한 이해도가 없기도 했고, 예제를 만들거나 강의를 들을 때 접한 기억이 없어서 수업이 더 어렵게 느껴졌던 것 같다. 그 후에 박영웅 강사님 시간을 통해서 map 에 대한 이론적인 설명이 있었는데 그걸 들으니까 왜 map을 그렇게 사용했는지 조금은 이해가 되는 것 같기도 하고....

.map() 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 새로운 배열로 반환

메소드	예제	결과
`const map = new Map();` 객체를 생성	`const map = new Map();`	`map ={}`
size Map 객체의 요소 개수를 확인	`const map = new Map(["age", 25]);` `p1 = set.size`	`p1 = 1`
set(key, value) Map 객체에 [key, value] 추가	`const map = new Map();` `map.set('age', 25);`	`map = {'age' => 25}`
get(key) map에서 key의 value값을 반환	`const map = new Map();` `map.set('age', 25);` `map.set('eng', 90);` `let p1 = map.get('age');`	`p1 = 25`
has(key) map 객체에 key 존재하는지 확인	`const map = new Map();` `map.set('age', 25);` `let p1 = map.has('age');`	`p1 = true`
delet(key) map 객체에서 key를 삭제	`const map = new Map();` `map.set('age', 25);` `map.set('eng', 90);` `map.delete('age')`	`map = {'eng' => 90 }`
clear() map의 모든 key 삭제	`const map = new Map();` `map.set('age', 25);` `map.set('eng', 90);` `map.clear();`	`map = {}`

map 메소드를 사용한 문제들은 대부분 해당 작업을 반복했습니다.

s = "BACBACCACCBDEDE"

function solution(s) {
  let answer;
  let sH = new Map();
  for (let x of s) {
    sH.set(x, (sH.get(x) || 0) + 1)
  }

해당 코드는 새로운 배열을 만들 때, 기존의 값을 하나씩 가지고 오게 되는데 기존 문자열(혹은 배열)의 값을 key, 만들어진 배열에 key 값이 있다면 기존 value에서 +1을 하고, 없다면 0 + 1 즉, 1이 되게 해서 문자열에 같은 문자가 몇 개 있는지 인덱싱을 해 주게 됩니다.

위에 작성한 코드에 따르면 콘솔에 sH를 찍었을 때 나오는 값은 아래와 같습니다.

해당 문제는 문자열이 주어지고, 제일 많은 문자를 찾아내는 문제였습니다. 답으로 작성한 코드를 하나씩 보겠습니다.

function solution(s) {
  let answer;
  let sH = new Map(); // 새로운 배열로 만들어 줍니다.
  for (let x of s) {
    sH.set(x, (sH.get(x) || 0) + 1) // 위에서 보았듯 같은 문자가 몇 개 있는지 찾아 줍니다.
  }
  let max = Number.MIN_SAFE_INTEGER; // default max 값을 제일 적은 정수로 두어서 첫 번째로 오는 value 값이 무조건 참이게 합니다.
  for (let key of sH.keys()) {
    if (sH.get(key) > max) { // max는 음수이기 때문에 첫 번째로 오는 sH.get(key)의 값은 3이므로 무조건 참이게 됩니다.
      max = sH.get(key); // 계속해서 value 값을 비교하면서 제일 큰 값을 찾아냅니다.
      answer = key;
    }
  }
  return answer;
}

console.log(solution("BACBACCACCBDEDE")) // C

월요일과 화요일은 평소와 똑같이 박영웅 강사님의 JS 수업이었습니다. 이번 시간에는 계속해서 내장 객체들에 대해서 배웠는데 JS 코딩을 하면서 많이 봐 왔던 것들이라 그런지 이해가 가지 않는다거나 그런 건 없었던 것 같습니다. 코딩 테스트 수업을 시작했기 때문에 이런 내장 객체들에 대해서 잘 외우고 있어야겠다는 생각이 들긴 했습니다. 하하....

또 다시 수요일에는 김태원 강사님의 코딩 테스트 시간이 왔고, 화요일 낮에 미리 예습을 하고 갔더니 예습을 할 때 답을 보더라도 이해 안 되던 코드들이 이해가 갔습니다. 그 중 어려웠던 문제를 작성해 보겠습니다.

서로 다른 빈도수 찾기 반복되는 문자열에서 반복되는 문자를 삭제하여 서로 다른 빈도수를 가지게 하는 문제였습니다. 예를 들어 abbcabc 문자열이 있다면 a는 2개, b는 3개, c는 2개를 가지고 있습니다. a 하나를 삭제하여서 a는 1개, b는 3개, c는 2개로 만들어 주면 서로 다른 빈도수를 가지게 됩니다. 문제에 대한 해답입니다.

function solution(s) {
  let answer = 0;
  let map = new Map();
  let set = new Set();
  for (let x of s) {
    map.set(x, (map.get(x) || 0) + 1)
  }
  for (let [k, v] of map) {
    while (set.has(v)) {
      answer += 1
      v -= 1
    }
    if (v === 0) continue;
    set.add(v)
  }
  return answer
}

여러 문제를 반복하면서 map을 사용하여 새로운 배열을 만드는 것은 익숙해졌는데 while문을 사용하는 것이 조금은 새로웠습니다. 그리고 문자가 0개가 되었을 때는 카운트 하지 않아서 존재하는 문자만 빈도수가 다르면 된다는 상황을 고려하는 것이 어려웠습니다. 혼자 문제를 풀 때에도 map으로 빈도수가 적힌 새로운 배열을 만드는 것까진 할 수 있었지만 빈도수를 빼는 부분을 떠올리지 못 해서 풀지 못 했었습니다.

3. 그룹 스터디 학습 내용

저희 그룹은 자바스크립트를 활용한 클론 코딩을 목표로 짜여진 그룹입니다.
저희는 Deep Dive 스터디를 계속 진행하고 있습니다. 팀원들과 책을 읽고 예제를 만들거나 책 내용을 정리하여 공유하는데 그 중에서 팀원이 만들었던 좋은 예제나 제가 꼭 기억하고 싶은 부분을 적어 보겠습니다.
11장 원시 값과 객체의 비교

문자열은 유사 배열 객체이기 때문에 length 프로퍼티를 쓸 수 있고, index 값을 가질 수 있다.

12장 함수

개발자 도구에서 변수 선언문, 조건문 등이 undefined 가 뜨는 이유는 표현식이 아닌 문이기 때문이다.

일급 객체(함수): 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체

변수에 함수를 할당할 수 있다.
함수를 인자로 전달할 수 있다.
함수를 반환 값으로 사용할 수 있다.

function changeVal(obj, boolean) {
	obj.name = 'Jo',
	boolean = false;
}

let person = { name: 'Kim' }
let truthy = true

changeVal(person, truthy)

console.log(person) // {name: 'Jo'}
console.log(truthy) // true

원시 값은 값 자체가 복사되고 객체 값은 참조 값이 복사가 된다. 그래서 원시 값은 원본이 훼손되지 않았고, 객체는 원본이 훼손되어서 바뀐 것을 볼 수 있다.

즉시 실행 함수는 단 한 번만 호출되며 다시 호출할 수 없다.
13장 스코프

var day = 2
var age = 26

function nums() {
  day = 5
  age = 36

  function day1() {
    console.log(day, age)
  }
  
  day1()

  return {
    day : 9,
    age : 11,
    dayNAge: function () {
      return `${this.day} ${this.age}`
    }
  }
}


console.log(day, age)
const num = nums()
console.log(num.dayNAge());

// 콘솔 창에 2, 26 / 5, 36 / 9, 11 순서로 뜸

5, 36은 왜 두 번째로 들까 계속 고민을 했었는데 num 변수 부분에서 변수에 할당하면서 함수를 실행시키고 있었다....

4. 개인 학습 내용

그 전에 김민태 강사님 강의를 보다가 TS에 접어들었을 때 간단히 타입만 지정해 주는 줄 알았던 타입스크립트가 너무 새롭게 느껴져서 결국 패캠에서 제공해 준 권장 강의에 있는 TS 강의를 듣기 시작해서 다 끝내었습니다. 공부한 흔적은 해당 레포에서 확인할 수 있습니다. 타입스크립트에 대해서 알아갈수록 JS에 대한 명확한 이해가 필요하다는 걸 알게 되었고, 타입을 지정하는 방식도 굉장히 다양한다는 것을 느낄 수 있었습니다. 또, 타입을 명시해 주고, 명확한 타입을 작성함으로 코드를 작성할 때 조금 더 안전한 코드를 작성할 수 있겠다는 기대감이 생겼습니다.

기초부터 완성까지, 프론트엔드 책도 읽었습니다. 해당 부분은 조금씩 정리하여 새로운 게시물로 써 볼까 합니다!

5. 주간 회고

🩹
코딩 테스트 수업이 시작되기 직전부터 최근까지 계속해서 어떤 공부를 어떻게 해야 될지에 대한 생각이 너무 막막했던 것 같은데 이번 주가 최고점을 찍은 주간이 아니었나... (그랬으면 하는 바람, 앞으로는 더 무력감을 느끼지 않기를 바라는 마음) 그래도 미리 예습을 하고 가면 이해가 되는 부분이 있기도 하고, 복습을 할 때나 혼자 문제를 풀어 볼 때 반 정도는 코드를 쓸 수 있어서 조금이라도 발전했다고 생각합니다. 영화 API 과제가 아직 많이 막막하긴 한데 강사님께 도움을 요청... 한 게 맞나 싶긴 한데, 아무튼 도움도 요청했고, 나아갈 의지가 있다면 어떤 방식으로든 나아갈 수 있다고 생각합니다. 그리고 집단 지성을 믿기 때문에 팀원들과 머리를 맞대고 더 나아가면 좋겠습니다. 이제 학원 시작한 지 8주 되었는데 포기하면 안 되니까. 아직 갈 길이 머니까. 강사님이 프로그래밍 배우는 거는 높은 산을 깎으면서 가는 거고, 다 깎고 나면 새로운 프레임워크나 언어를 만나도 이미 낮은 산에서 시작하는 거라 어렵지 않을 거라는 긍정적인 말씀도 해 주셨으니까... 난 이겨낼 수 있다... 아좌좍.