Javascript

Html,CSS,JS는 모든 브라우저에 내장되어 있다.👉🏻 그래서 따로 다운받을 필요가 없는 것.프론트엔드는 JS가 핵심이다.자바스크립트 활용 분야: 비디오게임(3D), 리액트 네이티브(앱), 일렉트론(데스크탑 앱), 백엔드, 머신러닝💡 Vs code 설치가 불가

1. The Document Object document : 브라우저에 이미 존재하는 object >콘솔창에 입력하면 Html 문서 보여줌 💡 console.dir(document)-> JS 관점에서 HTML 문서를 볼 수 있음. >### ⭐️ Javascript에

1. Input value 가져오기 HTML JS ⭐️ input안에 입력되는 값을 value 라고 한다. 👉🏻 input에 입력된 값을 가져오기 위해 value라는 property를 가져와야 함. 👉🏻 2. username 유효성 검사 조건 비어있으면 안

매번 일어나야 하는 무언가를 만들 때 사용함. 함수 호출 간격 단위 : ms(milliseconds)함수가 지정한 간격마다 반복해서 실행됨HTMLJS: 자바스크립트에 내장되어 있는 objectnew Date( ) : 오늘 날짜를 가져옴const date = new D

Math.random( ) : 0~1 사이 랜덤 숫자(float)Math.floor( ) : 소수 내림Math.round( ) : 반올림Math.ceil( ) : 올림💡 Math.floor(Math.random( ) \* 10) : 0~10 사이 랜덤 정수 ex) d

Setup Adding Todo 입력한 value를 변수에 저장 js로 li를 만들어서 innerText로 입력값 넣기 list에 append Deleting Todo Js로 html에 버튼 만들기(삭제 버튼) addEventListener로 버튼 클릭 이벤트

1. Geolocation 내 현재 위치(위도,경도) 얻을 수 있는 함수: navigator.geolocation.getCurrentPosition(잘 됐을 때 실행될 함수, 에러났을 때 실행할 함수); -> 결과로 object 반환 function onGeoOk(p

: HTML을 변경하기 위해document.getElementById('').innerHTMLaddEventListener('이벤트',function)변수에 저장하기 : const, let, varparameter로 업그레이드 function 함수명(parameter)

this keyword는 뜻이 여러개(3~4개) 있다. 함수와 Object에서 사용할 때 : 해당 함수를 담고 있는 상위 object event listener와 constructor에서 사용할 때 : 이벤트 적용 대상, instance 1. 함수와 Object에서

Arrow function은 function을 "대체"하는 문법이 "아니다". 함수를 만드는 이유 큰 기능을 만들 떄 입출력 기계를 만들 때 함수 만드는 방법 이전 방식 function 함수명(){ } // 혹은 var 함수명 = function() { } 함수

var let const와 선언,할당,범위 변수 : 자료 임시 저장공간 변수 만드는 법: var 변수명 = 저장값; 선언: var 변수명 할당: 변수명 = 저장값 범위: 변수가 사용될 수 있는 범위. 범위 밖에서 사용하면 undefined라고 나옴. var : 재

문자 다루기 자바스크립트에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법 Template literals(backquote,backtick) : `` 장점 문자 중간 엔터키 입력 가능 문자 중간에 변수 집어넣을 때 편리함 ${변수명} HTML 템플릿 작성할

spread operator : ... 펼침연산자 모든 괄호를 없애줌. 중괄호, 대괄호, 소괄호 안에서 쓸 수 있음. 그냥 쓰면 에러남. array나 object에 붙이면 대괄호, 중괄호를 제거해줌 var arr = ['hello', 'world']; console.

이유 : let 변수는 Hoisting이 되긴 하지만 undefined라는 값이 할당되지 않음. 그래서 출력시 에러남.var 변수는 자동으로 undefined 할당됨.\-> let, const는 엄격하게 쓸 수 있는 변수원인 : 함수를 변수 만들듯이 선언,할당하고 있음

1. default parameter 함수 파라미터에 기본값을 지정해줄 수 있음. 등호로 숫자, 연산, 함수 등을 할당해줄 수 있음. 1-1 숫자 함수를 실행할 때 파라미터를 하나밖에 주지 않았음. a = 1, b에는 기본값으로 지정한 10이 할당되어 a + b =

Rest parameter : ... 모든 파라미터를 array 안에 담아서 출력해줌. arguments 보다 더 간단한 ES6 문법! 파라미터 갯수 제한없이 기능을 실행하는 함수를 만들 때 용이함. > ### ⭐️ spread operator와 다른 점 생긴건 동일

문제 1 > 예상 결과 : ['김','밥',1,2,3] (정답!) 문제 2 > 예상 결과 : [1,2,3],'you','are' (아깝) 실제 결과 : 'you' 이유 : [1]은 그냥 붙이는게 아니라 배열의 첫 번째를 의미하기 때문 문제 3 > a=3 으로

Primitive data type : 변수에 값이 그대로 저장됨 ex) 문자, 숫자 복사 : var 이름1 = '김'; var 이름2 = 이름1; 이름1 = '박'; -> 이름1은 '박', 이름2는 '김'이 출력됨. Reference data type : 변수에 r

constructor : object 생성기계 object는 그냥 복사하면 안됨. object를 여러개 복사하고 싶을 때 사용함. 상속기능을 구현하는 장치이다. 상속(inheritance) constructor가 가진 속성들을 그대로 물려받는 오브젝트를 만드는 것.

Prototype: 부모 유전자 constructor를 만들면 자동으로 생긴다. 상속기능을 구현하는 장치이다. >### ⭐️ prototype에 값을 추가하면 모든 자식들이 물려받을 수 있다. constructor.prototype.속성 = 값; 자바스크립트에서 어

Object.create( ) 상속을 이용해 오브젝트를 만드는 간단한 문법(ES5) class 문법에 밀려 인지도는 낮음. 사용법 Object.create(부모 object); 부모 object를 prototype으로 만들 수 있다. 예제 자식 object는 비어

Object.create( ) 상속을 이용해 오브젝트를 만드는 간단한 문법(ES5) class 문법에 밀려 인지도는 낮음. 사용법 Object.create(부모 object); 부모 object를 prototype으로 만들 수 있다. 예제 자식 object는 비어

📌 class ES6의 class 신문법으로 constructor를 만들 수 있다. 만드는 방법 class 안에 constructor를 만들고 새로 생성할 때는 이전과 동일하게 new 키워드를 사용함. 상속가능한 함수 추가하기 방법 1) 함수를 construct

필요성 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다루는게 대세를 이루고 있다. 이유 : 데이터의 무결성을 보존하기 위해. >### "원본 데이터는 immutable 해야 한다." 장점 object 안의 데이터가 복잡할 수록

문제 1 > ### 아래 오브젝트와 똑같은 오브젝트를 constuctor를 사용해 만들고, sayHi() 함수도 추가하기 예상 정답: 함수 만드는 부분이 조금 헷갈렸음! (정답!) 문제 2 >### 다음 코드의 출력 결과는? 예상 정답: 'Kim' (정답!) 이유

Q. 자바스크립트는 동기적인가 비동기적인가? >### 자바스크립트는 동기적으로 처리된다.(Synchronous) 동기식 : 한번에 코드 한줄씩 차례로 처리하는 방식 원인 : stack은 하나밖에 없기 때문에. 병렬 x >### 자바스크립트는 가끔 비동기적인 처리도

: Array, Object에 있는 중요한 자료들을 변수로 꺼내고 싶을 때 사용하는 문법 1. Array 안에 있는 데이터를 변수에 담는 방법 var arr = [2,3,4]; var [a,b,c] = [2,3,4]; 등호로 기본값 지정 가능 var [a,b,c =

JS 파일에 있는 변수, 함수 등을 다른 파일에서 가져다 쓰는 방법 (html - js, js - js 간에 가능) type = "module" 로 수정. 가져올 파일의 요소를 import 해당 JS 파일에서 해당 요소를 export 기본 형태 html librar

📌 Promise란 무엇인가? 성공/실패 판정 기계. (성공하면 then(), 실패하면 catch()를 실행) ⭐️ 콜백함수 디자인 패턴이 마음에 안들시 대신 사용할 수 있음. 새로운 기능이라기보다는 코드/함수 디자인 패턴일 뿐이다. ajax 요청, setTimeou

정답!정답!: a가 b로부터 생성된 오브젝트인지 아닌지를 T/F로 알려주는 연산자.getter에는 parameter 쓰면 안됨!, return 써줘야함몇 개가 들어올지 모르기 때문에 rest parameter(...)이용해서 array에 저장.forEach 사용해서 하

htmljsjQurey로 Ajax 요청을 하려면 $.ajax 혹은 $.get 를 써야한다.(상단에 jQuery 설치 파일도 첨부되어 있어야 함.)

Async : Promise 대신 사용할 수 있는 ES8 문법 async를 function 앞에 붙이면 함수가 Promise 역할을 할 수 있다. 단점 : 성공만 가능 await 키워드 : 프로미스가 해결될 때까지 기다리게 해줌. async function 안에서만

반복문의 용도 코드 여러번 실행 array,object에서 자료 꺼내쓸 때 For 반복문 종류 for(초기값;조건식;증감식) 복잡함 forEach() arr.forEach array 전용 for in for(var key in 오브젝트) object 전용 예시

Symbol 이란? : Object의 비밀스런 key값 만드는 법 var 심볼 = Symbol('설명'); 용도 비밀스런 데이터를 저장하고 싶을 때 사용함. import 해온 파일/라이브러리 쓸 때 거기 있던 object에 자료를 추가하고 싶으면(기존 코드 해칠 염

Map : key,value 저장하는 자료형 -> "자료간의 연관성"을 표현하기 위해 씀. Map 만드는 법 : new Map() 자료 넣는 법 : set() 자료 꺼내는 법 : get() 자료 삭제하는 법 : delete() 자료 갯수 세는 법 : size 특징

Web Component : 반복해서 쓰는 태그 뭉치들을 커스텀 태그로 축약해서 쓸 수 있다. 브라우저의 기본 기능 중 하나. class를 이용해 만듦. -> 긴 HTML도 함수처럼 재사용이 가능하다. 상식) 웹개발을 잘하기 위해서는 브라우저 기능을 잘 알아야 한다.

Shadow DOM : 일반적으로는 볼 수 없는 숨겨진 HTML Web Component와 합쳐 쓰면 HTML 모듈화를 할 수 있다. 예시) 내부적으로 여러개의 div를 이용해서 만들어진 것임. 숨겨진 코드를 확인하기 위해서는 개발자도구 -> 설정 -> show u

여러 문자, 숫자를 한 변수에 저장하고 싶을 때는 object를 사용한다. ?.(optional chaining operator) : 오브젝트에서 변수를 꺼낼 때 사용하는 신문법 왼쪽이 null 이나 undefined면 undefined 남겨줌. 중첩된 object

1.1 프로그래밍이란? 프로그래밍이랑 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 정확하고 상세하게 요구사항을 설명할 수 있는 컴퓨팅적 사고 능력이 필요하다.(논리적, 수학적 사고) 1.2 프로그래밍 언어 컴퓨터가 이해할 수 있는 언어는 기계어인데, 사람이 기

웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어로 탄생한 것이 자바스크립트이다.이후 자바스크립트의 파생 버전인 JSscript가 출시되었다.JSscript와 자바스크립트가 표준화되지 못하고 적당히 호환되었기 때문에, 브라우저에 따라

자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있다.: 웹페이지를 화면에 렌더링하는 것이 주된 목적클라이언트 사이드 Web API를 지원한다.(ex. DOM, fetch, SVG,,): 브라우저 외부에서 실행 환경을 제공하는 것이 주된 목적클라이언

4.1 변수란 무엇인가? 왜 필요한가? 변수 : 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 각 셀은 고유의 메모리 주소를

값 : 식이 평가되어 생성된 결과리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법표현식 : 값으로 평가될 수 있는 문(statement)표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다.리터럴, 식별자, 연산자, 함수 호출

데이터 타입 : 값의 종류자바스크립트(ES6)는 7개의 데이터 타입을 제공한다.7개의 데이터 타입은 원시 타입과 객체 타입으로 분류할 수 있다.C나 자바의 경우 정수와 실수를 구분해서 int, long, float, double 등과 같은 다양한 숫자 타입을 제공한다.

연산자: 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 피연산자 : 연산의 대상 7.1 산술 연산자 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술이 불가능한 경우 NaN을 반환

: 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다.(조건문/반복문)일반적으로 코드는 순차적으로 실행되지만 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.0개 이상의 문을 중괄호로 묶은 것.코드 블록 또는 블록이라고 부르기도 한다.단독으로

9.1 타입 변환이란? : 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것. 타입 변환이 기존 원시 값을 직접 변경하는 것은 아니다. 원시 값은 변경 불가능한 값(immutable value)이므로 변경할 수 없다. 명시적 타입 변환(타입 캐스팅)

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 모든 것이 객체다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다.원시 값은 변경 불가능한 값이지만, 객체는 변경 가능한 값이다.객체는 0개 이상의 프로퍼티로 구성

Temporal Dead Zone(TDZ) let과 const는 할당하기 전에 사용 불가능 var : 함수 스코프(함수 외부에서 사용 불가능, 블록 외부에서 사용 가능) let, const : 블록 스코프(블록 외부에서 사용 불가능) 블록 : 함수, 제어문, 반복문 등

자바스크립트가 제공하는 데이터 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다.원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다.원시 값은 변경 불가능한 값이다. 객체는 변경 가능한 값이다.원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 객체를 변

프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 매개변수 : 함수 내부로 입력을 전달받는 변수인수 : 입력반환값 : 출력 코드의 재사용유지보수의 편의성코드의 신뢰성코드의 가독성함수 리터럴은 function

스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다.즉, 스코프는 식별자가 유효한 범위를 말한다.위 예제에서 자

전역 변수의 무분별한 사용은 위험하다.변수는 생성되고 소멸되는 생명 주기가 있다.변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.함수 내부에서 선언된

15. var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수의 특징은 다음과 같다. 15.1.1 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다.

내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다.내부 슬롯과 내부 메서드는 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로

객체를 생성하는 방법에는 크게 두 가지가 있다. 객체 리터럴 : let obj = {}; 생성자 함수 : let obj = new Object(); 17.1 Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다

다음과 같은 조건을 만족하는 객체를 일급 객체라 한다.무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.변수나 자료구조에 저장할 수 있다.함수의 매개변수에 전달할 수 있다.함수의 반환값으로 사용할 수 있다.자바스크립트의 함수는 위의 조건을 모두 만족하므로

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍 언어이다.객제지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로

var, let, const 키워드 없이 변수를 선언하고 이를 참조한 경우 ReferenceError가 발생하지 않는데, 자바스크립트 엔진이 암묵적으로 전역 객체에 해당 변수를 동적 생성하여 전역 변수처럼 사용할 수 있도록 하기 때문이다. 이러한 현상을 암묵적 전역이라

자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다.자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math 등 40여 개의 표준 빌트인 객체를 제공한다.Math, Reflect, JSON을 제외한 표준

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다.ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다.전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.함수 코드가 평가되면 함수 실행 컨

클로저는 난해하기로 유명한 자바스크립트의 개념 중 하나로, 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.MDN에서는 클로저에 대해 다음과 같이 정의하고 있다.클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.자바스크립트 엔진

자바스크립트는 프로토타입 기반 객체지향 언어다.프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다.하지만 클래스 기반 언어에 익숙한 프로그래머

ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다.일반적인 함수로서 호출new 연산자와 함께 호출하여 생성자 함수로서 호출객체에 바인딩되어 메서드로서 호출이는 편리해보이지만 실수를 유발시킬 수 있으며 성능 면에서도 손해다.이러한 문제를

배열은 여러 개의 값을 순차적으로 나열한 자료구조다.배열은 사용 빈도가 매우 높은 가장 기본적인 자료구조다.배열이 가지고 있는 값을 요소(element)라고 부른다.자바스크립트의 모든 값은 배열의 요소가 될 수 있다.배열의 요소는 배열에서 자신의 위치를 나타내는 0 이

표준 빌트인 객체인 Number 객체는 생성자 함수 객체다.따라서 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다.Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 \[NumberData] 내부 슬롯에 0을 할당한 Nu

원주율 PI 값을 반환한다.인수로 전달된 숫자의 절대값을 반환한다.인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다.인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환한다.인수로 전달된 숫자의 소수점 이하를 내림한 정수를 반환한다.인수로 전달된 숫자의 제

표준 빌트인 객체인 Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다.현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정된다.Date 생성자 함수로 객체를 생성하는 방법은 다음과 같이 4가지가 있다.Date 생성자 함

31.1 정규 표현식이란?

자바스크립트에는 6개의 타입 즉, 문자열, 숫자, 불리언, undefined, null, 객체 타입이 있었다.심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의

32.1 String 생성자 함수 표준 빌트인 객체인 String 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다. String 래퍼 객체는 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 인덱스를 사용하여

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 콜렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.ES6 이전의 순회 가능한 데이터 콜렉션, 즉 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각

ES6에서 도입된 스프레드 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for...of 문으로

구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변

Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다.이러한 Set 객체의 특성은 수학적 집합의 특성과 일치한다. Set은 수학적 집합을 구현하기 위한 자료구조다. 따라서 Set을 통해 교집합, 합집합, 차집합,

브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 살펴보자.파싱(parsing) : 파싱은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문

브라우저는 처리해야 할 특정 사건(ex. 클릭, 키보드 입력, 마우스 이동)이 발생하면 이를 감지하여 이벤트를 발생시킨다.만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링이라 한다.타이머 생성 함수 : setTimout, setInterval타이머 제거 함수 : clearTimeout, clearInt

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다.이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다.함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거된다.함수가 호출된

43.1 Ajax란? Ajax(Asynchronous JavaScript And XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 수신하는 프로그래밍 방식이다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequ

HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST가 소개되었고, 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 RESTful 이라고 표현한다. >즉, REST는 HTTP를 기반으로

자바스크립트에서는 비동기 처리를 하기 위한 하나의 패턴으로 콜백 함수를 사용한다. 그러나 콜백 패턴은 다음과 같은 단점이 있다. 콜백 헬로 인해 가독성 나쁨 에러 처리가 곤란함 여러 개의 비동기 처리를 한 번에 처리하는 데 한계가 있음 따라서 ES6에서는 비동기 처

ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다.제너레이터와 일반 함수의 차이는 다음과 같다.제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.제너레이터 함수는 함수 호출자와 함수의 상

에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.이를 막기 위해 try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다.직접적인 에러를 발생하

48.1 모듈의 일반적 의미 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다. 자신만의 파일 스코프

크롬, 사파리, 파이어 폭스 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원한다.하지만 IE 11의 ES6 지원율은 약 11%다. 그리고 매년 새롭게 도입되는 ES6 이상의 버전과 제안 단계에 있는 ES 제안 사양은 브라우저에 따

타인이 정의한 답을 의심하기배움에 열린 태도를 가지기직접 생각하고 또 고민하기자바스크립트 코드 스타일에 대한 견해를 탐구하기(AirBnB, Google, ECMA, prettier. eslint 등)몽키 패치 : 런타임 중인 프로그램의 내용이 변경되는 행동을 의미함.N

var를 지양하고 const를 사용하자.var : 함수 스코프, 재선언 o, 재할당 olet : 블록 스코프, 재선언 x, 재할당 oconst : 블록 스코프, 재선언 x, 재할당 xlet과 const는 TDZ도 있어 안전하게 코드 작성 가능전역 스코프까지 영향을 주게

타입 검사는 typeof 연산자로 할 수 있다. (결과를 문자열로 반환함.)typeof 만으로는 타입 검사를 하기 어렵다.자바스크립트는 원시 타입(primitive)과 참조 타입(reference: object, array, fuction, Date)으로 이루어져 있는

경계를 다루는 다양한 단어들이 있는데, 어떤 상황에 어떤 단어를 사용하는 것이 좋을까?최솟값과 최댓값을 다룰 때는 경계의 포함 여부를 결정해야 한다.(이상/이하, 초과/미만)\-> 경계를 항상 포함시키거나 항상 포함시키지 않도록 해서 일관되게 사용해야 한다.\-> 혹은

문법 에러가 발생하면 서비스 오류가 발생할 가능성이 있다.따라서 문법을 잘 지키도록 노력해야 한다.아래에서 switch문을 사용했는데도 문법 에러가 발생하지 않는 이유는?즉시 실행 함수(IIFE) 를 사용했기 때문!\-> {} 내부에는 값이나 식만 들어갈 수 있는데,

아래처럼 key, value가 저장된다.Array.isArray()를 사용해준다.주의 : length는 요소의 개수를 나타내는게 아니라 마지막 인덱스를 나타낸다.arr에 있는 요소는 4개지만 마지막 인덱스인 10이 length가 된다.인덱스로 접근하지 말고 구조분해할당

shorthand properties 아래처럼 속성을 축약해서 나타낼 수 있다. computed property name 계산된 값을 속성명으로 사용할 수 있다. (대괄호 안에 넣어서 사용) lookup table key, value가 리스트로 쭉 나열되어 있는

함수, 메서드, 생성자

Magic Number는 의미 있는 이름의 상수로 대체될 수 있는 숫자를 뜻한다.예를 들어, 아래 시간을 계산하는 부분을아래처럼 추상화할 수 있다.큰 숫자를 나타낼 때 아래처럼 작성하면 얼마인지 파악하기 어려울 수 있다.아래처럼 Numeric Operator(\_)를

유효성 검사 사용자의 입력 값이 유효한지 검증하는 것 ex) 이메일인 경우 사용자의 입력이 이메일 포맷에 맞는지 검증한다. 이메일 포맷이 맞는 경우 그때서야 서버와 통신을 한다. => 서버 비용 절감 가능 >### 방법 정규식 JS 문법 웹 표준 API 웹 표

div를 남발하지 않고 의미있는 태그를 쓰는게 좋다.한눈에 구조를 파악할 수 있고 웹 표준에도 맞기 때문이다.(seo)Html은 마크업 언어(문서)이다.Readme.md 에서 md는 마크다운이다. 마크업보다 조금 더 간단하게 작성할 수 있는 언어이다. (Node : 문

공백도 코드 작성의 일부이다.코드의 구조를 한눈에 파악하기 쉽도록 아래처럼 구성한다. (각 구성 사이에 한 줄씩 띄어준다.)1\. 선언2\. 로직3\. 반환Eslint의 padding-line-between-statements 를 사용하면 공백을 미리 설정해둘 수 있다