TOP 에는 여러 종류가 있습니다. 커피? 롤? JAVASCRIPT 에서 TOP을 구하는 방법은 여러가지가 있습니다. offsetTop, getClientRects().top 매번 프론트엔드 UI, 애니메이션을 개발 할 때는 Element의 좌표가 중요한데 항상 헷갈리는 부분입니다. 이번 기회에 확실하게 각 차이점이 무엇인지 알아보고 어떤 경우에 사용하는지 확인해보겠습니다. 위 그림처럼 div를 배치 했습니다. https://stackblitz.com/edit/js-xtkggx?file=index.js const inner = document.getElementById('inner'); console.log('inner.top', inner.offsetTop); console.log('inner.top'..
merge vs git rebase merge master 와 feature/a 를 머지 할 경우 git은 제 3의 별도의 merge 커밋을 만들고 만들어서 두 브랜치를 머지 합니다. rebase 위 에서 2라는 커밋은 master 와 feature/a 의 merge base 입니다. rebase 라는 건 말그래도 base를 다시 만든다는 뜻입니다. HEAD 가 feature/a 이 인 상태에서 git rebase master 를 하면 현재 마스터의 최종 커밋부터 feature/a 브랜치가 생성 됐다고 변경 합니다. 1 ⇒ 2 ⇒ 3 ⇒ a 1 위 의 형태로 히스토리가 정리 됩니다. 반대로 HEAD 가 master인 상태에서 git rebase feature/a 를 하면 현재 머지베이스를 feaure/a..
shell code 등록 하기 vscode 명령어 팔레트(단축키 cmd+p) 에서 code 검색 Shell Command : Install "code" command in PATH 를 실행해주면 터미널에서 code 를 사용할수 있게 된다. 위 처럼 code 명령어를 사용하면 해당 경로에서 vscode 를 실행 시킬수 있다. 사용 예시 $ git config --global core.editor "code" $ git config --global -e 전역 git 설정 vscode 에디터로 실행할수 있다.
or 연산자 ( || ) const detaultValue = param || "value"param 변수에 falsy 값 ("" , null, undefined) 등 값이 들어올 경우 기본값을 주기 위해 사용한다. 널 병합 연산자 ( ?? ) const foo = null ?? 'default string'; console.log(foo); // expected output: "default string" const baz = 0 ?? 42; console.log(baz); // expected output: 0바로 위의 or 연산자의 경우 0,"" 가 모두 falsy 값이기 때문에 null,undefined 와 0,"" 를 구분할수 없다. 이를 구분 해주기 위한 연산자 이다. and 연..
간단한 예제 등을 통해서 빠르게 graphQl 를 체험해보고 이해하는것에 목표를 둔다. GraphQL 소개 Graph Query Language Facebook 개발 GraphQL blog RESTful API 로는 다양한 기종에서 필요한 정보들을 일일히 구현하는 것이 힘들었다. 예로, iOS 와 Android 에서 필요한 정보들이 조금씩 달랐고, 그 다른 부분마다 API 를 구현하는 것이 힘들었다. 이 때문에 정보를 사용하는 측에서 원하는 대로 정보를 가져올 수 있고,보다 편하게 정보를 수정할 수 있도록 하는 표준화된 Query language 를 만들게 되었다. 이것이 GraphQL 이다. 트렌드 The State of JavaScript 2019: GraphQL The State of JavaScr..
charCodeAt UTF - 16 값을 반환한다. const str = 'ABCD'; str.charCodeAt(0)//65 str.charCodeAt(1)//66 str.charCodeAt(2)//67 str.charCodeAt(3)//68 str.charCodeAt(4)//NaN str.charCodeAt(index) 반환값 주어진 인덱스 대한 문자에 대한 UTF-16 코드를 나타내는 숫자 범위 밖으로 넘어갔을 경우 [NaN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN) codePointAt 해당하는 Unicode 값을 반환한다. const str = 'ABCD'; str.codePointAt(0..
매번 정렬 할때 마다 헷갈려서 외우기 편하게 정리 해봅니다. 오름 차순 갈수록 커짐 1 → 2 → 3 → 4 a → b → c → d ㄱ → ㄴ → ㄷ 내림 차순 갈수록 작아짐 4 → 3 → 2 → 1 d → c → b → a ㄷ → ㄴ → ㄱ Array.sort() 기본 문자열 정렬 기준 유니코드 오름 차순 const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // expected output: Array [1, 100000, 21, 30, 4] 함수식 Array.sort((a, b) { if (a 가 먼저 나온다) { // 0 보다 작은 수 return -1; } if (b 가 먼저 나온다) { // 0 보다 큰수 ret..
