Section 2 기술면접 준비

두괄식으로 설명하기 , 적절한 예시 들기 ,추측성 단어 사용 금지 
이 글은 짧은시간안에 작성한 글이므로 완벽한 면접 대답을 쓴 것은 아니고 개념에 대한 포괄적인 정리를 한 글입니다 !! 

 

JavaScript

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

 

프로미스는 비동기 작업을 처리하고 결과를 다루기 위한 객체입니다.  여기서 비동기 작업에는 주로 서버에서 데이터를 가져오거나 파일을 읽거나 타이머 함수를 사용하는 등의 작업을 의미합니다. ( 예를들어 fetch API 를 활용하여 json파일을 불러오는 과정이 비동기 작업이라고 할 수 있습니다. ) 처음에는 이러한 비동기 작업을 처리하기 위해선 콜백함수를 중첩하여 사용하였습니다.  예를들어 서버에서 데이터를 가져와서 처리한 후 화면에 출력하는 코드를 작성한다고 가정할 때 서버와 통신이 비동기적으로 처리되기 때문에 데이터를 가져오는 작업이 완료된 후에 화면 출력을 위한 처리를 해야합니다. 이 때 콜백함수를 사용하는데 또 다른 비동기 작업을 수행해야하는경우 콜백함수를 중첩하여 사용게 됩니다. 즉 비동기적으로 실행되는 작업의 결과를 순차적으로 처리하기 위해선 콜백함수를 중첩시켜야 하는데 이렇게 콜백함수가 중첩되면 코드가 복잡해지고 가독성이 떨어져  콜백 헬에 빠지게 됩니다. 콜백 헬은 코드 유지보수를 여럽게 만들고 버그 발생 가능성도 높기 때문에 이를 해결하기 위해 프로미스나 async/await 같은 비동기 처리 기법이 등장하였습니다.

프로미스의 주요 기능은 콜백함수를 대체하여 콜백 지옥을 해결하고 코드 가독성을 높히며 여러개의 비동기 작업을 순차적으로 또는 병렬적으로 처리하는 다양한 방법으로 활용될 수 있습니다. 또한 에러핸들링이 쉬워집니다. 콜백함수는 예외 처리를 위한 코드를 추가해야하지만 프로미스는 then() 메서드와 catch() 메서드를 사용하여 에러핸들링을 처리할 수 있습니다. 

또한 Promise.all() 메서드를 사용하면 여러개의 프로미스를 동시에처리하고 모두 완료될때까지 기다린 다음 결과를 모아 반환할 수 있습니다.

 

 

++ 꼬리질문 )

프로미스 객체의 상태에 대해 설명하세요 /

Promise 객체는 세 가지 상태를 가질 수 있습니다.

Pending(대기) : 비동기 작업이 아직 완료되지 않은 상태

Fulfilled(이행) : 비동기 작업이 성공적으로 완료된 상태

Rejected(실패) : 비동기 작업이 실패한 상태

 

프로미스 객체에서 데이터가 처리되는 과정을 설명해보세요 /

fetch API 로 json 파일을 받아왔을 때 json 파일안의 내용을 예외처리를 포함하여 출력하기 위한 과정에대해 알려주세요  (코드를 어떻게 짤껀지 )

fetch()는 Promise 객체를 반환합니다. 이 함수를 호출하면 비동기적으로 데이터를 가져오는 작업이 수행되며, 데이터를 가져오는 작업이 성공한 경우 json() 메서드를 사용하여 응답 데이터를 파싱하고 반환합니다. 그렇지 않은 경우에는 오류를 throw합니다.

 

코드 가독성이 어떻게 좋아지는지 ?/

Promise는 비동기 작업의 처리와 결과를 처리하는 로직을 분리하므로 가독성이 좋아집니다.

 

 

---

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

순수 함수(pure function)란 입력값에 대하여 항상 동일한 출력값을 반환하며, 함수 외부의 어떤 상태도 변경하지 않는 함수를 말합니다. 다시 말해, 같은 입력값이 주어지면 항상 같은 결과를 반환하고, 함수 내부에서 외부 상태를 변경하지 않습니다.

불변성(immutability)은 변수나 데이터 구조가 변경 불가능한 것을 의미합니다. 불변성을 갖는 데이터 구조는 생성 이후에는 수정되지 않으며, 새로운 값을 만들어내는 경우에는 기존의 값을 복사하여 새로운 값을 생성합니다. 이러한 방식으로 데이터를 다루면 예측 가능하고 안정적인 프로그램을 작성할 수 있습니다

순수 함수와 불변성은 사이드 이펙트(side effect)와 연결되어 있습니다. 사이드 이펙트는 함수의 실행 결과가 함수 외부의 상태를 변경하거나 함수 외부와 상호작용하는 것을 말합니다. 순수 함수는 외부 상태를 변경하지 않으며, 사이드 이펙트를 갖지 않습니다. 따라서 순수 함수와 불변성을 함께 사용하면 코드의 예측 가능성과 안정성을 높일 수 있습니다.

불변성과 순수 함수를 적절하게 활용하면 코드의 복잡도를 낮출 수 있습니다. 예를 들어, 배열이나 객체를 직접 변경하는 것보다는 새로운 배열이나 객체를 생성하고 그 결과를 반환하는 순수 함수를 사용하는 것이 더 안전하며, 코드의 가독성도 높아집니다. 또한, 상태 변화에 대한 추적이 용이하고 디버깅이 쉽기 때문에 코드의 유지보수성도 향상됩니다

 

 

++) 꼬리질문  순수함수가 사용되는 예시 ?

리액트에서 사용되면 좋다. 상태 변화에 대한 추적이 용이하다. 

리액트는 UI 라이브러리로서, 상태의 변화에 따라 화면을 업데이트합니다. 이때 순수 함수를 사용하면 상태 변화에 대한 추적이 용이하고 디버깅이 쉬워지기 때문에 코드의 유지보수성이 향상됩니다. 또한 순수 함수와 불변성을 함께 사용하면 리액트에서 성능 최적화를 할 때도 유용합니다. 순수 함수는 입력값에 대해 항상 같은 출력값을 반환하므로, 같은 입력값에 대해서는 항상 같은 출력값을 가지기 때문에 이전에 계산한 결과값을 캐싱하여 재사용할 수 있습니다. 이를 통해 불필요한 렌더링을 방지하고 성능을 최적화할 수 있습니다. 따라서 리액트에서는 순수 함수를 사용하여 상태 변화를 추적하고 UI를 업데이트하는 것이 중요합니다.

 

---

React

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

 

React에서 state와 props는 컴포넌트의 데이터를 다루는 데 중요한 역할을 합니다.

1. state

• state는 컴포넌트 내부에서 관리되는 데이터로, 컴포넌트 내부에서 변경될 수 있습니다.
• state는 setState() 함수를 사용하여 변경할 수 있으며, state가 변경될 때마다 컴포넌트는 다시 렌더링됩니다.
• state는 클래스형 컴포넌트에서 사용되며, 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

1. props

• props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.
• props는 읽기 전용으로, 자식 컴포넌트에서 변경할 수 없습니다.
• props는 함수형 컴포넌트와 클래스형 컴포넌트에서 모두 사용될 수 있으며, 클래스형 컴포넌트에서는 this.props로 접근하고, 함수형 컴포넌트에서는 매개변수로 전달받습니다.

React에서 state와 props는 컴포넌트의 데이터를 관리하는 데 중요한 역할을 합니다. state는 컴포넌트 내부에서 변경되는 데이터를 다루고, props는 부모 컴포넌트에서 전달되는 데이터를 다룹니다. 이를 통해 컴포넌트의 재사용성과 유연성을 높일 수 있습니다

 

++) 부모 state 변경이 자식 컴포넌트에 의해 실행될 때는 어떻게 해야 하나요 ? 

부모 state 를 변경시켜주는 함수를 자식 컴포넌트의 props 로 전달해주어 자식 컴포넌트에서 실행되게 해야한다. 

 

---

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

React에서 key 속성은 컴포넌트 배열을 렌더링할 때 각 요소에 고유한 식별자를 부여하는 역할을 합니다.

key는 React가 요소를 업데이트할 때 사용됩니다. 배열의 순서가 변경되거나, 요소가 추가되거나, 제거될 때 React는 각 요소의 key 값을 비교하여 변경된 부분만 업데이트합니다. key 값이 없으면 React는 배열의 인덱스를 기본값으로 사용하게 되는데, 이 경우에는 순서가 변경되거나 요소가 추가, 제거될 때마다 모든 요소가 다시 렌더링되기 때문에 성능상 이슈가 발생할 수 있습니다.

key 속성의 값은 유일해야 하며, 컴포넌트의 상태나 props에서 파생될 수 있습니다. 예를 들어, 데이터베이스에서 가져온 데이터를 렌더링할 때, 데이터의 고유 ID 값을 key로 사용할 수 있습니다.

React에서 key 속성은 컴포넌트 배열을 효율적으로 렌더링할 수 있도록 도와주는 중요한 속성입니다. key를 올바르게 사용하면 성능을 향상시킬 수 있습니다

Key 속성의 값을 통해 요소를 효율적으로 관리하고 업데이트할 수 있어야 합니다. Key 값은 고유하고 안정적인 값이어야 하며, 요소의 순서가 변경되지 않도록 해야합니다. 예를 들어, 배열의 인덱스는 key 값으로 사용하지 않는 것이 좋습니다.

---

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

 

React의 useEffect는 컴포넌트의 렌더링과 관련된 부수 효과(side effect)를 처리하는 데 사용됩니다. useEffect의 두 번째 매개변수로 전달되는 배열은 의존성 배열(dependency array)이라고 불립니다.

의존성 배열은 useEffect가 실행될 때 참조하는 변수를 포함하고 있습니다. 배열에 포함된 변수들이 변경될 때만 useEffect가 실행됩니다. 이를 통해 불필요한 연산이 발생하는 것을 방지하고 컴포넌트의 성능을 최적화할 수 있습니다.

예를 들어, useEffect에서 API 호출을 한다면, 의존성 배열에 해당 API 호출에 필요한 변수를 넣어주는 것이 좋습니다. 이렇게 하면 해당 변수가 변경될 때만 API 호출이 실행되므로, 불필요한 API 호출을 방지할 수 있습니다.

의존성 배열이 비어 있는 경우, useEffect는 컴포넌트가 마운트되거나 언마운트될 때만 실행됩니다. 즉, 컴포넌트가 최초로 렌더링될 때만 실행되고, 컴포넌트가 업데이트될 때는 실행되지 않습니다.

의존성 배열이 없는 경우와 모든 변수를 배열에 포함시키는 경우 모두 성능 저하를 일으킬 수 있습니다. 따라서, 의존성 배열에는 필요한 변수만 포함시키는 것이 좋습니다.

---

HTTP/네트워크

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

차이점으로는 렌더링되는 위치가 다릅니다. CSR 은 클라이언트에서 SSR 은 서버에서 렌더링됩니다. 따라서 각각의 장단점도 존재합니다다. CSR은 초기 페이지 로딩 시, HTML, CSS, JavaScript 파일 등 모든 자원을 브라우저에서 다운로드하고, 자바스크립트를 통해 동적으로 화면을 렌더링하는 방식입니다. CSR의 장점으로는 서버에서 처리할 부담이 적어 서버 비용이 저렴해질 수 있습니다. 그러나   SEO(Search Engine Optimization) 최적화, 브라우저 캐싱 등의 문제가 발생할 수 있습니다.

반면, SSR은 초기 페이지 로딩 시, 서버에서 HTML 파일과 필요한 자원을 생성하여 브라우저로 전달하는 방식입니다. 이를 통해 초기 로딩 속도와 SEO 최적화 문제를 해결할 수 있습니다. 그러나 서버에서 렌더링을 처리해야 하기 때문에 서버 부하가 증가할 수 있습니다.

따라서, CSR과 SSR은 각각 장단점이 있으며, 사용하는 목적과 상황에 따라 선택해야 합니다. 예를 들어, SPA(Single Page Application)의 경우 CSR이 적합하고, SEO가 중요한 웹 사이트의 경우 SSR을 사용하는 것이 좋습니다. 최근에는 SSR과 CSR을 적절히 혼합하여 사용하는 방식인 SSG(Static Site Generation)도 등장하고 있습니다.

 

일반적으로 초기 로딩 속도 측면에서는 SSR이 CSR보다 빠릅니다. CSR은 HTML, CSS 및 JavaScript 파일을 다운로드하고 실행하기 위해 클라이언트 측에서 추가 시간이 소요되기 때문입니다. 하지만 CSR에서는 페이지의 초기 로딩 이후에는 필요한 데이터만 가져와서 동적으로 UI를 업데이트할 수 있으므로, SSR보다 더 나은 사용자 경험을 제공할 수 있습니다

 

하나는 웹 사이트의 가장 첫 페이지를 로딩, 다른 하나는 나머지를 로딩하는 것

• 첫 페이지 로딩 시간
  CSR의 경우 HTML, CSS와 모든 스크립트를 한번에 불러옵니다.
  SSR은 필요한 부분의 HTML과 스크립트만 불러오게 되므로 평균적으로 SSR이 더 빠릅니다.
• 나머지 로딩 시간
  첫 페이지를 로딩 한 후, 사이트의 다른곳으로 이등하는 식의 동작을 가정해 보았을 때
  CSR은 이미 첫 페이지를 로딩 할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠릅니다.
  SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 실행 하므로 더 느립니다.

SEO 대응

검색 엔진은 크롤러로 웹 사이트를 읽습니다.
CSR은 자바스크립트를 실행 시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 metadata가 바뀌었다.
SSR은 애초에 Server Side 에서 컴파일 되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이합니다.

서버 자원 사용

SSR이 서버 자원을 더 많이 사용합니다. 매번 서버에 요청을 하기 때문입니다.
CSR은 클라이언트에 자원을 많이 사용하므로 서버에 부하가 적습니다.

 

++) SPA 가 뭔가요 ?

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script 요안에 있는 JavaScript 파일을 다시 받아오는 과정을 거칩니다.이때 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일 안에 들어있다 보니 자연스럽게 JavaScript 파일이 무거워집니다. 때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어집니다.

 

++) 사용해본 CSR /SSR 사이트 왜 그 사이트들은 CSR/SSR 방식을 채택했는지 

---

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

 

HTTP는 클라이언트와 서버 간 통신을 가능하게 하는 인터넷 프로토콜입니다. HTTP 요청은 일반적으로 GET 또는 POST 메서드를 사용하여 보내집니다. 이 두 메서드는 기능적으로 다르며 각각 특정 상황에서 더 적합한 경우가 있습니다.

1. GET 메서드 GET 메서드는 서버로부터 정보를 요청할 때 사용됩니다. 이 메서드는 일반적으로 웹 브라우저에서 링크를 클릭하거나 URL을 직접 입력할 때 사용됩니다. GET 요청은 URL의 쿼리 문자열에 데이터를 포함하여 보내집니다. 이 데이터는 URL의 끝에 '?'와 함께 전송되고, 다수의 매개 변수는 '&'로 구분됩니다. GET 메서드는 캐싱할 수 있고 브라우저 기록에 남을 수 있으므로 보안에 취약합니다.
2. POST 메서드 POST 메서드는 클라이언트가 서버에 데이터를 제출하고자 할 때 사용됩니다. 이 메서드는 웹 페이지의 폼을 작성하고 전송할 때 주로 사용됩니다. POST 요청은 HTTP 본문에 데이터를 포함하여 보내집니다. 이 데이터는 URL에 나타나지 않으므로 GET 요청보다 보안성이 높습니다. 또한 POST 요청은 캐시하지 않으므로 브라우저 기록에는 남지 않습니다.

요약하면, GET 메서드는 서버로부터 데이터를 검색하고, POST 메서드는 서버로 데이터를 제출합니다. GET 메서드는 URL에 데이터를 노출시키지만, POST 메서드는 HTTP 본문에 데이터를 숨깁니다. 따라서, GET 메서드는 쿼리 매개 변수를 전송하는 간단한 요청에 적합하며, POST 메서드는 큰 양의 데이터나 민감한 정보를 보내는 데 적합합니다.

 

++)

---

웹서버 기초

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

HTTP 메시지는 HTTP 프로토콜을 사용하여 클라이언트와 서버 간에 전송되는 데이터입니다. HTTP 메시지는 요청(Request) 메시지와 응답(Response) 메시지 두 가지 유형으로 구분됩니다.

요청(Request) 메시지 구조 HTTP 요청 메시지는 다음과 같은 구조로 이루어져 있습니다.

요청 라인 : 요청 메서드(GET, POST 등), 요청 대상 URL, HTTP 버전으로 구성됩니다.

헤더 : 요청 메시지에 대한 부가 정보를 제공합니다. HTTP 헤더는 이름-값 쌍으로 구성되며, 각 헤더 필드는 콜론(:)으로 구분됩니다.

빈 줄 : 헤더와 본문을 구분하기 위한 빈 줄입니다.

메시지 본문 : 요청 메시지와 함께 전송할 본문 데이터입니다. GET 메서드와 같이 본문을 보내지 않는 요청도 있습니다.

 

응답(Response) 메시지 구조 HTTP 응답 메시지는 다음과 같은 구조로 이루어져 있습니다.

상태 라인 : HTTP 버전, 상태 코드와 함께 응답의 성공 또는 실패를 나타냅니다.

헤더 : 응답 메시지에 대한 부가 정보를 제공합니다. HTTP 헤더는 이름-값 쌍으로 구성되며, 각 헤더 필드는 콜론(:)으로 구분됩니다.

빈 줄 : 헤더와 본문을 구분하기 위한 빈 줄입니다.

메시지 본문 : 서버로부터 전송된 응답의 본문 데이터입니다

---

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

 

Same-Origin Policy는 웹 브라우저에서 실행되는 스크립트가 다른 출처의 리소스에 접근하는 것을 제한하는 보안 메커니즘입니다. 출처(Origin)란 URI 스킴, 호스트명, 포트번호를 의미하며, 이와 같은 출처가 다를 경우 Same-Origin Policy에 의해 보안상의 이유로 접근이 차단됩니다. 예를 들어, https://example.com 도메인에서 실행되는 JavaScript 코드는 https://example.com과 동일한 출처를 가진 다른 리소스에만 접근할 수 있으며, https://example.net과 같은 다른 출처의 리소스에는 접근할 수 없습니다.

그러나, 웹 애플리케이션에서는 서로 다른 출처의 리소스에 접근해야 하는 경우가 있습니다. 이를 위해 Cross-Origin Resource Sharing(CORS) 메커니즘이 등장했습니다. CORS는 웹 브라우저에서 Same-Origin Policy를 우회하여 다른 출처의 리소스에 접근할 수 있는 메커니즘입니다. CORS는 서버 측에서 응답 헤더를 설정하여 클라이언트 측에서 안전하게 리소스에 접근할 수 있도록 허용합니다.

예를 들어, https://example.com 도메인에서 실행되는 JavaScript 코드가 https://api.example.net 도메인의 리소스에 접근해야 할 경우, 서버 측에서 응답 헤더에 Access-Control-Allow-Origin: https://example.com와 같이 설정하여 CORS를 허용하도록 해야 합니다. 이렇게 설정된 응답 헤더를 받은 웹 브라우저는 CORS를 허용하고, 클라이언트 측에서 안전하게 리소스에 접근할 수 있게 됩니다.

CORS는 웹 애플리케이션에서 다른 출처의 리소스를 안전하게 사용할 수 있도록 해주는 중요한 메커니즘입니다. 그러나, 잘못된 설정으로 인해 보안상의 취약점이 발생할 수 있으므로, 개발자는 CORS 설정에 주의를 기울여야 합니다.

 

 

 

 

---

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

 

모의 기술면접 후기 

진짜 세상에서 제일 떨렸던 시간이었던 거 같다. 자신있던 프로미스에 대한 질문 말고 조금 자신은 없는 useEffect 에 대해 질문이 들어왔다. 머리가 멍해지고 일단 알고 있는 개념을 그대로 말하고자 했지만 설명하는 도중 빈 배열과 배열이 없는것을 반대로 설명하여 다시 !! 다시해도될까요 ? 하고 .. 다시 면접을 진행하였다. 
면접을 진행해주신 모더레이터 분이 정말 면접관 처럼 진행을 매끄럽게 잘 해주셔서 더 떨리고 실제와 같은 긴장감을 느꼈던 것 같다 . 이번에는 질문이 모두 주어진 후 대답하는 거였는데도 떨렸는데 정말 실제에서 질문이 들어온다면 정말 당황할 것 같다. 하지만 오늘을 통해 연습을 더 많이 해서 다음 모의 면접때는 떨지않고 준비한 대답을 해볼 것이다 ! 

 

모의 기술면접 피드백 

- 답변을 대강 마무리하는 것보다, 더 정확한 답변을 위해 칠전팔기 하시는 모습이 인상깊었습니다.
- 답변 질문을 미리 적어두셔서 가산점 드리고 싶습니다. 질문에 대한 의도를 잘 파악하신거같고 다양한 경우를 포함해서 설명해주셔서 좋았습니다.
- 긴장하지 않으신 분 처럼 자신감이 넘쳐보여서 듣기 좋았습니다 !
- 차분하게 다시 이어나가는 모습이 인상깊었습니다. 이해하기 쉽게 설명해주셨어요!
- 예시가 참고하기 좋았습니다. 실수에 더 떨지 않고 다음답변 잘해내시고 차분하게 잘하셨어요!