[ TWIL 5주차 ]

코드스테이츠 21일차 ( 06월 08일 )

- 이머시브 인트로

​ 코드스테이츠에서 이머시브를 본격적으로 진행하기 앞서 프리처럼 안내사항을 전달했다. 프리에서 하차하신 분들도 계시고 다른 기수에서 넘어오신 분들도 계셨다. 이머시브 시작 전날 어땠냐고 질문했다. 코치분께서는 너무 긴장된 나머지 토를 했다고 한다.

​ 아.. 그럼 나는? 프리와 달리 나도 긴장이 되었다. 딱 봐도 프리보다 업그레이드 된 과제들, 그리고 3번의 시험. 특히 이 시험을 잘 치르지 못하면 다음으로 넘어가지 못한다는 것도 꽤나 두렵게 만든다. 아무리 프로젝트를 몇 개 만져본 적이 있다더라도 막막하긴 마찬가지구나. 그래도 이전에 이해 못한 것들이 이해가 되기 시작되었듯 장벽을 만나도 일단은 되돌아가고 다시 부딪혀보는 행동을 반복하여 결국엔 넘어버린다고 믿을 거다. 아니 그렇게 된다. 확신한다. 건강도 챙기고 공부도 열심히 해야지. 그리고 중요한건 이론이 아니라 실전이다! 이론에 빠져드는 유혹을 이겨내고 계속 써먹는 연습을 하여라~~

- Welcome to vscode

​ 이제 node 모듈을 적극적으로 활용하기 위한 첫걸음을 내딛는다. 이전엔 강의에서 시키는대로 터미널에서 이것저것 깔았지 모듈이 뭐고 node가 뭐고 등등 개념이해가 없었다. 일단 사용해보고 나중에 개념공부를 하니 이해가 잘 되었다.

​ node.js를 javascript가 brower에서 밖으로 나오게 해준 구세주(?)라고 알고 있었다. node.js가 없기 전 서버를 만들 때 다른 언어를 썼는데 node.js 덕분에 javascript 하나로 클라이언트, 서버 둘 다 사용가능하다는 말에 매료되었다(왜냐하면 나는 풀스택 개발자가 되고 싶으니까!!).

​ nvm은 node 설치와 node 버전 관리인데 버전 관리가 왜 필요하나 싶었는데, 버전에 따라 모듈의 호환성이 달라진다고 한다.

​ 그리고 package.json에 대해서 잘 알게 되었다. package.json이 프로그램 실행에 필요한 모듈들, 개발환경에 필요한 모듈들, 프로그램 실행 명령어들을 설명하는 일종의 안내서였다. package.json에 직접 dependencies를 적으면 자동 설치되는 줄 알았던 나란 사람 ㅋㅋㅋ 거기다 모듈 다운 받을 때도 dev로 다운 받을지 전혀 고민도 안하고 막 다운 받았다. 이제부터는 프로그램 실행에 직접적으로 영향을 주지 않는 lint, test와 같은 것들은 무조건 dev로 다운 받고 그 외 프로그램 실행에 필요한 건 dependencies를 받아야지. 추가로 package.json을 repository에 같이 저장해두면 npm install 명령어로 package.json에 있는 안내서에 따라 자동으로 설치해준다! 일일이 따라 설치 안해도 되니 정말 편하다.

- git workflow

​ 각종 팀프로그래밍, 프로젝트를 위해 첫날은 git workflow를 익히는 시간을 가졌다. 이머시브 전 solo 기간에 git 명령어들을 살펴둔 게 도움이 되었다. merge가 제일 두렵고 어려워했는데 의외로 쉽게 해결돼서 놀랐다. 그저 내 걸로 통합할 건지, 상대방 걸로 통합할 건지, 혹은 둘 다 그대로 둔 상태로 통합할 건지 정하고 commit만 하면 되는 거였다. branch 를 다루는 것과 git commit을 잘 쓰는 법, git 커밋 취소 , 스테이징 취소 등 명령어들이 아직까진 익숙치 않다. 계속하다보면 익숙해지겠지?

코드스테이츠 22, 23일차 ( 06월 09일, 6월 10일 )

- pass me 리뷰

​ 이머시브를 밟기 위해 시험을 쳤던 pass-me를 다시 볼 줄이야? 하루종일 붙잡아서 풀었지... 한 번 풀어봤다고 진도는 술술 나갔다. 그건 그렇고 이머시브 시작한지 얼마되었다고 온 몸에 힘이 없다. 컨디션은 최저... 머리가 깨질 듯이 아프다.

​ eslint를 확장프로그램을 써왔는데 직접 설치해서 사용하는 게 낯설었다. 그동안 eslint는 작동이 안 되던 건가??? lint 설정 오류 때문에 한참을 해맸다. node_modules를 포함하지 않고 특정 폴더로 lint하니 괜찮던데, 일일이 하기엔 불편하고. 코치님께서 방법을 알려주셨으나 작동은 잘 되지만 여전히 불필요한 linting을 하는 폴더가 존재해서 골치 아프다ㅜㅜ 윈도우 쓰시는 페어분은 아무 문제 없는데 내 노트북은 무엇때문일고?  * 이후 코치님께서 node_module에서 테스팅 실패하는 건 신경쓰지 말라고 하셨다!

아아아악!!! git은 이제 조금 알게 되었다 싶더니 ㅜㅜ왜 자꾸 pull 할 때마다 vim이 켜지냐...esc를 눌러도 빠져나오질 못해??? 나중에 office hour 시간에 누가 git 편집창을 code로 변경하면 된다는 말을 듣고 git config --global core.editor code 로 해결했다!

html이 없어서 테스팅을 못하네 하고 앉아 있었다..나중에 알고보니 터미널에서 체크하는 기능이 있더라는....하하;; 초짜 실수를 하고있노??

그와중에 커링을 배우고 안 써먹은게 넘나 아쉽다. sumDigits에 써먹을만 한데 일단 다른 브런치 만들어서 시도해봐야징  * 아쉽게도 건강이 안 좋아 못했다고 한다ㅜㅜ 

- ofiice hour

addEventListener에서 callback의 this가 event(정확히 말하자면 currentTarget)을 가리킬 줄은 몰랐다. global이라 생각했는 데 setTimeout, setInterval에서의 this와 착각했다.

나중에 콘솔로 확인하니 arrow function일 때는 global window 객체이고
function이면 currentTarget이다!

func: [object HTMLButtonElement]
arrow func: [object Window]

class 안에서 arrow function 으로 메소드를 구현하면 lexical this로 만들 수 있다
(setTimeout , addEventListener 안에서도 여전히 해당 클래스 인스턴스를 가리킴)
일반 function에서 this를 자유자재로 바꾸고 싶다면 binding 후 2번째 인자로 넘겨주면 된다.

조금 고집스럽게 class의 arrow function을 쓸거라 우겼다. 하지만 현업에서는 this 바인딩을 많이 쓴다. class만 익혀뒀다가 현업에서 this를 해석하지 못하는 불상사가 생길 거다. 또, functional programming이 뜨고 있는 추세다. class만 알고 있었던 쪼랭이가 생성자 함수와 prototype을 보고 기겁했지만 너무 한 쪽에만 치우치지 말아야지. 자바스크립트의 특별한 this가 성가실 때도 있지만 장점도 있으니!! 이걸 도대체 어떤 방법으로 써먹을지는 계속 고민하고 시도해야겠다.

- glob pattern

​ eslint 문제 해결하려고 구글링 하다 알게 된 용어. 폴더 경로를 두루뭉실하게 (가령, src 폴더 내의 모든 javascript 파일 ) 지정할 때 src/**/*.js 라고 하자는 하나의 규칙이다. 별표가 무엇을 의미하는 지는 알고 있었는데 찾아보니 더 많은 기호가 있었다. package.json에서 script 작성할 때 유용할 것 같다!

- 페어 리뷰

​ 중간에 다소 강압적인 말투가 있었나보다. 무더운 여름이라 그런지 혹은 컨디션 때문인지 자연스레 목소리가 다운되고 신경이 날카로워진 탓인가? 내 방식이 맞다고 고집불통이었던 과거의 내가 스멀스멀 다시금 올라온다. 막상 내가 보기 싫은 나의 모습을 지적해주니 우울해지지만 페어분이 나와 같이 페어프로그래밍을 하는 동안 느꼈을 불편함을 생각하면 미안해진다. 다음 페어부터는 다시 상냥하게! 좀 더 포용적으로 진행해야지.

코드스테이츠 24, 25일차 ( 06월 11일, 06월 12일 )

- 자료구조 stack, queue, linked list, hash table

​ stack은 나중에 들어온 값이 먼저 나오고 (LIFO), queue는 먼저 들어온 값이 먼저 나온다(FIFO).... 국비학원 다닐 때 열심히도 외웠다. 하지만 정작 자료구조를 코드를 작성할 때 고려한 적이 없다. 이런 코드를 짜는 까닭은 이 자료구조가 데이터 보관과 사용에 적합하기 때문이야! 라는 생각 자체를 하지 않았다. event queue, call stack, Array의 각종 메소드 등 실제로 javascript상에서 구현된 자료구조와 연관지어 공부하니 이전보단 와닿는다.

​ c언어로 구현할 땐 메모리를 먼저 할당하고 값을 저장하기 때문에 메모리공간을 효율적으로 사용해야한다는 생각이 자동으로 든다. 반면 javascript는 무한히(실제로는 자원이 한정적이기 때문에 무한하진 않지만 그만큼 마구 넣을 수 있다는 의미로) 배열공간이 늘어난다. 그래서 javascript를 사용하는 사람은 linked list가 c언어를 쓰면서 느꼈던 귀차니즘(배열이 꽉차면 새로 크기를 할당하고 값들을 옮기는 과정)을 없애고 자유자재로 추가, 삭제가 일어나는 게 가히 혁신적이라 불리는지 잘 와닿지 않을 수도 있다. 다른 언어를 배운 경험이 사고를 확장시키는 것 같다. class가 더 친숙했던 내가 javascript의 prototype을 c언어계열 혹은 java의 class와 비교하고 비슷하게 구현하는 방법을 찾아볼 수 있는 것도 그 덕분이다. linked list까지는 국비에서 다뤘기 때문에 크게 무리는 없었으나 hash table은 처음 구현해보는 거라 막혔다. 주말동안 머릴르 싸매야겠다ㅋㅋ;;