개념정리

시간복잡도와 공간복잡도란?

• 시간 복잡도와 공간 복잡도는 알고리즘 성능 평가시 사용되는 개념입니다. 위 복잡도가 낮을수록 좋은 알고리즘 입니다. 시간 복잡도는 특정 알고리즘이 어떤 문제를 해결하는데 걸리는 시간을 의미합니다. 공간 복잡도는 작성한 프로그램이 얼마나 많은 공간(메모리)를 차지하느냐를 분석하는 방법입니다. 하지만 예전에 비해 컴퓨터 성능의 발달로 메모리 공간이 넘쳐나다 보니 중요도는 떨어졌습니다. 시간 복잡도와 공간 복잡도는 반비례적인 성향이 있습니다.

 

스택과 큐란?

• 스택과 큐는 자료구조에 대한 개념입니다. 스택은 차곡차곡 쌓아올린 형태의 자료구조를 뜻하는데, 같은 구조의 자료를 정해진 방향으로만 쌓을 수 있으며 top으로 정한 곳에서만 접근이 가능합니다. 따라서 나중에 들어온 것이 맨 먼저 나가게 되는 후입선출(LIFO, Last-In-First-Out) 구조를 띄게 됩니다. 사용예시는 웹브라우저의 뒤로가기를 들 수 있습니다. 큐는 스택과는 반대로 한쪽에서는 삭제연산을, 한쪽에서는 삽입연산만을 담당하여 먼저 들어온 것이 먼저 나가게 되는 선입선출(FIFO, First in first out) 방식의 구조를 가집니다. 삭제연산만 이루어지는 곳을 프론트라고 하며 여기서의 작업을 디큐라고 칭하며, 삽입연산이 이루어지는 곳은 리어라고 하며, 여기서의 작업을 인큐라고 칭합니다. 큐는 주로 데이터가 입력된 시간 순서대로 처리해야 할 필요가 있는 상황에 이용합니다.

 

배열과 링크드리스트

• 배열은 입력된 데이터가 메모리 공간에서 연속적으로 저장되어 있는 구조이다. 연속적으로 저장되어 있는 특징 때문에 index를 통한 접근이 용이하나 배열의 처음 또는 중간에 데이터의 삽입이나 삭제가 느린 편이다. 반면 연결리스트는 여러개의 노드가 순차적으로 연결된 구조로 첫번째 노드를 Head, 마지막 노드를 Tail이라고 하며 각 노드는 데이터와 다음 노드를 가리키는 포인터로 이루어져 있다. 배열과 다르게 index를 통한 접근이 순차적으로 이루어져 배열보다 느린편이나 노드가 연결된 구조이기 때문에 삽입, 삭제에 용이하다. 따라서 배열은 빠른 접근이 요구되고 데이터의 삽입과 삭제가 적을 때 사용하는것이 유리하고, 연결리스트는 삽입과 삭제가 잦고 검색 빈도가 적을 때 사용하는것이 유리하다.

var, let, const

• var, let, const 모두 변수를 선언하는데 그중 var은 중복 선언이 가능하지만 코드량이 많아졌을때 어디에서 문제가 생겼는지 찾기 힘든 단점이 있어 이를 보안하기 위해
  let과 const를 사용합니다.
  let은 재할당이 가능하고 const는 상수로 재할당이 불가능합니다.

Promise란?

• Promise란 비동기 함수 호출 또는 비동기 연산이 완료된 이후에 처리할 함수나 에러를 처리하기 위한 함수를 설정 하는 모듈입니다. promise가 없어도 비동기 연산이 가능한데 이 경우 콜백지옥이 발생할수 있고 이는 가독성이 떨어지며 수정이 힘든 단점이 있습니다. promise는 세가지 상태가 존재합니다. pending(대기), fulfilled(이행), rejected(거절)이 존재하며 pending은 fulfilled와 rejected가 안된 초기상태, fulfilled는 비동기 연산이 성공적으로 완료된 상태로 결과값 반환, rejected는 비동기 연산이 실패한 상태로 에러 반환을 합니다. fulfilled 혹은 rejected가 발생하면 바로 핸들러가 호출되지 않고 then메서드에 의해 먼저 관련 핸들러들이 콜백 큐로 삽입되고, 그 후 콜스택이 비었을때 콜백큐에서 콜스택으로 push되고, 콜스택에 올라간 콜백함수는 나중에 pop되어 실행됩니다.

호이스팅이란?

• 호이스팅이란 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어올려진것 같은 현상을 말합니다. 호이스팅이 발생하는 이유는 자바스크립트 엔진은 코드를 실행하기전 실행컨텍스트가 생성되는데 이 실행컨텍스트는 코드를 원활하게 실행될 수 있도록 환경을 만들어주는 역할입니다. 실행컨텍스트는 생성단계와 실행단계가 있는데 그중 코드를 읽기 전 생성단계에서 자신의 스코프 내에 선언된 변수와 함수들을 미리 스코프내에 등록시키는 작업이 진행됩니다. 이 원리 때문에 호이스팅이라는 현상이 발생하게 됩니다. var랑 함수와는 다르게 let과 const가 호이스팅된것 같지 않은 이유는 초기화 단계 이전인 선언단계까지만 진행된 상태이므로 선언문을 만나기 전까지 변수를 사용할 수 없기 때문입니다.

async/await

• async await이란 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. async함수는 함수 앞에 위치시켜 사용하며 해당 함수는 항상 promise를 반환합니다. promise가 아닌 값을 반환하여도 이행상태의 promise로 감싸 이행된 promise가 반환되도록 합니다. await는 promise가 처리될 때까지 기다립니다. 함수를 호출하고 함수가 실행되는동안 await을 만나면 잠시 중단 되었다가 promise가 처리되면 그다음 실행하게 됩니다. await는 항상 async 안에서 사용해야 합니다. async awati을 사용하면 읽고 쓰기 편한 비동기 코드를 작성할 수 있는 장점이 있습니다.

리액트 라이프사이클

• 라이프 사이클이란 생명주기를 말하고, 컴포넌트가 렌더링을 준비하는 시점부터 페이지가 언마운트 될 때 까지의 사이클을 말합니다. 라이프사이클에는 9가지 단계가 있는데, 크게는 3가지로 나뉩니다. Mount, Update, Unmount가 있습니다. Mount는 컴포넌트가 생성되고 브라우저에 처음 나타났을 때를 말하고, Update는 부모 컴포넌트가 렌더링 할 때를 말하고, Unmount는 컴포넌트가 브라우저에서 사라질 때를 말합니다. 리액트에서는 처음에 클래스형 컴포넌트를 사용했는데, 이를 사용 시 코드의 재사용성 저하, 코드 구성의 난이도 상승 등의 문제가 많았고 진입장벽이 너무높았던 탓에 함수형 컴포넌트를 사용하게 되었고, state의 사용이나 생명주기를 직접 다루는 기능은 Hook이라는 것으로 모든 것 들을 해결해 주었습니다.

JSX

• JSX란 React 스크립트 안에서 일반적인 HTML의 형태의 문법을 사용할 수 있도록 자바스크립트를 확장한 문법으로, React 엘리먼트를 생성할 수 있고, 자바스크립트의 모든 기능이 포함되어 있다.

CSR, SSR, SSG

• SSR은 서버에서 뷰 구성에 필요한 전체 HTML을 요청을 받은 즉시 생성해서 반환합니다. 초기에 모든 페이지를 완성해서 보내기 때문에 검색엔진 최적화(SEO)에 유리합니다. 초기 페이지 로드 시간이 빠릅니다. 그러나 페이지 이동시마다 서버에서 페이지를 생성하는데 시간이 걸리기 때문에 TTFB(Time To FIrst Byte)가 느립니다. CSR은 서버가 아닌 클라이언트 브라우저에서 어플리케이션을 렌더링합니다. 후속페이지의 로드 시간이 더 빠르지만 초기 페이지로드 시간이 SSR에 비해 느립니다. 또한 SSR과 달리 클라이언트 단에서 렌더링 되기 때문에 검색엔진 최적화(SEO)에 불리합니다. SSG는 SSR처럼 서버로부터 완성된 HTML을 받아오지만 다른점은 HTML 파일의 생성시점이 빌드타임인 것입니다. 빌드타임에 HTML파일이 생성되기 때문에 빠른 속도를 제공하지만 모든 URL에서 개별 HTML파일을 생성해야 하므로 URL을 예측하기 어렵다면 적용하기 어렵습니다.

React와 Next.js의 차이점

• React는 라이브러리이며 CSR 형식이고 Next.js는 React의 프레임워크이며 SSR 형식이다. 즉 UI를 어디서 랜더링하느냐에 따라 다르다.

브라우저 랜더링 과정

• 1. 클라이언트에서 불러오고 싶은 파일을 서버에 요청한다. 2. 서버에서 응답받은 html데이터를 파싱한다. (바이트 > 문자 > 토큰 > 노드 > DOM) 3. html 마크업을 바탕으로 DOM트리를 생성한다. 4. css 마크업을 바탕으로 CSSOM트리를 생성한다. 5. DOM트리와 CSSOM트리를 결합하여 렌더 트리를 형성한다. 6. 렌더 트리에서 레이아웃을 실행한다. 7. 개별 노드를 화면에 페인트 한다.

RESTfulAPI란?

• REST란, HTTP를 잘사용하기 위한 아키텍쳐 스타일이다.
  REST는 URI와 HTTP 메소드를 사용해서 자원과 행위를 표현합니다.
  REST의 원칙을 지키면서 API의 의미를 표현하고 쉽고, 파악하기 쉽게 하는것을 Restful 하다고 합니다.
  RESTFUlAPI의 장점은 다양한 브라우저, 모바일에서 통신할 수 있고, 1개의 URI로 CRUD가 가능하여 굉장히 효율적이다.

Javascript란?

• 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 거의 모든 것을 만들 수 있는 스크립팅 언어입니다.