공부 기록일지📚

최근에 설치된 extension들을 확인하려면 @installed @sort:updateDate 검색어로 확인이 가능합니다. 저는 그냥 깔대기처럼 보이는 아이콘(Filter extensions -> sorted by -> updated date)을 눌러서도 보는 것이 가능합니다. 2022 12 05 기준 추천하는 기능 extension(snippet, intellisense 등..) 대부분이 필수적이라 생각하지만 개인적으로 추천하는 extension은 이모지를 달아두었습니다. 🥳 Auto Import - ES6, TS, JSX, TSX WakaTime // 하루에 내가 어떤 환경에서 어떤 언어로 코드를 짜는 지 확인할 수 있도록 연동하는 기능 Tailwind CSS Highlight // 테일윈드 css..

저번에 읽었던 [You Don't know JS 타입과 문법, 스코프와 클로저] 가 흥미로웠어서 같은 시리즈의 this와 객체 프로토타입, 비동기와 성능을 빌려왔습니다. 외에 JavaScript 자바스크립트 성능 최적화(올빼미가 그려진..) 책을 빌려와 봤는데요. 저번에 읽었던 부분은 기초적인 부분이고 (분량도 그리 많지 않음)제가 이미 여럿 접했던 내용이라 2-3일만에 독파가 가능했습니다. 이번에는 잘 모르겠네요 ㅎㅎ 시간을 크게 할애하고 싶지는 않아서 우선 빠르게 훑어보려고 합니다. 내용이 좋으면 소장해놓고 필요할 때 찾아보는 용도가 됐으면 합니다. 여담으로 면접을 보고 온 회사에서 디자인패턴, 알고리즘, 네트워크 관련 질문을 주셔서 이 부분에 대해서도 공부해야 할 것 같습니다. 저번에 유투브에서 T..

git을 소수 인원으로 사용할 때에는 push, pull, merge만 사용해도 큰 문제가 없습니다. 개인 프로젝트할 때에는 그렇게 했구요. git history도 깔끔했습니다. 하지만 소수인원이 아닌 회사에서 협업하게 된다면 git history가 엉망이될 겁니다. 이럴 때 우리가 사용할 수 있는 기능이 rebase입니다. 개인적으로 sourcetree라는 git GUI툴을 사용하지만 사용하면 사용할수록 시각적인 매력 외에 불편함을 느끼고 있었습니다. CLI가 익숙해지면 계속 그것만 사용하게 될거라는 분도 계셨구요. CLI로 진행하게 된다면 git history가 깔끔하게 정렬되어 있는 게 좋을 거 같았습니다. Merge와 Rebase의 차이? Git에서 한 브랜치에서 다른 브랜치로 합치는 방법으로는 ..

화살표 함수 ES6부터 식(expression)에 한해 화살표 함수식을 활용할 수 있다. 더 나아가 매개변수, 리턴타입을 명시적으로 선언해 컴파일 과정에서 타입 검사를 수행해 사전에 문제를 방지할 수 있다. 아래는 매개변수 url의 타입을 string으로 지정하여 명시적으로 표현하였다. //TS let corsURL = (url:string): string => `https://crossorigin.me/${url}`; corsURL('http://yamoo9.herokuapp.com/rest/ediya-menu'); Default Parameters ES6 부터 함수 매개 변수의 기본값을 설정할 수 있다. TS는 매개 변수 타입 설정 후, = 뒤에 기본값을 할당하면 된다. 컴파일된 코드를 보면 기본 값..

책이름: You don't know JS : 타입과 문법, 스코프와 클로저 주관적으로 머리에 남기고 싶은 부분들만 정리하였습니다. 자세한 내용은 책을 참고하시는게 좋습니다. 스코프란 무엇인가? 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데는 잘 정의된 규칙이 필요하다. 이런 규칙을 스코프(scope)라 한다. 1.1 컴파일러 이론 자바스크립트는 일반적으로 동적 또는 인터프리터 언어로 분류하나 사실은 컴파일러 언어이다. 전통적인 컴파일러 언어와는 많이 다르다는 것은 자명한 사실이다. 코드를 미리 컴파일하거나 컴파일한 결과를 분산시스템에서 이용할 수 있는 것은 아니기 때문 전통적인 컴파일러 언어의 처리 과정은 보통 3단계를 거치는데 이를 컴파일레이션 이라고 부른다. 토크나이징(tokenizing)/..

책이름: You don't know JS : 타입과 문법, 스코프와 클로저 주관적으로 머리에 남기고 싶은 부분들만 정리하였습니다. 자세한 내용은 책을 참고하시는게 좋습니다. 5.4.1 너무 이른 변수 사용 ES6는 임시 데드 존 TDZ(Temporal Dead Zone)이라는 새로운 개념을 도입 TDZ는 아직 초기화를 하지 않아 변수를 참조할 수 없는 코드 영역 ES6의 let 블록 스코핑이 대표적인 예시 { a = 2; //ReferenceError let a; } -> a가 let a 선언에 의해 초기화되기 전 a = 2 할당문이 블록스코프에 있는 변수 a에 접근하였으나 a는 아직 TDZ 내부에 있으므로 에러를 발생시킨다. 재밌는 사실🙄 typeof 연산자는 선언되지 않은 변수 앞에 붙여도 오류는 나..

책이름: You don't know JS : 타입과 문법, 스코프와 클로저 주관적으로 머리에 남기고 싶은 부분들만 정리하였습니다. 자세한 내용은 책을 참고하시는게 좋습니다. 배열(Array) 자바스크립트 배열은 타입이 엄격한 다른 언어와 달리 문자열, 숫자, 객체 심지어 다른 배열(다차원 배열)이나 어떤 타입의 값이라도 담을 수 있다. 배열 크기는 미리 정하지 않고 선언가능, 원하는 값을 추가할 수 있다. (주의)배열 값에 delete 연산자를 적용하면 slot(슬롯)을 제거할 수 있찌만 마지막 원소까지 제거해도 length프로퍼티 값은 바뀌지 않는다 *빈/빠진 슬롯이 있는 구멍난 배열 예시는 아래에 있다. 배열 인덱스는 숫자이지만 배열 자체도 하나의 객체이다. 그렇기 때문에 키/프로퍼티 문자열을 추가할..

Next.js로 어플리케이션을 만들던 중 Notion API를 통해서 기간 값을 받아오는 로직이 있습니다. 해당 데이터는 string 타입으로 오며 "2022-11-05" 이런 식으로 넘어오게 됩니다. start date와 end date를 받아오는데 end date를 설정해주지않으면 null으로 담겨오게 됩니다. end date를 받아오지 않으면 임의로 날짜를 넣어주어야 하는데, 직접 넣어주는 방식보단 오늘 날짜를 넣어주고 싶어서 로직을 짜게 됐습니다. start의 경우, null 병합연산자를 통해 왼쪽 값이 null이나 undefined일 경우, 오른쪽의 2022-11-12 를 하드코딩하는 식으로 넣어주었습니다. 이 부분도 변경하고 싶지만 우선 end 의 경우를 오늘 날짜를 기준으로 year-mont..