HTML 상에서 쓸 수 있는 프로그래밍 언어
백틱 = ``, template literal = 템플릿 리터럴, tagged templates 예제
try ~ catch 구문
shorthand-property = 단축 속성명
바디의 괄호 생략, 매개변수의 괄호 생략, 생략하지 않는 경우
API 요청 결과의 타입, 브라우저-서버 간 통신에서 데이터를 전달하는 개방형 표준 포맷
Asynchronous 비동기 실행, Promise 객체의 상태
Synchronous, 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 동기 통신
Destructuring assignment, 구조 분해 할당 구문, 비구조화 할당
TypeScriptdptj Generic을 사용하면 다양한 타입에서 작동하는 재사용 가능한 컴포넌트를 만들 수 있다.
비동기 통신, 조건부 렌더링 { 삼항 연산자, && 연산자, Nullish-coalescing 널 병합 연산자, Optional-chaining 옵셔널 체이닝 }
스프레드 연산자를 사용
이벤트 버블링, 이벤트 캡쳐링, event.currentTarget
사진은 주소 형태이다.이미지를 가지고 있는 컴퓨터가 따로 있고, 그 컴퓨터에서 파일을 다운로드받게 해주는 주소를 만들어준다.그 주소를 알고 있으면 브라우저가 그 주소에 접속해서 이미지 파일을 다운받아와서 그려주는 것이다.관리자 메뉴의 네트워크 탭에서 브라우저가 사진을
this, 동적 this, recsical this
Class, 클래스, 함수, 변수, OOP 객체 지향 프로그래밍
Debouncing 검색에 주로 사용 마지막 요청만 데이터를 전송한다. 특정 작업이 있을 때, 특정 시간 내에 다시 그 작업이 반복되지 않으면 마지막에 한번 실행하는 것이다. 특정 시간이 지날 때까지 재반복이 일어나지 않는 경우 한번 실행한다. ex) 특정 시간: 0.
내부함수에서 외부 함수의 지역변수에 접근하는것을 클로저라고 한다.함수를 리턴하는 함수aaa()의 실행 결과 : bbb 함수aaa()()의 실행 결과 : bbb()의 실행 결과aaa()()는 aaa()가 리턴한 함수가 무엇이든간에 실행시키는 것이기 때문에, 리턴되는 함수
변수 선언 키워드는 var, const, let이 있다.const와 let은 ES6에서 추가되었다.선언과 초기화가 동시에 이루어져, 값을 명시하지 않으면 undefined가 들어간다.스코프를 함수로 제한한다.👉🏻 let 키워드와 다른점: 변수 블록을 고려하지 않고
JavaScript, Node.js
Regular_Expressions 정규표현식 = 정규식 원하는 패턴에 일치하는 내용이 존재하는지 검증한다. 문자열 데이터가 현재 페이지에 적합한 용도로 사용되는지 체크하는데 유용한 JS 기능이다. String의 match(), matchAll(), replace(
정의 단계에서 자신을 재참조하는 함수를 뜻한다. (함수 내부에서 자기 자신을 호출하는 함수이다.)반복문을 돌리듯이 끊임없이 자신을 호출하다가 특정 조건이 되면 빠져나온다.반드시 함수를 종료하는 조건을 만들어줘야 한다!함수가 끝날 때까지 함수 호출 이후의 명령문이 수행되
unflatten은 중첩된 배열을 의미한다.flatten은 중첩이 없는 배열을 의미한다.모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성한다.depth: 중첩 배열 구조를 평탄화할 때 사용할 깊이 값. 기본값은 1반환 값: 하위 배열을 이어
map, setTimeout 등버튼에 클릭 이벤트가 발생하면 이벤트 핸들러가 콜백함수를 호출한다.로직에서 나온 값을 콜백함수에 인자로 넘겨줄 수 있다.
안에 적은 내용("aaa")이 같은 console.time과 console.timeEnd 사이에 걸린 시간을 알 수 있다. 시작 시간과 끝나는 시간의 차를 구한다.
Reactive eXtension함수형 프로그래밍을 통한 비동기 데이터 흐름에 중점을 둔 패러다임인 반응형 프로그래밍을 쉽게 적용할 수 있도록 도와주는 라이브러리반응형 프로그래밍: 비동기적인 데이터의 흐름을 관찰하고 처리하는 기법이다.언어 별로 라이브러리를 지원해서 R
FileReader, 이미지 성능 최적화
Promise와 Promise.all 속도 비교, 이미지 성능 최적화
Scraping 한번 가져오기 라이브러리 : [Cheerio] Crawling 정기적으로 가져오기 라이브러리 : [Puppeteer] 브라우저에서 백엔드에 HTTP 통신을 해서 데이터를 받아온다. (HTTP : Hyper Text transfer protocol,
JS 코드를 실행하는 프로그램 혹은 인터프리터를 의미한다.웹 브라우저를 만드는데 기반을 제공하는 구글에서 개발한 오픈소스 JS 엔진이다.웹 브라우저 내부에서 JS의 속도 개선을 위해 고안되었다.속도 향상을 위해 js 코드를 더 효율적인 머신 코드로 번역한다.JS 코드
연관 내용\[Jest]애플리케이션이 요구사항에 맞게 동작하는지 검증하는 행위DB에 데이터를 입력하는 API 개발 👉🏻 API 호출 👉🏻 DB값 검증디자인 시안에 맞게 HTML/CSS 작성 👉🏻 브라우저에서 실제 렌더링된 결과 확인새로운 기능을 추가하기 위해
Jest, TDD, Unit Test, Snapshot Test, Component Test, describe, cypress test
브라우저 vs Node.js, 클라이언트 사이드 Web API, 개발자 도구의 기능, nom, vac, code runner, live server
프로그래밍, 컴퓨팅 사고, 프로그래밍 언어, 기계어, 인공어, 컴파일러, 인터프리터
크로스 브라우징 이슈, ECMAScript, 클라이언트 사이드 Web API, Ajax, jQuery, V8 엔진, Node.js, SPA 프레임워크, 인터프리터 언어 vs 컴파일러 언어
메모리, 메모리 주소, 변수, 식별자, 실행 컨텍스트, 호이스팅
값, 리터럴, 표현식, 문, 세미콜론
데이터 타입의 필요성, 동적 타이핑, 숫자, 문자열, 불리언, undefined, null, 심벌, 객체, BigInt
산술 연산자, 할당 연산자, 비교 연산자, 논리 연산자, 쉼표 연산자, typeof 연산자, 지수 연산자, instanceof 연산자, delete 연산자
블록문, switch문, 폴스루, do…while문, 레이블 문
암묵적 타입 변환, Falsy 값, Truthy 값, 명시적 타입 변환
단축 평가, 논리곱 연산자, 논리합 연산자
객체, 객체 리터럴, 프로퍼티 축약 표현, 계산된 프로퍼티 이름, 메서드 축약 표현, 마침표 표기법, 대괄호 표기법, 프로퍼티 삭제
얕은 복사, 깊은 복사, 값에 의한 전달, 참조에 의한 전달
전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.전역 변수의 선언문은 선언문이 어디에 있는 상관 없이 가장 먼저 실행된다.(코드가 한 줄씩 순차적으로 실행되는 시점인 런타임이 아닌 런타임 이전 단계에서 JS 엔진에 의해 먼저 실행된다.)전역 코드는 함수 호출과
임시 URL을 생성하는 두 가지 방법을 알아보자!createObjectURL로 생성한 이미지는 가짜 URL이다.👉🏻 다른 브라우저에서는 접근이 불가능하다.아래와 같은 형태의 url이 생성된다.FileReader로 생성한 이미지 URL은 진짜 URL이다!👉🏻 다른
서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신요청이 순차적으로 진행되어야 할 때 사용한다.서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신여러 가지 요청을 동시에 처리할 때 사용한다.비동기 실행 방식에서 동기 실행 방식으로 변경해준다.awa
HTML 요소들을 조작하는 JavaScript 라이브러리미리 작성된 JavaScript 코드를 모아둔 것import<head> 태그 안에 아래 script 태그를 붙여넣는다.값을 가져오기를 원하는 태그에 id 부여$(' \* $('$(' \* $('\`$('
Asynchronous JavaScript and XML비동기적인 웹 애플리케이션의 제작에 쓰이는 웹 개발 기법jQuery를 import해야 사용할 수 있다.🚨 jQuery가 import 되어있지 않은 경우 에러Uncaught TypeError: $.ajax is n