면접 준비 했던 정리

hoin_lee·2023년 7월 31일

목록 보기

207/236

최근 이틀 정도 면접 질문에대한 준비를 하며 공부한 CS를 간단히 답변할 수 있게 끔 정리했는데 블로그에 작성이 안된 부분들은 나중에 계속 정리해 볼 예정이다

-브라우저 동작원리 , www.google.com을 입력하면 어떤 일이 일어나나?
사용자가 입력한 URL을 해석하여 캐싱된 DNS 기록에 해당 도메인 주소와 대응하는 IP주소가 있는지 확인후 없다면 DNS에 요청하여 IP주소를 받습니다
이후 IP주소를 이용해 웹 서버에 필요한 html파일을 요청하고 웹 서버에서 작업된 결과물을 받아 웹 브라우저는 웹페이지 내용물을 출력합니다

DNS가 뭔가요?
도메인 네임 시스템 서버로 URL들의 이름과 IP 주소를 저장하고 있는 데이터 베이스 입니다. IP주소가 숫자로 되어 있어 사용자가 사용하기 편리한 주소를 매핑해주는 역할을 합니다
http는 뭔가요?
클라이언트와 서버가 서로 통신할 수 있게 하기 위한 통신 규칙 세트입니다 네트워크 통신을 작동하게 하는 기본 기술입니다.
https는 뭔가요?
https는 HTTP의 확장 버전으로 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정하여 추가적인 웹사이트 보호를 제공합니다.
GET과 POST의 차이는?
get은 서버에서 어떤 값이나 내용, 상태를 바꾸지 않고 가져와서 보여줄 때 사용하며 POST는 서버상의 데이터 값이나 상태를 바꾸기 위해 사용합니다
restful 하다라는 뜻
각 구성요소들의 역할이 확실하게 분리되어 있어 요청코드나 URL만 보더라도 리소스를 명확하게 인식 할 수 있도록 표현한 설계방식
객체 지향 프로그래밍이라?
프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호 작용을 통해 로직을 구성하는 프로그래밍 방법입니다.
장점과 단점
다른 클래스들을 가져와서 이요할 수 있고 상속을 통한 확장으로 코드 재사용이 용이하며 따라서 유지보수에도 도움되빈다.
단점으론 객체가 많아지면 용량이 커지고 꼼꼼한 설계가 필요합니다.

javascript 질문

promise와 callback의 차이
콜백은 javascript에서는 함수를 다른 함수의 인자로 쓰일 수도 있고 어떤 함수에 의해 리턴될 수도 있는데 이렇게 인자로 념겨지는 함수 즉 다른 함수가 실행을 끝낸뒤 실행, 콜백 함수를 말합니다
프로미스는 비동기 작업을 조금 더 편하게 할 수 있도록 도입된 기능으로 이전에는 비동기 작업을 처리할 때 콜백 함수로 처리해야 했어서 계속해서 비동기 작업이 많아 질 경우 코드 깊이가 깊어지는 콜백지옥에 빠질 수 있는데 Promise를 사용하면 이를 방지할 수 있습니다.
async와 await 사용법
함수 앞에 async를 붙이면 해당 함수는 자동으로 프로미스를 반환하고
비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날때까지 기다립니다. await는 async가 붙은 함수 안에서만 사용간읗바니다
var, let , const 차이
var선언은 전역 범위 또는 함수 범위고 let, const는 블록범위입니다
var는 범위내에서 업데이트와 재선언이 가능하고 let은 업데이트만 가능 재선언이 불가능 합니다 const는 둘 다 입니다
제일 큰 건 var는 호이스팅 된다는 것입니다
호이스팅은 뭔지 아시나요?
코드가 실행되기 전 함수나, 변수 선언들이 먼저 메모리에 저장되는 현상입니다. var는 선언과 함께 undefined로 초기화 되어 저장되는데 let과 const는 초기화되지 않은 상태로 선언만 메모리에 저장되기 때문에
Virtual DOM 작동원리
실제 DOM과 같은 내용을 담고있는 복사본으로 JS객체 형태로 메모리 안에 저장되어 있는데 렌더링 이전 화면의 가상돔에서 새롭게 리렌더링 된 가상돔을 비교하여 차이가 발생한 부분만 실제 DOM에 적용시킵니다
이 과정에서 변경된 모든 것을 집단화 시켜 한번에 DOM에 적용하다보니 효율적입니다.
Virtual DOM이란?
실제 DOM과 같은 내용을 Javascript 객체 형태로 메모리 안에 저장시키는 것으로 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고. DOM에 대한 비교를 수행하여 변경 사항에 대해서만 DOM에 반영합니다. 이로 인해 더 반응성이 빠른 웹을 구현할 수 있습니다.
React의 개념과 장점
React는 UI를 구축을 위한 자바스크립트 프론트엔드 라이브러리 입니다. 주로 Single Page Application를 만들 때 사용됩니다. React의 장점에는 virtual DOM을 사용해서 어플리케이션의 성능을 향상시키고, 클라이언트 사이드 렌더링이 가능합니다. 또한 다른 프레임워크와도 사용이 가능하며, 컴포넌트의 가독성을 높이며 유지보수가 쉽습니다.
컴포넌트란?
재사용이 가능한 각각의 독립된 모듈을 뜻한다. 레고 블럭처럼 단위별로 만들어서 그것을 조립하는 것처럼 개발하는 방법입니다.
모듈(module)이란?
모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일
state와 props의 차이는?
state는 현재 컴포넌트의 생명주기 동안에 변경될 수 있는 정보를 담고 있는 상태이고, props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.
Props Drilling이란
상위 컴포넌트에서 하위 컴포넌트로 props를 전달하는 과정을 말합니다.
깊이가 깊을수록 그 과정이 귀찮고 힘들며 예기치 못한 오류를 발생시킬 수도 있고 이것에 대한 꼬리 질문으로 이러한 현상을 해결하는 방법(전역으로 state를 관리할 수 있는 redux, context API 사용 등등)에 대한 질문이 나올 가능성이 높습니다.
Context API란?
리액트 내장 기능으로 Props를 사용하지 않아도 컴포넌트끼리 값을 공유할 수 있게 해줍니다.
Redux의 정의, 필요성, 구조에 대해 설명해주세요.
리덕스는 리액트에서 사용되는 상태 관리 라이브러리 중 하나입니다. 프로젝트의 규모가 커지면 state의 전달이 복잡하고 어려워지게 되고 오류가 발생할 가능성이 높아집니다. 리덕스 사용 시 순수 함수를 사용하기 때문에 상태가 예측 가능하고 유지보수 및 디버깅에 유리하다는 이점이 존재합니다.
직접 사용해 본적은 없지만 새롭게 만드는 프로젝트에 적용해볼 생각입니다.
제어 컴포넌트와 비제어 컴포넌트의 차이점은?
제어 컴포넌트의 경우 리액트 state에 의해서 값이 관리 및 변경이 되고, 비제어 컴포넌트의 경우 ref를 통해 DOM 자체에서 form 데이터가 다뤄집니다. 가장 큰 차이점은 동기화인데, 제어 컴포넌트의 경우 사용자가 입력할 때마다 input의 state가 동기화되지만 state가 변경될 때마다 리렌더링이 발생하여 불필요한 자원의 낭비로 이어질 수 있습니다. 반면 비제어 컴포넌트의 경우 입력을 하고 버튼을 누르는 최종적인 상황에서만 input의 value에 접근을 하므로 리렌더링이 계속해서 발생하지는 않지만 입력의 최신 값에 접근하기 힘든 특성이 존재합니다.
제어는 유효성검사 등에 쓰임
리액트 라이프사이클에 대해서 설명해주세요.
React LifeCycle은 컴포넌트가 DOM위에 생성되거나 사라질 때, 혹은 업데이트될 때 호출되는 API입니다.
최초로 컴포넌트 객체가 생성될 때 한 번 수행되어지는 componentDidMount()와 초기에 화면을 그려줄 때와, 그리고 컴포넌트의 속성 값 또는 상태값이 변경되면 호출되어지는 componentDidUpdate()와 마지막으로 컴포넌트가 소멸될 때 호출되어지는 componentWillUnmount()가 라이프사이클의 역할입니다.
함수형 컴포넌트의 장점은?
클래스형 컴포넌트보다 선언이 간편
클래스형 컴포넌트보다 메모리 자원을 절약
리액트 16.8 버전부터 Hook으로 라이프사이클 사용 가능
클래스형 컴포넌트와 함수형 컴포넌트 차이점은?
함수형이 클래스형보다 메모리 덜 사용
state 사용법
함수형이 클래스형보다 사용하기 편함
JSX란 무엇인가요?
JSX는 자바스크립트 코드를 HTML처럼 표현할 수 있는 React 엘리먼트를 생성하는 언어입니다.
JSX는 JavaScript XML의 약자로 자바스크립트에서 XML 유사 구문을 확장시킨 문법입니다. HTML과 같은 문법과 함께 JS를 표현할 수 있어 편리하고 가독성이 높고 작성하기 쉽습니다.
리액트 라우터같은 Client Side Routing 에 대해서 설명하세요.
웹 페이지의 렌더링이 클라이언트 즉, 브라우저 측에서 일어나는 것을 의미합니다. 서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한번만 있기 때문에 페이지 이동이 빠르다는 장점이 있지만, 검색 최적화 사용은 어렵다는 단점이 있습니다. 또한 보안관련해서는 쿠키에 사용자 정보를 저장해야해서 위험 요소가 될 수 있습니다.
state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요.
state는 불변성을 유지해야하기 때문입니다. 컴포넌트는 setState를 비교해서 업데이트가 필요한 경우에만 render함수를 호출하는데 state를 직접 수정하게 되면 리액트가 render함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다
리액트 Hooks의 장점은 무엇인가요?
Hooks의 장점은 로직의 재사용이 가능하고 관리가 쉽다는 것입니다.
React Hook은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다. Hook을 통해서 함수형 컴포넌트에서도 컴포넌트의 상태 값을 관리할 수 있고 생명주기 메서드 또한 사용이 가능합니다.
Hook이 추가된 리액트 버전은?
version 16.8
쿠키, 세션에 대해 아시나요?
(1)쿠키
특정 웹서버에 접속할 때 생성되는 개인 아이디, 비밀번호 등 방문한 사이트 정보를 담은 임시파일
데이터 형태는 Key와 Value로 구성되고 String 형태로 이루어져 있음
서버가 아닌 사용자에게 저장되기 때문에 임의 수정이나 가로채기가 쉬워 보안에 취약
사용자의 브라우저에 저장되기 때문에 클라이언트의 자원을 사용
(2)세션
클라이언트와 웹서버 간 네트워크 연결이 지속적으로 유지되고 있는 상태
클라이언트가 페이지를 이동하거나 재접속했을 때 구분할 수 있는 수단
쿠키에 비해 보안성이 좋으며 주로 로그인 정보 유지에 사용됨
서버에 데이터를 저장하기 때문에 서버의 자원을 사용
useMemo와 useCallback
useMemo와 useCallback은 성능 최적화를 위해서 사용되는 Hook입니다.
메모이제이션을 통해 기존 수행한 값을 저장해두고 동일하면 재활용 하고 dependency 리스트를 이용하여 그 중 하나가 변경이 되면 결과에 대해 변경됩니다.

React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해서 설명하세요.
React는 상태를 불변성을 띄게 변경합니다. 그로 인해 상태 객체의 주소값이 변경이 되면 변화가 되었다는 것을 알 수 있습니다.
"불변성의 진짜 의미는 메모리 영역에서 값이 변하지 않는다 라는 의미입니다."

Next/image란?
lazy loading , 이미지 사이즈 최적화 , placeholder 제공하는 Next.js 컴포넌트로 레이지 로딩과 이미지 사이즈 최적화로 인한 성능향상과 플레이스 홀더로 시각적인 안정성을 줍니다.
레이지 로딩은 이미지 로드 시점을 필요할 때까지 지연시키는 기술
음식 영양 정보api
공공 데이터 포탈에서 식품 영양정보 데이터를 가져왔습니다
JWT
JWT는 JSON 웹 토큰을 나타냅니다. 인증 및 권한 부여 목적으로 사용되는 일종의 토큰입니다.
로컬 스토리지와 세션 스토리지 차이
(1) 로컬 스토리지
사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있음 (영구성)
단, 동일한 브라우저를 사용할 때만 해당
지속적으로 필요한 데이터 저장(자동 로그인 등)
(2) 세션스토리지
데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거
일시적으로 필요한 데이터 저장(일회성 로그인 정보, 입력폼 저장 등)
디바운스와 쓰로틀링이란?
(1) 디바운스 (Debounce)
연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
활용되는 곳 : 검색에 주로 사용된다.
(2) 쓰로틀링 (Throttle)
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
활용되는 곳 : 스크롤을 올리거나 내릴 때 보통 사용
CORS 문제를 해결해 본 경험이 있는지?
웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)
클라이언트 측 스크립트가 다른 도메인 또는 포트의 리소스에 접근하려고 할 때 발생합니다.
(1) 서버 개발자와 소통
네트워크 현황을 공유하며 소통하여 해결 합니다.
(2) 개발 환경에서 프록시 설정을 해준다.
CRA에서는 package.json에서 Proxy 설정을 하여 해결 합니다.
NextJs인 경우 next.conifg.js에서 Proxy 설정을 하여 해결 합니다.
recoil은?
Recoil은 Facebook에서 개발된 React 애플리케이션의 상태 관리 라이브러리입니다. Atom과 Selector를 이용하여 전역 상태를 효과적으로 관리하고 공유할 수 있습니다.
Recoil에서 Loadable의 개념에 대해 설명해주세요.
Recoil에서 Loadable은 비동기로 데이터를 처리할 때 사용되는 개념으로, 상태의 로딩, 성공, 에러 상태를 표현하는데 사용됩니다.
Recoil에서 비동기로 데이터를 받아올 때 State를 어떻게 관리하셨나요?
Recoil에서는 비동기로 데이터를 받아올 때 RecoilValueLoadable 객체를 이용하여 상태를 관리합니다.
Recoil에서 로딩, 성공, 에러와 관련된 처리를 어떻게 하셨나요?
Recoil에서 로딩, 성공, 에러와 관련된 처리는 주로 RecoilValueLoadable 객체를 이용하여 처리합니다. 이 객체를 통해 상태를 확인하고 적절한 처리를 수행합니다.
Redux와 Recoil에 대해 비교 설명해주세요. (개념, 장단점)
Redux는 React의 상태 관리 라이브러리로 단방향 데이터 흐름을 따르며, 상태를 하나의 스토어에 저장합니다. 반면, Recoil은 컴포넌트 간에 전역 상태를 공유하는데 더 간편하고 유연한 방식을 제공합니다. Redux의 장점으로는 강력한 상태 관리 패턴과 미들웨어를 통한 다양한 기능 추가, 그리고 풍부한 에코시스템과 커뮤니티가 있습니다. 그러나 설정과 사용 방법이 복잡하고 많은 Boilerplate 코드 작성이 필요합니다. Recoil은 더 적은 Boilerplate 코드로 상태 관리가 가능하며, 비동기 작업 처리와 선택적 로딩을 지원하여 사용성이 높습니다.