heyday2024 님의 블로그

ES6 Modules모듈은 재사용 가능한 코드 조각을 캡슐화하고 다른 자바스크립트 파일에서 쉽게 재사용할 수 있게함. 캡슐화:자바스크립트 모듈은 관련된 함수, 변수, 객체, 클래스 등을 하나의 파일로 그룹화하고, 이를 모듈이라고 함. 이렇게 그룹화를 하게 되면 기능적으로 연관된 코드들을 묶어 관리할 수 있으며, 모듈 외부에서는 내부 구현을 알 필요 없이 제공되는 API를 통해 모듈을 사용할 수 있음!캡슐 안에 중요한 정보와 로직을 넣어 보관! ES6에선 export 라는 키워드를 사용해서 모듈을 만들고, 다른 파일에서 사용할 수 있게함.모듈은 재사용할 수 있는 함수, 객체 또는 원시값을 의미함. 자바스크립트 실행환경: 브라우저 환경 & Node 환경Node 환경에서의 모듈 import 방식은 2가지임!!..

1. Template Literals 변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법 백틱(`)을 사용하여 문자열을 구성하고, ${변수 이름 혹은 식..} 통해 변수나 표현식을 삽입 let customer = { name: "르탄이" };let item = { name: "커피", price: 4000 };console.log(`감사합니다, ${customer.name}님. ${item.name}을(를) ${item.price}(원)에 구매하셨습니다.`);// 출력: 감사합니다, 르탄이님. 커피을(를) 4000(원)에 구매하셨습니다.  2. Destructuring 객체나 배열의 속성을 보다 쉽게 추출할 수 있게 해주는 문법객체에서의 사용key 가 중요함!! 그래서 순서대로 값을 받는 것이..

변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수있게함.(ex) 사용자로부터 받은 입력을 처리 & 계산 결과를 다시 사용할 때 변수 사용  만약 변수 사용을 하지 않고, 직접 값을 기입해서 사용한다면,코드의 복잡성 증가오류 가능성 증가확장성과 유지 보수성 감소==> 즉, 변수를 이용함으로서 코드의 가독성을 높이고, 적은 변경으로 수정하기 용이함. 또한, 코그의 재사용성을 높임. 변수의 종류 : const, let, var자바스크립트의 주요 스코프 유형: Global. Function, Blocklet과 const는 블록 스코프, var는 함수 스코프 내에서 유효함.let : 재할당 가능, 재선언 불가const: 재할당 재선언 불가var: 재할당 재선언 가능 const, let ..

클로저 (Closure)A closure is the combination of a function and the lexical environment within which that function was declared - MDN(클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합임.) ??? 이게 무슨 말인지 하나씩 해석해보자! 함수가 선언된 렉시컬 환경(record + outer)이란??----> 함수가 선언될 당시의 외부 변수 등의 정보 //클로저const x = 1;function outerFunc() { const x = 10; function innerFunc() { //함수가 선언된 렉시컬 환경 // 렉시컬환경(LE)는 record(식별자 정보), outer(외부 환경 정..

상속(Inheritance)Class는 상속을 통해 다른 Class의 속성과 메소드를 물려받을 수 있음.상속을 통해 기존 클래스의 기능을 그대로 사용하면서 필요한 기능을 추가하거나 수정할 수 있음. 상속을 받는 Class ===  'subclass' 또는 'derived class'상속을 하는 Class ===  'superclass' 또는 'base class'  오버라이드(Overriding)상속받은 부모 클래스의 메서드를 자식 클래스에서 재정의 하는 것 * 참고로 super 키워드는 부모 클래스의 생성자나 메서드를 호출할 때 사용---> 부모 클래스의 생성자를 override하고 싶을 때 super사용해서 부모 class에게도 알려주기...super로 부모 클래스 생성자 호출하기자식 클래스에서 부모..

1. ClassJavascript에서 왜 class라는 문법(ES6)이 생겼을까?다른 여러 프로그래밍 언어(c#, c++, java...)는 대개 클래스 기반 프로그래밍 개발기법을 사용함(상속, 생성자 등...) 이런 언어들을 사용했던 개발자들이 자바스크립트로 넘어와서 자꾸 클래스 처럼 개발하려고 하다보니까 JS에서도 그 니즈를 반영한 것. 클래스 (Class)클래스는 설계도에 해당하며, 여러 객체를 만들 수 있는 틀.이 설계도에는 객체가 가져야 할 특성(속성)과 행동(메서드)이 정의되어 있음.예를 들어 책상을 만드는 설계도를 보면 어떤 종류의 책상을 만들수 있는지 그리고 그 특징이 무엇인지 알 수 있음. 이런 책상을 만드는 설계도가 클래스임.인스턴스 (Instance)인스턴스는 클래스를 기반으로 만들어..

DOM (Document Object Model)JS가 생긴 이유: 브라우저에서 동작하게하기 위한 언어로, HTML를 해석해서 웹  페이지를 동적으로 만들기 위해(Netscape에서 당시 인기많던 자바의 이름을 따서 만들었음) 1. 사용자(클라이언트, 브라우저)가 서버에게 요청(request) 함(ex) 크롬을 통해 클라이언트의 역할함 2. 서버로부터 오는 응답 형태가 HTML 문서(document)임.  3. 브라우저가 HTML 파일을 해석함(parsing 파싱)=====> 브라우저에는 기본적으로 렌더링 엔진이 있음. 서버가 클라이언트에게 준 HTML문서를 렌더링(html를 해석/번역해서 화면에 그려주는 것)함.렌더링 엔진이 HTML문서에 코드를 한줄, 한줄 보면서 해석함. 서버로부터 받아 온 그 문서..

객체지향 프로그래밍 --> 함수형 프로그래밍다형성: 하나의 공통된 특성을 기반으로 여러 가지 다른 형태로 확장될 수 있는 성질. 예를 들어, 부모 클래스의 메소드를 자식 클래스에서 재정의하는 방식으로 다양한 형태의 객체가 동일한 메소드를 가질 수 있다.렉시컬 스코프: 함수가 선언된 시점에서 상위 스코프를 결정하는 방식. 실행되는 위치가 아닌, 함수가 선언된 위치에 따라 상위 스코프가 결정된다.this 바인딩: 함수 마다 this 라는 특별한 객체가 있고, 함수 호출이 되었을 때 this 값이 결정되는데, this 값이 결정되는 것을 this 바인딩이라고 한다.프로토타입 (prototype): 객체들이 공통으로 사용할 수 있는 속성이나 메서드를 정의한 공간This란 무엇인가?this 란 어떤 특정 객체를 ..

1. 콜백지옥콜백함수를 익명함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬인 경우!( 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생 ) ----> 가독성이 정말 지옥(hell)임. 2. 동기 vs 비동기  위에 카페는 진동벨 없이 주문요청이 들어오면 작업을 끝낼 때 까지 손님들이 기다림(시간 오래걸림)그리고, 뒤에 손님들은 무조건 자신의 바로 앞의 주문이 완료되어야만 주문 요청을 할 수 있음.-----> 동기 아래에 카페는 손님들에게 주문 요청을 다 받고, 진동벨을 나눠준 후 작업이 끝나는 대로 그 진동벨을 울려서 작업을 완료함. (시간적으로 효율적임) ----> 비동기 동기 : synchronous현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식을 말해요!CPU..

콜백함수// setTimeoutsetTimeout(function() { console.log("Hello, world!");}, 1000);// forEachconst numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) { console.log(number);});setTimeout, forEach를 보면 둘다 function을 인자로 받는다. 이 인자로 넘겨진 함수들을 콜백함수라고 함. 다른 코드의 인자로 넘겨주는 함수! 인자로 넘겨준다는 얘기는 콜백함수를 넘겨받는 코드가 있다는 뜻 (like forEach, setTimeout 등).콜백 함수를 넘겨받은 위와 같은 코드 forEach, setTimeout 등은 이 콜백 함수를 필요에 따라 적절..