프론트엔드

개요

기술면접 정리 자료가 있는데 왜 또 정리를 하냐라고 물어볼 수 있지만 그 정리한 거 조차 외우기가 힘들었기 때문에 더 짧게 정리를 시도해 보았다.

자바스크립트

Hoisting: 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 변경이 된다.

 

Closure: 두 개의 함수로 만들어진 함수이다.

 

네트워크

GET: HTTP Request Message의 Header 부분에 url 이 담겨서 전송되며 데이터 크기가 제한적, 보안이 취약

 

POST: HTTP Request Message의 Body 부분에 데이터가 담겨서 전송되며 데이터 크기가 GET 방식보다 크고 보안면에서 낫다.

 

UDP: 비연결형 프로토콜로 IP 데이터그램을 캡슐화하여 보내는 방법과 연결 설정을 하지 않고 보내는 방법을 제공하고 흐름제어, 오류제어 또는 손상된 세그먼트의 수신에 대한 재전송을 하지 않는다.

 

TCP: UDP에서 발전된 형태 신뢰성 과 순차적인 전달 을 필요로 하여 신뢰성 있는 바이트 스트림을 전송 하도록 특별히 설계

 

HTTP: 웹에서 HTML , JSON 정보 주고받는 프로토콜, Stateless(무상태성) 으로, 특정 상태를 유지하지 않는 특성이 있다. 작동방식은 요청과 응답으로 이루어진다는 것, 구성은 헤더와 바디로 이루어져 있다.

 

HTTP 요청 메서드

 

HTTPS: HTTP 요청을 SSL 혹은 TLS라는 알고리즘을 이용해, HTTP 통신을 하는 과정에서 내용을 암호화하여 데이터를 전송하는 방법

 

IP: 인터넷상에서 사용하는 주소체계를 의미

 

IPv4: 32비트로 구성 한 도막(위에서 각각 210, 113, 39, 224)은 0~255까지의 숫자로 표현할 수 있다.

 

IPv6: 128비트로 구성 16비트씩 8부분(2001:230:abcd:ffff:0000:0000:ffff:1111)으로 나누어 각 부분을 콜론(colon, "":"")으로 구분하여 표현하며, 각 구분은 16진수로 표현

 

PORT: IP 주소인 127.0.0.1 뒤에 :3000과 같은 숫자가 표현 이 숫자는 IP 주소가 가리키는 PC에 접속할 수 있는 통로(채널)을 의미

 

URL: 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타내고 scheme, hosts, url-path에 더해 query, bookmark를 포함

 

URI: 일반적으로 URL의 기본 요소인 scheme, hosts, url-path에 더해 query, bookmark를 포함

 

 

부분	명칭	설명
file://, http://, https://	scheme	통신 프로토콜
127.0.0.1, www.google.com	hosts	웹 페이지, 이미지, 동영상 등의 파일이 위치한 웹 서버, 도메인 또는 IP
:80, :443, :3000	port	웹 서버에 접속하기 위한 통로
/search, /Users/username/Desktop	url-path	웹 서버의 루트 디렉토리로부터 웹 페이지, 이미지, 동영상 등의 파일이 위치까지의 경로
q=JavaScript	query	웹 서버에 전달하는 추가 질문

 

API: 서버자원을 클라이언트에서 잘 가져다 쓸 수 있게 만들어 놓은 인터페이스 (메뉴판) 예를 들어 api를 불러오고, 정보를 내보내 주기도 하는 함수인 fetch 를 사용할 수 있다.

 

도메인: 사람이 읽을 수 있는 이름(google.co.kr)

 

DNS(Domain Name System):  호스트의 도메인 이름을 IP 주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템입니다.

 

Ajax: JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법

    특징: 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것

AJAX의 장단점

https://applecoke.tistory.com/manage/newpost/130?type=post&returnURL=https%3A%2F%2Fapplecoke.tistory.com%2Fmanage%2Fposts%3FsearchKeyword%3Dajax%26searchType%3Dtitle

 

컴포넌트 내에서 AJAX요청

 

브라우저의 동작 원리

1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.)
3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정)
4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.)
5. 개별 노드를 화면에 페인트한다.(or 래스터화)

CORS(Cross-Origin Resource Sharing): 브라우저간의 데이터를 주고받는 과정에서 도메인 이름이 서로 다른 사이트간에 API요청을 할 때, 공유를 설정하지 않으면 CORS 에러가 발생하는데 

    simple request가 사용되는 경우

    - GET, HEAD, POST 요청

    - 사용자 헤더가 없어야 한다.

    - 헤더에서 Content-type이 text/plain, multipart/form-data, application/x-www-form-urlencoded 여야 한다.

 

    pre-flight request는 

    - 옵션 메서드를 통해서 크로스 오리진으로부터 정보를 받아올 수 있는지 없는지 미리 요청을 한다.

    - 실제 요청이 안전한지 서버가 미리 파악할 수 있도록 하는 수단이다.

    - 실질적인 요청 전 옵션 메서드를 통해 발생한다.

    - 모든 크로스 오리진 요청이 preflight request 를 발생시키는 것은 아니다. (simple request는 아님)

 

크로스 브라우징: 웹 표준에 따라 개발을 하여 서로 다른 OS 또는 플랫폼에 대응하는 것을 말한다.

 

웹 성능과 관련된 Issue 정리

1. 네트워크 요청에 빠르게 응답하자

2. 자원을 최소한의 크기로 내려받자

3. 효율적인 마크업 구조를 구축하자

4. 미디어 사용을 개선하자

5. 빠른 자바스크립트 코드를 작성하자

6. 애플리케이션의 작동원리를 알고 있자.

 

SPA(Single-Page-Application)

하나의 페이지 안에 자바스크립트로 여러 컴포넌트를 두어, 이벤트가 발생한 컴포넌트의 데이터만 변경하는 방식

 

SPA 장,단점

장점: 전체 화면을 다시 렌더링 할 필요가 없어 유지보수 면에서 좋다.

단점: 파일 자체는 무겁고 첫 로딩시간이 길어질 수 있다. HTML 파일의 자료를 기반으로 분석하는 검색엔진같은 경우 SPA 가 적합하지 않을 수 있다.

 

JSON

https://applecoke.tistory.com/manage/newpost/101?type=post&returnURL=https%3A%2F%2Fapplecoke.tistory.com%2Fmanage%2Fposts%3Fcategory%3D1020112%26page%3D2%26searchKeyword%3D%26searchType%3Dtitle%26visibility%3Dall

 

SSR vs CSR

SSR(Server Side Rendering): 웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링합니다.

 

CSR(Client Side Rendering): 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지를 클라이언트에 보냅니다.

 

SSR을 사용하는게 좋은 경우

• SEO(Search Engine Optimization) 가 우선순위인 경우
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우
• 웹 페이지가 사용자와 상호작용이 적은 경우

CSR을 사용하는게 좋은 경우

• SEO(검색엔진) 가 우선순위가 아닌 경우
• 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다.
• 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있습니다.

 

Node.js 3rd party

프로그래밍에서의 서드파티란 프로그래밍을 도와주는 plug_in 이나 library 등을 만드는 회사를 말한다.

 

fs.readFile

비동기적으로 파일 내용 전체를 읽습니다. 이 메소드를 실행할 때에는 인자 세 개를 넘길 수 있습니다.

 

REST API

웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식

GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하거나 DELETE로 저장된 글이나 데이터를 삭제할 수 있습니다.

메소드를 사용할 때도 규칙

• GET: 서버의 데이터를 변화시키지 않는 요청
• POST: 요청마다 새로운 리소스를 생성
• PUT: 요청마다 같은 리소스를 반환

 

CRUD

기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.

 

이름	조작	SQL
Create	생성	INSERT
Read(또는 Retrieve)	읽기(또는 인출)	SELECT
Update	갱신	UPDATE
Delete(또는 Destroy)	삭제(또는 파괴)	DELETE

Endpoint

API로 요청을 서버와 통신할 때, 서버가 요청을 수락하는 시작점

 

path

API를 통해 서버와 통신할 때, 서버와 통신할 수 있는 key 역할( https://api.github.com/user )에서 user가 path

 

Side Effect

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기합니다.

 

Pure Function

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수

 

useEffect

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook 입니다.

 

useState

state를 함수 컴포넌트 안에서 사용할 수 있게 해두고 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 

 

CORS(Cross-Origin Resource Sharing)

cors

useRef

.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

<input ref={myRef} />를 사용하여 React로 ref 객체를 전달한다면, React는 모드가 변경될 때마다 변경된 DOM 노드에 그것의 .current 프로퍼티를 설정할 것입니다.

 

react redux

상태를 중앙에서 관리하는것을 통해서 데이터가 우리가 예측하지않은 변형되는 가능성을 낮춰주는것

 

정적 웹 사이트 vs 동적 웹사이트

• 정적 웹사이트: HTML 파일(코드) 자체로 배포되는 사이트 (CSR, Client Side Rendering)
• 동적 웹사이트: 서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR, Server Side Rendering)

정규표현식

https://applecoke.tistory.com/manage/newpost/256?type=post&returnURL=https%3A%2F%2Fapplecoke.tistory.com%2Fmanage%2Fposts%3Fcategory%3D1020112%26page%3D1%26searchKeyword%3D%26searchType%3Dtitle%26visibility%3Dall

RegExp 객체의 메소드

exec(): 원하는 정보를 뽑아내고자 할 때 사용합니다. 검색의 대상이 찾고자 하는 문자열에 대한 정보를 가지고 있다면 이를 배열로 반환하며,찾는 문자열이 없다면 null을 반환합니다.

 

test(): 찾고자 하는 문자열이 대상 안에 있는지의 여부를 boolean 으로 리턴합니다.

 

String 객체의 메소드

match(): RegExp.exec() 와 비슷한 기능을 하며, 정규 표현식을 인자로 받아 주어진 문자열과 일치된 결과를 배열로 반환합니다. 일치되는 결과가 없으면 null 을 리턴합니다.

 

replace(): '검색 후 바꾸기'를 수행합니다.

 

split(): 주어진 인자를 구분자로 삼아, 문자열을 부분 문자열로 나누어 그 결과를 배열로 반환합니다.

 

search(): 정규표현식을 인자로 받아 가장 처음 매칭되는 부분 문자열의 위치를 반환합니다. 매칭되는 문자열이 없으면 -1을 반환합니다.

 

axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

https://applecoke.tistory.com/manage/newpost/293?type=post&returnURL=https%3A%2F%2Fapplecoke.tistory.com%2Fmanage%2Fposts%3Fcategory%3D1020112%26page%3D1%26searchKeyword%3D%26searchType%3Dtitle%26visibility%3Dall