브라우저
-
브라우저 주소창에 url 검색
-
DNS가 실제 서버와 연결
-
서버에서 index.html 파일을 클라이언트로 전송
-
브라우저는 텍스트로 이루어진 index.html 파일 파싱
(HTML 파싱 하다 중간 중간 CSS 파싱 또는 JS 실행) -
Render Tree (DOM + CSSOM) 완성해서 웹에 랜더링
-
Layout : 뷰포트 내에서 각 노드의 정확한 위치와 크기 계산
-
Paint
호이스팅이란?
선언 부가 최상단으로 끌어올려지는 현상
클로저란?
함수와 해당 함수가 선언된 렉시컬 환경의 조합
외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수
- 전역 변수의 사용을 대체
- 정보 은닉
this
함수를 호출할 때 범위에 따라 결정됨
- 전역 범위: 전역객체
- 함수 내부: 전역객체
- 객체에 속한 메서드: 해당 객체
- 메서드의 내부함수: 전역객체
- 생성자: 생성자로 인해 생성된 새로운 객체
브라우저 저장소
cookie
- 용량이 적음
- 암호화 X
localStorage
- 영구적으로 저장 ( 자동 로그인 )
sessionStorage
- 브라우저를 닫으면 정보 삭제
이벤트 버블링
이벤트가 발생했을 때 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정
HTML 구조상 자식 요소에서 발생한 이벤트가 상위 부모 요소에 영향을 미침
e.stopPropagation타입스크립트
- 정적타입으로 컴파일 단계에서 오류 확인 가능
- 객체지향 프로그래밍 지원
- ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 실행 가능
- 정적 타입 지정: 가동속 ⬆️ 디버깅을 쉽게 함
SSR
- 서버에 각각의 페이지에 대해 요청 ( 서버 부담 ⬆️, 잦은 새로고침으로 UX ⬇️ )
- 서버로 부터 각 페이지의 HTML, JS 파일 다운로드하여 렌더링
- 각 페이지 별 meta 태그들이 미리 정의되어 있어서 SEO 에 유리함
- 초기로딩 속도 빠름
📌 CSR
- 첫 로딩 시 HTML, JS, 리소스 파일들을 모두 받은 이후 ( 초기 로딩 속도 느림 ) 브라우저에서 렌더링
- JS 가 동작하면서 데이터만을 주고 받음 ( 서버 부담 ⬇️ )
- 맨 처음 HTML 파일이 비어있어서 SEO 불리
OOP
- 상속
- 다형성: 같은 함수 다른 역할
- 캡슐화: 데이터 은닉, 데이터 구조와 데이터를 다루는 방법들을 한데 묶음
- 추상화: 공통적인 속성이나 기능을 묶어서 이름을 붙임
함수형 프로그래밍
순수함수와 보조함수의 조합으로 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하는 프로그래밍
순수함수란?
- 같은 입력, 같은 출력
- No side effect
OOP와의 차이?
조사 필요
비동기 프로그래밍
Ajax, Axios, fetch
JS의 비동기 http 통신 방식
- Ajax
Asynchronous Javascript And XML - Axios
모듈 사용
호환성 good - fetch
내장 라이브러리
프레임워크가 안정적이지 않을 때 사용 (ex. React Native)
Promise
- 비동기 처리를 위해 사용
- Callback Hell의 해결책
- 비동기 처리 성공 시 resolve 메소드 호출해서 비동기 처리 결과를 후속처리 메소드로 전달
- 실패 시 reject 메소드 호출하여 에러 메시지를 후속처리 메소드에 전달
- 후속처리 메소드는 then과 catch
Async Await
- 함수 앞부분에 Async, Promise 앞부분에 await
- Promise를 동기적인 코드흐름으로 개발할 수 있게 해줌
자바스크립트 배열은 배열이 아니다
자바스크립트 배열은 실제 자료구조의 배열과 다르게 HashMap으로 구현됨
탐색 시 일반적인 배열보다 느리지만 삽입, 삭제 시 효율이 더 좋음
Babel
- ES6 이상의 문법 코드를 브라우저가 이해할 수 있게 ES5문법으로 변환
- 트랜스파일러임
var 와 let, const
var는 함수레벨 scope
let, const는 블록 레벨 scope
REST API
REST API(REpresentational State Transfer)는 웹상에서 사용되는 여러 리소스를 HTTP URI로 표현하고, 해당 리소스에 대한 행위를 HTTP Method로 정의하는 방식
REST API 설계 가이드
-
리소스에 대한 행위는 HTTP Method(POST, GET, PUT, DELETE)로 표현
-
/(슬래시)는 계층 관계를 나타낼때 사용
-
URI 마지막 문자에 /(슬래시)를 사용 X
-
URI에 _(underscore)는 사용 X
-
영어 대문자보다는 소문자 사용(가독성을 위해서 긴 단어는 잘 사용 X)
-
URI에 파일의 확장자(예를들어 .json , .JPGE)를 포함 시키지 않음
- CRUD Operation
Create : 생성(POST)
Read : 조회(GET)
Update : 수정(PUT)
Delete : 삭제(DELETE)
HEAD: header 정보 조회(HEAD)
RESTful API란?
Restful 하다는 REST API의 설계의도를 명확하게 지켜주는 것
- 장점
RESTful API 자체만으로 API의 목적이 무엇인지 쉽게 알 수 있음따라서, API의 목적이 무엇인지 명확하게 하기 위해 RESTful함을 지향
CORS(Cross-Origin Resource Sharing)
- 도메인 또는 포트가 다른 서버의 자원을 요청하면 발생하는 문제
- 웹 프론트 측에서 request header에 CORS 관련 옵션(origin)을 넣어주고,
서버에서는 해당 프론트 요청을 허용(Access-Control-Allow-Origin)하면 됨
package.json에서 dependencies와 devDependencies의 차이는
dependencies와 devDependencies의 차이점은 실제 상품에서 사용할 패키지와 개발용 패키지의 차이
즉, 개발 시 필요한 라이브러리들은 devDependencies에 적어주고, (개발자가 필요한것)
진짜 기술스펙으로 사용되어야할 라이브러리들은 dependencies에 설치해준다.
즉, 어떤 Library가 프로젝트의 컴파일(빌드) 타임에 필요하면, devDependencies에 넣고, 런타임에도 계속 쓰이는 것이면 dependencies에 넣는다.
출처: https://zereight.tistory.com/282 [Zereight's Blog]
Virtual DOM
Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할
먼저 브라우저는 HTML 파일을 스크린에 보여주기 위해 DOM 노드 트리 생성, 렌더트리 생성, 레이아웃, 페인팅 과정을 거침
DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기 때문에 HTML 파일에 20개의 변화가 생기면 DOM 노드가 변경되고 그 이후의 과정역시 20회 다시 이루어짐
작은 변화에도 매우 복잡한 과정들이 다시 실행되기 때문에 DOM 변화가 잦을 경우 성능이 저하
Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달
따라서 20개의 변화가 있다면 Virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하고 실제 DOM은 그 변화를 1회로 인식하여 단 한번의 렌더링 과정만 거침
React
Redux
-
미들웨어
액션 객체가 리듀서에서 처리되기 전에 원하는 작업 수행 가능 -
유용한 함수와, Hooks
connect, useSelector, useDispatch, useStore -
하나의 커다란 상태
Context API 사용 시 기능별로 COntext를 만들어서 사용
but, Redux는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용
함수형 컴포넌트와 클래스형 컴포넌트의 차이
함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점
프로세스와 스레드의 차이
- 프로세스: 운영체제로 부터 자원을 할당 받은 작업의 단위
- 스레드: 프로세스가 할당 받은 자원을 이용하는 실행 흐름의 단위
Reference
