면접대비1 - 50

1. https란 무엇인지 아는 만큼 설명해주세요.

myAnswer 🍕

https는 HyperText Transfer Protocol Secure Socketd 의 약자로 http가 서버와 정보를 텍스트로 주고받기 때문에 원치 않는 데이터 유출이 일어날 수 있는 보안 취약점을 해결하기 위한 프로토콜이 HTTP에 S(Secure Socket)가 추가된 HTTPS입니다.
장점으로는 웹사이트의 무결성을 보호해준다는 점과 서버와의 통신 시 보안강화가 있습니다.
단점으로는 모든 페이지에서 https를 사용하면 과부하가 걸려 속도가 느려질 수 있습니다.

2. http와 https의 차이점은?

myAnswer 🍕

결정적 차이는 보안입니다.

HTTPS는 기본 골격이나 사용 목적 등은 HTTP와 거의 동일하지만, 데이터를 주고 받는 과정에 ‘보안’ 요소가 추가되었다는 것이 가장 큰 차이점입니다. HTTPS를 사용하면 서버와 클라이언트 사이의 모든 통신 내용이 암호화됩니다.

3. 프로세스 생성 과정에 대해 설명해주세요.

myAnswer 🍕

먼저 프로세스란 프로그램이 구동될 때 주 메모리에 적재되며 메모리 상에서 실행되는 작업의 단위를 프로세스라고 합니다. 보통은 작업(Task)라고도 부릅니다(작업 관리자). 쉽게 말해 실행중에 있는 프로그램이라고 할 수 있습니다.

프로세스의 생성과정은 다음과 같습니다.

실행파일 클릭 ->

실행을 위한 메모리 할당 ->

메모리 공간으로 바이너리 코드 올라감 ->

그 순간부터 프로그램은 프로세스라고 불리게 됩니다.

바이너리 코드란 ??
`- 컴퓨터가 인식할 수 있는 0과1로 이루어진 이진 코드를 의미함.`

4. 크롬 탭이 프로세스인가요 쓰레드인가요?

myAnswer 🍕

프로세스입니다.
크롬은 탭마다 PID를 가지고 있으니 Process이며 각 Tab마다 랜더링 정보나 기타 데이터를 따로 관리하기 때문입니다. 그로 인해 메모리를 많이 잡아먹기도 하지만 하나의 Tab에 오류가 생겼다고 모든 Tab에 영향을 끼치진 않습니다.

5. TCP와 UDP의 차이점은 무엇인가요?

myAnswer 🍕

TCP는 연결 동작을 통해 ACK와 Sequence Number를 주고받으며 신뢰성과 흐름제어를 제공하는 방면 UDP는 IP를 거의 그대로 사용하며 단순히 Checksum말고는 데이터의 훼손을 감지할 수 없습니다. 또한 ACK와 Sequence Number를 주고받지 않으므로 중간에 데이터가 유실되어도 이를 다시 요청하거나 할 수 있는 방법이 없습니다. 또한 TCP와 다르게 UDP는 혼잡을 제어할 수 있는 방법이 없습니다.

TCP란?
데이터의 송수신을 위해 IP를 이용하는 프로토콜이며 통신간에 신뢰성을 보장해주기 위해 만든 것입니다.
TCP는 3-way handshake라고 불리는 연결 동작과 4-way handshake라고 불리는 연결 종료를 통해 ACK와 Sequence Number를 주고 받아 데이터 흐름의 신뢰성을 구축합니다.

6. 브라우저에서 주소창에 url 입력 시 어떤 일이 일어나나요?

myAnswer 🍕

과정

브라우저의 주소창에 url 입력
브라우저 캐시에서 DNS 레코드를 확인하여 IP주소를 찾음 (없다면 DNS resolver를 통해 IP주소를 알아냄)
브라우저가 서버와 TCP 연결을 시작함
브라우저가 웹 서버에 HTTP 요청을 보냄
서버가 요청을 처리하고 응답을 되돌려보냄
브라우저는 서버가 보낸 HTML 내용을 표시

7. Vue.js와 React.js의 차이점은 무엇인가요?

myAnswer 🍕

React는 라이브러리이고 Vue는 프레임워크입니다.
React는 자유도가 높으며, 컴포넌트 분리, 재사용 측면에서 효율성이 높습니다.
프레임워크와 라이브러리의 차이점
- 라이브러리 : 다순 활용이 가능한 도구들의 집합
- 프레임워크 : 뼈대나 기반 구조를 뜻하며 제어의 역전 개념이 적용된 대표적인 기술
- 차이점 라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다. 즉, 어플리케이션의 Flow(흐름)를 누가 쥐고 있느냐에 달려 있습니다. 프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣으며 반면에 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이라고 할 수 있습니다. 다시 말해, 라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있으며 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재(내포)하고 있습니다.

8. Angular와 React의 차이점은?

myAnswer 🍕

리엑트는 라이브러리 앵귤러는 프레임워크입니다.
프레임워크와 라이브러리의 차이점 (7번 답변 참고)

9. 라이프사이클 메소드에 대해 설명해 주세요.

myAnswer 🍕

컴포넌트는 페이지에 렌더링이 되기 전부터 사라질 때 까지 라이프 사이클이 존재합니다.

라이프 사이클 메소드란 이런 컴포넌트의 생에주기에 초기 렌더링, 업데이트 전후 작업, 불필요한 업데이트 방지등의 기능등을 수행할 수 있게 해주는 메소드 입니다.

라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있으며 함수형 컴포넌트에선 Hooks를 통해 이러한 기능들을 대체합니다.

10. DOM을 건드리는 방식과 아닌 방식이 어떻게 다른지 설명해주세요.

myAnswer 🍕

직접 DOM을 건드리는 경우 DOM의 구조를 파악하고 있어야하며, 클래스명이나 태그명이 바뀌는 경우 다시 DOM을 변경해야합니다.

React의 경우 가상 DOM이 있고, 가상 DOM이 실제 DOM과 비교하여 state가 변화되었는지 감지 합니다.

11. Async/Await란?

myAnswer 🍕

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완했습니다. async와 aswait라는 특별한 문법을 사용하면 프로미스를 좀 더 편하게 사용할 수 있습니다.

12. Redux가 무엇인가요?

myAnswer 🍕

리덕스는 자바스크립트의 상태관리 라이브러리입니다. Store라는 단 하나의 저장소를 지니며 오직 액션을 통해서만 리덕스 내 데이터를 수정할 수 있습니다.

리엑트에서 상태관리가 필요한 이유는 컴포넌트가 많아졌을때 자칫 복잡해질 수 있는 컴포넌트간의 데이터 공유를 리덕스를 통해 전역 상태관리를 제공함으로서 props drilling이슈를해결해줄 수 있고 상태관리를 보다 용이하게 합니다.

Redux는 Flux 아키텍처를 기반으로 단방향 데이터 흐름 전역 상태(state) 관리 라이브러리
action : UI 에서 상태변경이 일어난 모든 사건 (dispatch)
reducer : 사건에 따른 상태값에 대한 변화를 일으킨다 (mutation)
store : 상태값들이 있는 저장소

13. 평소 state 관리는 어떻게 하셨나요?

myAnswer 🍕

리엑트 리덕스를 통해 관리했습니다.

왜? why?

리엑트에서 상태관리가 필요한 이유는 컴포넌트가 많아졌을때 자칫 복잡해질 수 있는 컴포넌트간의 데이터 공유를 리덕스를 통해 전역 상태관리를 제공함으로서 props drilling이슈를해결해줄 수 있고 상태관리를 보다 용이하게 합니다.

14. Array와 LinkedList의 차이가 뭔가요?

myAnswer 🍕

1. 배열

배열은 데이터를 입력하게 되면 순차적으로 입력이 되고, 물리적 주소 또한 순차적입니다. 배열의 크기는 처음 결정이 되고, 변경이 불가능합니다. 크기가 고정이고, 인덱스를 가지고 있어 원하는 곳에 접근, 검색이 쉽고, 속도가 빠릅니다. 그러나 배열의 특성상 삽입/삭제는 매우 불편합니다. 배열 중간에 값을 넣는다면, 그 뒤에 있는 모든 값들을 이동시켜야되고, 배열이 꽉 차있을 경우,메모리를 재할당하거나, 최악의 경우는 삽입이 불가능합니다. 즉, 데이터의 이동(복사)가 매우 자주 일어납니다.
2. 연결리스트

데이터를 입력하더라도, 연결리스트의 물리적인 주소는 순차적이지 않습니다. 언제든지 메모리 할당/해제를 하여 크기를 변경할 수 있습니다. 배열이 인덱스를 가지고 있다면, 연결리스트는 위치를 기억하고 있습니다. 데이터에 접근을 하려면 각각의 연결되어 있는 위치들을 따라서 접근을 하기때문에 배열에 비해서 속도는 느립니다. 그러나 삽입/삭제시에는 리스트의 위치만 바꿔주면 되기 때문에 속도가 빠르고, 용이합니다.

15, GET, POST 방식의 차이점이 뭔가요?

myAnswer 🍕

GET 과 POST 는 HTTP 메서드로 클라이언트에서 서버로 무언가를 요청할 때 사용한다. GET 은 클라이언트에서 서버로 어떠한 리소스로 부터 정보를 요청하기 위해 사용되는 메서드이다. 예를들면 게시판의 게시물을 조회할 때 쓸 수 있다.

특징
- GET 요청은 중요한 정보를 다루면 안된다. ( 보안 )
  : GET 요청은 파라미터에 다 노출되어 버리기 때문에 최소한의 보안 의식이라 생각하자.
- GET은 데이터를 요청할때만 사용 된다.
- GET요청은 브라우저 히스토리에 남는다.

POST는 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용 되는 메서드다. 예를들면 게시판에 게시글을 작성하는 작업 등을 할 때 사용할 된다.

16. JavaScript Event Loop가 무엇인지 아는 만큼 설명해주세요.

myAnswer 🍕

Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,

Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣어주는 역할을 합니다. 이러한 반복적인 행동을 틱(tick)이라 부릅니다.

정리하면,

V8 엔진에서 코드가 실행되면, Call Stack에 쌓인다. Stack의 선입후출의 룰에 따라 제일 마지막에 들어온 함수가 먼저 실행되며,Stack에 쌓여진 함수가 모두 실행된다.
- 비동기함수가 실행된다면, Web API가 호출된다.
- Web API는 비동기함수의 콜백함수를 Callback Queue에 밀어넣는다.
- Event Loop는 Call Stack이 빈 상태가 되면Callback Queue에 있는 첫번째 콜백을 Call Stack으로 이동시킨다.(이러한 반복적인 행동을 틱(tick)이라 한다.)

17. RESTful한 API란 무엇인까요?

myAnswer 🍕

ESTful API라는 단어에서 사용되는 REST(REpresentational State Transfer)의 개념을 한줄로 정의하자면 아래와 같이 정의할 수 있습니다.

HTTP 통신에서 어떤 자원에 대한 CRUD 요청을 Resource와 Method로 표현하여 특정한 형태로 전달하는 방식

즉, REST란 어떤 자원에 대해 CRUD(Create, Read, Update, Delete) 연산을 수행하기 위해 URI(Resource)로 요청을 보내는 것으로, Get, Post 등의 방식(Method)을 사용하여 요청을 보내며, 요청을 위한 자원은 특정한 형태(Representation of Resource)으로 표현됩니다. 그리고 이러한 REST 기반의 API를 웹으로 구현한 것이 RESTful API인데 예를 들어, 우리는 게시글을 작성하기 위해 http://localhost:8080/board라는 URI에 POST방식을 사용하여 JSON형태의 데이터를 전달할 수 있습니다. 위와 같이 CRUD 연산에 대한 요청을 할 때, 요청을 위한 Resource(자원, URI)와 이에 대한 Method(행위, POST) 그리고 Representation of Resource(자원의 형태, JSON)을 사용하면 표현이 명확해지므로 이를 REST라 하며, 이러한 규칙을 지켜서 설계된 API를 Rest API 또는 Restful한 API라고 합니다. 그리고 위에서 살짝 언급하였듯이, 이러한 Rest API는 Resource(자원), Method(행위), Representation of Resource(자원의 형태)로 구성됩니다.

18. TCP 3-way-handshake에 대해 들어보셨나요? 아는 만큼 설명해주세요.

myAnswer 🍕

3 Way-Handshake 란, 전송제어 프로토콜(TCP)에서 통신을 하는 장치간 서로 연결이 잘 되어있는지 확인하는 과정/방식입니다. 더 쉽게 말해서 송수신자(데이터를 주고 받는 2사람이라고 생각하면 쉬울 것 같다)사이에 연결을 확인하는 과정입니다.

19. Javascript Hoisting이란?

myAnswer 🍕

자바스크립트에서 호이스팅이란 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말합니다. 이는 변수 범위가 전역 범위인지 함수 범위인지에 따라 다르게 수행될 수 있습니다. 함수 내에서 선언한 함수범위의 변수는 해당 함수의 최상위로, 함수 밖에서 선언한 전역범위의 변수는 스크립트 단위의 최상위로 올려집니다.

20. TDD란 무엇이며, 어떠한 장점이 있나요?

myAnswer 🍕

Test-Driven Development(TDD)의 약자로 매우 짧은 개발 사이클의 반복에 의존하는 소프트웨어 개발 프로세스입니다. 우선 개발자는 요구되는 새로운 기능에 대한 자동화된 테스트케이스를 작성하고 해당 테스트를 통과하는 가장 간단한 코드를 작성합니다. 일단 테스트 통과하는 코드를 작성하고 상황에 맞게 리팩토링하는 과정을 거치는 것입니다. 말 그대로 테스트가 코드 작성을 주도하는 개발방식입니다.

테스트 주도형 개발에선, 새로운 기능을 추가하기 전 테스트를 먼저 작성한다. 테스트를 작성하기 위해서, 개발자는 해당 기능의 요구사항과 명세를 분명히 이해하고 있어야 합니다. 이는 개발자가 코드를 작성하기 전에 보다 요구사항에 집중할 수 있도록 도와준다는 장점이 있습니다.

21. Webpack을 써보신 적이 있나요? 있다면 써 본 경험을 설명해주세요.

myAnswer 🍕

웹팩을 직접적으로 사용해본적은 없지만 프론트엔드 개발자라면 꼭 알아두어야 하는 기술 중하나라고 생각해서 따로 공부한적이 있었습니다.

웹팩은 모듈 번들링이라고도 불리며 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 합니다.

웹팩을 사용해야 하는 이유는

옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다. 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다. 하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.

입니다.

22. TCP와 UDP의 차이점을 아시나요? 설명해주세요.

myAnswer 🍕

TCP : 신뢰성과 순차적인 전달이 필요한 경우 사용한다. TCP 서비스는 송신자와 수신자 모두가 소켓이라고 부르는 종단점을 생성함으로써 이루어진다. TCP는 멀티캐스팅이나 브로드캐스팅을 지원하지 않는다.
UDP : 비연결형 프로토콜이며 손상된 세그먼트의 수신에 대한 재전송을 하지 않는다. UDP를 사용하는 것에는 DNS가 있다. 사전에 설정이 필요하지 않으며 그 후에 해제가 필요하지 않다.

결론 (차이점) : TCP는 연속성보다 신뢰성있는 전송이 중요할 때에 사용하는 프로토콜이며,
UDP는 TCP보다 속도가 빠르며 네트워크 부하가 적다는 장점이 있지만, 신뢰성있는 데이터 전송을 보장하지는 않습니다.
그렇기 때문에 신뢰성보다는 연속성이 중요한 서비스의 예를 들면 실시간 서비스(streaming)에 자주 사용됩니다.

23. 동기와 비동기의 차이는 무엇인가요?

myAnswer 🍕

동기

요청과 결과가 동시에 이루어지는 것. 설계가 간단하지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하므로 비동기식 보다 비효율적이다.

비동기

요청과 결과가 동시에 이루어지지 않는 것. 하나의 요청을 처리하는 동안 다른 요청도 처리가능. 동기보다 복잡하고 결과가 주어지는데 시간이 걸리더라도 그동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있음.
브라우저에서 서버에 요청을 보냈는데 보내고 받는 동안 시간이 걸린다. 이 때 동기적으로 보낸다면 요청을 받기전까지 서버가 멈춰있게 되고 이러한 불편함을 해소하기 위해서 javascript에서는 비동기방식을 지원한다.

24. Closure(javascript)란?

myAnswer 🍕

클로저는 독립적인 변수를 가리키는 함수이다. 그리고 클로저 안에 정의된 함수는 만들어진 환경을 기억한다.

자신이 생성될때의 환경을 기억하는 함수
현재 상태를 기억하고, 변경된 최신 상태를 유지하기 위해
전역 변수의 사용을 억제 하기위해
정보를 은닉하기 위해
실수를 줄이기 위해

25. Document Object Model이란?

myAnswer 🍕

텍스트 파일로 만들어진 웹문서의 요소를 각각의 객체로 만들고 트리 구조로 구성한 것이 DOM이다. 브라우저의 렌더링 엔진이 웹 문서를 로드한 후 파싱하여 브라우저가 이해할 수 있는 위와같은 구조로 메모리에 적재한다. DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

26. 서버 사이드 렌더링이란?

myAnswer 🍕

컴퓨터가 해석할 수 있는 문서가 서버에서 완성되면 서버 사이드 렌더링(SSR), 클라이언트에서 완성되면 클라이언트 사이드 렌더링(CSR)이라 한다. React나 Vue와 같은 SPA 기반의 프레임워크에서는 CSR을 기반으로 만들 수 있지만 제공하는 기능을 활용하여 SSR이 가동하도록 구현할 수 있다.

SSR의 주 목적은 초기의 빠른 로딩과 SEO가 대표적이다.

27. MVC 패턴이란 무엇인가요?

myAnswer 🍕

모델(Model), 뷰(View), 컨트롤러(Controller)가 분리된 형태의 아키텍처이다. 세가지가 결합된 형태에서는 어플리케이션의 확장이 어렵다. 모델은 데이터 처리(논리적 데이터 기반 구조를 표현), 뷰는 사용자 인터페이스 처리(사용자에게 보여지는 화면), 컨트롤러는 비즈니스 로직을 처리(Model과 View 내의 클래스들 간 정보 교환)하는 등 각각의 요소가 하나의 역할만 담당한다.

28. 웹 스토리지의 차이점은?

myAnswer 🍕

웹 스토리지는 서버에 클라이언트 데이터를 저장하지 않는다. 웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있는데 로컬 스토리지는 브라우저에 정보가 계속해서 남아있는 반면, 세션 스토리지는 해당 세션이 끝나면, 즉 브라우저가 닫히면 데이터가 사라진다. 웹 스토리지는 데스크탑 기준 5~10MB의 저장 공간을 가지고 있어서 쿠키에 비해 훨씬 저장공간이 크다는 장점이 있다. 웹 스토리지는 반면 HTML5부터 지원하기 때문에 이전 브라우저에서는 지원이 되지 않는다는 단점이 있다.

29. 웹 프로토콜이란?

myAnswer 🍕

웹 프로토콜은 웹에서 쓰이는 통신규약입니다. 통신규약이라는 것은 쉽게 설명하면, 통신을 할때 내가 이렇게 할게 너는 이렇게 해줘 라고 약속하는 것입니다.

30. AJAX란 무엇인가요?

myAnswer 🍕

AJAX는 비동기 자바스크립트 xml의 약자이며, 자바스크립트의 라이브러리 입니다. 자바스크립트를 이용한 비동기 통신 사용자와 서버간의 xml 데이터를 주고받는 기술입니다. 비동기 방식이란 웹페이지를 리로드 하지 않고도 통신이 가능한 구조를 말하는데, 이 방식의 장점은 리로드의 과정속에서 낭비되는 자원을 보존시킬 수 있습니다.

31. Promise와 Callback의 차이점은?

myAnswer 🍕

가장 먼저 나온 Callback은 비동기 처리를 구현하기 위해 만들어 졌다. 이 함수는 다른 함수에게 인자로 전달되어 어느 시점에 실행될 수 있도록 던져주는 함수이다. 하지만 콜백 지옥이라 불리는 중첩문이 발생하면서 에러처리 한계가 생기기 시작했고 이를 해결하기 위해 Promise가 나타났다.
Promise는 어떤 값이 생성 되었을 때 그 값을 대신하는 대리자이다. 비동기 연산이 종료된 이후에 그 결과 값이나 에러를 처리할 수 있도록 처리기를 연결하는 역할을 하는 객체이다. Promise 객체를 통해 성공, 실패, 오류에 따른 후속처리가 바로 가능해서 가독성도 좋고, 비동기 에러를 처리하기도 수월하다.

32. 가상돔 (virtual DOM)이란?

myAnswer 🍕

유저의 인터랙션에 의해 상태 변화가 일어나면 브라우저 작동 원리에 의해 랜더링 과정을 반복하게 된다. Vitual DOM은 이러한 과정에 의해 발생하는 비효율성을 최소화하기 위해 탄생하게 되었다.
Virtual DOM의 개념이 기존에 아예 없던 것은 아니다. 또한, Virtual DOM 개념을 적용한 유일한 프론트앤드 라이브러리 / 프레임워크는 아니다. 하지만, 리액트는 성공적으로 Virtual DOM 개념을 적용한 선발 주자라고 할 수 있다.

33. mvvm 모델이란?

myAnswer 🍕

MVVM 패턴은 Model + View + View Model를 합친 용어입니다.

Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
View : 사용자에서 보여지는 UI 부분입니다.
View Model : View를 표현하기 위해 만든 View를 위한 Model입니다. View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분입니다.

34. ES6의 호환성 해결방법은?

myAnswer 🍕

ES6 이상의 자바스크립트 버전은 브라우저 별로 지원률이 상이하기 때문에 트랜스파일러인 바벨을 사용하여 ES6+ → ES5로 변환한다.

35. ES6에 추가된 것은 무엇인가요?

myAnswer 🍕

Destructuring(var { name } = person;),
Template Literal(`, 백틱),
Spread Operator(...),
화살표 함수(const a = () ⇒ {}),
const & let(var와 다르게 block scope),
import/export,
Map/Set,
Promise 등

36. babel은 컴파일러인가요 ? 트랜스파일러인가요?

myAnswer 🍕

트랜스파일러이다.
컴파일은 한 언어로 작성된 소스 코드를 다른 언어로 바꾸는것(C-> 어셈블리어) 트랜스파일러는 한언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환 (C++>C, ES6->ES5)

37. Context API란?

myAnswer 🍕

React Hook으로 Redux와 마찬가지로, state(상태관리)관리 도구이다.
Redux또한 Context API를 기반으로 하여 만들어져 있다.
redux와 다르게 react에서만 사용할 수 있다.
redux와 다르게 여러 저장소가 존재할 수 있다.

Context API는

전역상태가 저장되는 context,
전역상태를 제공하는 Provider,
전역상태를 받아 사용하는 Consumer 로 구성된다.

Context

context는 컴포넌트가 제공한한 상태가 저장된다.
Consumer는 이 context를 통해서 상태에 접근이 가능하다.
context는 여러개 존재할 수 있다.
context 내부에는 Provider와 Consumer가 정의도어 있다.

Provider

context에 상태를 제공하여 다른 컴포넌트가 해당 상태에 접근하여 사용할 수 있게 해준다.

Consumer

consumer는 제공된 상태에 접근하는 방법 중 하나이다.
context는 consumer 사이에 있는 처음의 객체를 context에 인자로 전달하기 때문에 빈 객체를 작성한 후에 JSX를 작성해야 한다.

38. react 클래스형과 함수형의 차이는 무엇인가요?

myAnswer 🍕

클래스형 :

state, lifeCycle 관련 기능사용 가능하다.
메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
임의 메서드를 정의할 수 있다. 함수형 :
state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]
메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
컴포넌트 선언이 편하다. 함수형이 클래스보다 후에 나왔기 때문에 더 편한 것은 사실이다. 그러나 과거 클래스 컴포넌트 사용한 프로젝트가 있다. 유지보수를 위해서 알아둘 필요가 있다. React에서도 함수형 컴포넌트를 권장하고있음

39. 타입스크립트란?

myAnswer 🍕

Typescript는 동적타입언어인 Javascript의 약점을 보완하기 위해서 타입을 지정해주는 것이다.
타입이 필요한 이유는 메모리를 절약하기 위해서이다. 메모리에 저장된 것을 읽어들일때, 값을 메모리에 저장할때, 값이저장되어있는 것을 참조할때의 크기들을 알아야 하기 때문이다.
또한, 에러를 잡기가 쉬워지고, 다른 동료와 협업 할때 코드의 예측도 가능해지고, 코드에디터의 도움을 더 받을 수 있다. 리액트의 경우 (브라우저는 javascript밖에 모르기떄문에) tsx파일을 javascript로 변환하는 트랜스파일링이 필요하다. 이때 변환하는 과정에서 에러를 잡을 수 가있다. 런타임에 오류를 잡는 것보다 훨씬 좋다. 또한, Babel을 안써도 된다.

40. SEO란?

myAnswer 🍕

검색 엔진 최적화란 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 하는 작업을 말한다. SPA를 개발하는 경우 여러 가지 이점이 있음에도 불구하고 SEO가 잘 되지 않는다는 약점이 있다. 따라서 정보 제공을 목적으로하는 웹 페이지는 SPA 방식이 불리할 수 있으며, React나 Angular 같은 프레임워크는 서버 렌더링을 통해 SEO에 대응할 수 있는 기술을 지원하므로 선별적으로 사용하면 된다.

41. 다국어 페이지를 만드는 방법을 알고 있나요?

myAnswer 🍕

SSR의 경우 HTTP 요청 시 클라이언트에서 Accept-Language 헤더와 같이 기본 언어 설정에 대한 정보를 보낸다. 서버는 이 정보를 사용해 해당 언어로 된 문서 버전을 반환한다. 반환된 문서는 lang 속성을 선언한다.
CSR 시 클라이언트 사이드에서 해당 언어 팩(JSON 등)을 가져와 출력한다.

42. 시멘틱 태그란?

myAnswer 🍕

시멘틱 태그는 HTML5에 도입이 되었는데, 개발자와 브라우저에게 의미있는 태그를 제공하는 것을 의미한다. 예를 들어 <div> 태그는 non-sementic 태그이고, <table>, <article>은 sementic 태그에 속한다. 시멘틱 태그는 태그만 보고 대략적으로 들어갈 내용을 유추할 수 있다는 장점이 있다. 헤더와 푸터를 설정할 때에도 과거에는 <div id="header"></div> 와 같이 했던 것을 이제는 <header> 하나로 깔끔하게 정리할 수 있다.

43. 메모라이제이션이란?

myAnswer 🍕

불필요한 연산이나 계산을 하지 않고, 기억을 한 뒤, 그 기억해놓은 것을 활용하는 방법.

44. 이벤트 위임이란?

myAnswer 🍕

이벤트 위임이란 자식 엘리먼트의 이벤트를 부모엘리먼트에서 감지할 수 있으니 이벤트를 하나하나 등록하는 것이 아니라 부모에게 이벤트를 위임 하는 방법

45. 부모에서 자식으로 이벤트 상속 방법을 아시나요? 설명해주세요.

myAnswer 🍕

props를 사용

부모 자식의 관계에 있는 컴포넌트 간에 상태나 특정 값을 전달하기 위해 사용된다. State와 달리, 상속하는 부모 컴포넌트로부터 상속 받는 자식 컴포넌트 내에서 수정이 불가능하다. 단, state를 변경시키는 함수를 props로 전달하여 자식 컴포넌트에서 부모 컴포넌트의 state를 변경하는 것은 가능하다 (Lifting State Up).

읽기만 가능
상위 컴포넌트에서 정해지는 값
초기값 설정과 자료형의 유효성 검사 가능
(함수 매개변수처럼) 컴포넌트에 전달

useState를 사용

컴포넌트의 상태를 나타내며, props와 달리 setState(useState - Hooks)를 이용해서 값을 변화시킬 수 있다. state가 변경되면, 컴포넌트는 다시 렌더링된다.

상태에 따라 변화하는 값
직접 변경 가능
state가 변경되면 컴포넌트 리랜더링
(함수 내 선언된 변수 처럼) 컴포넌트가 스스로 관리

46. 이벤트 버블링이란 무언인가요?

myAnswer 🍕

이벤트 버블링(Bubbling)이란, 하위요소에서 상위요소로의 이벤트 전파 방식 으로, 말그대로 HTML 구조상 자식요소에 발생한 이벤트가 상위의 부모요소에까지 영향을 미치는 것이다.

47. 이벤트 버블링 막는 방법을 아시나요? 설명해주세요.

myAnswer 🍕

이벤트 버블링은 target요소에서 상위로 올라가 html 태그와 document, window까지 전달된다. 이를 막기 위해서는 단순히 event.stopPropagation() 메소드를 사용해 원하는 곳에서 이벤트 전파를 차단시키면 된다.

48. 라이브러리와 프레임워크의 차이점은?

myAnswer 🍕

라이브러리와 프레임워크의 차이는 자유도의 차이 인것 같다.(또는 라이프사이클을 가지는 차이) 프레임워크는 짜여진 패턴이나 틀 기반에서 내가 코딩을 하는 것이고, 라이브러리는 내가 가져다 사용해서 자유롭게 사용하는 방식이다.

49. 적응형과 반응형의 차이를 알려주세요.

myAnswer 🍕

반응형 웹은 하나의 템플릿을 사용해 모든 기기에 대응하는데 반해,
적응형 웹은 선별된 기기 유형에 따라 별도의 독립적인 템플릿이 요구

50. 앞으로 배워보고 싶은 기술이나 언어가 있나요?

myAnswer 🍕

node.js

항해99를 진행하며 백엔드 개발자를 꿈꾸는 동기들과 협업을 진행하며, node.js를 활용할 줄 안다면 혼자서 원하는 프로젝트를 만들어낼 수 있을 거 같다는 생각을 하게 됨. 앞으로 주언어인 React뿐만 아니라 node.js도 배워 풀스텍 개발자가 되고 싶음

ios - swift

아이폰, 아이패드, 맥북을 써오며 ios 개발을 해보고 싶은 막연한 꿈을 꾸었다. ios운영체제가 주는 특별함이 있다고 생각한다. 그 매력에 매료된것이 사실이고, 꼭 한번 배우고 활용하고 싶음.

1. https란 무엇인지 아는 만큼 설명해주세요.

2. http와 https의 차이점은?

3. 프로세스 생성 과정에 대해 설명해주세요.

4. 크롬 탭이 프로세스인가요 쓰레드인가요?

5. TCP와 UDP의 차이점은 무엇인가요?

6. 브라우저에서 주소창에 url 입력 시 어떤 일이 일어나나요?

7. Vue.js와 React.js의 차이점은 무엇인가요?

8. Angular와 React의 차이점은?

9. 라이프사이클 메소드에 대해 설명해 주세요.

10. DOM을 건드리는 방식과 아닌 방식이 어떻게 다른지 설명해주세요.

11. Async/Await란?

12. Redux가 무엇인가요?

13. 평소 state 관리는 어떻게 하셨나요?

왜? why?

14. Array와 LinkedList의 차이가 뭔가요?

15, GET, POST 방식의 차이점이 뭔가요?

16. JavaScript Event Loop가 무엇인지 아는 만큼 설명해주세요.

17. RESTful한 API란 무엇인까요?

18. TCP 3-way-handshake에 대해 들어보셨나요? 아는 만큼 설명해주세요.

19. Javascript Hoisting이란?

20. TDD란 무엇이며, 어떠한 장점이 있나요?

21. Webpack을 써보신 적이 있나요? 있다면 써 본 경험을 설명해주세요.

22. TCP와 UDP의 차이점을 아시나요? 설명해주세요.

23. 동기와 비동기의 차이는 무엇인가요?

24. Closure(javascript)란?

25. Document Object Model이란?

26. 서버 사이드 렌더링이란?

27. MVC 패턴이란 무엇인가요?

28. 웹 스토리지의 차이점은?

29. 웹 프로토콜이란?

30. AJAX란 무엇인가요?

31. Promise와 Callback의 차이점은?

32. 가상돔 (virtual DOM)이란?

33. mvvm 모델이란?

34. ES6의 호환성 해결방법은?

35. ES6에 추가된 것은 무엇인가요?

36. babel은 컴파일러인가요 ? 트랜스파일러인가요?

37. Context API란?

38. react 클래스형과 함수형의 차이는 무엇인가요?

39. 타입스크립트란?

40. SEO란?

41. 다국어 페이지를 만드는 방법을 알고 있나요?

42. 시멘틱 태그란?

43. 메모라이제이션이란?

44. 이벤트 위임이란?

45. 부모에서 자식으로 이벤트 상속 방법을 아시나요? 설명해주세요.

46. 이벤트 버블링이란 무언인가요?

47. 이벤트 버블링 막는 방법을 아시나요? 설명해주세요.

48. 라이브러리와 프레임워크의 차이점은?

49. 적응형과 반응형의 차이를 알려주세요.

50. 앞으로 배워보고 싶은 기술이나 언어가 있나요?

OMG… 🤭