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