Camel, Snake, PasKal, Kebab

변수명을 지을 때 유형별로 구분하기 위해 특정한 양식에 따라 변수명을 짓고는 한다. 그 중 대표적 예시를 설명하자면, (My Visitor Count라는 변수명을 기준으로 설명함.) Camel case - 낙타의 쌍봉처럼 완전 첫 글자를 제외하고 각 단어의 첫 글자마다 대문자로 표현하는 방식. Ex) myVisitorCount Snake case - 뱀이 왔다갔다 움직이는 것처럼 각 단어 사이에 언더바(_)를 넣는 방식. 모두 소문자로 쓴다. 모두 대문자로 쓸 수도 있다. Ex) my_visitor_count Ex2) MY_VISITOR_COUNT Paskal case - camel case 와 유사하지만 첫 글자를 대문자로 쓴다. Ex) MyVisitorCount Kebab case - 케밥의 모양(고기나 야채 등을 꼬치에 끼운 것)과 같이 단어 사이사이 '-'를 넣는 방식이다. 모두 소문자를 이용한다. Ex) my-visitor-count p.s 개발자들은 왜 이리 귀엽나..?? https://http.cat/ 이것도 그렇고..

Lodash 알아보기

매번 힘들게 직접 함수를 만들어가며 코딩하다가.. 이번에 lodash라는 아주 유용한 JavaScript 라이브러리를 알게 되어 잘 사용하고 있다. Lang Method _.isNan : 값이 nan인지 판단. _.isNil : 값이 nan 혹은 undefined인지 판단. _.cloneDeep : 자식까지 복사하여 새로운 값에 매핑. Array Method _.findIndex : 조건을 만족하는 첫 번째 데이터의 인덱스를 리턴. 찾지 못했다면 -1을 리턴. _.fill : 입력받은 array에 value을 채워넣음. _.pull : array에서 특정 값을 제외한 배열을 리턴. _.uniq : array에서 중복값을 제거한 배열을 리턴. _.uniqBy : 특정한 기준에 따른 값들 중 고유값만 리턴. remove : 조건에 해당하는 값을 제거하고 리턴. _.flattern : 2차원 배열을 1차원으로 평탄화. Object Method ._get : 객체 경로의 값을 가져옴. undefined인 경우 default value가 리턴. _.assign : object를 할당함 Collection Method _.filter : 조건에 맞는 객체 리턴. _.sortBy : 조건에 따라 정렬. 출처 : 링크

TypeScript Record<K, T>

키-값 쌍에 대한 타입을 제네릭 형태로 정의할 수 있음. 링크

TypeScript Object.entries()

키, 밸류 쌍의 집합을 반환. 링크

배열 평탄화를 위한 함수 flat(), flatMap()

두 함수 모두 ECMAScript 2019 (ES10)에 새롭게 추가된 함수. flat(x) 함수는 중첩된 배열을 x 깊이만큼 평탄화시키는 함수이다. const fruits = ['apple', ['banana', 'orange', ['melon']]] 일 때, console.log(fruits.flat(1)); 의 경우 ['apple', 'banana', 'orange', ['melon']] 가 출력된다. console.log(fruits.flat(2)); 의 경우 ['apple', 'banana', 'orange', 'melon'] 가 출력된다. console.log(fruits.flat(Infinity)); 를 통해 모든 중첩 배열을 최대한 평탄화시킬 수도 있다. flatMap() 함수는 flat() 함수와 map() 함수를 합친 함수이다. 다만 flatMap()은 flat() 함수와는 달리 평탄화 가능한 깊이가 1로 고정된다는 특징이 있다. const children = [[1], [2], [3], [4]] 일 때 각 요소들에 2를 곱하고 1만큼 평탄화시키고싶다 한다면 console.log(children.flatMap((x) => ([x*2])); 를 시행할 경우 [2, 4, 6, 8] 이 출력된다. 출처 : 링크

RxJS - 2. of, from, fromEvent

https://iamsjy17.github.io/rxjs/2020/10/07/inside-rxjs-creation-fn-etc1.html RxJS - 1. Observable을 선행할 것

RxJS - 1. 옵저버블이란

https://jaeyoung-lee.tistory.com/8 RxJS는 자바스크립트를 위한 새로운 푸시 시스템인 옵저버블을 제시합니다. 옵저버블은 다수의 값들을 옵저버(소비자)들에게 "푸시"하는 데이터 제공자입니다. 푸시 : 푸시 시스템에서, 데이터 제공자가 데이터 소비자에게 데이터를 보낼 시기를 경정합니다. 소비자는 데이터가 어떠한 시점에 전달 될지 알 수 없습니다. - 프로미스, 옵저버블 풀 : 풀 시스템에서, 데이터 소비자가 데이터 제공자로부터 데이터를 받을 시점을 결정합니다. 데이터 제공자는 언제 데이터가 소비자에게 전달되어야 하는지 알지 못합니다. - 함수, 제네레이터

Fork해온 저장소에서 작업하는데, 원본 저장소에 변경이 있을 경우 이를 가져오려면..

Fork해온 저장소에서 작업하는데, 원본 저장소에 변경이 있을 경우 이를 가져오려면.. git remote -v (확인) git fetch {upstream} (원본 저장소에서 불러오기) git merge upstream/master

Shallow copy vs Deep copy

자바스크립트에서 기존에 존재하는 객체를 복사해서 새로운 무언가를 만들고 싶을 때가 있다. 하지만 그냥 새로운 변수를 선언해서 기존의 객체를 대입하면.. 새로운 변수를 변형했을 때 기존의 값까지 영향을 받아 상황에 따라 골치아파질 수 있다.. 이건 후술할 shallow copy가 된다. Shallow copy는 원본의 값을 '참조'하는 형태로 복사한다. 따라서 복사한 값의 형태가 바뀌면 그 원본의 값도 영향을 받는다. Deep copy는 원본의 값을 정말 그 값만 복사해오고, 원본과는 완전히 별개의 객체가 된다. 이를 수정하거나 해도 원본의 값은 영향을 전혀 받지 않는다. ex) //JavaScript 환경에서.. obj = {a: 1, b: 2}; new_obj = obj; new_obj.a = 3; console.log(obj.a); //3 JavaScript에서는 객체를 deep copy하기 위해 lodash의 ._clone()이나 ._cloneDeep()을 많이 이용한다. clone()은 객체를 deep copy하지만, 내부 객체까지는 deep copy하지 못한다. ex) obj = {a: 1, b: 2, c: {2, 4}}; clone_obj= ._clone(obj); clone_obj.c === obj.c; //true 때문에 내부 객체가 포함되어있다면 ._cloneDeep()을 쓴다. obj = {a: 1, b: 2, c: {2, 4}}; clone_obj= ._cloneDeep(obj); clone_obj.c === obj.c; //false 추가로 shallow copy는 deep copy에 비해 상대적으로 속도가 빠르다. Shallow copy와 Deep copy를 상황에 따라 적절히 섞어서 쓰도록 하자.

git stash

임시저장. git stash 하면 현재 상태를 저장함과 동시에 commit할 것이 없는 상태 중 가장 최신 상태로 이동함. git apply 를 통해 다시 stash한 것을 불러온다. git drop은 stash list 중 가장 최신의 것을 삭제한다(stash{0}이 가장 최신). git pop은 git apply + git drop