공부 기록일지📚

[ 클로저란(Closure)? ] 클로저는 JS라는 언어에 제약된 개념이 아니라 `함수를 일급객체로 사용하는 모든 언어`에서 사용하는 특성이다. 클로저는 언어 자체만 보면 "폐쇄"의 의미를 가지고 있으며 접근할 수 있는 변수의 범위와 대상을 제한하는 느낌에서 closure이라고 하는 것이 아닌가 싶다. A closure is the combination of a function and environment within which that function was declared. -MDN 클로저- 쉽게 표현하자면, 클로저는 `자신이 생성될 때의 환경(lexical environment)을 기억하고, 그를 사용하는 함수` 이다. // 클로저 예시 function makeAddNumFunc(num) { con..

1. set ( functions Setter, 설정자 ) set 구문은 객체의 속성에 할당을 시도할 때 호출할 함수를 바인딩한다. const language = { set current(name) { this.log.push(name); }, log: [] }; language.current = 'EN'; language.current = 'FA'; console.log(language.log); // Expected output: Array ["EN", "FA"] 1-1. 문법 (syntax) {set prop(val) { . . . }} {set [expression](val) { . . . }} `props` : 주어진 함수를 바인딩할 속성 이름 `val` : props에 할당을 시도한 값 `ex..

Class란? class는 객체를 생성하기 위한 템플릿 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른문법과 의미를 가진다. 1. Class 정의 Class는 "특별한 함수"이다. 함수를 표현식과 선언문으로 정의할 수 있듯 클래스 문법도 class 표현식과 class 선언 두 가지 방법을 제공한다. 클래스는 재정의될 수 없다. 재정의를 시도하면 SyntaxError가 발생한다. 1-1. Class 선언 Class 를 정의하는 한 가지 방법은 class 선언을 이용하는 것 class를 선언하기 위해서는 클리스의 이름과 함께 class 키워드를 사용한다. class Rectangle { constructor(..

Array.from() 해당 메서드는 유사 배열 객체(array-like object)나 반복가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다. 첫번째 매개변수로는 `배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체`를 넘기고 두번째 매개변수(optional)로 배열의 모든 요소에 대해 호출할 매핑 함수를 전달한다. 세번째 매개변수(optional)는 thisArg로 매핑 함수를 실행할 때 this로 사용할 값을 넘겨주면 된다. 시퀀스 생성기(range)로도 사용할 수 있다. 유사 배열 객체(array-like object) : length 속성과 인덱싱된 요소를 가진 객체 순회 가능한 객체(iterable object): Map, Set 등 객체의 요소를..

!! 연산자는 자바스크립트에서 boolean이 아닌 값을 boolean으로 변환시킬 때 사용한다. 이를 통해서 변수가 존재하는지 혹은 유효한 값을 갖는지 확인할 수 있다. 데이터를 자동으로 불리언으로 바꿔준다. 만약 데이터가 falsy값 (0, "",'',null, NaN, undefined)들 중 하나라면 false를 반환할 것이다. 이 외의 경우는 true를 반환한다. 이를 통해서 falsy값을 논리연산 boolean값만 반환하게 만들 수 있다. 이중 부정 연산자 예시 아래와 같이 2가지 방법으로 사용할 수 있다. const isAnd = (a,b) => !!(a&&b) isAnd('hello','world') //true !!('hello'&&'world') // true 나의 경우, 단일 연결 리..

vercel에 넥스트 프로젝트를 배포하면서 환경 변수를 따로 넣어주지 않아 배포실패로 골머리를 썪다가 제대로 정리해야겠다는 생각이 들었습니다. 우선 우리가 통상적으로 react로 프로젝트를 만들 때에도 .env에 환경변수를 넣어서 관리했던 것을 기억할 것이다. 환경 변수란? environment variable 일반적으로 우리는 코드 베이스는 하나만 관리하고, 개발, 테스트 운영등 여러 환경에 어플리케이션을 배포한다. 어느 환경에 배포하느냐에 따라서 다르게 설정되어야 하는 값들은 보통 운영 체제 수준에서 환경 변수를 통해 관리하게 된다. 대표적으로 DB 설정을 들 수 있는데, 운영 환경에서는 데이터 센터나 클라우드 인프라 상의 상용DB를 사용하고, 개발 환경에서는 개발자의 PC상 로컬 DB를 사용하는 경..

우선 버블링이란 한 요소에서 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 것입니다. 가장 최상단의 조상요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이벤트 버블링이란 간단히 말하면 이벤트가 제일 깊은 요소에서 시작해 부모 요소로 거슬러 올라가며 이벤트를 전파하는 것입니다. 그 모습이 물속 거품과 닮았기 때문에 버블링이라 합니다. 최근에 이 버블링이 적용되는 이벤트가 있고 아닌 이벤트가 있다는 것을 알게되어 정리하게 됐습니다. 알아보니, 거의 모든 이벤트는 버블링이 된다고 나와있습니다. 예를 들어 focus 이벤트는 버블링이 되지 않습니다. 🤍하단에 버블링이 발생하지 않는 이벤트들을 적어두었습니다. event.target..

이 포스팅은 Learn with Eunjae 님의 시나브로 자바스크립트 강의를 기반으로 정리된 내용입니다. 로컬에 있는 내 html 파일을 localhost를 통해서 확인하게 되는데, nestify나 vercel(호스팅 플랫폼)을 통해 폴더 자체를 배포할 수 있다. vercel의 경우는 내 깃허브 리포를 연동하여 바로 배포할 수 있기 때문에 아주 간단하게 배포할 수 있다. vercel에서 배포를 할 때, 어떤 프레임워크를 사용할 지 결정하고 빌드 커맨드(빌드 명령어)와 output 디렉토리(어떤 폴더에 결과물을 둘 지)등을 직접 설정해 줄 수 있다. 번들러는 다양한 종류들이 있는데 Parcel("the zero configuration build tool for the web" -공식 홈페이지) Vite..