General
브라우저의 동작 원리
- HTML 파싱 후, DOM 트리 구축
- CSS 파싱 후, CSSOM 트리 구축
- DOM과 CSSOM을 조합하여 렌더트리 구축
- 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산
- 계산한 위치와 크기를 기반으로 화면에 그림
HTML이 렌더링 중 Javascript가 실행되면 렌더링이 멈추는 이유
HTML 파서는 스크립트 태그를 만나게되면 렌더링 제어 권한을 자바스크립트 엔진으로 넘겨주게 되고, 문서를 파싱하는 과정을 중단한다.
자바스크립트의 엔진의 권한이 끝나면 렌더링 과정으로 다시 돌아가서 중단된 시점부터 다시 파싱을 시작한다.
따라서 스크립트 소스는 body태그 끝에 두는 것을 권장한다.
Dom, Bom
Bom (Browser Object Model)
브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델
전역객체로 window가 있으며 하위 객체들로 location , navigator , document , screen , history 가 포함되어 있다.
DOM (Document Object Model)
웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델
최상위 인터페이스로 Node가 있으며 DOM을 다루기 위해선 getElementsById , querySelector , firstElementChild 등과 같은 브라우저가 제공하는 DOM API를 사용하면 된다.
SPA, MPA, CSR, SSR의 차이점
- SPA (Single Page Application)
하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션
웹 애플리케이션 : 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 프로그램
- MPA (Multiple Page Application)
사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션
전통적인 방식을 이용한다면, SPA가 사용하는 렌더링 방식은 CSR이고, MPA가 사용하는 렌더링 방식은 SSR이다.
-
CSR
브라우저가 서버에 HTML과 JS 파일을 요청한 후 로드되면 사용자의 상호작용에 따라 JS를 이용해서 동적으로 렌더링을 시킨다.-
장점
첫 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자 경험(UX)이 좋다.
서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다. -
단점
모든 스크립트 파일이 로드될 때까지 기다려야 한다. (빈 화면이 보임)
검색엔진의 검색 봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(Search Engine Optimization)의 문제가 있다. (구글 봇의 경우는 JS를 지원하지만, 다른 검색엔진의 경우 그렇지 않기 때문에 문제가 된다.)
-
-
SSR
SSR에선 브라우저가 페이지를 요청할 때마다 해당 페이지에 관련된 HTML, CSS, JS 파일 및 데이터를 받아와서 렌더링을 시킨다.-
장점
초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다.
JS를 이용한 렌더링이 아니기 때문에 검색엔진 최적화가 가능하다. -
단점
매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 SPA에 비해서 좋지 않다.
서버에 매번 요청을 하기 때문에 서버의 부하가 커진다.
-
HTML
컨텐츠의 구조를 정의하는 마크업 언어.
브라우저 저장소의 차이점
cookie vs localStorage vs sesseionStorage
cookie는 서버와 통신을 하고, 나머지는 클라이언트에서만 제어합니다.
localStorage는 지울때까지 데이터가 남아있는 반면 sessionStorage는 탭을 닫으면 데이터가 사라집니다.
CSS-IN-JS
CSS를 JS상수에 저장해서 사용하는 방법입니다.
이렇게 저장한 상수는 마치 HTML 태그처럼 사용할 수 있습니다.
태그에 의미를 부여할 수 있고, 코드 길이가 짧아져 읽기 쉬운 코드가 됩니다.
CSS
display
none, block, inline, inline-block (width적용가능), flex
Javascript
싱글 스레드 언어.
스레드
cpu의 기본단위, 프로세스 내에서 프로그램 명령을 실행하는 기본 단위이자 흐름
싱글스레드
하나의 프로세스에서 하나의 스레드를 실행한다.
여러개의 cpu를 활용하지 못한다.
var let const 차이점
- var : 재선언 가능 / let, const : 재선언 불가
- var, let : 재할당 가능 / const : 재할당 불가능
호이스팅
클로저
스코프
참조대상의 식별자를 찾아내기위한 규칙
이벤트 버블링
특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성
이러한 경우 event.target이 아닌 event.currentTarget을 사용하여 버블링을 막아 줄 수 있습니다.
currentTarget : 이벤트 리스너가 달린 요소
target : 실제 이벤트가 발생하는 요소
이벤트 캡쳐링
캡쳐링은 버블링과 반대로 상위에서 하위로 이벤트가 전파되는 단계
forEach() 와 map()
forEach() 메소드는 아무것도 리턴하지 않는다(undefined).
모든 Array 요소가 제공된 함수로 호출될때 새로운 array를 생성합니다.
this
클래스 자체를 의미
this는 class 내 모든 것들에 접근하는데 이때, bind(this)를 통해 클래스 내부의 요소를 명시하지 않으면 최상단(window)을 this로 인식하게 된다.
그때그때마다 누가 실행을 시켰느냐에 따라 다르다.
타입스크립트
자바스크립트는 타입이 엄격하지 않습니다.
변수나 상수를 만들면 처음에 문자를 넣었다가, 나중에 숫자를 넣는 등 자유자재로 변환이 가능합니다.
타입스크립트를 이용해 각 변수에 타입을 지정해주고 나면, 타입에 맞지 않는 값을 할당시 에러가 나게 됩니다.
Arrow 함수
파라미터가 하나라면 소괄호를 생략가능합니다.
중괄호 안에 return 한줄 뿐이라면 중괄호와 return도 생략가능합니다.
내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용합니다.
this값은 함수를 만나면 항상 변하는데 arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 씁니다.
this의 뜻이 달라지는 것 처럼 일반 function과 용도가 완전 같지 않기 때문에
일반 function을 항상 대체할 수 있는 문법이 아닙니다.
네트워크
주소창에 URL을 입력하면 일어나는 일
- 브라우저 주소창에 url을 입력한다.
- 브라우저가 url의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인한다.
- 만약 요청한 url이 캐시에 없다면, ISP의 DNS 서버가 DNS 쿼리로 url을 호스팅하는 서버의 IP 주소를 찾는다.
- 브라우저가 해당 서버와 TCP 연결을 시작한다.
- 브라우저가 웹서버에 HTTP 요청을 보낸다.
- 서버가 요청을 처리하고 응답을 보낸다.
- 브라우저가 HTML 컨텐츠를 보여준다.
쿠키와 세션
쿠키란 클라이언트의 웹 브라우저에 저장되는 작은 데이터 조각으로 서버가 클라이언트의 요청을 식별하는데 사용된다. 쿠키를 활용해서 사용자를 구분하는게 매우 유용하지만, 클라이언트가 수정할 수도 있고 해커가 탈취할 수도 있기 때문에 보안에 취약하다.
세션이란 브라우저가 서버에 연결되어 있는 동안 유지하는 데이터 집합이다. 사용자가 웹 사이트에 방문하여 서버에 요청을 보내게 되면, 사용자의 정보를 서버에 저장하고 그 정보를 식별할 수 있는 "세션 ID"를 Set-Cookie 헤더로 클라이언트에게 전송한다.
기타
Http와 Https 통신 방식의 차이
http 프로토콜에 보안기능을 추가한 것입니다.
http: 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 기초적인 프로토콜.
서버에서 브라우저로 전송되는 정보가 암호화 되지 않는 점이 문제점.
https: SSL을 사용함으로써 문제를 해결했습니다.
Rest API
HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.
모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다.
자원을 구별하는 ID는 ‘/groups/:group_id’와 같은 HTTP URI 다.
HTTP 프로토콜은 GET, POST, PUT, DELETE 와 같은 메서드를 제공한다.
JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.
GET, POST 차이
사용목적 : GET은 서버의 리소스에서 데이터를 요청할 때, POST는 서버의 리소스를 새로 생성하거나 업데이트할 때 사용한다.
요청에 body 유무 : GET 은 URL 파라미터에 요청하는 데이터를 담아 보내기 때문에 HTTP 메시지에 body가 없다. POST 는 body 에 데이터를 담아 보내기 때문에 당연히 HTTP 메시지에 body가 존재한다.
GET, PUT, POST, PATCH, OPTION, DELETE
- get : 리소스의 조회에 사용한다.
- post : 메시지 바디를 통해 서버로 요청 데이터를 전달한다.
- put : 목적 리소스를 현재 메시지의 값으로 생성하거나 만약 존재한다면 기존 리소스를 삭제하고 덮어쓰기 한다.
- patch : 리소스를 부분적으로 변경한다.
지원하지 않는 경우도 있어 이런 경우 POST로 대체하여 사용 - delete : 특정 리소스의 삭제를 요청하는 데 사용
Restful
‘REST API’를 제공하는 웹 서비스를 ‘RESTful’하다고 할 수 있다.
즉, REST 원리를 따르는 시스템은 RESTful이란 용어로 지칭된다.
응답상태 코드
1xx : 전송 프로토콜 수준의 정보 교환
2xx : 클라어인트 요청이 성공적으로 수행됨
3xx : 클라이언트는 요청을 완료하기 위해 추가적인 행동을 취해야 함
4xx : 클라이언트의 잘못된 요청
5xx : 서버쪽 오류로 인한 상태코드
동기, 비동기
동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 A작업이 모두 진행 될때까지 B작업은 대기해야한다.
비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다.
Callback, Promise, await /async
인자로 받아들인 함수를 다시 호출하는 기능을 callback이라고 부릅니다.
callback을 4번5번 연속적으로 호출하게 될 경우 callback hell에 빠질 수 있다.
Promise는 작업이 끝난 후 실행할 함수를 제공하는 것이 아니라 Promise 자체 메소드인 .then()을 호출하게 됩니다.
비동기 처리 시점을 명확하게 표현할 수 있고, 콜백 지옥의 문제에서 비교적 자유롭습니다.
async라는 키워드를 붙여 사용해야 하며 선언된 async 함수 안에서만 await 키워드를 사용할 수 있습니다.
await는 동기 통신을 위해 사용합니다.
즉 await를 사용함으로써 비동기 처리 함수인 updateBoard를 동기처리 함수로 바꿔주어 제대로 등록이 될때까지 기다려주는 역할을 하는 것 입니다.
try/catch를 이용하여 예외 처리가 가능합니다.
ajax
비동기적으로 JS를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법
기존의 페이지를 전부 로딩하는 방식이 아닌 일부만 업데이트 하는 방식이다.
Node.js
단일쓰레드 기반 비동기방식
자바스크립트를 동일하게 사용해서 서버단 로직을 처리할 수 있다는게 가장 큰 장점
간단한 로직이 어울림
call by val 와 call by ref
Call by value(값에 의한 호출)
장점 : 복사하여 처리하기 때문에 안전하다. 원래의 값이 보존이 된다.
단점 : 복사를 하기 때문에 메모리가 사용량이 늘어난다.
Call by reference(참조에 의한 호출)
장점 : 복사하지 않고 직접 참조를 하기에 빠르다.
단점 : 직접 참조를 하기에 원래 값이 영향을 받는다.
rest-API vs graphql-API
rest-API 는 응답 결과로 back-end 개발자가 만든 함수에서 보내주는 모든 데이터를 받아야만 합니다.
반면에, graphql-API는 back-end 개발자가 만든 함수에서 필요한 데이터만 골라 받을 수 있습니다.
rest-API 에 요청하는 요청담당자는 axios 입니다.
graphql-API 에 요청하는 요청담당자는 apollo-client 입니다.
React
React 장점
- 컴포넌트 기반(Component-based)이다.
캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있음 - 모바일에서도 사용 가능
React-Native
Virtual DOM 을 사용하여 UI를 빠르게 랜더링한다.
단방향 데이터 흐름(Flux)를 갖는다
GQL 장단점
-
장점: 하나의 Endpoint
한 개의 Endpoint를 지님으로써, API나 View를 따로 구성할 필요가 없어진다.요청을 보낼때는 정해진 한 군데로만 요청을 보내면 되고, 그 외의 API를 신경쓸 필요가 없어져, 유지보수가 용이해진다. -
단점: 요청 필터링의 어려움
GraphQL은 클라이언트가 필요한 데이터를 스스로 결정하여 요청하게 된다.따라서 GraphQL의 다양한 요청형태에서 잘못된 요청을 필터링하기가 까다롭다.
Virtual Dom
실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다.
React Hook
16.8버전부터 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었습니다. 이 도구를 Hooks(훅) 이라고 부릅니다.
대표적인 Hooks 에는 useState, useEffect가 있습니다.
props
props는 부모가 가지고 있는 변수 , 함수를 자식한테 물려주는 것 입니다.
리액트는 데이터 흐름이 단방향 구조입니다.
props가 부모에서 자식으로만 흐른다는 것 입니다.
