코드 스테이츠 4주차

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

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

월요일

1. 트위틀러 함수 작성하기

저번에 목업한 걸 토대로 JS 작업을 했다.

css 초안이 마음에 안들어서 다 갈아엎고 처음부터 다시짜서 나름 건강한? html 과 css 가 나왔다 이름짓는거 너무 어렵ㅠ

코드를 작성할 때 전에 작성했던 유효성 코드를 작성하고 난 뒤 에서 적은 다짐을 그세 까먹고 중복된 코드와 코드 구조에 대한 생각을 하지 않는체 기능 구현을 목표로 작성을 했다가 리펙토링이 필요한 코드가 나와버렸다.

물론 완벽한 코드를 짜서 리펙토링을 없앨순 없지만 그래도 뭔가 마음에 들지 않는 코드가 나와서 코드를 작성하기전에 신중하게 생각하는 습관을 가져야 겠다.

1. 클로저 함수와 자유변수 그리고 메모리 관리에 대해서

Help desk 에 질문을 올렸다. 답이 달리면 추가하기

• 작업하기 => 화요일에 작업완료

1. VScode 단축키 + 추가

Commas + d => 곳곳에 사용된 반복된

Option + 클릭 => 멀티 커서 생성

Option + shift 위아래 => 해당 커서의 줄 위아래로 복사 붙여넣기

Command + p => 파일이름으로 빠른 열기

화요일

1. underbar 문제 풀이

페어분이 문제해결능력이 뛰어나셔서 편하게 문제에 대한 의견을 주고 받을 수 있었다.

직접 만들었던 함수들을 사용하여 다양한 기능을 하는 새로운 함수들을 만들어 볼 수 있는 시간이여서 흥미로운 작업이었다.

고차함수의 개념이 베이스가 되어있어서 머릿속이 꽤나 복잡했지만 집중해서 풀 수 있는 범주였다.

까다로운 내용인 만큼 복습을 여러번 해야겠다.

1. GC

클로져가 가지는 외부함수의 변수에 대해 메모리 관련 이슈가 있을 것같아서 질문을 올렸다 해당이슈

더불어서 이왕 찾아본 김에 GC 에 대해서도 조금 더 찾아보고 공부를 했다 노션 정리

1. 트위틀러 코드 리팩토링

리팩토링 내용 중복되는 코드를 함수로 짜서 10줄 넘게 줄였다. 함수 이름도 해당 함수의 기능과 연관성을 높이기 위해 변경했다.

이때 command + d 단축키가 아주 유용하게 사용됬다. 어드밴스 과제가 남아있지만 그건 주말에 도전해볼 생각이다.

수요일

1. underbar advanced 까지 완료

알고리즘엔 나름 자신이 있던 터라 문제를 푸는동안 재밌게 코딩을 했다. 몇가지 난관을 겪었던 문제와 기억에 남는 문제들이 있다.

• sortBy

배열 메서드 sort를 사용해서 문제를 풀었다. Sort 함수의 매커니즘에 적응을 못해서 꽤나 고생을 했다.

• shuffle

구현하는 건 아니였지만 동작을 이해할 때 약간 헷갈렸었다. Math.floor(Math.random() * arr.length)부분이 이해가 안됬었는데 머신러닝 강의를 들을 때 비슷한 동작을 배웠던 기억이 나서 이해했다.

그리고 하나 신기한것 배웠는데 각각의 데이터의 위치를 바꿀때

let arr = [1,2];
let temp = arr[0];
arr[0] = arr[1];
arr[1] = temp;

// 위와 같은 형식으로 바꿔줬었는데

let arr2 = [1,2];
[arr2[0], arr2[1]] = [arr2[1], arr2[0]];

// 이렇게도 된다!! es6 부터 지원하는 기능이라고 한다

• memoize

자유 변수를 이용한 결과값 저장소? 느낌이다. 한번이라도 계산된 input 이라면 side effect 가 없다는 가정하에 결과는 무조건 같기 때문에 로직을 도는자원을 아주아주 아낄 수 있다. Key 로 value 를 찾는 건 매우매우 간단한 동작이기 때문에

누가 생각했는지는 모르겠지만 정말 똑똑하신거 같다.

알고리즘 문제를 풀 때 가끔씩 로직을 도는 사이클을 극한으로 주는 문제들이 있는데 이 기술을 쓰면 걱정을 조금 덜 할 수 있겠다.

1. 블로그 댓글 기능 추가

ㅠㅠ 드디어 드디어 원하고 원하던 기능을 추가했다. utterances 라는 아주 좋은 프로젝트가 있어서 사용했다

동작 원리는 다음과 같다.

각각의 포스터에 issue 를 달 수 있다. 댓글과 유사한 기능을 하기 때문에 이를 보여주면 된다.

포스터에 댓글을 달면 블로그의 repo 에 포스터 url 을 추적해서 issue 를 생성한다. 끝! 간단하쥬?

깃 허브의 이슈를 사용하기 때문에 깃허브 계정이 있어야 한다.

딱히 문제가 되지 않는것이 개발자 블로그에 보는 사람도 대다수 개발자이고

개발자는 대다수 깃허브 계정을 가지고 있기 때문이다. (나는 오히려 이런 부분이 더 마음에 들었다)

좋은 프로젝트 덕분에 큰 힘 들이지 않고 엄청난? 기능을 구현해서 매우 기쁘다

영광스런 첫 댓글 테스트과 응원해준 울 누님

+++ 추가추가

해당 프로젝트에 내 블로그 주소도 추가했다 > ㅡ <

1. git push 잘못한거 되돌리기

add 내용과 커밋 내용을 틀리게 적었는데 그대로 푸쉬를 해버려서 origin master 에 있는 커밋 내역을 취소해야 했다.

• git reset 으로 커밋 취소하기

변경 내용을 살리는 방법 (-soft, -mixed) 버리는 방법 (-hard)

• 되돌려진 상태에서 다시 commit

• 원격 저장소에 강제로 push

개인 프로젝트야 충돌이 일어날 일이 없겠지만 다수의 사람들과 작업하는 프로젝트의 경우에는 매우 위험한 동작일 수 도 있다.

항상 바로 master 에 푸시하지 않고 커밋을 하고 푸쉬를 하는 습관을 가져야 겠다 ㅠ

1. TIL 작성 방법 수정

보통의 의미로서 Today I Learned => 오늘 내가 배운 것을 적는 글

배운 것만 정리를 하다보니 다음날 ‘배워야 할 것’에 대한 내용이 없다.

TIL 은 학습이 끝난 시점에 작성하는 경우가 많으니 다음날 배워야 할 것을 간단하게 작성하는 방법이 좋아보인다.

• 내일 학습할 내용(테스트용)

작업내용을 작성하고 (3개 정도만?)

작업을 완료했다면 표시를 하면 되겠다

마무리 못한 작업은 주말에 모아서 할 수 있도록 노력해야겠다.

• 내일 학습할 내용(찐)

비동기 lesson 에 나온 내용들 찾아보기

트위틀러 로컬 저장소 기능 추가하기

언더바 복습

목요일

생각지도 못한 큰 피로감에 Deep Sleep

금요일

Happy New Year!!!

주말

비동기 lesson 추가 내용 공부

JS 의 event loop 에 대해서 공부를 했다. 한 줄로 요약하자면

코드를 실행하면 콜스택에 쌓고 외부 API는 처리하라고 보내고 작업을 이어 나간다. API가 처리한 데이터를 가져오면 콜백큐에 담고 콜스택이 비면 콜백큐에 있는 것들을 처리한다.

내부적으로 들어가면 더 복잡하게 동작하겠지만, 아주아주 넓게 보면 위와 같이 동작한다.

underbar 복습

_.zip 문제를 maxLength 없이 구현하기 위해 이리저리 머리를 굴려봤다.

1. 입력받은 배열의 갯수만큼 [undefined] 을 초기화하고 각각의 인덱스에 값을 넣는 방법
2. 재귀함수를 이용해 첫번째 엘리먼트를 가져가고 모두 다 빈 배열이 될 경우 탈출구를 만들어 끝내는 방법

1번 방법은 거의 구현을 다했고, 2번 방법은 인자를 가져오는 방식에서 문제가 생겨서 해결하지 못했다.

var let const 정리

var 는 사용하지 말자!

let 과 const 의 차이는 값의 변동 유무가 아니라

주소값의 변동 유무이다!

트위틀러 로컬저장소기능

다음주에! 하기!

재귀적으로 생각하기 - 더 생각해볼 주제

재귀 함수와 메모리 사용량 간의 관계(javascript recursion memory leak)

꼬리 재귀 (tail recursion in js)

#### TIL 작성방식 변동

각각의 요일은 h2로 표기하고 공부한 내용은 h4를 이용해서 작성을 한다.

ol 태그로 사용하기에 무리가 있고, 후에 목차 기능을 추가한다면

h4 로 작성해놓는게 핸들링 하기 편할듯하다.