💎 개요
첫번째 기술 면접을 거치면서...정말 탈탈 털렸던 것 같다. 내 생각보다 기술 면접에 대한 준비가 잘 되어 있지 않아서 준비가 더 필요하다고 느꼈다. 대기업 공채를 준비하고 있는 만큼 앞으로도 차차 정리해서 남은 면접들을 잘 대답하고자 한다.
특히 내가 썼던 React를 시작으로 해서 자바스크립트, CS 등 부족한 부분을 면접 카테고리에 정리해서 틈 날 때 마다 확인할 수 있도록 하자!!
💎 React 면접 정리
🍫 React란?
React는 자바스크립트 기반 웹 라이브러리로 UI를 구축하고 컴포넌트 기반의 Single Page Application(SPA)이다.
🍫 React의 장단점은?
- React는 virtual Dom을 이용하여 어플리케이션의 성능을 증가시킨다.
- 컴포넌트 기반으로 코드 재사용성, 가독성 등이 좋아 유지보수에 능하다.
- 서버와 클라이언트 사이의 렌더링을 지원한다.
🍫 CSR, SSR이란?
Client Side Rendering은 클라이언트가 서버에 최초로 요청하였을 때 전체 페이지를 로딩하여 렌더링하고, 이후에는 데이터만을 변경하며 서버와의 요청을 주고 받는 렌더링 방식이다.
(SPA가 CSR의 예시)
장점
- 빠른 페이지 이동 가능
- 서버에 대한 요청의 크기가 크지 않다
단점
- 처음에 HTML 파일이 비어서 SEO(검색 엔진 최적화)에 대한 문제 발생
- 초기 렌더링의 속도가 느리다
Server Side Rendering은 페이지를 이동할 때 마다 서버로부터 새로운 페이지의 요청을 받는 것으로 서버쪽에서 렌더링 준비를 끝마치고 클라이언트로 주는 방식이다.
(MPA가 SSR의 예시)
장점
- 초기 렌더링 속도가 빠르다
- SEO가 가능하다.
단점
- 매 요청마다 새로고침이 일어나기 때문에 서버에 대한 부담이 주어진다.
🍫 JSX는?
자바스크립트 코드를 HTML처럼 표현할 수 있는 React 엘리먼트를 생성하는 언어이다.
🍫 Virtual Dom
어플리케이션의 UI를 담당하는 HTML 엘리먼트를 메모리 안에서 구현한 것으로, 컴포넌트가 다시 렌더링될 때 기존 Dom 모델에서 변경되는 사항을 비교하며 업데이트한다. 이는 Dom 전체를 렌더링할 필요 없이 필요한 부분만 변경하며 효율성을 높일 수 있는 것이 장점이다.
🍫 클래스형 컴포넌트와 함수형 컴포넌트의 차이
클래스 컴포넌트는 내부 state를 유지하는데 필요한 컴포넌트로 render() 메소드를 포함해야한다. 또한 Component로 상속을 받아 사용한다. state와 lifecycle 기능 사용이 가능하다.
함수형 컴포넌트는 클래스 기반 컴포넌트보다 간단하며, state를 갖지 않아 props에만 의존하는 UI를 렌더링하는데 선호된다.
🍫 State와 Props
props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로 수정될 수 없으며, 다른 값을 계산하거나 표시하는데에만 사용된다.
state는 컴포넌트의 생명주기 동안 수정될 수 있는 내부 데이터로 다시 렌더링되도 유지되는 데이터이다.
🍫 React-Hooks
클래스 기반 컴포넌트의 state나 생명주기 메소드같은 장점들을 함수형 컴포넌트에 적용시키기 위한 것. 이는 custom hook과 같이 사용할 수 있어서 로직의 재사용성이 좋아지고 가독성이 높아진다.
🍫 useState를 사용하여 State를 관리하는 이유
직접 state를 변경하게 되면 react는 render()함수를 호출하지 않아서 렌더링이 일어나지 않기 때문에 useState혹은 setState로 state를 변경하여 렌더링이 일어나도록 한다.
🍫 Context API란?
Context를 사용하게 되면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다.
하지만 많은 컴포넌트에 데이터를 전달하게 되는 만큼 context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 쓰자.
🍫 Props Drilling이 무엇인지?
React의 부모 컴포넌트에서 자식 컴포넌트로 Props를 전달하는 과정에서 불필요한 하위 컴포넌트를 쭉 지나는 현상을 의미하며 이를 해결하기 위해 전역 상태 관리 라이브러리(Redux 등)를 이용하여 해결할 수 있다.
🍫 Redux는?
Redux는 React를 위한 상태 관리 라이브러리로, store라고 불리는 state 컴포넌트를 활용하여 데이터를 props로 받을 수 있다. reducer를 통해 전달되는 데이터를 action으로 보내면서 store에 전달한다. reducer에서는 action과 현재의 state를 받으면서 새로운 state를 반환하고, 구독된 컴포넌트를 다시 리렌더링하게 된다.
🍫 React의 렌더링 성능 최적화 방법
먼저 React의 컴포넌트가 리렌더링 되는 조건으로는 다음과 같다.
- 부모에서 전달받은 props가 변경될때
- 부모 컴포넌트가 리렌더링 될 때
- 자신의 state가 변경 될 때
useMemo와 useCallback은 성능 최적화를 위해서 사용되는 Hook으로 useMemo는 특정 결과 값을 재사용하는 반면에 useCallback은 특정함수를 새로 만들지 않고 재사용하고 싶을 때 사용할 수 있다. 이 둘은 dependency 리스트를 이용하여 그 중 하나가 변경이 되면 결과에 대해 변경시켜 렌더링되는 조건에 맞춰 성능을 최적화 시킬 수 있다.
🍫 TypeScript와 JavaScript의 차이? 사용 이유는?
TypeScript는 JavaScript기반의 언어로 객체지향 컴파일 언어, javascript는 클라이언트 스크립팅 언어이다.
javascript는 웹 개발에 주로 쓰이며 웹 페이지를 대화식으로 만드는 프로그래밍 언어이다. 동적 타입 언어이며 인터프리터 언어이다. 타입에 제한을 받지 않아서 유연하다.
typescript는 클래스 기반 객체를 만들 수 있어 객체 지향 프로그래밍 언어로 상속, 캡슐화 및 생성자를 지원할 수 있다. 정적 타입 언어이며 컴파일 언어이다. 더 나은 구조와 간결함, 일관성, 재사용성을 가질 수 있다.
typescript는 타입 선언을 통하여 javascript에서 발생한 버그를 예방할 수 있다. 또한 더 나은 개발자 경험과 코드 퀄리티 향상, 크로스브라우징(브라우저 호환성) 문제 해결 등의 장점을 가지고 있다.
🍫 JavaScript와 Java의 차이점은?
Java는 객체지향 프로그래밍 언어로 프로그램을 만든 후 반드시 컴파일러로 컴파일 된 결과를 넷스케이프에 삽입하기 때문에 컴파일 시에 코드를 해석하게 된다. 또한 변수에 대한 자료형을 지니고 있다.
JS는 객체지향 스크립트스크립트 언어로 HTML파일 속에 코드를 직접 삽입, 넷스케이프로 HTML파일을 읽을때 코드를 해석하고 실행 하도록 되어 있다. 변수 자료형은 선언되지 않아 브라우저가 직접 해석한다.
💎 정리하면서
이번 첫 면접을 경험하면서 부족함을 많이 느낄 수 있었다. 나에 대한 인성 면접은 정해진 답변이라기보다 평소 태도에 대해 잘 말하면 됬었다면 기술 면접은 답이 정해져 있다보니깐..
기업 면접들을 다보고 하반기가 마무리가 된다면 합격하거나 불합격했던 기업들을 정리하고 면접도 회고해보도록 하자. 오히려 빠르게 기업들 면접 경험한게 나은 것 같기도 하다~~
당분간은 기술 면접, 코테 준비 위주로 많이 할거구 이제 GSAT...뿌시도록 해보자!!
화이팅~!!
