SEB_FE_ 블로깅 챌린지 _ 39일차 ( 복습 & 기술 면접 준비 )

JavaScript

 

-> Promise의 기능과 필요한 이유에 대해서 설명해주세요.

  :  일단 promise 는 비동기로  서버에서 받아온 데이터를 원하는 순서대로 처리하기 위해 사용되는 객체입니다.

    함수 속 매개변수로 함수를 넣는 callback 함수의 방법도 있지만, 복잡한 웹일 수록 가독성이 낮아지는 callback Hell이        발생합니다. 저희는 이를 Promise로 조금더 간단하게 처리할 수 있습니다.

   

Promise의 기능을 말씀드리기에 앞서 promise는  대기 - 이행 - 실패 상태로 구분할 수 있습니다.

이 상태에 따라 수행하는 .then()이나 .catch() 등 promiseAPI 메소드로 promise 상태에 따른 각 수행을 지정할 수 있습니다.

 

(promise 도 callback과 같이 promisehell 이 발생하기 때문에 async/ await 라는 표현식이 생겼습니다.

  함수를 선언할 때 async 키워드를 넣고, 작성하고자 하는 코드옆에 await 를 붙여 더  직관적인 코드를 짤 수 있습니다)

 

 

( promise all 은 요소 전체가 프로미스인 배열을 받고 새 프로미스를 반환하기 때문에 여러 프로미스의 결과를 집계할 때 유용합니다. promise 나  async는 순차적으로 실행과 리턴을 기다려야 하는데, promiseall은 여러 쓰레드를 사용하여 코드 실행 시간을 단축 시킬 수 있습니다.)

 

 

-> 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.

  : 순수함수는 오직 입력만이 함수의 결과에 영향을 주는 함수입니다.

사이트 이펙트는 외부 변수를 참조하거나, 변경하는 모든 종류의 코드를 의미합니다.    

순수함수는 네트워크 요청과 같은 side effect가 없고, 입력으로 전달된 값을 수정하지 않는 불변성을 갖고 있습니다.

     

   그래서 함수의 전달인자로 참조 자료형이 전달 되는 경우 주로 사용합니다.

함수의 전달인자가 참조자료형인 경우 자칫하면 해당 데이터 자체를 바꿔서 사이드 이펙트가 일어 날 수 있고,  데이터를 손상시킬 수 있기 때문입니다.

 

 

---

 

React

 

-> React 의 state와 props에 대해서 설명해주세요.

:  React state는 컴포넌트 내부에서 변할 수 있는 값을 의미하고, props는 상위 컴포넌트로부터 전달 받은 값 즉, 이미 결정돼서 바꿀 수 없는 을 의미합니다.

React 컴포넌트는 props를 전달받아 이를 기반으로 React 엘리먼트를 반환 해 화면을 렌더링하고, 세부 내용은 state에 따라 내용을 표시합니다.

(state는 가변적인 사용자의 input value를 예시로 들 수 있겠습니다.  props는 불변하는 모든값을 둘 수 있습니다. )

(React에서 props를 변경하지 않기 위해 상태끌어올리기를 사용합니다. props 자체를 변경하지 않고, 변경된 상태 값을 props로 내려주어 side effect를 최소화 하는 방식입니다.)

 

 

-> React 컴포넌트의 key 속성에 대해서 설명해주세요.

: key 속성은 같은 컴포넌트를  여러개 렌더링할 때, 다른 컴포넌트임을 구분하기 위해서 사용하는 속성입니다. 

예를 들어 key속성을 활용해 10개의 블로그 게시글 중 하나를 수정했을때 해당 게시글만 새롭게 렌더링 할 수 있습니다.

React가 Dom을 직접 제어 하는 것보다 더 빠르고 간편합니다.

결국 Key 속성을 활용하면 React가 어떤 항목을 변경할 지, 추가 할 지 혹는 삭제할 지 식별할 수 있습니다.

 

 

-> useEffect의 dependency array에 대해서 설명해주세요.

: 먼저, useEffect란 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook입니다.

useEffect는 첫 번째 인자로 콜백 함수를 받고 두 번째 인자로 배열을 받는데 이 배열을 dependency array라고 부릅니다.

useEffect에 dependency array를 주지 않으면, 상태가 변경될 때마나 비 효율적으로 컴포넌트가 계속 리렌더링이 됩니다.

그렇게 때문에 특정 props가 변경될 때만 dependency array 요소를 정해서 원할 때  효율적으로 컴포넌트를 렌더링 해야 합니다.

dependency array에  빈 배열을 할당하면 use Effect은 화면이  첫 렌더링 될 때만 실행되고,

dependency array가 빈 배열이 아닐 경우에는 배열 값이 바뀔 때 마다 use Effect가 실행됩니다.

 

 

---

 

HTTP/네트워크

 

-> CSR과 SSR의 차이점에 대해서 설명해주세요.

: SSR과 CSR의 주요 차이점은 페이지가 렌더링되는 위치입니다. SSR은 서버에서 페이지를 렌더링하고, CSR은 클라이언트에서 페이지를 렌더링합니다.SSR은 경로가 변경될 때마다 새로운 정적파일을 요청하고, CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침하지 않고, 동적으로 라우팅을 관리합니다. 

(검색엔진 최적화가 꼭 필요한 서비스 일때 는 SSR을 사용하는게 유리하고

상호작용이 많은 경우에는 서버가 클라이언트에 필요한 데이터만 넘겨주기 때문에 부담이 적은 CSR을 사용하게 좋습니다.)

(최초 웹이 탄생하고, ajax가 보편화되기 전까지는 서버에서 HTML파일을 전부 만들어서 브라우저에 전달하고, 브라우저에서 해당 HTML 파일을 화면에 보여주는 SSR 방식이 보편적이었습니다. 이후 ajax가 보편화되고 나서부터는 CSR이라는 개념이 대두되었습니다. CSR은 ajax 요청을 통해 페이지의 일부분에 필요한 정보만 받아서 브라우저에서 렌더링을 할 수 있는 장점이 있습니다. 즉, 단순한 웹 페이지가 아니라 유저와의 즉각적인 상호작용이 필요한 웹 애플리케이션에 적절합니다.)

 

 

 

-> GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요.

: Get은 가져온다는 개념이고, Post는 수행한다는 개념으로 받아들이면 쉽습니다.

Get 메서드는  서버에서 어떤 데이터 조회할 때 사용합니다.

일반적으로 조회만 하는 것이므로 body를 보내지 않고 query parameter나 path parameter를 사용합니다.

 

이에비해, Post는 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용합니다.

그래서 body에 body에 원하는 변경 사항을 자세하게 작성해야 합니다.

 

GET 메서드는 요청을 무한대로 보내도 같은 요청을 회신받을 수 있는 멱등성을 가지고 있는데

POST는 이미 해당 리소스가 생성이 돼 있거나, 변경되기 때문에 멱등성이 없습니다.

즉, 요청을 무한대로 보내면 최초 응답과는 다른 회신을 받습니다. 

 

 

 

---

 

웹서버 기초

 

-> HTTP 메세지 구조에 대해 설명해주세요.

: HTTP 메세지 구조는 서버와 클라이언트 간에 데이터가 교환되는 방식으로,
요청과 응답으로 이루어져 있습니다.

요청과 응답은  크게 start-line, header와 body로 나뉩니다. 

 

start-line은 어떤 프로토콜을 사용하는지, 어떤 HTTP 메서드인지, 상태 코드는 무엇인지 등 해당 요청 과 응답의 핵심 정보가 상태코드와 상태 메시지로 표현됩니다.

 

header는 요청과응답에서 공통으로 자주 다루는 정보들이 담겨있습니다. (body의 Content-type)

 

body는 해당 요청이나 응답에서 꼭 다뤄야 하는 중요한 정보를 담고 있습니다. 보통 추가나 변경 삭제하고 싶은 리소스의 자세한 정보를 담기도 하고, 응답의 경우 요청자가 꼭 알아야하는 리소스에 대한 정보를 담게 됩니다.

 

-> Same-Origin Policy와 CORS에 대해서 설명해주세요.

: Same Origin Policy 는 동일 출처 정책을 의미합니다. 

 동일한 출처가 아닌 곳에서 요청이 오는 경우 해당 요청을 막아 높은 보안성을 유지하기 위해 사용합니다.

 즉, 브라우저에서 동일 출처 요청이 아니면 요청 자체를 막는 정책입니다.

Sop를 사용하면 해킹 등을 예방할 수 있습니다.

uri의 프로토콜, 호스트, 포트 이 3가지가 모두 동일해야 같은 출처(Same Origin)으로 인정할 수 있습니다.

 

다만,  CORS 설정을 해준 경우에는 같은 출처가 아니더라도  접근할 수 있습니다.SOP로 기본적으로 다른 출처의 요청을 막지만, CORS를 사용해  서버에서 다른 출처에서의 요청을 허용합니다.상황에 따라 모든 출처로 부터의 요청을 허용할 수도 있고, 일부 출처로의 요청만 허용하는 것도 가능합니다.

 (expressjs에서는 cors 미들웨어로 상황에 맞게 cors 설정을 제어할 수 있습니다.)

 

 

---

< 느낀점 >

 

너무 떨렸다.

 

누군가 처음보는 사람들 6명이 나를 쳐다보고 있을거라 생각하니 3시간동안 질문에 대한 대답을 작성하면서 답을 외우는거마냥 반복하면서  긴장했다.

3시간동안 좀 질문에 대한 대답을 외운거 같기도....

 

오히려 모의 면접에 꼬리질문이 나왔을 때 하도 달달 읽어놔서 굉장히 좀 평안하게 대답했다.첫 질문을 맞닥뜨렸을 때의 느낌이 그냥 헉이다 헉...

 

좀 더 자세히 설명하고 싶다는 느낌이 드는 질문은 오히려 잘 설명하려고 들다 보니 늘어지는 느낌을 받았다..!

 

이 모의 면접에서는 그래도 질문이 한정적이라 당황을 덜했는데실제 면접에서는 어떨지....미리미리  평소 복습을 잘 해놔야 겠다. 

 

솔직히