1.브라우저 랜더링 과정
브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다.
이를 위해 다음과 같이 동작한다.
1.브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다.
2.HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다.
3.이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.
cf.
렌더링 엔진 : 렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.
DOM : 문서 객체 모델 / XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
렌더트리 : DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별 되어 생성이 됩니다.
문서 파싱: 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
CSSOM : CSS 객체 모델
브라우저는 HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다 동기적으로 진행
body 요소의 가장 아래에 자바스크립트를 위치시키는 것은 좋은 아이디어이다. 그 이유는 아래와 같다.
HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.
2.호이스팅이란
자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
- var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
- var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
- let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
3.클로저란
내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있는 매커니즘
so 외부함수는 내부함수를 반환하고, 반환된 내부함수는 외부함수에서 선언된 변수를 참조할 때,
참소된 변수가 내부 함수 실행이 끝나도 사라지지 않고 여전히 제대로 된 값을 반환함
4.GET과 POST 차이
GET
GET은 지정된 리소스에서 데이터를 요청하는 데 사용됩니다.
쿼리 문자열(이름/값 쌍)은 GET 요청의 URL로 전송됩니다.
GET 요청에 대한 기타 참고 사항:
GET 요청에는 길이 제한이 있습니다.
GET 요청은 데이터 요청에만 사용됩니다(수정 불가).
POST
POST는 리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는 데 사용됩니다.
POST 요청에 대한 기타 참고 사항:
POST 요청을 북마크에 추가할 수 없습니다.
POST 요청에는 데이터 길이에 대한 제한이 없습니다.
5.this
this의 값은 함수를 호출하는 방법에 의해 결정된다.
this는 누가 실행했냐가 핵심이다. so 호출한 객체가 this이다.
함수의 호출에 개의치 않고 하는 방법으로 bind가 있다. bind로 객체가 묶이면 무조건 묶인 깩체가 this이다.
(이벤트 리스너에 함수를 넘긴거는 함수를 호출했다고 볼 수 없다.)
6.쿠키, 로컬스토리지, 세션스토리지의 차이
1)쿠키
데이터 유효기간 정할 수 있다. 서버와 데이터를 공유하는 용이다. 서버 요청할 때 같이 실려서, SSR때 용이, 쿠키에 미리 필요한 값을 넣어 서버에서 html렌더링시 더 많은 정보 렌더링이 가능해짐
2)웹 스토리지
키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.
데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용
을 줄여 준다.
만료기간의 설정이 없다
- 로컬스토리지(영구)브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있다
- 세션스토리지(임시)
브라우저가 종료되면 SessionStorage도 삭제된다는 것이다.
같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 된다.
cf.클라이언트는 얼마든지 저장된 값을 임의로 수정이 가능하다. 이것은 쿠키와 동일한 개념이다. 그렇다고 쿠키에 비해 별다른 보안 취약점을 더 가진 것은 아니다.
7.Rest API
HTTP 요청을 사용하여 데이터에 액세스하고 사용하는 API (응용 프로그램 인터페이스)의 아키텍처 스타일입니다. 해당 데이터는 리소스와 관련된 작업의 읽기, 업데이트, 생성 및 삭제를 나타내는 GET, PUT, POST 및 DELETE 데이터 유형에 사용할 수 있다.
8.자바스크립트 언어란?
자바스크립트는 어떤 언어인가? 인터프리터, 싱글 스레드 프로그래밍 언어
인터프리터 언어:프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말한다
하지만 실제 사용시 멀티 스레스 처럼 사용하는데.. 어떻게 사용하나요?
웹 워커가 멀티스레스 기능을 지원하여서!
주로 언제 사용하냐면
- 매우 큰 문자 암호화/복호화
- 복잡한 계산
- 매우 큰 배열 정렬 (로딩 시간이 오래걸리는)
비동기적으로 실행되는 것을 동기적으로 코딩하는 방법은?
9.이벤트 버블링
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.
이벤트 캡쳐 - Event Capture
이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.
- 동기적처리, 비동기적 처리
-
동기적 처리(Synchronous)
위에서 아래로 코드가 순차적으로 실행이 되는 것을 동기적 처리
어떤 작업을 요청했을 경우 그 작업이 종료될때까지 기다린 후 다음 작업을 수행하는 방식 -
비동기적 처리(asynchronous)
어떤 작업을 요청했을 경우 그 작업이 종료될때까지 기다리지 않고 다른 작업을 하고 있다가 요청했던 작업이 종료되면 해당 작업에 대한 추가 작업을 수행하는 방식이다.
비동기적 처리는 주로 api요청, 파일읽기이다.
주로 사용되는 함수와 문법으로는 callback 함수와 Promise, async/await 문법
11.callback
콜백 함수는 특정 함수가 끝난 다음에 어떤 작업을 진행하고 싶을 경우 콜백 함수를 사용한다. 사용 방법은 특정 함수의 파라미터로 콜백 함수를 작성하여 넣어주면 된다.
12.Promise
promise는 ES6문법에서 도입된 문법으로 기존의 callback함수의 가독성을 개선시켜 나온 문법이다.
promise는 두 개의 파라미터를 받고 각각 성공의 경우와 실패의 경우를 각각 나눠 어떤 작업을 실행할지 정재주는 문법이다.
비동기 작업의 개수가 많아져도 가독성이 떨어지지 않는다는 점이다.
단점으로는 오류가 발생했을 경우 발생위치를 알기가 힘들고 까다롭다.
promise자체는 동기이나 , then을 만나면 비동기로 인식
13.async/await
async/await 문법은 ES8 문법에서 추가된 문법이다. 기존의 Promise문법을 보완해서 나온 문법이다. 해당 문법을 사용하기 위해서는 함수 앞부분에 async라는 키워드를 입력하여 해당 함수가 비동기 함수라는 것을 선언해줘야 한다. 그런뒤 내부의 Promise의 앞부분에 await키워드를 사용하여 해당 작업이 끝날 때 까지 기다렸다가 다음 작업을 실행한다는 것을 알려줘야 한다. 해당 문법에서 에러가 발생할 때는 try/catch문을 사용하여 에러를 잡을 수 있다.
14.CORS란? 그 대처법은?
CORS란: 웹 브라우저가 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스펙
대처법: CORS 이슈를 리액트에서 proxy를 사용하여 해결할 수 있습니다
이벤트 루프(이걸 모르면 자바스크립트를 아는것이 아니다.)
이벤트 루프는 이벤트 큐에 할당된 함수를 순서에 맞춰 call stack에 할당해주는 역할을 한다.
이벤트 루프가 콜스택이 비어있는지 확인하고 비어있으면 콜백큐(이벤트 큐)에 있는 함수를 우선 순위에 맞춰 콜 스택에 옮긴다.
리액트는 스크립트로 화면을 그리기 때문에 새로고침하면 깜빡인다. 빈 html파일 로드되고 스크립트가 실행되기 때문
SSR은 화면 깜빡임 없고, 렌더링 속도 빠름, seo적용 유리 / 설정 시간 감축 효율
- About Redux
사용이유 : 모든 컴포넌트가 props 없이 state를 직접 꺼내어 쓸 수 있기 때문이다.
상태관리(state 변수 관리)가 용이 (수정 등)(버그가 생겨도 추적이 가능)
state :변수 , reducer: state 수정 방법, state 꺼내 쓰는 방법 , dispatch : state 수정 요청 함수
화살표 함수 : 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다.
참고문서
브라우저 렌더링 과정: https://akdl911215.tistory.com/287
브라우저 동작 원리: https://baek-kim-dev.site/140
이벤트 루프1): https://www.youtube.com/watch?v=QFHyPInNhbo
이벤트 루프2): https://www.youtube.com/watch?v=S1bVARd2OSE
