비전공자의 REACT 신입 개발자 면접 정리

웹프론트 개발자를 준비하면서 정리했던 면접정리입니다.

면접을 준비하기앞서, 개인적으로 포트폴리오사이트를 만들고 직접 배포하는것을 추천드립니다!

(하고 안하고 차이가 면접부르는 연락오는 빈도수가 컷음..)

준비하면서 프론트 신입개발자는 JAVA신입개발자보다 문턱이 조금 높다고 생각이들었습니다.

(뽑는 회사들이 백엔드보다 상대적으로적음)

 

기본적으로 알아야하는것

 

• 브라우저 렌더링: 브라우저가 HTML, CSS, JavaScript 등의 자원을 받아서 화면에 그리는 과정입니다. 이 과정은 크게 DOM 생성, CSSOM 생성, 렌더 트리 생성, 레이아웃, 페인팅으로 이루어집니다.
• 호이스팅: JavaScript에서 변수와 함수 선언이 스코프의 최상단으로 올라가는 현상을 말합니다. 이로 인해 선언 전에 사용할 수 있지만, 값이 할당되기 전까지는 undefined로 평가됩니다.
• 클로저: 함수가 선언될 때의 렉시컬 스코프를 기억하고 이후에도 그 스코프에 접근할 수 있는 함수를 말합니다. 주로 정보 은닉과 함수를 리턴하는 패턴에 활용됩니다.
• RESTful API: HTTP 프로토콜을 기반으로 자원을 주고받는 아키텍처를 말합니다. RESTful API는 표준 HTTP 메소드(GET, POST, PUT, DELETE)를 사용하여 서버와 통신하며, 자원, 메소드, 메시지 등을 정의합니다.
• Reflow와 Repaint: Reflow는 DOM의 레이아웃을 다시 계산하는 과정이며, 이는 DOM의 구조나 스타일이 변경될 때 발생합니다. Repaint는 Reflow 이후에 발생하며, 렌더 트리를 다시 그리는 과정입니다.
• 주소창에 example.com을 입력한 경우: 브라우저가 DNS를 통해 해당 도메인의 IP 주소를 찾고, HTTP 요청을 보내서 서버로부터 응답을 받아 화면에 표시합니다.
• CSS의 margin과 padding: margin은 요소의 바깥쪽 여백을, padding은 요소의 안쪽 여백을 의미합니다.
• CSS의 position: 요소의 위치를 지정하는 속성으로, static, relative, absolute, fixed, sticky 등의 값이 있습니다.
• 비동기 함수: 비동기 함수는 실행 결과가 즉시 반환되지 않고, 특정 조건이 충족될 때까지 기다리는 함수입니다. 주로 콜백 함수나 Promise를 반환하며, 애플리케이션의 성능을 향상시키고 사용자 인터페이스의 반응성을 유지하는 데 사용됩니다.
• async/await: 비동기 처리를 위한 문법으로, async 함수를 정의하여 내부에서 await 키워드를 사용하여 비동기 작업의 완료를 기다립니다. 이를 통해 코드의 가독성을 높이고, Promise의 then 메서드 체이닝을 줄일 수 있습니다.
• "==" vs "===": "=="는 동등 연산자로, 값의 비교시 형 변환을 수행하여 비교합니다. "==="는 일치 연산자로, 값과 데이터 타입이 모두 같은지를 비교합니다. "==="를 사용하면 형 변환 없이 정확한 값을 비교할 수 있습니다.
• Flex vs Grid: Flex는 단일 축 방향의 레이아웃을 구성하는데 주로 사용되며, 아이템들의 크기를 유동적으로 조절할 수 있습니다. Grid는 2차원 그리드 시스템을 구성하는데 사용되며, 행과 열 모두에 대해 레이아웃을 정의할 수 있습니다. Flex는 주로 단순한 레이아웃 구성에 사용되고, Grid는 복잡한 그리드 시스템을 구성할 때 유용합니다.

 

 

1. JavaScript의 데이터 타입에는 어떤 것들이 있나요?
   • JavaScript의 데이터 타입은 기본적으로 다음과 같습니다:
     • 숫자(number), 문자열(string), 불리언(boolean), 객체(object), 함수(function), 배열(array), undefined, null 등
2. JavaScript의 프로토타입(Prototype)에 대해 설명해주세요.
   • JavaScript에서 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가집니다. 객체는 프로토타입 객체의 속성과 메서드를 상속받습니다. 이를 통해 객체 간에 속성과 메서드를 공유할 수 있습니다.
3. 클로저(Closures)가 무엇인가요?
   • 클로저는 함수와 해당 함수가 선언된 렉시컬 스코프 사이의 조합입니다. 클로저를 통해 함수는 자신이 선언된 스코프 외부의 변수에 접근할 수 있습니다.
4. JavaScript의 이벤트 루프(Event Loop)는 무엇이고 왜 중요한가요?
   • 이벤트 루프는 JavaScript가 비동기 이벤트와 콜백을 처리하는 방식을 나타냅니다. 이것은 JavaScript가 단일 스레드로 동작하면서도 비동기 작업을 처리할 수 있는 핵심 메커니즘입니다.
5. JavaScript의 프로미스(Promises)와 async/await의 차이는 무엇인가요?
   • 프로미스는 비동기 작업을 처리하기 위한 객체로, 성공 또는 실패와 같은 상태를 가집니다. async/await는 프로미스를 사용하는 비동기 코드를 더 쉽게 작성할 수 있게 해주는 문법적인 기능입니다.
6. 호이스팅(Hoisting)이란 무엇인가요?
   • 호이스팅은 변수 및 함수 선언이 스코프의 맨 위로 끌어올려지는 것을 말합니다. 이는 선언이 실제로 코드에서 나타나기 전에 접근할 수 있다는 것을 의미합니다.
7. JavaScript에서 '=='와 '==='의 차이점은 무엇인가요?
   • '==' 연산자는 값의 등치를 확인하는 반면, '===' 연산자는 값의 등치와 함께 타입도 확인합니다. '===' 연산자는 타입 강제 변환을 수행하지 않기 때문에 일치하는지를 엄격하게 확인합니다.
8. JavaScript에서의 이벤트 위임(Event Delegation)은 무엇인가요?
   • 이벤트 위임은 부모 요소가 자식 요소의 이벤트를 대신 처리하는 것을 의미합니다. 이를 통해 동적으로 생성된 요소에도 이벤트를 적용하고, 메모리 사용량을 줄일 수 있습니다.
9. JavaScript의 ES6에 추가된 주요 기능은 어떤 것이 있나요?
   • ES6(ECMAScript 2015)에 추가된 주요 기능은 화살표 함수, 템플릿 리터럴, let 및 const, 클래스, 모듈 등이 있습니다.
10. JavaScript에서의 프로토타입 상속(Prototype Inheritance)은 어떻게 작동하나요?
    • JavaScript에서는 모든 객체가 부모 객체인 프로토타입을 가지며, 상속은 프로토타입 체인을 통해 이루어집니다. 자식 객체는 부모 객체의 프로퍼티와 메서드를 상속받습니다.
11. React의 랜더링이란 무엇인가요?
    • 답변: React의 랜더링은 가상 DOM을 사용하여 UI 업데이트를 처리하는 프로세스를 의미합니다. React는 상태(state)나 속성(props)의 변경을 감지하고, 변경된 부분만 실제 DOM에 적용하여 효율적인 UI 업데이트를 가능하게 합니다.
12. React에서의 랜더링 프로세스를 설명해주세요.
    • 답변: React에서의 랜더링은 다음과 같은 과정을 거칩니다:
      1. 상태(state)나 속성(props)의 변경이 발생합니다.
      2. 변경된 데이터를 기반으로 가상 DOM이 업데이트됩니다.
      3. React는 이전 가상 DOM과 현재 가상 DOM을 비교하여 변경된 부분을 식별합니다.
      4. 변경된 부분만을 실제 DOM에 반영하여 화면이 업데이트됩니다.
13. React의 조화 과정(Reconciliation)이란 무엇인가요?
    • 답변: React의 조화 과정은 이전 가상 DOM과 현재 가상 DOM을 비교하여 실제 DOM에 반영할 변경 사항을 결정하는 과정을 말합니다. 이를 통해 효율적인 UI 업데이트를 달성할 수 있습니다.
14. React에서 어떤 경우에 불필요한 랜더링이 발생할 수 있나요?
    • 답변: React에서 불필요한 랜더링은 다음과 같은 상황에서 발생할 수 있습니다:
      • 상태(state)나 속성(props)의 변경이 없는데도 불필요하게 랜더링되는 경우
      • 부모 컴포넌트가 랜더링되어도 자식 컴포넌트가 불필요하게 다시 랜더링되는 경우
15. React에서 성능 최적화를 위해 어떤 방법을 사용할 수 있나요?
    • 답변: React에서 성능 최적화를 위해 다음과 같은 방법을 사용할 수 있습니다:
      • shouldComponentUpdate나 PureComponent를 사용하여 불필요한 랜더링을 방지합니다.
      • 큰 리스트나 테이블 컴포넌트에는 가상화(virtualization) 기술을 적용합니다.
      • 불필요한 중첩을 피하고, 함수 컴포넌트나 React.memo를 사용하여 불필요한 랜더링을 최소화합니다.
16. React의 랜더링 최적화를 위해 어떤 라이프사이클 메서드가 유용한가요?
    • 답변: React의 랜더링 최적화를 위해 다음과 같은 라이프사이클 메서드가 유용합니다:
      • shouldComponentUpdate: 컴포넌트의 랜더링이 필요한지 여부를 결정합니다.
      • componentDidUpdate: 컴포넌트의 업데이트가 완료된 후에 실행됩니다. 여기서 비교적 높은 레벨에서의 랜더링 최적화 작업을 수행할 수 있습니다.
17. React.memo가 무엇이며 어떻게 사용하나요?
    • 답변: React.memo는 함수 컴포넌트의 불필요한 랜더링을 방지하기 위한 라이프사이클 메서드입니다. React.memo로 감싼 함수 컴포넌트는 props가 변경되지 않으면 이전 결과를 재사용하여 다시 랜더링하지 않습니다.
18. React의 PureComponent와 Component의 차이는 무엇인가요?
    • 답변: PureComponent는 shouldComponentUpdate 메서드를 내장하고 있어, props와 state의 얕은 비교를 통해 랜더링 여부를 결정합니다. 반면에 Component는 항상 랜더링을 수행합니다
19. React Hook이 무엇인가요?
    • 답변: React Hook은 함수형 컴포넌트에서 React의 기능을 사용할 수 있도록 하는 기능입니다. 클래스형 컴포넌트에서만 사용할 수 있었던 상태 관리와 라이프사이클 기능을 함수형 컴포넌트에서 사용할 수 있게 해줍니다.
20. React Hook을 사용하는 이유는 무엇인가요?
    • 답변: React Hook을 사용하면 함수형 컴포넌트에서 상태 관리, 부수 효과 처리, 컨텍스트 등의 기능을 사용할 수 있어 코드의 재사용성과 가독성을 높일 수 있습니다. 또한, 클래스형 컴포넌트보다 더 간결하고 직관적인 코드를 작성할 수 있습니다.
21. useState 훅의 역할은 무엇인가요?
    • 답변: useState 훅은 함수형 컴포넌트에서 상태를 관리하는 데 사용됩니다. 이 훅을 사용하여 상태 변수를 선언하고, 해당 상태 변수를 갱신할 수 있습니다. useState 훅은 배열을 반환하며, 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 해당 상태 값을 갱신하는 함수입니다.
22. useEffect 훅이 무엇이며 어떤 상황에서 사용되나요?
    • 답변: useEffect 훅은 부수 효과를 처리하는 데 사용됩니다. 컴포넌트가 렌더링될 때마다 특정 작업을 수행하거나, 상태 값이 변경될 때 추가적인 작업을 수행할 수 있습니다. 예를 들어 API 호출, 이벤트 리스너 등을 설정하거나 해제할 때 useEffect 훅을 사용합니다.
23. useContext 훅의 역할은 무엇이며 어떤 상황에서 사용되나요?
    • 답변: useContext 훅은 React 컨텍스트(Context)를 사용하여 전역 상태를 관리하는 데 사용됩니다. 함수형 컴포넌트 내에서 컨텍스트 값을 읽거나 업데이트할 수 있습니다. 주로 테마, 사용자 인증 정보, 언어 설정 등의 전역 상태를 관리할 때 useContext 훅을 사용합니다.
24. useReducer 훅이란 무엇이며 어떤 상황에서 사용되나요?
    • 답변: useReducer 훅은 복잡한 상태 로직을 다룰 때 사용됩니다. useState보다 더 구조적이고 복잡한 상태를 관리할 수 있으며, 상태 업데이트 로직을 컴포넌트 외부에서 관리할 수 있습니다. Redux와 유사한 패턴을 구현할 때 useReducer 훅을 사용합니다.
25. 커스텀 훅(Custom Hook)이란 무엇이며 어떻게 만드나요?
    • 답변: 커스텀 훅은 React에서 로직을 재사용하기 위해 사용됩니다. 일반 JavaScript 함수를 작성하여 특정 로직을 담당하고, 이를 함수명이 "use"로 시작하는 형태로 작성하여 커스텀 훅으로 정의합니다. 커스텀 훅은 다른 함수형 컴포넌트 내에서 호출하여 로직을 재사용할 수 있습니다.
26. useMemo와 useCallback의 차이점은 무엇인가요?
    • 답변: useMemo와 useCallback은 둘 다 성능 최적화를 위해 사용되지만, 주로 다른 목적으로 사용됩니다. useMemo는 메모이제이션된 값을 반환하여 불필요한 계산을 피하고 성능을 개선합니다. 반면에 useCallback은 메모이제이션된 콜백 함수를 반환하여 불필요한 함수 생성을 방지합니다.
27. 가상 DOM이란 무엇인가요?
    • 가상 DOM은 실제 DOM(문서 객체 모델)의 가벼운 복제물로서, UI의 상태 변화를 추적하고 효율적으로 UI를 업데이트하는 데 사용됩니다. React 및 다른 가상 DOM 기반 라이브러리는 이를 활용하여 성능을 최적화하고 빠른 UI 업데이트를 가능하게 합니다.
28. 실제 DOM과 가상 DOM의 차이점은 무엇인가요?
    • 실제 DOM은 실제로 브라우저에서 UI를 표현하는 데 사용되는 트리 구조입니다. 반면에 가상 DOM은 메모리 상에 존재하는 가벼운 복제물이며, UI의 변화를 추적하고 관리하는 데 사용됩니다. 이 둘의 주요 차이점은 속도와 성능에 있습니다. 가상 DOM은 실제 DOM보다 훨씬 빠르게 업데이트할 수 있습니다.
29. React에서 가상 DOM은 어떻게 동작하나요?
    • React는 상태 변화에 따라 새로운 가상 DOM을 생성하고 이전 가상 DOM과 비교하여 변경된 부분만을 실제 DOM에 적용합니다. 이를 통해 실제 DOM에 대한 업데이트 횟수를 최소화하고 성능을 향상시킵니다.
30. 가상 DOM의 장점은 무엇인가요?
    • 가상 DOM은 실제 DOM과 비교하여 더 효율적인 업데이트를 가능하게 합니다. 이를 통해 UI 업데이트 성능을 향상시키고, 애플리케이션의 반응성을 향상시킬 수 있습니다. 또한 가상 DOM은 여러 플랫폼에서 동일한 코드베이스를 사용할 수 있도록 해줍니다.
31. 가상 DOM의 단점은 무엇인가요?
    • 가상 DOM을 사용하면 메모리 상에 추가 오버헤드가 발생할 수 있습니다. 또한 가상 DOM의 비교 및 업데이트 알고리즘이 복잡할 수 있으며, 이를 잘못 구현할 경우 성능 저하의 원인이 될 수 있습니다.
32. 가상 DOM의 사용 사례는 어떤 것이 있나요?
    • React와 같은 라이브러리 및 프레임워크에서 가상 DOM은 UI 업데이트에 사용됩니다. 또한 다양한 웹 및 모바일 애플리케이션에서 UI 성능을 최적화하는 데 사용됩니다.

1. SSR (Server-Side Rendering):
   • SSR은 서버 측에서 페이지의 초기 HTML을 생성하고 브라우저로 보냅니다.
   • 사용자가 웹 페이지에 처음 방문할 때, 서버는 요청에 따라 페이지의 모든 콘텐츠를 생성하고 이를 HTML 형식으로 브라우저에 보냅니다.
   • 이후에는 클라이언트 측 JavaScript가 페이지를 인터랙티브하게 만들기 위해 로드됩니다.
   • 장점: 초기 로딩 시간이 빠르며, SEO(Search Engine Optimization)에 유ㅔ리합니다.
   • 단점: 초기 로딩 이후에는 렌더링이 클라이언트 측에서 발생하므로, 서버 부하가 증가할 수 있습니다.
2. CSR (Client-Side Rendering):
   • CSR은 초기에 빈 HTML 페이지를 브라우저로 전송하고, 이후에 클라이언트 측 JavaScript를 사용하여 페이지의 내용을 동적으로 렌더링합니다.
   • 사용자가 웹 페이지에 접속하면, 브라우저는 초기 HTML을 받고, 이후 JavaScript 파일을 다운로드하고 실행하여 페이지의 모든 콘텐츠를 렌더링합니다.
   • 장점: 초기 로딩 시간은 빠르며, 페이지의 동적인 요소를 관리하기에 유용합니다.
   • 단점: 초기 로딩 이후에 클라이언트 측에서 렌더링이 발생하므로 사용자가 페이지를 볼 때까지 시간이 걸릴 수 있습니다. 또한, SEO에 불리할 수 있습니다.
   •  

VAR, LET, 그리고 CONST는 변수차이

1. VAR:
   • VAR는 ES5 이전부터 사용되어온 변수 선언 키워드입니다.
   • 함수 스코프(function scope)를 가지고 있어 함수 내에서 선언된 변수는 해당 함수 내에서만 유효합니다.
   • 호이스팅(hoisting)이 발생하여 변수 선언을 해당 스코프의 최상단으로 끌어올립니다.
   • 재선언이 가능합니다.
   • 블록 레벨 스코프를 지원하지 않습니다.
2. LET:
   • ES6에서 도입된 변수 선언 키워드로, 블록 레벨 스코프(block scope)를 가집니다.
   • 블록 내에서 선언된 변수는 해당 블록 내에서만 유효합니다.
   • 호이스팅은 발생하지만, 초기화 전에는 참조할 수 없습니다.
   • 재선언이 불가능합니다.
3. CONST:
   • LET과 유사하게 블록 레벨 스코프를 가지며, 재할당이 불가능한 상수를 선언할 때 사용됩니다.
   • 상수로 선언된 값은 재할당되지 않으며, 따라서 값이 변경되는 시도는 오류를 발생시킵니다.
   • 객체나 배열의 경우, 상수로 선언되더라도 내부 요소의 값을 변경할 수 있습니다. 하지만 새로운 객체나 배열을 할당할 수는 없습니다.

ES6 란??

 

ECMAScript 6 (ES6)는 JavaScript의 표준 버전 중 하나로, ECMAScript 언어 명세의 여섯 번째 버전을 가리킵니다. ES6는 기존 JavaScript에 비해 많은 새로운 기능과 개선된 문법을 제공하여 개발자가 코드를 더 효율적으로 작성할 수 있도록 합니다.

ES6의 주요 기능과 개선 사항은 다음과 같습니다:

1. let과 const 변수 선언:
   • let과 const는 블록 스코프를 가지는 변수를 선언할 때 사용됩니다. let은 재할당 가능한 변수를 선언하고, const는 재할당이 불가능한 상수를 선언합니다.
2. 화살표 함수 (Arrow functions):
   • =>를 사용하여 함수를 더 간결하게 작성할 수 있습니다.
   • 함수의 this가 호출된 곳의 컨텍스트를 유지합니다.
3. 템플릿 리터럴 (Template literals):
   • 백틱(backtick) `을 사용하여 문자열을 더 간편하게 작성할 수 있습니다.
   • 변수를 쉽게 삽입하고 여러 줄에 걸쳐 문자열을 작성할 수 있습니다.
4. 객체와 배열의 분해 할당 (Destructuring assignment):
   • 배열이나 객체를 분해하여 개별 변수에 할당할 수 있습니다.
5. 클래스 (Classes):
   • 객체지향 프로그래밍을 위한 클래스 문법이 도입되었습니다.
   • 클래스를 사용하여 객체를 생성하고 상속을 구현할 수 있습니다.
6. 모듈 (Modules):
   • 모듈화를 위한 표준화된 문법과 기능이 도입되었습니다.
   • export와 import를 사용하여 모듈을 정의하고 불러올 수 있습니다.
7. Promise와 비동기 프로그래밍 (Promises and asynchronous programming):
   • Promise 객체를 사용하여 비동기 작업을 보다 쉽게 다룰 수 있습니다.
   • async와 await 키워드를 사용하여 비동기 코드를 동기적으로 작성할 수 있습니다.
8. 확장된 객체 리터럴 (Enhanced object literals):
   • 객체 리터럴을 더 간결하게 작성할 수 있는 기능이 도입되었습니다.
   • 프로퍼티와 메서드의 단축 표기법, 계산된 속성 이름 등이 포함됩니다.

ES6의 도입으로 JavaScript 코드를 작성하는 방법이 크게 개선되었고, 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. ES6의 많은 기능들은 현대적인 JavaScript 애플리케이션 개발에서 표준으로 사용되고 있습니다.