이벤트 루프
이벤트, 메시지를 기다리는 디자인 패턴
- 자바스크립트는 싱글스레드 언어로 하나의 호출스택만 사용.
=> 동시성을 구현하기 위해 이벤트루프 사용
SEO
검색엔진 최적화
- link 케노니컬 태그를 붙혀줘야한다.
- img 태그엔 alt
- head엔 메타데이타
- title도 페이지마다 달라야한다.
페이지 속도개선
https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect
다음 사이트에 URL을 입력하고 어디의 속도를 조절해야되지는 판단한다.
구조화
https://search.google.com/test/rich-results?hl=ko
각각의 태그들이 HTML5의 기본에 맞게 설계되어야 한다.
사이트맵의 정기적인 관리
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo.html</loc>
<lastmod>2018-06-04</lastmod>
</url>
</urlset>사이트맵을 xml파일의 형태로 정기적으로 관리해야한다.
트레픽 모니터링
https://search.google.com/search-console/welcome?hl=ko
구글 서치콘솔로 트래픽에 대한 모니터링을 진행한다.
실행컨텍스트
함수가 실행되는 환경
- JavaScript는 싱글스레드 언어로 하나의 스택으로 실행된다.
실행 컨텍스트의 종류
- Global execution context = GO : 빌트인객체, BOM, DOM, 전역변수
-this object
-window object - Function execution context = AO : 함수선언, 매개변수, 변수
1. 생성단계
GO, AO, thos 형성
- Scopechain => 이 때문에 호이스팅이 가능
- 값이 들어가 있지 않은 초기값(var는 선언과 초기화, let, const는 선언)
2. 실행단계
GO, AO, thos
- 값이 할당
- This는 함수호출 패턴 또는 lexical scope에 따라 값이 정해짐
JS 모듈방식
- 모듈화를 하는 이유
캡슐화, private public으로 나눌수 있고 유지보수성, 테스트, 수정 용이 레이지로드를 할 수 있느 근간이 된다
ESM
ES6 module = ECMA SCRIPT module
export, import를 통해 module화 하여 사용
CJS
CommonJS
exports와 require을 하여 module화 하여 사용(Node.js에서 사용)
브라우저렌더링과 가상돔
브라우저 표기과정
- 사용자 인터페이스 => 브라우저 엔진 => 렌더링 엔진 =>JS해석기, 네트워크 통신, UI백엔드
사파리, 크롬의 웹킷엔진 구성
Dom Tree생성
- html페이지는 div span등의 요소를 가진다.
- 각요소는 Node로 설정되어 트리형태로 저장되는데 이를 DOM트리라고 한다.
렌더트리와 렌더레이어 생성
- 각각의 노드는 CSS파서에 의해 정해진 스타일 규칙이 적용되어 있다.
- 이 규칙에 따라 CSSOM이라는 트리가 만들어지고 미리 만들어놓은 DOM트리 내에 있는 노드와 함께 렌더객체가 생성되며 이들이 모여 병렬적인 렌더트리가 생성된다.
- 이때 display:none이 포함된 노드는 지워지고 font-size등 상속적인 스타일은 부모 노드에만 위치하도록 하는 최적화 과정을 거쳐 렌더레이어가 완성된다.
렌더레이어를 대항으로 Layout 설정
- 이때 좌표는 부모를 기준으로 설정
렌더레이어를 대상으로 칠하기
- 픽셀마다 점을 찍듯 칠한다. => 레스터화
레이어 합치기 및 표기
- 각각의 레이어로부터 비트맵이 생성되고 GPU에 텍스처로 업로드
- 텍스처들은 서로 합쳐져 하나의 이미지로 렌더링 => 화면 출력.
Virtual Dom
가상적으로 UI를 저장했다가 실제 DOM과 연동하는 프로그래밍 컨셉으로 잡은 자바스크립트 객체를 뜻함
- 자바스크립트로 이루어진 DOM과 비슷한 객체 DOM APIx, DOM 프로퍼티o를 이용해 수많은 요소가 수정되어도 딱한번 수정
- 변화가 일어난 요소만 새로 랜더링
Scope
변수가 접근할수 있는 영역
var => 함수 scope를 가진다
let, const => 블록 scope를 가진다
call by value
자바스크립트는 함수의 매개변수로 넘길 때 매개변수가 복사되어서 call by value값으로 넘겨진다.
- 기본형인 경우 함수 바깥의 변수와 상관없이 동작하나 참조형인 경우 함수 바깥의 변수도 변경된다.
CORS
CORS
cross origin resource sharing
Sop
same origin policy
CORS 에러
- 개발할때 proxy 서버를 설정할때 프론트단과 서버단의 origin이 다르면 생기는 에러
- White list를 cors뒤에 만들어준다.
- get, post, head, content-type header 같은 Simple request가 아니라면 option 메서드로 cors인지 한번더 요청하는 Preflight request를 하게됨.
- put이나 delete는 Preflight request를 한다.
Access-Control-Allow-Credentials = true
cookies, authorization headers에 JWJ토큰으로 인증값을 보낼 때
- 서버단에선 credentials: true
- 프론트단에서는 withCredentals : true
- 민감한 문제기 떄문에 cors에 *를 넣으면 에러가 뜬다. => 서버와 프론트가 같게 만들어주거나 origin을 걸어서 해결
Axios
axios는 Promise 기반의 HTTP 비동기 통신 라이브러리로 get,delete,post,put,patch를 지원
기본인스턴스를 커스텀하게 설정 가능
axios.create({
baseURL:host
})baseURL, headers, params, timeout, auth, xsrf토큰까지 JSON으로 설정 가능
요청을 취소해야 할때는 axios의 cancelToken을 활용
인터셉터
- response를 받기전 공통된 로직을 마치 미들웨어 처럼 넣을 수 있다.
- 인터셉터를 설정해 놓지 않으면 매번 요청을 할 때마다 에러핸들링 함수를 정의해주어야 한다.
쉬운참소
- reponse에 대해 data나 status코드를 받아올수 있다.
