다음 내용은 인프런에서 공부한 내용을 복습하는 차원에서 기록한 것입니다.
출처 : https://www.inflearn.com/course/%EB%85%B8%EB%93%9C-js-%EA%B5%90%EA%B3%BC%EC%84%9C
💻 2.1 호출 스택, 이벤트 루프
📌 호출 스택
✏️ 호출 스택(함수의 호출, 자료구조의 스택)
- Anonymous은 가상의 전역 컨텍스트(항상 있다고 생각하는게 좋음)
- 함수 호출 순서대로 쌓이고, 역순으로 실행됨
- 함수 실행이 완료되면 스택에서 빠짐
- LIFO 구조라서 스택이라고 불림
✏️ 위 코드의 동작 순서는?
- 시작 -> 끝 -> 3초 후 실행
- 호출 스택만으로는 설명이 안 됨(run은 호출 안 했는데?)
- 호출 스택 + 이벤트 루프로 설명할 수 있음
📌 이벤트 루프
✏️ 이벤트루프 구조
- 이벤트 루프: 이벤트 발생(setTimeout 등) 시 호출할 콜백 함수들(위의 예제에서는 run)을 관리하고, 호출할 순서를 결정하는 역할
- 태스크 큐: 이벤트 발생 후 호출되어야 할 콜백 함수들이 순서대로 기다리는 공간 (호출 스택이 비어있을 때 호출 스택으로 함수를 이동 시킴)
- 백그라운드: 타이머나 I/O 작업 콜백, 이벤트 리스너들이 대기하는 공간. 여러 작업이 동시에 실행될 수 있음
💻 2.2 ES2015+
📌 const, let
✏️ const는 상수
- 상수에 할당한 값은 다른 값으로 변경 불가
- 변경하고자 할 때는 let으로 변수 선언
- 상수 선언 시부터 초기화가 필요함
- 초기화를 하지 않고 선언하면 에러
📌 템플릿 문자열
✏️ 문자열을 합칠 때 + 기호때문에 지저분함
- ES2015부터는 ` (백틱) 사용 가능
- 백틱 문자열 안에 ${변수} 처럼 사용
📌 객체 리터럴
✏️ 훨씬 간결한 문법으로 객체 리터럴 표현 가능
- 객체의 메서드에 :function을 붙이지 않아도 됨
- { sayNode: sayNode }와 같은 것을 { sayNode }로 축약 가능
- [변수 + 값] 등으로 동적 속성명을 객체 속성 명으로 사용 가능
📌 화살표 함수
✏️ 화살표 함수가 기존 function() {}을 대체하는 건 아님(this가 달라짐)
- logFriends 메서드의 this 값에 주목
- forEach의 function의 this와 logFriends의 this는 다름
- that이라는 중간 변수를 이용해서 logFriends의 this를 전달
✏️ forEach의 인자로 화살표 함수가 들어간 것에 주목
- forEach의 화살표함수의 this와 logFriends의 this가 같아짐
- 화살표 함수는 자신을 포함하는 함수의 this를 물려받음
- 물려받고 싶지 않을 때: function() {}을 사용
📌 구조분해 할당
✏️ 기본적인 구조분해 할당 방법
📌 클래스
✏️ 기존의 프로토타입 문법으로 객체를 상속하는 과정
- 프로토타입도 객체지향 프로그래밍에서 필수로 사용하기에 알아야 함
✏️ 전반적으로 코드 구성이 깔끔해짐
📌 프로미스
✏️ 콜백 헬이라고 불리는 지저분한 자바스크립트 코드의 해결책
- 프로미스: 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체
- Then을 붙이면 결과를 반환함
- 실행이 완료되지 않았으면 완료된 후에 Then 내부 함수가 실행됨
- Resolve(성공리턴값) -> then으로 연결
- Reject(실패리턴값) -> catch로 연결
- Finally 부분은 무조건 실행됨
✏️ 프로미스의 then 연달아 사용 가능(프로미스 체이닝)
- then 안에서 return한 값이 다음 then으로 넘어감
- return 값이 프로미스면 resolve 후 넘어감
- 에러가 난 경우 바로 catch로 이동
- 에러는 catch에서 한 번에 처리
✏️ Promise.resolve(성공리턴값): 바로 resolve하는 프로미스
✏️ Promise.reject(실패리턴값): 바로 reject하는 프로미스
✏️ Promise.all(배열): 여러 개의 프로미스를 동시에 실행
- 하나라도 실패하면 catch로 감
- allSettled로 실패한 것만 추려낼 수 있음
📌 async/await
✏️ async/await으로 한 번 더 축약 가능
- async/await는 Promise의 문법을 간단하게 만든 것
✏️ async/await에서 catch를 다루는 법
- async/await도 Promise이기에 리턴값은 then으로 받아야 함
- async/await에서는 성공(then)일 때는 그냥 사용이 가능하나, 실패(catch)인 경우에는 try~catch문을 사용해야 함
- const name = await main() 으로도 사용 가능
📌 Map/Set
✏️ Map은 객체와 유사한 자료구조
- {키: 값} 구조가 필요할 때 일반적인 객체 리터럴인 const obj = {...} 와 같은 구조를 쓰지말고 Map 객체를 사용하는 게 좋다.
✏️ Set은 배열과 유사한 자료구조
- 배열의 완전 대체는 아님
- 기존 배열의 중복을 제거할 때 주로 사용
📌 널 병합, 옵셔널 체이닝(활용 중요)
✏️ ??(널 병합, nullish coalescing) 연산자
- || 은 falsy값(0, null, undefined, false, NaN, '')일 때 뒤로 넘어감
- && 은 true일 때 뒤로 넘어감
- || 대용으로 사용되며, falsy 값 중 null과 undefined만 따로 구분함
✏️ ?.(옵셔널 체이닝, optional chaining) 연산자
- Null이나 undefined의 속성을 조회하는 경우 에러가 발생하는 것을 막음
- c?.d 에서 c값이 null이나 undefined라면 에러가 생기는게 아니라 undefined를 반환
💻 2.3 프런트엔드 자바스크립트
📌 AJAX
✏️ AJAX(Asynchronous JavaScript and XML)
- 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능
- 클라이언트와 서버간에 XML 데이터를 주고받는 기술
- AJAX 요청 시 Axios 라이브러리를 사용하는 게 편함
✏️ 비동기 방식이란?
- 웹페이지를 리로드 하지 않고 데이터를 불러오는 방식
- 웹페이지에서 기타 코드들을 요청할 경우, 웹페이지를 리로드 하면서 불필요한 리소스가 낭비가 되는데, 비동기 방식을 이용하면 필요한 데이터만 불러오면서 리소스 낭비를 줄일 수 있음
- JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있음
✏️ GET 요청(데이터 불러오기)
- axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 됨
- 프로미스 기반 코드라 async/await 사용 가능
✏️ POST 요청(데이터를 담아 서버로 전송)
📌 FormData
✏️ HTML form 태그에 담긴 데이터를 AJAX 요청으로 보내고 싶은 경우
- FormData 객체를 사용 (뒤에서 예제를 다를 예정)
📌 encodeURIComponent, decodeURIComponent
✏️ URL, URI
- URL은 해당 주소 서버의 파일을 가리키는 것
- URI는 해당 수조 서버의 자원을 가리키는 것
✏️ 가끔 주소창에 한글 입력하면 서버가 처리하지 못하는 경우 발생
- encodeURIComponent로 한글 감싸줘서 처리
✏️ 노드를 encodeURIComponent하면 %EB%85%B8%EB%93%9C가 됨
- decodeURIComponent로 서버쪽에서 한글 해석
📌 data attribute와 dataset
✏️ HTML 태그에 데이터를 저장하는 방법
- 서버의 데이터를 프런트엔드로 내려줄 때 사용
- 태그 속성으로 data-속성명
- 자바스크립트에서 태그.dataset.속성명으로 접근 가능
- data-user-job -> dataset.userJob
- data-id -> dataset.id - 반대로 자바스크립트 dataset에 값을 넣으면 data-속성이 생김
- dataset.monthSalary = 10000 -> data-month-salary=“10000”
조금씩 정리하자!!!