프론트엔드 기술면접 기초 예상질문 답변 정리

코드스테이츠를 수료하고 20일동안 기술면접 스터디 챌린지를 참여했다!

이걸 매일할 수 있을까? 했는데 또 하다보니 금방 20일이 다갔다는...

매일 기술면접 질문이 올라오면 답변 적는 연습을 하면서 개념도 다시 공부하는 시간을 가질 수 있어서 좋았다. 그런데 역시 기술을 말로 설명하려니 더 어려운것..  ^^ 나 언제 기술자될 수 있지..? 

20일 챌린지에서  받았던 질문과 내가 적은 답변들을 블로깅해본다.

 

---

1. 배열, 객체를 const로 선언했는데 요소, 속성을 추가가능한 이유

 

const 키워드는 재선언과 재할당이 불가능합니다. 하지만 const로 선언한 배열이나 객체에 요소, 속성을 추가하는 것은 재할당의 개념이 아닙니다. 배열과 객체의 경우 메모리에 값 자체가 할당되는 것이 아니라 주소값이 할당되기 때문에 메모리는 배열,객체의 값 자체가 아닌 주소값을 가리킵니다. 따라서 주소값을 통해 객체에 접근하기때문에 메모리가 가리키는 참조값을 변경하지 않고 메모리에 저장된 객체, 배열의 속성을 추가할 수 있습니다. 

---

2. http 메시지 구조

 

우선 HTTP는 HTML 문서를 교환하기위해 만들어진 통신 규약을 뜻하며, 서버와 클라이언트는 HTTP 메시지를 통해 데이터를 주고 받습니다.

HTTP 메시지 타입은 두 가지가 있는데요. 클라이언트에서 서버로 전달하는 요청(Request)와 서버에서 클라이언트에 답을 주는 응답(Response)가 있습니다. 요청과 응답은 유사하게 크게 3가지 부분으로 구성이 되어있습니다.

먼저 request는 startline, headers, body로 구성이 되어있습니다. 첫번째로 스타트라인은 실행되어야하는 요청인 get, post, put, delete등이 담깁니다. 두번째로 헤더에는 request에 대한 추가정보가 key:value형태로 구성되어있는데, 예를들어 컨텐트 타입이라던지 authorization 정보가 있습니다. 마지막으로 바디에는 전송하는 데이터를 담아줍니다. 보통 post나 put요청의 경우 body를 담아주고 get, delete 요청은 바디 부분이 필요하지 않습니다.

요청 메시지구조와 마찬가지로 응답 또한 세 가지 부분으로 구성이 되어있는데요, status line, headers, body로 구성되어 있습니다. 첫번째로 상태줄은 상태코드, 상태텍스트가 담깁니다. 두번째로 헤더는 request header와 동일하게 응답에 대한 추가 정보가 담겨있습니다. 마지막으로 바디 또한 request body와 동일하게 서버에서 클라이언트로 보내주는 데이터가 있을 경우 바디에 담겨서 데이터가 전송됩니다.

---

3. useRef가 필요한 상황 예

 

useRef는 DOM 요소를 접근, 참조할때 사용하는 react hooks 입니다. 대표적으로 input태그에 자동으로 포커스를 줄때처럼 ref로 지정한 DOM 요소를 직접 접근할때 사용합니다. 바닐라 자바스크립트에서 querySelector로 특정 DOM 요소를 선택하는 것과 같은 역할을 합니다. 또한, 변수를 관리할때도 useRef를 사용할 수 있습니다. ref로 가지고있는 값은 값이 업데이트가 되더라도 컴포넌트가 렌더링되지 않고 유지되기때문에 스크롤 위치라던지 화면위치를 파악할때 유용하게 쓰일 수 있습니다.

---

4. Cookie maxage, expires 옵션

 

쿠키의 max-age와 expires속성으로 쿠키의 유효기간을 설정할 수 있습니다. 유효기간을 설정한 쿠키는 permanenet cookie라고 하고 설정된 시간만큼 유효합니다. 두 속성이 설정되어있지 않으면 해당 쿠키는 세션이 종료될 때, 즉 유저가 브라우저의 탭이나 윈도우 창을 닫을 때 만료되는 세션 쿠키가 됩니다.

---

5. styled components 장점

 

우선 컴포넌트 단위로 스타일링을 하기 매우 편합니다. css in js 가 아니라면 스타일링을 해야되는 태그에는 직접 클래스이름이나 아이디이름을 다 달고난 이후에 스타일링을 해야하는 번거로움이 있습니다. 하지만, styled components 를 이용하면 js 컴포넌트 이름을 그대로 가져와서 사용할 수 있어 클래스나 아이디 이름을 주지 않고도 쉽게 스타일링이 가능합니다.

또한, 리액트 컴포넌트로 넘겨주는 props에 따라 다른 스타일링이 가능하기때문에 버튼이나 Input같은 공통 컴포넌트의 경우 미리 내려받을 props를 지정해두면 하나의 컴포넌트만 만들어두면 원하는 속성(색깔, 크기 등)으로 다양한 스타일링 할 수 있어 편리했습니다. 

---

6. IP프로토콜의 한계

 

우선 인터넷 프로토콜은 클라이언트와 서버가 서로 데이터 통신을 주고받는 규칙이라고 할 수 있는데요. IP주소에 패킷이라는 통신 단위로 데이터를 주고 받습니다. 패킷은 pack + bucket이 합쳐진 단어로 패키지, 택배박스같은 역할을 하는데요, 택배박스처럼 보내는 사람과 받는 사람 주소와같이 출발지 IP와 도착지 IP 정보가 있습니다. 그런데 이런 IP 프로토콜에도 한계가 있습니다.

그 한계로는 비연결성, 비신뢰성이 있습니다. 비연결성은 클라이언트측에서는 서버의 상황을 알 방법이 없기때문에 패킷을 받을 상대가 없거나 서비스가 불능상태여도 패킷이 그냥 전송된다는 것입니다. 비신뢰성은 패킷이 전송이 잘되다가 중간에 없어져도 클라이언트 측에서는 알 방법이 없다는 것과, 클라이언트가 패킷을 나누어 보낼 경우에 클라이언트가 보내는 순서대로 서버에 도착할 것이라는 보장이 없다는 한계가 있습니다.

---

7. 순수함수 불변성, side effect

 

순수함수는 같은 입력을 받았을때, 항상 같은 출력을 반환하는 함수를 뜻합니다. 동시에 사이드이펙트 즉, 부수효과가 없어야 합니다. 부수효과란 원래 함수의 목적과는 다른 효과, 부작용을 뜻하는데요, 함수 내에서 외부의 변수에 접근하여 외부 변수의 값이 변경되는 경우를 부수효과가 있다고 할 수 있습니다. 외부의 값을 변경하지 않는다는 부분이 불변성이랑 큰 관련이 있는데요. 불변성이란 메모리 영역의 값을 실제로 변경할 수 없는 것을 뜻합니다. 자바스크립트에서 순수함수를 작성하기 위해서는 데이터의 불변성을 유지하는 것이 중요합니다. 함수의 인자로 참조 자료형같은 배열, 객체가 전달되는 경우 spread 연산자, map, filter, slice 등 새로운 참조형을 반환하는 메서드를 통해 의도적으로 불변성을 지킬 수 있습니다.

---

8. 재귀를 활용하기 좋은 상황

 

문제가 있을때 비슷한 구조이지만 더 작은 단위로 나뉘어지는 경우 재귀를 사용하기 적합합니다. 배열의 합을 구한다고 할때 먼저 문제를 더 작은 단위로 쪼개고, 문제가 더이상 쪼개지지 않을때 가장 작은 단위의 문제를 먼저 해결한 다음 전체 문제를 풀 수 있습니다.

또한 반복문이 많은 경우 중첩 횟수를 예측하기 어려운 경우에 재귀를 사용하기 좋습니다. 예시로 객체가 있을 때 객체는 그 안에 객체 및 배열을 담을 수 있기때문에 몇개가 중첩되어있는지 예측하기 어려운 경우에는 반복문을 사용하여 문제를 해결하기가 어렵습니다. 이럴때 재귀를 활용하여 가장 깊은 곳에있는 객체까지 확인할 수 있어 문제를 해결할 수 있습니다.

---

9. li요소가 ul요소의 자식이어야하는 이유

 

<li> 요소는 목록의 각 아이템을 나타내기 위한 요소이기때문에 목록을 담는 unordered list, <ul>요소의 자식 요소로 활용하는 것이 적합합니다. 목록을 나타내기위해 <div> <span>으로 표현해도 화면상에는 전혀 문제가 없겠지만, 상황에맞게 시멘틱한 html요소를 활용하는 것이 다른 개발자 및 검색엔진에 컨텐츠의 의미를 더 잘 설명할 수 있습니다.

---

10. 리액트 state와 props 설명

 

React의 state는 컴포넌트 안에서 변할 수 있는 값을 다루는 개념이고 상태를 다루는 useState hook을 사용해 상태를 변경합니다. 리액트의 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링되는 특징을 가지고있습니다. 상태는 직접적으로 변경하지 않는다는 리액트의 대원칙에 따라 직접적으로 변수에 할당하여 변경하는 것이 아닌, useState로 선언한 상태변경 함수를 통해 변경해야 합니다.

props는 컴포넌트의 속성(property)를 의미하며 부모 컴포넌트로부터 전달받은 값을 표현할때 사용합니다. 리액트의 단방향, 하향식 데이터흐름 원칙에따라 props는 외부로부터 전달받아 함부로 변경되면 안되기때문에 읽기전용 객체입니다.

---

11. UI, UX의 개념과 두 개념의 관계 

 

UI 유저 인터페이스는 사람들이 제품/서비스를 사용할때 마주하는 시각적인 요소로 보통 애플리케이션 화면을 의미합니다. 반면 UX는 사용자 경험으로 사용자가 직접적으로 서비스를 사용하면서 느끼는 총체적 경험입니다. 심미적으로 보기좋은 UI가 반드시 좋은 UX를 보장하진 않지만, UX가 유저의 종합적인 만족도와 관련이 깊은만큼 항상 사용자입장에서 UX를 고려하여 개발하는 것이 좋습니다.

---

12. semantic html의 필요성? 예시를 들어 설명

 

코드 가독성 향상 

html이 시멘틱하게 작성되면 div span으로만 작성되었을때보다 태그의 역할을 쉽게 유추할 수 있어 콘텐츠를 더 명확하게 전달할 수 있으므로 코드 가독성이 향상되어 개발자간 소통이 용이해집니다.

검색엔진 최적화 

웹 브라우저가 html코드만으로 웹사이트의 구조를 파악하기 쉬워져 검색엔진 최적화에 유리합니다. 

웹접근성 향상

마지막으로 semantic 요소를 사용하므로써 화면의 구조에대한 정보도 전달할 수 있어 브라우저/스크린리더가 코드를 더 쉽게 해석할 수 있어져 콘텐츠를 더 정확하게 전달할 수 있습니다.

---

13. useEffect dependency array

 

useEffect는 첫번째 인자로 콜백함수, 두번째 인자로 dependency array를 받는데요, 기본적으로 dependency array를 넘겨주지 않으면 매 렌더링시 실행됩니다. dependency array를 통해서 useEffect를 조건부로 callback 함수를 실행시킬 수 있습니다. 만약 의존성배열을 빈상태로 두면 맨 처음 렌더링시에만 useEffect가 실행되고, 특정 값을 배열에 넣어주면 값이 변경될때마다 렌더링이 됩니다.

---

14. 얕은 복사와 깊은 복사

 

얕은복사는 객체의 참조값을 복사하고 깊은 복사는 객체의 실제값을 복사합니다.

let obj1 = {name: snoopy, age: 1}, let obj2 = obj1 를 예로 obj2에 obj1 객체를 재할당한 경우에 객체는 메모리가 참조값을 가리키기때문에 얕은 복사가 이뤄지며, obj2.age = 5로 바꾸면 obj1의 age변수값도 5로 바뀌게 됩니다.

깊은복사는 또 다른 원시값을 복사하는 것을 뜻하며 새로운 값이 다른 메모리에 할당되기 때문에 원래값과 복사된 값이 서로 영향을 미치지 않습니다. 객체를 깊은 복사하려면 lodash같은 라이브러리를 사용할 수 있습니다.

---

15. 상태관리 라이브러리의 필요성

 

리액트에서는 상태를 useState hook으로 관리하는데, 리액트는 단방향 특징을 가지기때문에 부모컴포넌트에서 자식컴포넌트로 props를 사용하여 state를 전달합니다. 하지만 앱의 규모가 커지면 오직 하위컴포넌트에서만 필요한 props를 state가 선언된 상위 컴포넌트에서 해당 자식 컴포넌트까지 모두 전달해주어야지만 하위 컴포넌트에서 그 props를 사용할 수 있기때문에 props drilling 문제가 발생할 수 있습니다. 이에 상태관리 라이브러리를 사용하면 상태를 전역값으로 관리할 수 있어 props drilling없이도 어떤 컴포넌트에서든 해당 상태를 접근할 수 있습니다.

---

16. innerHTML, textContent 차이

 

innerHTML은 element의 속성으로 해당 html를 태그까지 모두 읽어오고 설정할 수 있습니다. 반면에 textContent는 node의 속성으로 해당 노드가 갖고있는 텍스트값을 그대로 읽거나 설정할 수 있습니다.

오직 text만 조작할 경우에는 textContent가, 태그까지 DOM을 조작하고 싶으면 innerHTML을 사용하는 것이 적합합니다.

---

17. 리덕스 주요개념

 

Redux의 주요개념에는 Action, Dispatch, Reducer, Store가 있습니다.

Action은 상태가 변경되면 어떤 액션을 취해야되는지 정의해놓은 객체입니다.

Dispatch는 Reducer로 Action을 전달해주는 함수로, Dispatch의 전달인자로 Action 객체가 전달됩니다.

Reducer는 함수로, Dispatch한테 전달받은 Action객체의 값을 확인해서 값에따라 store의 상태를 변경시키는 순수함수 입니다.

Store는 redux의 상태가 모두 저장되어있는 전역 상태 저장소입니다. 상태가 변경되면 화면이 다시 리렌더링됩니다. 

---

18. 스코프에 대해서 설명

 

스코프란 모든 식별자(변수 이름, 함수 이름, 클래스 이름)가 유효한 범위를 말합니다. 식별자는 자신이 선언된 위치에따라 자신이 유효한 범위, 즉, 다른 코드가 식별자를 참조할 수 있는 범위가 결정됩니다. 스코프는 크게 전역 스코프와 지역 스코프로 나뉘고 스코프는 계층적으로 연결되어 체인의 형태를 가지고있습니다. 이때 하위 스코프는 상위 스코프에 접근할 수 있으며 그 반대는 불가능합니다.

---

19. Same-Origin Policy와 CORS에 대해 설명

 

Same-Origin-Policy는 웹 브라우저에서 주소가 같은 출처끼리만 요청을 주고 받을 수 있는 보안 정책입니다. 하지만 현실적으로 개발시 서버와 클라이언트 주소를 다르게 사용하는 경우도 많고 외부 api를 사용하는 경우가 많은데요. 이런 문제를 해결해주기 위해 등장한 것이 CORS 입니다. Cross Origin Resource Sharing의 약자로, 출처가 다른 도메인의 ajax 요청도 서버에서 데이터 접근을 허용하는 정책입니다.