JavaScript

공백이 없는 8~30자리 비밀번호 설정하기

JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자.우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.이는

npm run serve 작동안됨\->실패node-scss 버전문제=> 해결방안 모색3을 통해 npm install 문제해결 후,치니 VUE 실행 성공!npm downgrade 적용이 안됨\->경로문제인건가,,,해결 못함..

를 터미널에 입력하면 zsh셸에 들어가지고 이곳에서 Vim을 이용하여 환경 변수 설정할 수 있음\*Vim은 모든 종류의 텍스트를 만들고 변경할 수 있도록 구성 가능한 텍스트 편집기\*// ESC 눌러서 nomal mode인 상태.

프로젝트 최상위 폴더(root)에 jsconfig.json 파일을 추가한 뒤 아래 코드 입력또한, 최상위 폴더에 croco.config.js를 생성하여 아래 코드 입력이제 절대경로로 "~/\*"로 원하는 경로를 입력하면 됨

문자열과 다른 자료형을 더하게 되면 다른 자료형이 문자열로 바뀐 후 문자열과 더해짐->값이 자료형으로 바뀌는 현상 또는 바꾸는 행위더하기는 문자열이 아닌 것들이 문자로 바뀌지만 빼기, 나누기, 곱하기는 문자열이 아닌것들이 숫자로 바뀜

typeof는 변수의 데이터 타입을 반환하는 연산자함수 매개변수의 유효성을 검사하거나 변수가 정의되어 있는지 확인 가능코드 안에서 액세스하려고 시도하기 전에 변수가 정의되어 있는지 확인 가능예제 typeof "ABC" 문자열은 "string"을 리턴 typeof 1 t

NaN은 NaN끼리 비교할 때 숫자, 문자열, 불 값을 통틀어 false 값을 가지는 유일한 값즉, NaN은 비교 연산에서 false를 출력하고 다만, != 연산에서만 true 값을 출력함불 값에서 사실상 true는 1, false는 0을 뜻하기 때문b가 a보다 문자

자료형이 다른 경우 형 변환을 한 후 비교하기 때문에 위의 경우 모두 true가 출력됨. 그래서 자료형까지 같은지 비교하는 연산자인 ===가 따로 있음. 이는 값을 비교할 때 값뿐만 아니라 자료형까지도 같은지 비교자료형까지 모두 일치할 때만 true가 나오며 이는 !=

연산자를 연달아 두 번 사용하여 다른 자료형을 불 값으로 형 변환할 수 있음'a'는 string인데 다른 자료형과 비교될 시에 더하기 빼고는 자료형이 숫자로 변환되어 NaN으로 나올 것이고 NaN앞에 !(부정)이 붙으면 boolean 값으로 false가 나온다. !fa

보통 반환할 결과값이 없을 때 나옴console.log 명령어는 콘솔에 무언가를 출력하지만, 그 자체로는 결과값이 없기 때문에 undefined가 반환됨undefined는 불 값으로 형 변환했을 때 false가 나옴undefined와 마찬가지로 빈 값을 의미null 또

let으로 시작하는 명령을 선언문이라고 한다.cost는 변수명변수를 선언함과 동시에 값을 대입하는 행위를 초기화(inintialization)이라고 한다.변수 선언은 항상 결과값이 undefined로 출력된다.이미 선언한 변수를 다시 선언하는 경우, 에러가 발생하므로

let 외에도 변수를 선언하는 예약어로 const와 var가 있다.const는 상수(constant)의, var는 변수(variable)의 줄임말이다.let 재선언X, 재할당Oconst 재선언X, 재할당Xvar 재선언O, 재할당Oa와 b라는 변수에 어떠한 값이 들어있

주어진 조건에 따라 코드를 실행하거나 실행하지 않는 문if 뒤에 나오는 소괄호 안에 조건(식)을 넣고, 다음 줄에 동작(문)을 넣음변수를 할당할 수도 있고,동작문에 여러 줄을 넣을 수도 있음다소 복잡한 조건문

if-else 문의 기본 형식if(조건식){ //조건식이 참인 값일 때 실행 동작문} else { //조건식이 거짓인 값일 때 실행 동작문}else if 문의 기본 형식if (조건식) { 동작문;} else if (조건식) { 동작문;} else { 동작문;}아래와 같

조건부 연산자

동작문이 하나일지라도 중괄호로 묶어주는 것이 좋음아래와 같이 코드를 치면 'Hello, while!'이 무한반복됨이는 변수를 설정하여 해결할 수 있음즉, 0이 99가 될 때까지 하나씩 더해지면서 동작문이 실행됨

for 시작; 조건식; 종료식) 동작문;조건식이 참이면 조건식, 동작문, 종료식이 순차적으로 반복됨참고for문은 시작, 조건식, 종료식을 생략 가능문제for문으로 1부터 100까지 보여주기정답

while문의 경우,예시for문의 경우는 아래와 같이 조건식을 생략할 수 있어 무한 반복이 되지만 보통 조건식을 잘 생략하지 않기 때문에 어색해 보일 수 있음. 그래서 무한 반복을 표현할 때는 while문을 더 많이 씀가끔 반복문이 특정 조건에서만 실행되기를 원할 수

더 복잡한 중첩반복문문제구구단을 출력하되, 결과에 짝수가 하나도 나오지 않게 하기(continue문 사용 필수)정답내가 시도한 코드(정답X)찐정답or등 답은 여러 방식으로 도출가능

객체(object)자료형의 일종으로 다양한 값을 모아둔 또다른 값객체의 종류는 크게 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있음현재 배열 안에 있는 값은 모두 문자열이지만, 값의 자료형이 모두 같아야 할 필요는 없음배열 안에

함수를 만들 때는 보통 function 예약어를 사용하거나 =>(화살표)기호를 사용화살표 기호를 사용한 함수를 화살표 함수(arrow function)라고 함위의 코드에서 a뒤에는 ;를 관습적으로 안붙임선언과 호출return은 함수를 종료하는 동시에 반환해줌여러 값을

argument는 첫 번째 선언의 자리에 parameter와 연결 parameter 변수에다가 argument를 넣는다.매개변수(parameter)도 변수다.매개변수의 개수를 인수보다 적을 경우문제매개변수로 x,y,z을 받아 곱한 값을 반환하는 multiply 함수를

위에서 선언한 변수들을 객체 리터럴로 묶으면배열과 다르게 객체 리터럴엔 각 속성들에 이름을 붙일 수 있음name, nationality, year 등은 속성 이름이고이사벨라, 이탈리아, 1996 등은 속성 값에 해당함속성 값으로 자바스크립트의 모든 값을 넣을 수 있다.

프로그램 절차의 개수는 정해져 있어야 한다.각 절차는 항상 같은 내용이어야 한다.모든 가능성을 고려해야 한다.예시는 절차를 검증하는 데 사용한다.

사용자로부터 값을 전달받음사용자의 확인을 요구사용자에게 경고 메세지를 표시예시

보통 자바스크립트에서 HTML 태그를 가져오는 것을 선택한다고 표현한다. 선택하기 위해서는 특별한 함수와 특별한 방법을 사용한다. 특별한 함수는 document.querySelector이고 사용 방법은 아래과 같다.예시태그가 여러 개 있는 경우, 태그를 모두 선택하고

이벤트를 달 때 사용하는 메서드태그.addEventListener('이벤트 이름', 리스너함수);예시위의 코드에서는 태그를 document.querySelector("button")으로 선택했다. 이 태그에 addEventListener를 붙여 이벤트를 연결할 수 있다

func처럼 함수를 만들어내는 함수를 고차 함수(high order function)라고 한다. 참고로 화살표 함수 문법에 따라 함수의 본문에서 바로 return 되는 값이 있으면 {와 return 을 생략할 수 있습니다. 즉, 아래와 같이 생략이 가능하다.

if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.분기점에서 짧은 절차부터 실행하게 if문을 작성한다.짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.else를 제거한다(이때 중첩 하나가 제거된다.)1번2

0 이상과 1 미만의 수를 무작위로 생성하는 함수1~9까지의 수가 필요한 경우 Math.random()에 9를 곱한 후 1을 더하면 되고 이 숫자를 자연수로 만들려면 내림, 올림, 반올림을 해야한다. 이 경우에는 내림을 한다.자바스크립트에서 숫자의 내림은 Math.fl

배열을 문자열로 바꾸는 함수join()와 같이 세미콜론을 붙이지 않으면 배열을 문자열로 만들 때 ,(콤마)가 생기고 join('')와 같이 사용하면 배열을 문자열로 만들 때 사이에 문자나 공백없이 붙어서 나온다.예시이유?()의 기본값이 (',')이기 때문에.(':')를

정적으로 문서 객체를 생성 : 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성동적으로 문서 객체를 생성 : 자바스크립트로 원래 HTML 페이지에는 없던 문서 객체를 생성(createElement, createTextNode, appendChild, innerHT

document.createElement, document.createTextNode로 만든 태그나 텍스트를 선택한 태그의 자식 태그로 넣는다.appendChild로는 하나만 넣을 수 있고, append를 사용하면 여러 개를 동시에 넣을 수 있다. 또한, append로

예를 들어 를 forEach문으로 바꾸면, > ### forEach 인수로 함수를 받고, 배열의 요소 하나 하나에 인수로 받은 함수를 각각 적용한다. 이때 요소 순서대로 함수를 적용하므로 반복문의 역할을 하게 된다. 즉, forEach 메서드는 내부에서 반복문을 통

자바스크립트의 동기와 비동기 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 수행할 수 있다. 즉, 이전 작업이 완료되어야 다음 작업을 수행할 수 있게 된다. 우리가 프로그래밍을 하면서 일반적으로 각 함수와 코드들이 위에서 아래로 차례로 동작하는 방

1. innerHTML 먼저 innerHTML은 'Element'의 속성으로, element내에 포함 된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScr

Array.prototype.slice() slice() 메서드는 어떤 배열의 start부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다. 이를 다르게 해석하면, slice(start, end) 메서드는 start와 end

setTimeout 안에 넣는 함수는 특정 동작(지정한 시간까지 기다리기) 이후에 추가로 실행되는 함수이므로 콜백 함수로 볼 수 있습니다.참고자바스크립트의 타이머는 정확하지 않다. 자바스크립트는 싱글 스레드 언어이기 때문에 동기 방식으로 구성되어 있어 기본적으로 한 번

변수는 스코프(scope, 범위)라는 것을 가진다. var는 함수 스코프를 가지고, let은 블록 스코프를 가진다.아래의 코드로 예를 들겠다.a를 콘솔로 출력하면 에러가 발생한다. a는 함수 안에 선언된 변수이므로 함수 바깥에서는 접근할 수 없다. 이렇듯 함수를 경계로

setInterval(콜백함수, 시간) "시간(ms)"을 간격으로 "콜백함수"를 반복 호출 하는 함수이다. setTimeout(function, delay time(ms))

위의 이벤트 리스너를 removeEventListener 메서드로 제거해보자.흔히 아래와 같이 작성하는 실수를 한다.removeEventListener는 addEventListener에 넣은 함수와 === 연산을 할 때 결과가 true이어야만 이벤트리스너가 제거가 되는

if 문과 같이 조건을 넣는 곳에 만약 아래와 같이 동일한 변수에 여러 개의 값을 넣는다면includes를 사용하여 코드를 간결하게 할 수 있다.

classList를 이용하면 클래스를 조작하는 다양한 메서드들을 쓸 수 있다.classList.add : 클래스를 필요에 따라 삽입한다.classList.remove : 클래스를 필요에 따라 제거한다.classList.contains : 값이 존재하는지 체크한다. (t

여러 값들이 들어있을 때에 그 값들을 합산한 후 갯수만큼 나눠준다.

덧셈의 경우,a는 누적값, c는 현재값이고 0은 초기값이라서 a(누적값)는 초기값이 된다.즉, a: 0, c: 1 a: 1, c: 2 a: 3, c: 3 a: 6, c: 4값 10이 값을 갯수대로 나누면 평균이 나오기 때문에위와 같이 평균

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있도록 표현하는 것이는 어떤 객체의 속성과 그 속성을 담은 변수의 변수명이 동일할 경우에 사용가능하다.위와 같이 속성과 변수명이 같으면 아래의 코드와 같이 여러 개를 같이 넣을 수 있다.또한, 배열에 대한 구조분

문제5(줄)\*4(칸)짜리 이차원 배열을 만들어보자. 배열의 요소는 모두 1로 만든다.정답

td의 부모 태그는 tr이고, tr의 부모 태그는 table이라고 할 때, td 태그에서 click 이벤트가 발생한다. 이 이벤트가 td의 부모인 tr 태그에서도 동일한 이벤트가 발생하고, table 태그에서도 발생한다. 즉, td 태그에서 발생한 click 이벤트가

parentNode는 현재 태그의 부모 태그를 선택하는 속성이다. target이 td 태그이니 target.parentNode는 tr 태그가 된다. tr 태그(target.parentNode)는 rowIndex라는 속성을 제공하고 td 태그(target)는 cellIn

태그.children은 배열처럼 생긴 객체이다. {0: td, 1: td, 2: td, length:3 }과 같은 모양을 가진 객체로서 children0, children1, children.length 처럼 사용할 수 있어서 배열로 착각하기 쉽다. 이러한 객체를 유사

배열의 차원을 낮추는 메서드로 n차원 배열을 n-1 차원 배열로 낯출 수 있다. 일차원 배열은 이 메서드를 적용해도 그대로 일차원 배열로 유지된다. 차원을 낮추는 게 배열을 평평하게 만드는 것처럼 보여서 flat이라는 이름이 붙었다.반복문의 일종으로 요소를 순화하면서

tr 태그는 몇 번째 줄인지를 알려주는 rowIndex 라는 속성을 제공하고, td 태그는 몇 번째 칸인지를 알려주는 cellIndex 라는 속성을 제공한다.

참조형 데이터는 저장된 프로퍼티를 복사시 그 주솟값을 복사한다.결론적으로 사본과 원본이 같은 주소를 가리키게 됩니다. 그러면 원본이 바뀌면 사본이 바뀌고 사본이 바뀌면 원본이 바뀌는 문제가 생긴다.그래서 기본형 데이터는 그대로 복사하면 되지만 참조형은 그내부의 프로퍼티

window 객체는 브라우저를 가리키는 객체로 브라우저가 브라우저가 제공하는 기본 객체와 함수들은 대부분 window 객체 안에 들어 있습니다. document 객체나 console 객체도 실제로는 winsow.document, window.console이다. wind

객체를 생성하기 위하 템플릿(서식)클래스는 2015년에 자바스크립트에 추가된 문법으로, 이전에는 아래의 코드와 같이 함수로 객체를 만들었다.가장 간단하게 객체를 return 하는 함수를 만들어 객체를 생성한다. 이와 같이 객체를 반환하는 함수를 공장(factory)함수

함수 선언문을 화살표 함수로 바꿨다.함수 선언문일 때만 document가 나오는 이유는, click 이벤트가 발생할 때 addEventListener 메서드가 콜백 함수의 this를 event.target으로 바꿔서 호출하기 때문이다.함수 선언문의 this는 다음과 같

클래스 위주로 프로그래밍하는 것함수를 조합해가며 프로그래밍하는 것순서도 절차대로 프로그래밍하는 것자바스크립트를 사용하면 이 세 가지 방식으로 모두 코딩을 할 수 있다. 어떤 것이 다른 것보다 더 낫다고 말하기는 어렵다. 자신과 어떤 방식이 맞는지, 프로젝트마다 어떤 방

객체들 간의 관계를 구축하는 방법프로토타입에서는 상속 개념을 이용하기 위해서 프로토타입 체인이라는 것을 이용한다. 이 방법은 다소 복잡한 감이 있는 와중에 ES6에서 class를 지원하면서 extends키워드를 통해 상속을 더 쉽게 구현할 수 있게 되었다.객체 지향 프

이벤트 루프

a 함수가 실행되고, 그 안에서 b 함수가 실행된다. 그리고 b 함수 안에서 console.trace 메서드가 실행된다.console.trace 아래에 b, b 아래에 a가 있는데, 이는 호출된 함수 순서의 역순이다. 여기서 a 아래에 anonymous가 있는 것으로

마우스 우클릭 이벤트기본적으로 브라우저 메뉴를 띄우므로 기본 동작을 막으려면 event.preventDefault 메서드를 호출해야 한다.

앞에 있는 것이 참(truthy)인 값이면 뒤 코드를 실행하고, 거짓(falsy)인 값이면 코드를 통째로 undefined를 만들어버린다.객체나 배열뿐만 아니라 함수에도 옵셔널 체이닝을 적용할 수 있다. 속성에 접근하거나 호출하려는 것이 거짓인 값인지 아닌지 의심될 때

어떤 함수의 내부에서 자기 자신을 다시 호출하는 함수재귀 함수를 사용할 때 호출 스택의 최대 크기를 초과하는 경우가 빈번하게 발생한다. 이 때 Maximum call stack exceeding 오류가 발생하는데, setTimeout과 같은 비동기 함수를 사용해 해결할

keydown 키보드 키를 눌렀을 때 발생keyup 키보드 키를 눌렀다 놓았을 때 발생keypress 키보드 키를 계속 누르고 있을 때 발생mousedown 클릭할 때 발생mouseup 클릭했다 뗄 때 발생mousemove 마우스를 움직일 때 발생dblcli

Math.round(실수) - 반올림해당 실수의 소수점 첫번째 자리를 반올림하여 정수로 리턴Math.floor(실수) - 내림해당 실수의 모든 소수점을 버려서 정수로 리턴Math.ceil(실수) - 올림해당 실수의 모든 소수점을 올려서 정수로 리턴Math.abs() -

DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는,가상 메모리에 존재하는 DOM 노드 객체입니다.DocumentFragment 노드를 사용하면 메인 DOM 트리 외부에 경량화된 DOM을 만들 수 있어브라우저 repaint 영향 없이 메모리에서

alert 함수는 현재 진행되는 화면 변경 사항이나 애니메이션을 즉시 멈추고 알림 창을 띄우므로 알림 창이 뜰 떄 마지막 화면 변경 사항이나 애니메이션이 적용되지 않는 경우가 많다. 이럴 때는 setTimeout과 함께 호출해서 마지막 화면 변경 사항이나 애니메이션이

\- 알고리즘은 기본적으로 sequence, selection, iteration/loop로 구성된다.

입력 데이터가 텍스트 파일 형태로 주어지는 경우, 파일 시스템 모듈을 사용한다.기능: 전체 텍스트를 읽어 온 뒤에, 줄바꿈 기호를 기준으로 구분하여 리스트로 변환하기readline 모듈보다는 fs를 이용해 파일 전체를 읽어 들여 처리하기

직접 값을 설정하여 초기화new를 통해 길이가 5이고 모든 원소의 값이 0인 배열 초기화

특정한 원소의 등장 여부를 파악할 때 집합 자료형을 효과적으로 사용할 수 있다.

실수를 출력할 때 소수점 아래 특정 자리에서 반올림할 수 있다.

예약 문자 혹은 특수 문자를 출력하기 위하여 이스케이프 시퀀스를 사용할 수 있다.시퀀스 : \\t 문자 : 탭시퀀스 : \\ 문자 : 역 슬래시시퀀스 : \\" 문자 : 큰 따옴표시퀀스 : \\' 문자 : 작은 따옴표

문자열의 지정된 위치에 해당하는 문자 반환.string.charAt(index)문자열의 개별 문자에 대해 특정 효과 줄 때 유용함문자열 주위의 공백 제거.

tilde 연산자는 비트연산자로 NOT의 기능2진수일 때 0과 1만 뒤바꾸면 됨Math.floor()와 동등하게 쓰이는 연산자Math.floor()와 비교한 \~~의 장단점장점속도 측면에서 \~~ , Math.floor() , parseInt순으로 \~~가 가장 빠른

Number.isInteger() 메소드는 인수의 값이 정수인지 아닌지를 반환해줌전달된 값이 정수이면 true를 아니라면, NaN, Infinity와 같은 값은 모두 false를 반환함

정렬된 배열에서 값이 특정 범위에 해당하는 원소의 개수를 계산할 때에 사용lowerBound(arr,x):정렬된 순서를 유지하면서 배열 arr에 x를 넣은 가장 왼쪽 인덱스를 반환upperBound(arr,x):정렬된 순서를 유지하면서 배열 arr에 x를 넣은 가장 오

최적화 문제를 결정 문제('예' 혹은 '아니오')로 바꾸어 해결하는 기법예시: 특정한 조건을 만족하는 가장 알맞은 값을 빠르게 찾는 최적화 문제일반적으로 코딩 테스트에서 파라메트릭 서치 문제는 이진 탐색을 이용하여 해결할 수 있음파라메트릭 서치 문제의 목적 함수 예시:

console.log(num1); //10000000000console.log(num2); //8

단항 더하기 연산자를 이용해 문자열을 숫자로 변환하는 방법단항 더하기 연산자(+)는 문자열을 숫자로 반환하며 피연산자 앞에 위치단항 더하기 연산자(+)는 문자열을 실수로 반환하는 데에도 사용될 수 있음문자열이 숫자로 변환될 수 없는 경우에는 NaN을 반환비트 부정 연산

toString()을 사용하여 진수를 변환할 수 있음(n).toString(m);10진수 숫자 n을 m진수로 변환하여 문자열로 리턴ES6 문법인 Template String(템플릿 문자열)을 이용해서 숫자를 문자열로 변환템플릿 문자열은 백틱(\`)으로 문자열을 감싸서

현재의 반복문이나 조건문 내부 블록을 실행하다가 중지하고 빠져나오기 위한 문법break;if문에 걸리는 순간 break가 발동되어 더이상 반복문 for 내부 블록을 실행하지 않음반복문 내에서만 사용되며, 반복이 진행되는 도중 continue문을 만나면 반복문의 끝으로

이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있음배열(array)과의 차이점배열은 데이터를 순서있게 저장해서 인덱스(index)를 통해서 특정 위치에 저장되어 있는 데이터에 접근이 가능함 또한 배열에는 동일한 값을 여러 번 저장할 수 있음.

html 문서에서 src 속성의 외부 스크립트 script 를 로딩 할 때 다양한 방법이 존재함 스크립트가 모두 로딩 된 후에서야 사용자들은 스크립트 밑의 페이지를 볼 수 있는데 만약 스크립트의 용량이 크다면 로딩 시간이 오래 걸릴 것이고, 그 시간 동안은 페이지 자

input 셀렉터로 스타일을 주면 텍스트 박스, 버튼, 라디오 버튼 등 모든 input 태그에 적용됨특정한 타입을 선택하여 적용하고 싶으면 셀렉터를 input\[type=타입]으로 사용예시)또한, input창을 선택했을 때만 지정하여 스타일을 적용할 수 있음예시)

알고리즘 문제를 풀다가 소문자, 대문자 판별, 숫자 판별 등의 기능을 구현해야할 때 아스키코드를 유용하게 사용할 수 있음아스키 코드는 0에서 127까지의 숫자를 이용하여 문자를 표현한다. 제어 문자 코드는 0부터 31까지 차지하며, 스페이스 문자부터 인쇄가 가능한 코드

toLocaleString() Date.prototype.toLocaleString() : 날짜를 언어별로 구분하여 나타내는 문자열을 반환 Array.prototype.toLocaleString() : 배열의 요소를 나타내는 문자열을 변환되고 이 문자열은 locale

혹은위와 같이 for문이나 reduce를 사용해서 원소별 빈도수를 체크할 수 있다.

자바스크립트 엔진은 코드 실행 전 실행 컨텍스트를 생성한다.실행 컨텍스트는 두 단계를 통해 생성된다.생성 단계에서 자바스크립트 엔진은 변수 선언을 읽는다.실행 단계에서 자바스크립트 엔진은 별수 값을 할당한다.함수의 렉시컬 환경은 함수가 사용하는 변수들을 둘러싼 환경을

먼저 호이스팅에 코드 실행 시 변수 처리 자바스크립트 엔진이 코드를 읽으면, 생성 단계에서 실행 컨텍스트를 생성한다. 이때 함수 선언문은 실행 단계에서 함수 전체가 실행 컨텍스트에 저장된다. var 변수는 저장 시 undefined로 초기화된다. let, const는

자바스크립트 내장 객체에 대해 알아보자.globalThis는 전역 객체를 지칭하는 변수이다.전역 객체는 환경에 따라 다르다.브라우저 환경은 window, node 환경은 global 객체를 지칭한다.globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른

instanceof 연산자를 사용하면 객체가 특정 클래스에 속하는지 아닌지를 확인할 수 있다. instanceof는 상속 관계도 확인해준다.obj가 Class에 속하거나 Class를 상속받는 클래스에 속하면 true가 반환된다.instanceof는 생성자 함수에서도 사

이분 그래프(Bipartite Graph or bigraph) 노드들을 두개의 집합으로 분할한 뒤에 같은 집합에 속한 정점끼리 서로 인접하지 않는 그래프를 의미한다. 이분 그래프 특징 모든 트리는 이분 그래프 BFS, DFS 탐색을 이용하여 이분 그래프 판별 가능 짝

Node.js 프로세스를 동기적으로 즉시 종료시키는 메서드종료 코드를 지정하지 않은 경우 기본값은 0(정상 종료)이고 대부분의 경우 이 값을 사용하지만 Node.js 종료 시점에 특정한 코드를 반환하고 싶으면 종료 코드를 지정하면 된다.종료 코드의 default는 0이

Microsoft에서 개발한 오픈 소스 언어자바스크립트의 상위 집합자바스크립트의 한계를 해결동적 타입(자바스크립트)을 정적으로 선언할 수 있다.타입 유추를 통한 타입 제어가 가능하다.컴파일 시점에 오류를 포착할 수 있다.JavaScript에서 찾을 수 없는 추가 코드

클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 프로그래밍 기법동적 타입 언어인 JavaScript와 달리 정적 타입 언어인 TypeScript에서는 제네릭을 지원한다. TypeScript로 구현한 Model 클래스는 일반적으로

타입스크립트는 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다.유틸리티 타입은 전역으로 사용 가능하다.종류 \-Partial<T>, Readonly<T> \-Record<K,T>, Pick<T,K> \-Omit<T,K>, Ex

컴퓨터 프로그램을 객체(Object)의 모임으로 파악하려는 프로그래밍 패러다임객체(Object)들은 서로 메시지를 주고 받을 수 있으며 데이터를 처리할 수 있다.프로그램을 유연하고 변경이 용이하게 만든다.프로그램의 개발과 보수를 간편하게 만든다.직관적인 코드 분석을 가

속성 또는 메소드로의 접근을 제한하기 위해 사용TypeScript에는 세 종류의 접근 제어자가 존재한다.(자바와 다르게 package 개념이 없어 default 접근 제어자는 존재하지 않음)public>protected>private프로그램 내에서 선언된 멤버들이 자유

비공개로 설정하려는 속성은 private로 설정하고, 속성값을 읽고 수정하는 getter/setter 함수를 사용한다.속성에 직접 접근해 수정하면 데이터 무결성이 깨질 수 있다.(캡슐화 권장)각 객체의 멤버에 접근하는 방법을 세밀하게 제어할 수 있다.읽기만 가능한 속성

다른 클래스들이 파생될 수 있는 기초 클래스직접 인스턴스화 할 수 없다.abstract 키워드는 추상 클래스나 추상 메소드를 정의하는 데 사용된다.이름과 같이 추상적이기 때문에 직접적인 사용은 불가능하다. 대신 사용하고자 하는 class에서 추상클래스를 상속받아서 사용

인터페이스(Interface) 일반적으로 변수, 함수, 클래스에 타입 체크를 위해 사용된다. 직접 인스턴스를 생성할 수 없고 모든 메소드가 추상 메소드이다. 추상 클래스의 푸상 메소드와 달리 abstract 키워드는 사용할 수 없다. (ES6는 인터페이스를 지원하지 않

컴파일러는 프로퍼티의 두 가지 요소인 필수요소 프로퍼티의 유무, 프로퍼티 타입을 검사한다.?(Optional Properties)와 readonly(Readonly properties)와 같은 예약어로 프로퍼티를 세밀하게 컨트롤 할 수 있다.프로퍼티 선언 시 이름 끝에

JavaScript 객체가 가질 수 있는 넓은 범위의 형태를 기술한다.프로퍼티로 객체를 기술하는 것 외에도, 인터페이스는 함수 타입을 설명한다.함수의 인자의 타입과 반환 값의 타입을 정의한다.함수의 타입을 정의할 때에도 사용한다.타입스크립트 함수는 자바스크립트처럼 함수

객체가 할 수 있는 행위들을 전략(strategy)으로 만들어두고, 동적으로 행위의 수정이 필요한 경우 전략을 바꾸는 것만으로 수정이 가능하도록 만든 패턴이다.자판기 결제 방식을 현금 결제에서 카드 결제로 변경할 때, Pay 메소드 구현 변경이 필요하다.메소드 수정 방

Promise를 활용한 비동기 코드를 간결하게 작성하는 문법async/await 문법으로 비동기 코드를 코드처럼 간결하게 작성할 수 있다.async 함수와 await 키워드를 이용한다.await 키워드는 반드시 async 함수 안에서만 사용해야 한다.async로 선언된

"|"를 사용해 두개 이상의 타입을 선언하는 방식이다.유니온과 제너릭은 둘다 여러 타입을 다룰 수 있다는 공통점이 있다. 단, 유니온은 선언한 공통된 메소드만 사용할 수 있고, 리턴 값이 하나의 타입이 아닌 선언된 Union 타입으로 지정된다.다음 코드는 유니온 타

제너릭에는 원하지 않는 속성에 접근하는 것을 위해 제약조건을 사용할 수 있다. 1\. Constraints: 특정 타입들로만 동작하는 제너릭 함수를 만들 때 사용한다.keyof: 두 객체를 비교할 때 사용한다.제너릭 T에 제약 조건을 설정할 때 사용한다.(문자열이나

객체를 생성하는 인터페이스만 미리 정의하고, 인스턴스를 만들 클래스의 결정은 서브 클래스가 내리는 패턴이다.여러 개의 서브 클래스를 가진 슈퍼 클래스가 있을 때, 입력에 따라 하나의 서브 클래스의 인스턴스를 반환한다.이 디자인 패턴은 객체의 생성과정을 캡슐화하여 클라이

합법적으로 리소스 공유를 할 수 있도록 만들어진 메커니즘으로 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 자원에 접근할때 이와 관련한 에러가 발생한다.MDN에 따르면, 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한

??를 사용하여 여러 피연산자 중 그 값이 ‘확정되어 있는’ 변수를 찾을 수 있다.||는 첫 번째 truthy 값을 반환한다.??는 첫 번째 정의된(defined) 값을 반환한다.null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한

두 개 이상의 프로그램(소프트웨어 시스템)이 통신하기 위해 따라야 하는 규칙API는 특정 프로그래밍 언어로 작성된 라이브러리일 수도 있고 네트워크/프로세스 간 통신 시에 일정 규칙에 맞춰서 요청을 하는 방식이 될 수도 있다. 브라우저의 Web API, fetch, s

앞서 API와 RESTful API에 대해서 알아보았다. •HTTP header: HTTP가 빌트인으로 갖추고 있는 key㎽value 형태㏗정확히는 field name, field value㏘의 데이터. 아무 문자열을 field name으로 사용하면 안된다. 기본 R

SEO(Search Engine Optimization) 검색 엔진 최적화. 네이버나 구글같은 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 보이게 하기 위한 과정이다. SEO 과정 크롤링 : 웹 크롤러를 이용하여 웹 페이지 정보를 가져온

프로젝트를 진행하며 프론트 서버는 client 디렉토리에서, 백 서버는 루트 디렉토리에서 yarn start를 통해 서버를 실행시키는 도중에 concurrently(👉npm 링크)라는 라이브러리를 이용하여 동시에 실행시킬 수 있다는 것을 알게 되었다.동시에 실행하고자

에러메시지에 나와있는 그대로 어떠한 'name'이 재선언 되었기 때문이다.TypeScript는 import나 export가 파일 내에서 사용되지 않으면, 해당 파일을 module(모듈)이 아닌 script(스크립트)로 간주한다. script는 <script />

그렇다면 동기와 비동기가 무엇일까?동기(Syncronous) : 요청을 보낸 후 응답(결과물)을 받아야지만 다음 동작이 이루어지는 방식비동기(Asynchronous) : 요청을 보낸 후 프로세스의 완료를 기다리지 않고 동시에 다른 작업을 처리하는 방식📌 JavaScr

📌 JavaScript는 동기적이고, blocking(블로킹)이며, single-threaded(싱글 스레드)한 언어이다. 그러나 모든 것에서의 특성을 의미하지 않고 오직 한 연산에서의 특성을 의미한다.프로그램은 여러 함수들의 집합이다. 메인 함수가 큰 task를 처

toString(n)메서드에 변환하려는 진법을 전달하면, 전달한 n에 따라서 진법이 변환되어 선언해놓은 10진법의 수를 변환하여 문자열로 반환한다.parseInt('number', n)메서드를 사용해 n진법의 number를 10진법으로 변환할 수 있다.toString(

mdn공식문서에 따르면 Number.isInteger()메서드는 인수의 값이 integer인지 아닌지를 반환해준다. 즉, 인수가 정수이면 true, 그외의 다른 숫자형 데이터 형식이거나 Number에 속하는 특수한 값인 Infinity, NaN은 false