코드 스테이츠 7주차

24 Jan 2021

코드 스테이츠를 통해 배운 것을 정리하는 post

무엇이든 보고 듣기는 쉽지만 자기 것으로 만드는 것엔 노력이 필요하다.

학습할 내용

~~정렬알고리즘 정리(토이 대비)~~ 토이 대비가 되는지 모르겠다…

자바스크립트 인포 정리 ~~(화요일)1개~~ ~~(토요일)3개~~ ~~(일요일)3개~~

Figma 사용해보기 - 튜토리얼 (윈도우로)

HA 를 대비하기위한 전체적인 코스 복습 ~~this 복습~~ ~~프로토타입 복습~~ oop 복습, ~~상속 복습~~, 자료구조 복습

프로그래머스 그래프 문제 다 풀기 1번문제 2번문제 3번문제 => 너무 어렵다ㅜ

~~N-Queens 알고리즘 코드 분석~~

깊이 우선, 너비 우선 탐색 공부

월요일

서브클래스 댄스 파티

광란의 댄스 파티가 드디어 끝났다. 투자한 절대적인 시간을 계산해 보면,

금요일 저녁 - 정규시간인 5시부터 기획에 들어가 새벽 5시까지 했으니 12시간

토요일 저녁 - 2시에 부시시 일어나 하루종일 하다 5시에까지 했으니 15시간

일요일 저녁 - 2시부터 페어 분과 하다가 ( 중간에 9시 ~ 새벽 1시 피곤해서 잠들었따 ) 5시까지 해버렸다. 총 10시간

월요일 발표전 - 스프린트 베어 미니멈을 마치고 계속해서 완성도를 높이는데 집중했다. 대략 5시간 정도

금요일 12시간 + 토요일 15시간 + 일요일 10시간 + 월요일 5시간

=> 42시간…..( 밥먹는 시간 포함!! )

실제로 투자한 시간을 계산해보니 시간 대비 결과물이 좋은건가 싶기도하고 시원섭섭한 느낌이 든다. 별거 아닌 오류에 많은 시간을 뺏기기도 하고 번뜩이는 아이디어로 갑자기 구현되기도 하고 3일간의 아주 자그마한 프로젝트였지만 짧은 기간동안 느낀것들이 많다.

진짜 프로젝트같이 진행한 만큼 프로젝트 회고글도 하나 작성을 하고 거기에다 진행하면서 느꼈던 모든 것을 넣어야 겠다.

화요일

자료구조 정리

자료구조 정리 노션

스택, 큐 기본적인 자료구조에서 힙과 링크드 리스트까지 학습을 했다. 스택과 큐는 코드로 구현까지 완료를 했고

힙과 링크드 리스트, 해쉬도 코드상으로 작성을 해보고 어떻게 동작하는지 정확하게 파악해야겠다.

각각의 자료구조들이 가지는 시간복잡도도 왜 그런지, 이에 대해서도 조금 더 정확하게 알아야겠다.

자료구조를 공부할 때 유튜브 영상이 도움이 많이 되었다. 글로 보는 것보다 이미지와 영상이 짱이다!

스택/큐 를 이용한 알고리즘 문제 풀이

프로그래머스 스택/큐 알고리즘 문제 를 풀었다. 주식가격 문제는 JS 테스트를 지원하지 않아서 python 으로 풀어보려고했지만 문제 자체가 워낙 까다로워서 풀지 못했다 ㅠ

수요일

링크드 리스트

링크가 가리키는 next 만 잘 컨드롤하니 문제가 어렵지 않았다. 각각의 코드의 흐름도 머릿속에서 계산이 되었다.

해쉬 테이블

해쉬가 이렇게 힘들줄 몰랐다. 지금까지 코스를 진행하면서 가장 어려웠던 문제이다. 각각의 메서드에서 중요하지만 놓치기 쉬운 포인트들이 너무 많아서 아무리 신중하게 작성한다고 해도 몇개씩 빼먹어서 애를 먹었다. 첫 통과이후 브랜치를 하나 다시 만들어서 리팩토링도 할겸 다시 작성하는데 완성 하기까지 5시간 정도 걸렸던거 같다.

그래도 이번에 작성한 코드들이 마음에 든다. 함수단위로 쪼개어 역할을 나눴고 너무 많은 책임을 지지 않게 만들어 줬다. 제일 긴 함수의 길이는 15줄이였다. 이외에도 limitArray의 메서드를 추가해서 테스트환경을 만들어 줬다. 코드를 작성하기전에 노트에 메인 메서드의 기능과 필요한 것, 코드가 중복됬던 요소들을 메서드로 묶고 까먹기 쉬운 코드들을 따로 표시들 해두었다.

여러모로 리팩토링을 진행하면서 고생을 많이했지만 계속해나가면서 속도를 향상시켜야겠다.

목요일

그래프, 트리, BST

해쉬테이블이 너무 어려웠어서 그런지 이번 스프린트는 굉장히 쉬웠다. 동적인 변화를 일으키는 요소도 없었고 주어진 데이터를 추가, 삭제, 참조만 해주면 됬었다. (깊게 들어간다면 해야겠지만…)

프로그래머스 알고리즘 풀기

지금까지 7개정도 문제를 풀었는데 조금 더 열심히 풀 필요가 있을 것 같다. 자료구조를 배우기전에 몇가지를 풀어봤었는데, 지금 자료구조를 배운후에 알고리즘을 접하니 느낌이 색다르다. 데이터를 다루는데 조금 더 능숙해진 느낌?

금요일

시간복잡도 & 공간복잡도

공간복잡도는 skip list 를 사용하지 않는 이상 크게 신경쓰지 않아도 될것 같다. 알고리즘 문제에 보통 메모리 제한이 걸리는데 이걸 진짜 수학적으로 계산해서 대충 어느정도의 데이터가 사용이 가능한지 도출해주셨는데 진짜 신선한 충격으로 다가왔다.

보통의 메모리 제한은 128 ~ 512 MB 이다 JS 에서 원시형 데이터는 8바이트, 이를 적용하여 계산하면 정점의 갯수는 100~1000개로 계산이 된다 데이터가 천만개면 8천만 바이트 => 80MB 가 된다 데이터가 1만개 인 경우는 엣지(간선)이 매우 적은 경우이다.

시간복잡도에 대해서도 많이 배웠다.

시간 복잡도에서 가장 복잡한 연산만 계산하는 이유는 데이터가 기하급수적으로 늘어나는 경우에 그 차이가 미미하기 때문이다. N^3 시간복잡도도 들어오는 데이터의 양에 따라 사용 가능할 수 있다.

알고리즘

해쉬 문제를 다 풀어봤다. 뭔가 복잡한 개념이 아니라 JS 에서 사용하는 Object가 해쉬 개념이 녹아들어가 있는 부분이라서 객체를 이용해서 잘 풀었다.

모각코에서 있었던 일

이번에 진행한 가장어려웠던 문제, 해쉬 테이블을 작성한걸 화면공유를 해서 코드리뷰? 를 했다. 진짜 각자 스타일이 다 달랐고 다른사람이 짠 코드를 보면서 ‘이 분은 이렇게 코드를 작성하셨구나’, ‘이렇게 쓰면 코드를 조금 더 간결하게 쓸 수 있구나’ 등등 생각보다 여러가지 좋은 정보들을 알 수 있었다. 그리고 알려 드릴 수도 있었다. 내 인생에서 첫 코드 리뷰 시간이었는데 생각보다 많이 부끄러웠고 코드 품질에 대해서 더욱 생각하는 계기가 되었다.

주말

고차함수와 this

줌방에서 해쉬 스프린트에 대해서 얘기를 하다가 this 문제가 발생했다…! ~~(고놈의 this)~~ forEach 구문을 썼는데 화살표를 쓰면 정상적으로 작동하고 일반 함수를 쓰면 안된다는 이슈였다. 전에 setTimeout 을 다루다가 발견했던 이상한점과 유사해서 어느정도 에러 핸들링을 해드렸다.

뭔가 명확하게 정리된건 아니여서 토요일(오늘) 코드상으로 직접 콘솔을 찍어보며 정리를 했다.

Timout 객체 해부

이분도 최후의 조상님, 즉 시초시다. 각각의 시간을 다루는 함수들을 ( setTimeout, setInterval ) 다루는 여러가지 함수들이 담겨 있었다.

let test = setTimeout(function () {
  console.log(this.__proto__); // timeout 객체의__proto__
  console.log(this === test); // true
}, 1000);

위와같이 코드를 작성해서 함수 원형 객체까지 확인을 해봤다.

Timeout { 
     _idleTimeout: 1000, 
     _idlePrev: null, 
     _idleNext: null, 
     _idleStart: 1281711, 
     _onTimeout: [Function], 
     _timerArgs: undefined, 
     _repeat: null, 
     _destroyed: true, 
     [Symbol(refed)]: true, 
     [Symbol(kHasPrimitive)]: false, 
     [Symbol(asyncId)]: 12180, 
     [Symbol(triggerId)]: 20 
}

해부를 해서 나온 Timeout 객체! 아직 [Symbol…] 관련된 것들은 어떤 의미를 가지는지 모르겠지만 나중에 배울것 같다!! 그리고

Timeout { refresh: [λ],
  unref: [λ],
  ref: [λ],
  hasRef: [λ],
  close: [λ],
  [Symbol(nodejs.util.inspect.custom)]: [λ],
  [Symbol(Symbol.toPrimitive)]: [λ] 
}

위의 객체의 프로토타입의 모양은 위와같다. 한번더 프로토타입을 타고 올라가봤는데 undefined 인걸 보면 여기가 종착지인것 같다. 각각의 함수들이 어떤 동작을 하는지 모르지만 이러한 함수들을 인스턴스들과 공유를 하고 있다는걸 알게 되었다.

node.js 환경과 브라우저 환경은 엄연히 다르다.

같은 동작을 해서 뭔가 동일할 거라 생각했던 내 생각을 무색하게 런타임이 다르다는걸 위의 두가지 주제들을 다루면서 깊게 느꼈다.

여기 에가면 node 환경에서 어떻게 api들을 지원하는지 어떻게 동작되는지 찾아볼 수 있다!!

다익스트라 알고리즘

최단거리를 구하는 알고리즘으로 네비게이션과같은 곳에서 사용되는 알고리즘이다. 아직 이해하는데 어려움을 겪고 있다.

프로래머스 문제도 난이도가 3부터 시작한다… ㄸㄹㄹ…

정렬 알고리즘 수도 코드 작성

버블, 삽입, 선택, 병합, 퀵, 힙 정렬을 정리를 했다. 각각의 정렬 원리를 파악했고 각각 어떤 시간복잡도를 가지는지 정리 했다.

여기 노션으로 정리해 뒀다.

console 객체 해부하기

Object [console] {
  log: [Function: log],
  warn: [Function: warn],
  dir: [Function: dir],
  time: [Function: time],
  timeEnd: [Function: timeEnd],
  timeLog: [Function: timeLog],
  trace: [Function: trace],
  assert: [Function: assert],
  clear: [Function: clear],
  count: [Function: count],
  countReset: [Function: countReset],
  group: [Function: group],
  groupEnd: [Function: groupEnd],
  table: [Function: table],
  debug: [Function: debug],
  info: [Function: info],
  dirxml: [Function: dirxml],
  error: [Function: error],
  groupCollapsed: [Function: groupCollapsed],
  Console: [Function: Console],
  profile: [Function: profile],
  profileEnd: [Function: profileEnd],
  timeStamp: [Function: timeStamp],
  context: [Function: context]
}

이친구도 결국 객체였다…. 하긴 모든 것이 객체인 마당에 콘솔도 예외일순 없지….

console.log(console.__proto__.prototype); // {} 
console.log(console.__proto__.__proto__ === Object.prototype); // true

프로토 타입 개념을 배우니 이렇게 궁금한 객체의 원형과 조상을 찾을 수 있는 기술이 생겼다… !!

각 콘솔 메서드의 내용은 여기 에다가 정리 해뒀다. 콘솔이 어떻게 생겼는지 너무 궁금해서 직접 nodejs 깃허브 에 가서 이것저것 쳐다봤다. 우리가 배운 js 의 여러 기술들 ( 구조분해 할당, 조건 연산자로 초기값 세팅, 전개연산자 등등…) 이 직접 사용되는걸 보니 뭔가 느낌이 색달랐다!

시간관리 방법 추가

계획을 세우고 계획을 이행하는데 정확한 목표는 있지만 데드라인이 없다보니 뒤로 계속해서 미루는 경향이 있는 것 같다. 딱 정해진 시간이 없다보니 늘어지는 경우도 많이 생기는 것 같다.

이러한 문제에 대한 해결책으로 코드 스테이츠가 일정관리를 하듯이 구글 캘린더에 해야할 작업목록과 일정 시간을 설정해서 시간 사용을 조금 더 구체화를 했다.

+추가 : 구글 캘린더에 추가하니 30분 전에 알림도 뜬다!

자바스크립트 인포

지금까지 5-10 구조분해 할당까지 진행을 했다. 이에 대한 TIL 를 따로 안남겼는데 이후부턴 같이 남기도록 해야겠다. (이것도 오늘 배운 것들 중 하나니까!!)

맵과 셋 그리고 위크맵과 위크 셋

키 값을 객체로 받고 그 객체의 참조가 사라졌을 때, 해당 데이터를 자동으로 삭제해주는 효자 녀석이다

콘솔로그 꾸미기

브라우저 상에서 콘솔로그에 여러가지 장난을 칠 수 있다. 스타일을 추가할 수 도있고. 크기도 조절가능하다

Class 에서 static 변수 사용하기

해당 클래스의 인스턴스 전부와 공유하는 데이터를 static으로 설정할 수 있었다. 찾아보니 메서드도 비슷한 방법으로 활용가능해 보인다.

상속 복습

함수형, 프로토타입형, 클래스형 상속을 코드로 전부 다시한번 복습했다. 위에적은 static을 배울 수 있었고 처음부터 다시 작성하니 이제는 명확하게 머리에 남았다.

구조 분해 할당

파라미터 관리는 구조 분해 할당이 최고인거 같다. 유연하게 받아올 수 있고 순서에 신경쓰지 않아도 되는 강력한 기능이다. nodejs 깃허브에서 소스코드에서도 많이 사용되는걸 볼 수 있었다.

줌방 단체 공부?

줌방에서 1시간짜리 노래 동영상을 틀고 각자 열심히 공부, 1시간 뒤에 각자 공부한걸 나누고 질문을 하며 진행을 했는데 공부 밀도?라고 해야하나 굉장히 집중도 잘되고 발표를 하면서 정리도되고 발표하기 위한 계획도 세우고 여러가지 이점이 많아서 계속해서 동기분들과 진행해볼 예정이다.

오성국 블로그 이것저것 끄적끄적