기본 상식
브라우저 렌더링 과정
- (DOM tree 생성) : 렌더엔진이 HTML 파싱 DOM노드로 이루어진 트리생성
- (render tree 생성) : css 파일 inlineStyle 파싱 후 DOM+CSSOM= 렌더트리 생성
- (Layout) : 각 노드들의 스크린에서의 좌표에 따라 위치결정
- (Paint) : 실제화면 그리기
클로저
- 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 이 스크포에 접글 할 수있도록 하는 기술
- 내부함수가 외부함수의 맥락의 접근
- 클로저를 사용하게 되면 전역변수의 오,남용이 없는 깔끔한 스크립트를 작성이 가능하다
SSR, CSR
- SSR : 사용자가 웹 페이지에 접근 할때, 서버에 각각 페이지에 대해 요청하고 서버에서 HTML, JS 파일 등을 모두 다운로드
- CSR : 클라이언트측에서HTML, JS, 리소스 파일들을 받은 이후에 브라우저에서 렌더링을 진행하는 것으로, JS가 동작하면서 데이터만을 주고 받는다
REST API
- REST API : 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스입니다.
- HTTP URI를 통해 자원을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.
HTTP, HTTPS
- HTTP : 인터넷에서 데이터를 주고받을 수 있는 프로토콜
- HTTPS : HTTP에 데이터 암호화가 추가된 프로토콜이다. 공개키/개인키 암호화 방식을 이용해 데이터를 암호화한다.
CORS
- Cors : (Cross-Origin Resource Sharing) : 브라우저에서는 보안 이유로 HTTP 요청들을 제한합니다. 해당 요청을 거절 및 수락을 HTTP-header를 이용하여 가능
OOP (객체지향)
- 장점 :캡슐화 , 상속,클래스와 객체, 재사용성
- 단점은 처리속도가 느리고, 객체가 많으면 용량이 커진다는 것이다.
쿠키, 세션스토리지, 로컬스토리지
- 쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때 (4kb) / 유효기간지정 가능/ 문자열 저장가능
- 로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
- 세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
호이스팅
- 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것
this
-
자신이 속한 객체 또는 자신이 생성한 인스턴스를 가리키는 자기 참조 변수입니다. 함수 호출시 this가 결정이이 됩니다.
-
arrow function 에서는 상위 함수의 this를 계승을 받는다.
-
bind 함수를 통해 값 고정이 가능
-
call()은 커스텀 this를 지정가능 ( 실행문맥의 this를 특정하게 지정하는 매개변수)
-
apply()는 call()과 유사하지만 인자로 배열을 받는다
-
마지막으로 bind()는 커스텀 this를 영구히 가지는 함수를 만들 수 있었다.(고정)
const var let 차이
- const : 선언 단계와 초기화 단계가 동시에 진행된다.
- let : 중복 선언 불가능, 재할당가능
- var : 중복 선언 가능, 재할당가능, 함수 외부에서 선언한 변수는 모두 전역 변수로 된다
const 변수에 Object를 할당하면 주소 값이 할당된다. 그리고 이 주소 값은 상수다. 그러나 그 Object에 Key-Value 쌍을 추가하거나 변경하는 행위는 가능. 이 값은 const에 바인딩 되는 값이 아니니까
-> 중요내용 => 객체가 할당되는것이 아닌 주소값이 할당되므로.
- 바인딩 : 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위
null vs undefined
undefined: 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값
null : 의도적 부재
== 의 과정
== : 타입변환 시키고 값 비교
스레드 와 프로세스
- 프로세스 : 운영체제로부터 자원을 할당받은 작업의 단위
- 스레드 : 프로세스 내에서 실행되는 흐름의 단위
차이점
- 프로세스는 최소 하나의 스레드를 보유, 각각의 별도의 주소공간할당받음(data, heap,code)
- 스레드는 stack만 따로 할당 받고 나머지영역은 스레드끼리 공유
- 프로세스는 자원을 공유하지 않지만, 스레드는 자원을 공유한다.
JS, TS 상식
promise vs async/await
- Promise 를 활용할 시에는 .catch() 문을 통해 에러를 찾고 async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다
- Promise의 .then()이 계속 생길 수있으며, 코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
TS 타입
js는 6개의 원시 타입(number, string, boolean, null, undefined, symbol)과 1개의 객체 타입(object
-
symbol 타입 : 변경이 불가능한 원시 값, 디버깅의 용도로만 사용 ,심볼은 Symbol 함수를 호출함으로써 생성
-
제네릭타입
제네릭: 타입을 마치 함수의 파라미터처럼 사용하는 것
사용 이유 : 함수를 호출할 때 넘긴 타입에 대해 타입스크립트가 추정이 가능. 함수의 입력 값에 대한 타입과 출력 값에 대한 타입이 동일한지 검증이 가능.
function getText<T>(text: T): T {
return text;
}Throttle, Debounce 차이점
-
Throttle : 짧은 간격으로 이벤트가 연속으로 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 합니다.
-
Debounce: 짧은 간격으로 연속된 이벤트가 발생하면 이밴트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후 한 번만 호출합니다.
React, React-Native 상식
useState 와 클로저
- useState는 외부에 선언된 상태값에 접근해서 이전 상태를 가져오고, 변경된 상태값을 관리.
함수형 컴포넌트도 결국 함수이기 때문에, 클로저를 통해 선언되는 시점에 접근 가능했던 외부 상태값에 계속 접근할 수 있는 것이다.
useState 와 useRef 차이
- useState의 상태는 변화할 때마다 리렌더링 이루어지지만, useRef의 값은 변화할 때마다 리렌더링이 이루어지지 않는다.
React 생명주기
-
리액트 컴포넌트는 생명주기(라이프사이클)가 존재합니다.
-
리액트 컴포너트는 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라지며 끝이납니다.
-
생명주기는 Mount, Update, Unmount 3가지로 나눌 수 있다.
마운트(Mount): DOM이 생성되고 웹 브라우저상에 나타나는 것을 Mount 라고한다.
업데이트(Update) : state 변경 ,props 변경등이 생길때 변경됨.
언마운트(UnMount) : Mount 의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 Unmount 라고 한다.
리액트 특정 부분 렌더링
- virtual DOM 트리를 메모리에 새로 생성
- 이전 virtual DOM 트리와 비교
- 그 차이를 실제 dom에 전달
예시 : 리액트가 아닌 기존은 렌더트리가 전체가 렌더링이되었다(좋아요 토글 등의 기능시) 데이터가 변경되면 전체 UI는 virtual dom에 렌더링 되고 이전과 해당 부분을 비교 해당부분만 수정하는 플로우를 가짐
React-Native 장단점
장점
1. 컴포넌트 기반으로 분리가 가능함에 따른 코드 재사용성
2. 리액트네이티브는 오픈소스로 커뮤니티가 활성화
단점
1. 네이티브 브릿지를 사용해 자바스크립트 스레드와 네이티브 스레드를 연결시켜 동작 하는 하이브리드 앱이므로 네이티브 보단 속도가 느리다
2. 네이티브 개발에 비해 다양한 API를 사용하지 못합니다
React-Native 동작원리
- (터치 등) 이벤트가 발생한다.
- 발생한 이벤트를 Native(안드로이드/iOS)에서 감지한다.
- 브릿지를 통해 JavaScript로 전송한다.
- JavaScript에서 이벤트를 처리한다.
- JavaScript에서 native method를 호출하거나 UI 업데이트 요청을 보낸다.
- 브릿지를 통해 Native로 전송한다.
- Native(안드로이드/iOS)에서 요청을 수행한다.
- Native가 UI를 업데이트하여 그린다.
React-native Metro
Metro : React-native 를 위한 자바스크립트 번들러로 js 파일을 읽어서 순서에 맞게 하나의 파일로 합쳐주고 앱에서 실행 준비를 해준다(컴파일해준다)
Flux 패턴(리덕스에서 사용하는 패턴)
- 리덕스에서 사용하는 패턴으로 dispatcher, store, view 3부분으로 구성
- 데이터 흐름은 항상 Dispatcher에서 Store로, Store에서 View로, View는 Action을 통해 다시 Dispatcher로 데이터가 흐르게 됩니다. 이러한 흐름을 데이터 변환를 보다 쉽게 예측이가능
ScrollView , FlatList 차이
- FlatList : 모든 데이터를 렌더링 하지않고 화면에 보이는 부분만 렌더링할 때 주로 사용
- ScrollView : 출력하는 데이터가 고정적이고 양이 많지 않을 경우 주로 사용
