기술 면접 질문 (공통 질문 + 프로젝트 질문) /W 튜터님

 

 

공통 질문

 

1. Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요?

 

 

DOM(Document Object Model)은 웹페이지의 구성요소들을 트리구조로 표현한 것이며 가상 돔은 실제 DOM과 구조가 완벽히 동일한 복사본 형태입니다. 가상DOM을 이용하면, 실제 DOM을 조작하는 것보다 메모리상에 올라와있는 javascript 객체를 변경하는 작업이 훨씬 더 가볍고 효율적입니다.

또한 가상DOM에서 batchupdate가 가능해졌는데, 예를 들어 인스타그램의 좋아요를 누를 때, 실제 DOM에서는 좋아요 하나를 바꾸기 위해 여러 개의 엘리먼트가 변경되어 여러 번의 갱신이 필요하지만, 가상 DOM에서는 모든 변경을 한 번에 모아서 한 번만 갱신하기 때문에 성능이 훨씬 향상될 것입니다.

 

---

2. 바닐라 자바스크립트 대신 React를 쓰는 이유는 무엇인가요?

 

React는 JSX 문법을 제공하여 HTML과 JavaScript를 조합한 형태로 컴포넌트를 작성할 수 있기 때문에 바닐라 자바스크립트 대비 가독성과 유지보수성이 높다는 장점이 있습니다. 컴포넌트를 적절하게 활용하게 되면 큰 프로젝트가 작은 단위로 모듈화 될 수 있습니다. 또한, 실제 DOM을 조작해야 하는 바닐라 자바스크립트와 달리 리액트는 가상 DOM(Virtual DOM)을 활용하여 변경 최소화 하는 방식으로 DOM 조작을 효율화 하기 때문에 빠른 렌더링과 업데이트 속도를 제공합니다.
3. Redux와 같은 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?

 

Redux와 같은 상태 관리 라이브러리를 사용하는 이유는 다음과 같습니다. 첫째, 애플리케이션의 상태를 중앙 집중화하여 관리하여 상태 공유와 변경을 쉽게 만들어줍니다. 둘째, 예측 가능한 상태 변경을 통해 디버깅과 상태 추적이 용이해집니다. 셋째, 상태 변경에 대한 로깅과 개발자 도구를 제공하여 디버깅을 용이하게 합니다. 넷째, 효율적인 상태 업데이트를 통해 성능 최적화를 도모할 수 있습니다. 다섯째, Redux는 테스트 용이성을 제공하여 상태 변화 로직을 독립적으로 테스트할 수 있습니다.

 

 

---

 

3. Redux와 같은 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?

 리액트 특징인 단방향 데이터 전달인 props-drilling으로 데이터 이동이 자유롭지 못한 단점이 있었습니다.

그 단점을 해결하기 위해 나온 라이브러리가 리덕스입니다.

결국, 필요한 데이터를 중앙에서 관리하여 어디에서든 데이터의 접근과 수정이 가능하여 사용하는 것입니다.

• 연계해서 질문하실 것 같습니다. 상태관리를 왜 하는지? 평소 state 관리를 어떻게 하는지?

리액트는 SPA로 가상DOM방식을 사용하기에 직접 변수 변경이 안됩니다. 그래서 state를 통해 데이터 관리가 가능합니다. 상태관리를 통해 다른 컴포넌트들과 데이터 공유가 가능하고 변경 사항 적용 가능합니다.

평소엔, 지역적 또는 전역적으로 사용합니다. 다른 컴포넌트에서도 지역적으로 사용할 경우, 커스텀 훅을 사용하고,

어플리케이션 전체에서 사용되는 state는 전역상태관리 라이브러리인 리덕스를 통해 store를 생성하여 전역관리합니다.

tanstack-query를 서버에서 데이터를 받을때는 query-key를 통해 데이터 관리를 합니다.

 

 

---

4. JavaScript의 동기식과 비동기식 프로그래밍의 차이점은 무엇인가요?

 

동기식 프로그래밍은 코드가 작성된 순서대로 실행되며, 한 작업이 완료되기 전까지 다음 작업이 시작되지 않는 방식입니다. 반면, 비동기식 프로그래밍은 한 작업이 완료되는 것을 기다리지 않고 다른 작업을 동시에 진행할 수 있는 방식입니다.

예를 들어, 웹 애플리케이션에서 서버로 데이터를 요청하는 경우를 생각해보겠습니다. 동기식 방식에서는 데이터 요청 후 응답을 받기 전까지 다른 작업을 수행할 수 없어 사용자 인터페이스가 멈춰 보일 수 있습니다. 하지만 비동기식 방식을 사용하면 데이터 요청을 보낸 후에도 다른 작업을 계속 진행할 수 있어 사용자 경험이 향상됩니다. JavaScript에서는 Promise나 async/await와 같은 구문을 사용하여 비동기 작업을 효율적으로 관리할 수 있습니다.

 

 

 

💡 동기식 프로그래밍에서 발생할 수 있는 '블로킹' 현상에 대해 좀 더 설명해주실 수 있나요?

 네, 동기식 프로그래밍에서 '블로킹' 현상은 한 작업이 완료될 때까지 프로그램의 다른 부분이 대기 상태에 빠지는 것을 의미합니다. 이는 특히 입출력 작업, 네트워크 요청, 데이터베이스 쿼리 등과 같이 시간이 많이 소요되는 작업에서 두드러집니다.

예를 들어, 웹 서버가 데이터베이스에서 데이터를 검색하는 동기식 작업을 수행하고 있다고 가정해 보겠습니다. 이 데이터베이스 쿼리가 완료되기 전까지는 서버는 다른 어떤 요청도 처리할 수 없습니다. 이는 서버의 처리 능력을 저하시키고 사용자 경험에 부정적인 영향을 미칠 수 있습니다.

이러한 블로킹 현상은 특히 멀티 유저를 지원하는 웹 애플리케이션, 대규모 데이터를 처리하는 시스템, 또는 실시간 반응이 중요한 서비스에서 문제가 될 수 있습니다. 이러한 환경에서는 동기식 프로그래밍 대신 비동기식 프로그래밍을 채택하여 여러 작업을 동시에 처리하고, 시스템의 전체적인 반응성과 효율성을 향상시킬 수 있습니다.

블로킹 현상은 코드의 예측 가능성과 이해하기 쉬운 구조를 제공한다는 동기식 프로그래밍의 장점을 가릴 수 있으며, 때로는 성능 문제로 이어질 수 있습니다.

블로킹 현상은 코드의 예측 가능성과 이해하기 쉬운 구조를 제공한다는 동기식 프로그래밍의 장점을 가릴 수 있으며, 때로는 성능 문제로 이어질 수 있습니다.

 

 

💡 동기식 프로그래밍의 장점은 무엇이고 언제 사용하나요?

 동기식 프로그래밍의 주요 장점은 그 구조의 단순성과 예측 가능성입니다. 코드가 작성된 순서대로 실행되기 때문에, 프로그래머는 각 단계에서 무슨 일이 일어나는지 쉽게 이해하고 추적할 수 있습니다. 이는 특히 복잡성이 낮은 작업, 작업의 순서가 중요한 경우, 혹은 개별 작업이 비교적 빠르게 완료될 때 유용합니다.

 

단순한 스크립트 또는 애플리케이션: 간단한 파일 처리, 데이터 변환 스크립트 등에서 동기식 프로그래밍을 사용하면, 코드의 흐름을 쉽게 이해하고 디버깅할 수 있습니다.

순차적인 처리가 중요한 경우: 특정 작업들이 엄격한 순서대로 실행되어야 할 때, 동기식 프로그래밍은 이러한 순차적 의존성을 간단하게 관리할 수 있게 해줍니다. 예를 들어, 사용자의 입력을 받고, 그 입력에 따라 데이터베이스를 업데이트 한 후에 결과를 사용자에게 보여주는 과정 등이 이에 해당합니다.

서버 사이드 애플리케이션: 특정 유형의 서버 사이드 애플리케이션에서, 각 요청이 독립적이고 빠르게 처리될 수 있다면, 동기식 모델을 사용하는 것이 유리할 수 있습니다. 이 경우, 각 요청이 다른 요청의 처리에 영향을 미치지 않으므로, 코드의 복잡성을 줄이면서도 효율적인 처리가 가능합니다.

동기식 프로그래밍은 코드의 가독성과 유지보수성을 높이는 데 기여할 수 있으며, 특히 작은 규모의 프로젝트나 단순한 작업 흐름에서 그 장점이 잘 드러납니다.

 

 

 

💡 어떤 경우에 작업의 순서가 중요한가요?

 사용자가 웹 사이트나 애플리케이션과 상호작용하는 과정에서도 특정 작업들은 순서대로 이루어져야 합니다. 예를 들어, 사용자가 폼을 제출할 때, 서버는 먼저 폼 데이터의 유효성을 검증하고, 그 다음에 데이터베이스에 저장하는 과정을 거쳐야 합니다. 이러한 과정에서 각 단계는 이전 단계에 의존하므로, 동기식 처리가 적절합니다.

이렇듯, 특정 작업이나 과정이 전체 흐름에서 다른 부분에 의존하거나, 엄격한 순서를 따라야 할 때, 동기식 프로그래밍은 프로세스를 명확하고 관리하기 쉽게 만들어 줍니다.

 

 

 

💡 비동기식 프로그래밍에서 발생할 수 있는 문제에 대해 말씀해주시겠어요?

 비동기식 프로그래밍은 여러 작업이 동시에 진행되며 코드의 실행순서가 항상 일정하지 않기 때문에, 코드의 흐름이 동기식 프로그래밍보다 복잡해질 수 있습니다. 이로 인해 동시에 발생하는 여러 작업들 사이에서 문제를 정확히 파악하는 것이 어려울 수 있습니다.

비동기식 프로그래밍에서는 콜백 함수를 자주 사용합니다. 많은 콜백 함수들이 중첩되어 사용될 경우, 이를 관리하기 어려워지는 현상을 '콜백 지옥'이라고 합니다. 이는 코드의 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다.

또한 에러를 처리할 때, 각 비동기 작업 마다 에러핸들링을 개별적으로 구현해야하며, 놓치기 쉬운 부분이 될 수 있습니다.

 

---

 

5. Single Page Application(SPA)과 Multi Page Application(MPA)의 차이점은 무엇인가요?

 

SPA는 Single Page Application으로, 이름에서 알 수 있듯이 단일 페이지로 구성된 웹 애플리케이션입니다. 이 방식에서는 처음에 전체 페이지를 로드한 후, 사용자의 상호작용에 따라 필요한 부분만 업데이트하거나 변경합니다. 이렇게 하면 페이지 전환 없이 웹사이트의 다양한 부분을 빠르게 탐색할 수 있습니다. React, Angular, Vue와 같은 JavaScript 프레임워크를 사용하여 SPA를 구축할 수 있습니다.
MPA는 Multi Page Application으로 전통적인 웹 애플리케이션 방식입니다. 사용자가 페이지를 탐색할 때마다 새로운 페이지가 서버로부터 로드되거나 생성됩니다. 이 방식은 복잡한 웹 애플리케이션에 적합하며, 서버에서 대부분의 로직을 처리합니다. MPA는 보통 서버 사이드 렌더링(SSR)을 사용하여 페이지를 생성합니다.

이러한 특징으로 SPA는 페이지 전환이 부드럽고 빠르며, 사용자가 페이지를 이동할 때 화면이 깜빡이는 현상이 없습니다. MPA의 경우 페이지마다 새로 로딩되기 때문에 사용자 경험이 더 느릴 수 있습니다.

 

---

6. 브라우저에 웹사이트 주소를 입력하고, 그 웹사이트가 브라우저에 나타나기까지 내부적으로 어떤 일이 벌어지나요?

 

데이터가 전달되고, 화면에 렌더링됩니다. 데이터 전달에서 말씀드리면, 유저가 웹사이트 주소를 입력하면

1. 웹 브라우저는 DNS 서버에 도메인 주소를 전달하고 IP주소를 반환 받습니다. *DNS 서버는 DNS 쿼리를 통해 가까운 DNS에서 먼 곳의 DNS까지 찾을때까지 탐색을 하는 과정을 갖습니다.
2. 웹브라우저는 DNS서버에게 받은 IP주소를 TCP/IP 프로토콜을 통해 웹서버에게 해당 웹사이트에 맞는 html문서를 요청합니다.
3. 웹서버의 과부하 방지를 위해 웹서버는 html,css,이미지와 같은 정적 데이터를 처리하고 WAS서버로 동적데이터 처리를 요청합니다. WAS 서버는 js/ts와 같은 동적데이터를 처리하면서DB에서 필요한 데이터를 가져와서 웹서버에 전달합니다.
4. 웹서버가 웹 브라우저에게 html 문서 결과를 전달합니다. 이때, http status code를 통해 전달하는데 우리가 익히 아는 404 에러입니다. 1xx : 정보가 담긴 메세지 2xx : 응답 성공 3xx : 리다이렉트 4xx: 클라이언트 측 에러 5xx : 서버 측 에러

그 후 화면에 DOM트리 빌드를 통해서 브라우저 렌더링을 하고, 웹 브라우저에 웹 페이지 내용을 보여줍니다.

브라우저 랜더링은 트리생성 -> Layout -> Paint 과정을 거쳐 화면을 렌더링합니다.

 

1. 브라우저는 DOM, CSSOM트리 생성한다
2. DOM, CSSOM트리를 결합하여 렌더트리를 만든다
3. 브라우저는 렌더트리를 기반으로 요소의 위치, 크기 계산하는데 Layout이라고 부름
4. 마지막으로 요소에 스타일을 저적용하는 Paint과정을 거친다.

 

---

 

 

8조 기술 질문

 

 

1. 웹폰트를 사용할 때 고려해야 할 점을 말씀해주세요.

 

모든 브라우저가 모든 웹폰트 형식을 지원하지 않기 때문에 브라우저 호환성을 고려해야 합니다. 예를 들어 웹폰트가 IE(Internet Explorer)에서 지원되지 않는다면 대체 폰트를 설정하여 사용자가 폰트를 볼 수 있도록 해야 합니다. 대체 폰트는 비슷한 스타일 폰트를 선택하고, CSS의 폰트 스택(font stack)을 활용하여 다양한 운영체제와 브라우저에서 호환성을 유지할 수 있도록 합니다. 또한 파일 크기가 너무 클 경우, 페이지 로딩 시간에 큰 영향을 미쳐 웹사이트의 성능이 저하될 수 있습니다. 폰트 파일을 압축하기 위해 WOFF2 으로 압축하는 것도 방법입니다. 마지막으로 제일 중요한 것은 폰트의 라이선스라고 생각합니다. 웹폰트를 사용할 때에는 폰트 라이선스를 반드시 확인해야 합니다. 라이선스를 무시하고 폰트를 사용하는 것은 저작권 침해가 될 수 있으며, 법적 문제를 초래할 수 있습니다.

 

 

 💡CSS의 폰트 스택(Font Stack)은 웹페이지에 적용될 폰트의 우선순위를 나열한 것을 말합니다.

 

---

 

2. prop drilling이 무엇이고 어떻게 해결할 수 있는지 말씀해주세요.

 

Prop Drilling이란 React에서 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하는 과정에서, 중간에 위치한 컴포넌트들이 해당 props를 사용하지 않음에도 불구하고 전달해야 하는 현상을 말합니다. 이 현상은 코드의 복잡성을 증가시키며, 유지보수를 어렵게 만듭니다. 이 문제를 해결하는 방법 중 하나는 Context API를 사용하는 것입니다. React의 Context API는 데이터를 트리의 모든 레벨에서 접근할 수 있게 해줍니다. 따라서 중간 컴포넌트들을 건너뛰고 필요한 데이터를 전달할 수 있습니다.
또 다른 방법은 Redux나 MobX와 같은 상태 관리 라이브러리를 사용하는 것입니다. 이러한 라이브러리들은 전역 상태를 관리하며, 필요한 컴포넌트에서 직접 해당 상태를 불러와 사용할 수 있습니다.
이와 같은 방법들을 통해 Prop Drilling 문제를 해결하고, 코드의 복잡성을 줄이며 유지보수를 용이하게 할 수 있습니다.

 

---

 

 

3. recoil을 사용하는 이유에 대해 말씀해주세요.

 

Recoil은 전역 상태 관리를 할 수 있는 다양한 라이브러리 중 하나입니다. Recoil 외 사용 가능한 상태 관리 라이브러리로 Redux, Context API 등이 있는데요, 그 중에서 Recoil은 쉽고 직관적이기 때문에 학습 곡선이 낮고, 상태들을 재사용하기가 용이하다는 장점이 있습니다. 전역 상태 관리를 하게 되면 props drilling으로 인한 문제들을 해소할 수 있습니다. Recoil은 각 상태에 대해 구독하는 방식을 사용하기 때문에 관련된 컴포넌트만 리렌더링이 되어 불필요한 리렌더링을 최소화하고 성능을 향상시킨다는 장점이 있습니다. Recoil은 React의 훅 기반 설계를 따르므로, React 생태계와 연계성이 뛰어나 React 프로젝트에 자주 사용됩니다. 또한 DevTools 지원을 통해 디버깅을 용이하게 함으로써 React 애플리케이션의 복잡성을 효율적으로 관리할 수 있습니다.

 

---

 

 

4. 시맨틱 태그에 대해 설명해주세요.

 

 시맨틱 태그(Semantic Tags)는 문서의 구조를 명확히 설명해 주는 HTML 태그들입니다. 이들 태그는 웹 페이지의 다양한 부분을 의미론적으로 구분하여, 브라우저나 검색 엔진, 그리고 개발자들에게 해당 콘텐츠의 의미와 구조를 명확하게 전달합니다.

시맨틱 태그의 예로는 <header>, <footer>, <article>, <section>, <nav> 등이 있습니다. 각각의 태그는 웹 페이지의 특정 부분이 무엇을 의미하는지를 명확히 합니다.

이러한 시맨틱 태그를 사용함으로써 웹 페이지의 접근성이 향상되고, 검색 엔진 최적화(SEO)에 유리하며, 코드의 가독성이 높아지고 유지보수가 용이해집니다. 예를 들어, <div> 태그만 사용하는 대신 시맨틱 태그를 사용하면, 웹 페이지의 구조를 더 명확히 이해할 수 있고, 스크린 리더와 같은 보조 기술에게 유용한 정보를 제공하여 웹 접근성을 향상시킬 수 있습니다.

 

 

---

 

 

 

5. Reflow와 Repaint에 대해 설명해주세요.

브라우저는 트리생성 -> Layout -> Paint 과정을 거쳐 화면을 렌더링합니다. Layout은 요소의 위치,크기 계산해서 화면에 그리는 과정이여서 reflow와 관련이 있고,

Paint는 배치된 요소에 스타일을 적용하는 과정으로 repaint와 관련있습니다.

Reflow 리플로우는 요소의 높이, 위치 등이 변경되어 렌더트리를 재생성하는 작업.

1. 발생시점 : DOM 요소의 기하학적 속성이 변경될때 (높이,위치) : 브라우저의 사이즈가 변할때
2. 비용이 큰 작업 : 이유는, 특정 요소에서 리플로우가 발생시, 부모,자식,형제 등의 주변요소에도 영향을 줍니다.

---

RePaint 변경된 요소를 화면에 그려주는 작업

1. 발생시점 : 리플로우 발생했을때 : 요소의 스타일 (색상, 배경색) 변경되었을떄, : visible : hidden ↔ visible 변경될 때
2. 비용이 작은 작업 : 요소의 스타일이 변경되었을때 발생하기에 적음

---

우리는 리플로우와 리페인트를 줄이면 방법으로는 여러가지가 있습니다. 그 중에서도 “가상DOM 사용하기”가 있습니다. (현재 우리는 리액트를 사용하고 있기에 비효율을 해소하고 있습니다. : 가상 DOM은 배치업데이트를 통해 모든 변경 내용을 한 번만 화면을 갱신해 주기 때문입니다. 👍)

이외에 다른 방법으로는 3가지 정도 더 있습니다.

(1) 애니메이션의 요소의 위치를 absolute로 두기 (2) display : none을 사용하기 (display:none 적용 요소는 랜더트리에서 제외되기 때문에) (3) 리플로우 유발함수의 호출 제한하기 (예를 들어, 반복문에 넣지 않고, 한번 호출해서 변수에 저장하기)

 

 

 

 

---