공부 기록일지📚

package.json 과 package-lock.json package.json은 뭔가요? - 기본적으로 package.json은 문서입니다. 개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서 -> 프로젝트의 개발만을 위한 목적인지, 패키지를 배포하기 위한 목적인지에 따라 용도가 갈릴 수 있다. 자신의 프로젝트가 의존하는 패키지의 리스트 자신의 프로젝트의 버전을 명시 다른 환경에서도 빌드를 재생 가능하게 만들어, 다른 개발자가 쉽게 사용할 수 있도록 한다. 확장자로 알 수 있듯, json파일로 속성-값의 쌍으로 이루어져 있으며 npm에서는 이 속성을 field라고 표현합니다. "name"과 "version"은 반드시 있어야 하는 fields 이며 이 필드가 누락되면 ..

모든 내용은 맨 하단의 원작자분이 작성해주신 포스팅 내용을 제가 이해할 겸 축약하여 작성한 것입니다. 문제시 알려주시면 삭제하겠습니다! 자세한 내용을 원하시면 링크를 타고 본 포스팅을 확인해주세요. 실행 컨텍스트 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 실행 컨텍스트는 어떤 필요에 의해서? -> 아마 코드의 실행 순서와, 각각의 실행에서 참조해야하는 변수, 식별자 등을 효과적으로 관리하기 위한 목적으로 도입되었다. 실행 컨텍스트란 "실행할 코드에 제공할 환경 정보들을 모아놓은 객체" -> 정보들을 어딘가에 모아두는 이유? A. "언젠가 필요할 때 꺼내어 쓰기 위함이다." 실행 컨텍스트 요소 Variabl..

왜 이 WebAPI에 대해서 찾아보게 됐나? - query string을 업데이트해야 할 때 사용하기 좋은 WebAPI입니다. 혹은 URL Validation을 할 때 유용할 거 같습니다. - 어렴풋이 URLSearchParams()를 사용해본 거 같은 느낌이 들어 찾아보니 이전에 리액트 프로젝트를 했을 때 사용한 React router dom v6의 useSearchParams()와 비슷한 거 같네요. 🟡URLSearchParams ❗URL 전체를 인자로 넘기는 것이 아니라 query string 부분만 인자로 넘겨준다. URLSearchParams 인터페이스는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의한다. 이 생성자(new 키워드로 새 인스턴스 반환)를 통해 구현되는 객..

CHAPTER 1 this에 대한 오해들 function identify() { return this.name.toUpperCase(); } function speak() { let greeting = 'hello, I am' + identify.call(this); console.log(greeting); } let me = { name: 'alex', }; let you = { name: 'rachel', }; identify.call(me); identify.call(you); //me & you 의 이름 대문자변환 speak.call(me); //hello, I amALEX speak.call(you); //hello, I amRACHEL -> indentify()와 speak() 두 함수는 객체..

책이름: 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..