🙋‍♀️ 기술면접

1\. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?상태 = state바닐라 JS만 배울 때는 state가 없었는데, React에서의 주요 개념.React에서 상태가 변하면 화면이 리렌더링되는 것은 아주 중요한 핵심 원리.화면에 보여지는 값이나

1\. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?상태 = state바닐라 JS만 배울 때는 state가 없었는데, React에서의 주요 개념.React에서 상태가 변하면 화면이 리렌더링되는 것은 아주 중요한 핵심 원리.화면에 보여지는 값이나

Can I use Redux without Redux toolkit?Note that you are not required to use Redux Toolkit to use Redux. There are many existing applications that use

1\. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?상태 = state바닐라 JS만 배울 때는 state가 없었는데, React에서의 주요 개념.React에서 상태가 변하면 화면이 리렌더링되는 것은 아주 중요한 핵심 원리.화면에 보여지는 값이나

브라우저의 렌더링 과정에 대해서 설명해주세요.답변)의도: 단순히 자바스크립트, 리액트 등의 코딩 기술이 아니라 전반적인 프론트엔드 지식을 가지고 있는지 확인하는 질문.팁: 순서에 관련한 질문이기에 제스처 등 비언어적 표현으로 보조하는 것도 좋습니다.모범 답안: 브라우저

정의 - 어떠한 의미를 지닌 값.애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값.UI : 기본적으로 웹 에플리케이션에서 상태는, 상호 작용이 가능한 모든 요소의 현재 값을 의미한다. 다크/라이트 모드, 라디오를 비롯한 각종 input, 알림창의 노출 여부

Redux Toolkit은 Redux 로직을 작성하기 위해 저희가 공식적으로 추천하는 방법입니다. RTK는 Redux 앱을 만들기에 필수적으로 여기는 패키지와 함수들을 포함합니다. 대부분의 Redux 작업을 단순화하고, 흔한 실수를 방지하며, Redux 앱을 만들기쉽게

비교적 오랜 기간, 리액트 생태계에서는 상태 관리를 리덕스에 의존했다. 과거 리액트 코드를 보면, 리액트와 리덕스가 함께 설치돼 있는 것을 흔히 볼 수 있었고, 일부 개발자들은 리액트와 리덕스를 마치 하나의 프레임워크 혹은 업계 표준 (de facto)으로 여기기도 했

버츄얼 돔은 실제로 실행되기 전에 그 미리 한번 그려보고그러는 걸로 아는데요 어..브라우저의 렌더링 과정에 대해서 설명해주세요. \- 답변) \- 의도: 단순히 자바스크립트, 리액트 등의 코딩 기술이 아니라 전반적인 프론트엔드 지식을 가지고 있는지 확

5. useRef에 대해 설명해주세요. useRef는 useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장한다는 공통점이 있다. 그러나 useState와 구별되는 큰 차이점 두 개가 있다. useRef는 반환값인 객체 내부에 있는

6. useEffect의 실행 순서에 대해 설명해주세요. https://velog.io/@jhsung23/React-useEffect-%EC%8B%A4%ED%96%89-%EC%88%9C%EC%84%9C https://hanghae99.spartacodingclub.

8\. Async/Await와 Promise의 차이에 대해 설명해주세요.Async는 Await 함수가 들어가는 비동기의 기본 같은 그런 느낌 Promise는 비동기 함수가 리턴하는 프로미스 객체.9\. 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게

Async는 Await 함수가 들어가는 비동기의 기본 같은 그런 느낌 Promise는 비동기 함수가 리턴하는 프로미스 객체.콜백 헬(callback hell) Async/await 코드 스타일에 이점대량의 데이터를 처리하면서 무한 스크롤을 구현하는 것 말씀이시죠? 몰르

Async는 Await 함수가 들어가는 비동기의 기본 같은 그런 느낌 Promise는 비동기 함수가 리턴하는 프로미스 객체.콜백 헬(callback hell) Async/await 코드 스타일에 이점대량의 데이터를 처리하면서 무한 스크롤을 구현하는 것 말씀이시죠? 몰르

💎 제너레이터, async, awaitAsync는 Await 함수가 들어가는 비동기의 기본 같은 그런 느낌 Promise는 비동기 함수가 리턴하는 프로미스 객체콜백 헬(callback hell) Async/await 코드 스타일에 이점

대량의 데이터를 처리하면서 무한 스크롤을 구현하는 것 말씀이시죠? 몰르갓습니당~!데이터 조회 방식 구현하는 방법이나 구현 시, 사용할 라이브러리를 예시 들기

전체 코드 내에서 변수 선언부의 위치와 상관 없이,코드 실행 시 (런타임) 선언이 최상단으로 끌어올려지는 현상.이로 인해 첫번째 줄부터 변수를 참조할 수 있다.var 사용 시 호이스팅이 명확히 보이고,let과 const는 호이스팅 없이 동작하는 듯하나 실제로는 이루어진

동기 : 코드가 쓰여진 순서대로 실행비동기 : 처리 속도에 따라 작업이 완료되도록 실행먼저 쓰인 코드가 무겁고 느릴 경우 나중에 오는 코드들은 무작정 대기해야 하는 비효율 발생.동기는 작업을 순차적으로 진행하며,각 작업은 이전 작업의 완료를 기다리고,한 작업이 시작하면

12. 브라우저의 작동방식에 대해서 설명해주세요. HTML 읽고 뭐 파싱하고 막 그런 거 질문인가요..? 사용자의 입력: 사용자가 브라우저의 주소창에 URL(Uniform Resource Locator)을 입력하거나, 링크를 클릭하면 그 웹 페이지에 접근하려는 요청이 시작됩니다. DNS 조회: 입력된 URL이 사람에게는 읽기 쉽지만 컴퓨터가 이해할 수...

음???GET:데이터는 URL에 포함되어 전송되고,URL을 통해 전송되므로 보안에 취약합니다.POST:데이터는 HTTP 요청의 본문(body)에 포함되어 전송되고,데이터가 본문에 포함되어 전송되므로, URL에 노출되지 않습니다.오???GET: 주로 데이터를 조회하고,

쿠키, 세션, 웹스토리지의 차이를 설명해보세요클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.TCP/UDP에 대해서 설명해주세요.http, https 차이점에 대해 설명해주세요.라이프사이클이 의미하는

쿠키는 브라우저에 작은 데이터를 저장하고 서버로 전송되며, 세션은 서버에 데이터를 저장하고 세션 식별자를 클라이언트에 전달합니다. 웹 스토리지는 브라우저에 데이터를 저장하고 서버로 자동으로 전송되지 않습니다.클라이언트 사이드 렌더링 : SPA(싱글페이지렌더링)에서 자바

쿠키는 브라우저에 작은 데이터를 저장하고 서버로 전송되며, 세션은 서버에 데이터를 저장하고 세션 식별자를 클라이언트에 전달합니다. 웹 스토리지는 브라우저에 데이터를 저장하고 서버로 자동으로 전송되지 않습니다.클라이언트 사이드 렌더링 : SPA(싱글페이지렌더링)에서 자바

https://velog.io/@yjcoyjco/%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%EC%9B%B9%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

클라이언트 사이드 렌더링 : SPA(싱글페이지렌더링)에서 자바스크립트로 동작, 하나의 페이지에 모든 요소들을 처음 한 번 렌더링 하고 변경 사항도 여기서 복작복작 적용되는..?서버 사이드 렌더링 : 각각 페이지의 HTML 요소를 서버에서 다 뚝딱뚝딱 해줘서 응답 보내주

TCP (Transmission Control Protocol):TCP는 통신을 시작하기 전에 연결을 설정하고, 통신이 끝나면 연결을 해제하는 연결 지향 프로토콜입니다. 이를 통해 안정적이고 신뢰성 있는 데이터 전송이 가능합니다.수신 측에서 전송 측으로부터 수신 확인

HTTP는 데이터를 평문으로 전송합니다. 따라서 데이터가 네트워크를 통해 전송되는 동안 암호화되지 않습니다.암호화하지 않기 때문에 중간에서 데이터를 가로채거나 수정하는 공격이 쉽게 발생할 수 있습니다. 일반적인 웹 페이지 로딩, 정보 검색 등에서 사용됩니다.HTTPS는

라이프사이클은 어떤 시스템, 객체, 또는 소프트웨어 컴포넌트가 생성되고 동작하며 소멸하는 과정을 나타내는 개념입니다. 라이프사이클은 일반적으로 여러 단계로 나뉘어져 있으며, 각 단계에서는 특정한 작업이 수행됩니다.🍃 라이프사이클

React 컴포넌트의 라이프사이클은 컴포넌트가 생성, 업데이트, 제거되는 과정에서 일어나는 메서드들을 나타냅니다.생성 단계:constructor: 컴포넌트가 생성될 때 실행되는 메소드로, 초기 상태 설정 등을 수행합니다.componentDidMount: 컴포넌트가 DO

21. 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요.

SEO란 무엇이고 SEO를 진행하는 방법에 대해 설명해주세요.이미지 최적화에 대해 설명해주시고 방법에 대해 설명해주세요.프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요.프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한

23. SEO란 무엇이고 SEO를 진행하는 방법에 대해 설명해주세요.

24. 이미지 최적화에 대해 설명해주시고 방법에 대해 설명해주세요.

25. 프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요.

26. 프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요.

27. Javascript event loop에 대해서 설명해주세요.

28. Array, LinkedList에 대해 설명해주시고 각각 어떻게 사용하는지 말씀해주세요.

: 객체 스토리지 서비스https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/Welcome.html

라이프사이클, 콜백함수, 비동기 포함 구체적인 이해쿠키, 세션 vs 웹스토리지로 선분류,쿠키 종류, 웹 스토리지 종류별 기능, 특징 이해실제 용례 숙지라이프사이클 메소드 종류 추가 숙지SEO 지표 모던 리액트 Deep Dive

둘은 상반되는 개념이라기보다는코드를 읽고 해석? 평가? 한다는 점에서 맥을 같이 한다.그런데 컴파일은 전체 코드 처음부터 끝까지,실행 이전에 이루어져서, 에러가 없어야 런타임으로 넘어가는 것이고자바스크립트에서 인터프리터는 런타임에서 한줄 해석, 한줄 실행을바로바로 실시

그 이벤트가여, 딱 이거 하나에만 적용되어야 하는데 막 같이 난리가 나는 것일걸요?부모가 자식 요소한테 이벤트 위임..?각 상황을 가정하라는 조건이, 상당히 까다로운 답변이 될 것임을 보여준다.this 바인딩을 안 하는 게 화살표함수였던가?프로토타입이라는 내부 슬롯이

그 이벤트가여, 딱 이거 하나에만 적용되어야 하는데 막 같이 난리가 나는 것일걸요?부모가 자식 요소한테 이벤트 위임..?각 상황을 가정하라는 조건이, 상당히 까다로운 답변이 될 것임을 보여준다.this 바인딩을 안 하는 게 화살표함수였던가?프로토타입이라는 내부 슬롯이

그 이벤트가여, 딱 이거 하나에만 적용되어야 하는데 막 같이 난리가 나는 것일걸요?부모가 자식 요소한테 이벤트 위임..?각 상황을 가정하라는 조건이, 상당히 까다로운 답변이 될 것임을 보여준다.this 바인딩을 안 하는 게 화살표함수였던가?자바스크립트에서 this는 현

🎡 이벤트 전파(캡처링, 버블링), 이벤트 위임

🎡 이벤트 전파(캡처링, 버블링), 이벤트 위임

자바스크립트에서 this는 현재 실행 컨텍스트(context)에 따라 달라지는 특별한 객체를 참조한다. 실행 위치에 따라 this가 가리키는 대상이 달라지며, 자바스크립트에서는 주로 함수 내에서 this를 많이 사용한다.👝 전역 컨텍스트: 전역 컨텍스트에서 this는

🎁 코딩애플 프로토타입 강의

🥟 객체, 원시값 vs 객체객체를 참조에 의해 복사할 때 발생하는 주요 오류는 예기치 않은 변경이다.이는 한 객체의 속성을 수정할 때,해당 객체의 참조를 가진 다른 객체들도 영향을 받기 때문에 발생한다.예상치 못한 버그가 발생하거나 데이터가 의도치 않게 수정될 수 있

🫧 nullish, null vs undefined, falsy

🎏 비교연산자

참조에 의한 복사 데이터의 무결성(불변성) garbage collection? garbage collector가 작동 안 해 메모리 누수 이벤트 버블링을 막기 위해 event.stopPropagation() 메서드를 사용합니다. 이 메서드를 호출하면 특정 이벤트가 부모 요소로 전파되지 않도록 차단할 수 있습니다. 호스트 객체는 JavaScri...

8. 이벤트 루프와 실행 컨텍스트에 대해서 설명해주세요. 9. 클로저에 대해 설명해주세요. 10. html에서 자바스크립트 코드를 로딩하는 script 태그는 보통 body 태그의 최하단에 위치하는데요. 그 이유가 무엇일까요? 11. 여러 비동기 함수를 동시에 병렬로 호출하기 위해서는 어떻게 해야 할까요? 12. Promise를 사용해 함수의 타임아웃 기능...

HTML에서 <script> 태그를 보통 <body> 태그의 최하단에 배치하는 이유는 페이지의 로딩 성능과 사용자 경험을 최적화하기 위해서이다.렌더링 차단 방지브라우저는 HTML을 위에서 아래로 순차적으로 파싱하며 화면을 렌더링합니다.

여러 비동기 함수를 동시에 병렬로 호출하려면, JavaScript에서는 Promise.all 또는 Promise.allSettled 같은 기능을 사용할 수 있다. 이들은 비동기 작업들을 병렬로 실행하고, 모든 작업이 완료될 때까지 기다린다.Promise.all은 모든

Promise를 사용, 함수의 타임아웃 기능 구현에는 Promise.race() 메서드가 효과적이다. Promise.race()는 전달받은 여러 개의 Promise 중가장 먼저 완료된 Promise를 반환하므로, 이를 활용해 타임아웃 로직을 구현할 수 있다.Promis

표현식은 값을 생성하는 코드의 조각. 표현식은 항상 평가되어 하나의 값을 반환한다.값을 반환하기 때문에 다른 표현식이나 문에서 사용될 수 있다.변수에 할당 가능하고, 함수의 매개변수로 전달될 수 있다.표현식은 독립적으로 문처럼 사용될 수도 있다.➡️ 표현식은 실행 결과

자바스크립트의 실행 컨텍스트(Execution Context)는 코드가 실행되는 환경을 말하며,변수, 함수, 객체 등이 어떻게 저장되고 접근되는지를 정의한다.자바스크립트 코드 실행의 기본 동작 원리 이해의 핵심 개념.자바스크립트 코드가 처음 실행될 때 생성됩니다.전역

13. 변수, 상수, 데이터 타입, 연산자, 함수 설명

자바스크립트에서 클로저(Closure)란, 함수가 선언될 때의 외부 렉시컬 환경(Lexical Environment)을 기억하여, 해당 함수가 그 환경 밖에서 호출되더라도 그 환경에 접근할 수 있는 기능을 말한다.➡️ 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조

자바스크립트의 조건문과 반복문은 프로그램의 흐름을 제어하는 데 사용된다. 조건문은 특정 조건에 따라 코드 블록을 실행하거나 실행하지 않도록 한다.if 문주어진 조건이 true일 때 코드 블록을 실행합니다.javascript코드 복사if (조건) { // 조건이 참

16. 배열과 객체의 기본 개념을 설명해주세요. 순서가 있어서 인덱스로 값을 참조하는 배열, 키-값 쌍으로 이루어진 데이터를 모아두는 객체 17. 자바스크립트 ES6 문법에서 새로 추가된 문법에 대해 설명해주세요. 데이터 타입으로는 Symbol, 키워드로는 let,

자바스크립트에서 배열과 객체는 데이터를 저장하고 조작하기 위한 기본 자료 구조입니다. 두 가지 모두 중요한 역할을 하며, 각각의 특징과 용도가 다릅니다. 아래에서 배열과 객체의 기본 개념을 설명하겠습니다.배열 (Array)정의배열은 순서가 있는 데이터의 집합입니다.각각

ES6(ECMAScript 2015)에서는 JavaScript의 생산성과 가독성을 향상시키기 위해 다양한 새로운 문법이 추가되었습니다. 다음은 주요 ES6 문법 기능들입니다:변수 선언let: 블록 범위 변수를 선언합니다.const: 블록 범위 상수를 선언합니다. 값 변

자바스크립트에서 일급 객체(first-class citizen)로서의 함수는, 함수가 다른 데이터 타입들과 동일한 방식으로 취급된다는 것을 의미합니다. 즉, 함수는 변수에 할당되거나, 다른 함수의 인자로 전달되거나, 함수에서 반환값으로 사용될 수 있습니다.자바스크립트에

자바스크립트에서 변수의 메모리 할당 과정과 메모리에 대한 개념은 변수 선언, 초기화, 그리고 실행 환경에 따라 다소 다르게 처리됩니다. 아래에 이를 상세히 설명하겠습니다.메모리의 주요 영역자바스크립트 프로그램은 메모리 관리를 위해 두 가지 주요 메모리 영역을 사용합니다

Set은 JavaScript에서 고유한 값의 집합을 관리하기 위한 객체이다.배열과 비슷해 보이지만, 중복된 값을 허용하지 않는다는 점이 다르다.(인덱스X, 중복 값X)중복 제거 : Set에 추가되는 값은 자동으로 중복이 제거된다.순서 유지 : 삽입된 값의 순서를 유지한

실행 컨텍스트는 JavaScript 코드가 실행되는 동안 생성되는 환경으로, 코드의 실행에 필요한 정보를 담고 있습니다. 실행 컨텍스트는 크게 세 가지 요소로 구성됩니다:VariableEnvironmentLexicalEnvironmentthis 바인딩각 요소의 역할과

22. 자바스크립트 콜백함수의 개념과 예시 설명

자바스크립트에서 콜백 함수가 전달된 함수에게 제어권이 이양된다는 것은 콜백 함수의 실행을, 전달받은 함수가 결정한다는 의미이다.즉, 콜백 함수는 호출 시점과 실행 순서를 전달받은 함수의 논리에 따라 결정된다.이는 비동기 작업에서 특히 중요하다.즉시 실행 : 함수 내부에

30. CORS정책에 대해 설명해주세요.

비동기 작업을 처리할 때, 콜백 함수가 중첩적으로 사용되면서 코드의 가독성이 크게 떨어지는 문제를 말합니다.이는 코드가 단계적으로 실행되는 구조를 유지하기 위해 비동기 작업마다 콜백을 정의하고, 이를 다시 다른 콜백으로 연결할 때 발생합니다.콜백 지옥의 대표적인 예는

JavaScript에서 DOM(Document Object Model)은 HTML이나 XML 문서를 프로그래밍적으로 조작할 수 있도록 문서를 표현한 객체 기반의 구조입니다. DOM은 문서를 트리 구조로 표현하며, 각 요소와 속성을 노드(Node)로 나타냅니다. 이를 통

JavaScript에서의 클래스 문법은 객체지향 프로그래밍(OOP)을 지원하기 위해 도입된 문법입니다. ES6(ECMAScript 2015)부터 제공되며, 객체 생성 및 관리가 더 직관적이고 명확하게 표현됩니다. 주요 개념은 다음과 같습니다.클래스 (Class)클래스는

얕은 복사 (Shallow Copy)얕은 복사는 1단계 깊이의 객체 속성들만 복사합니다.객체나 배열 안에 중첩된 객체(Nested Object)가 있으면, 중첩된 객체의 참조값만 복사됩니다. 따라서 원본 객체의 중첩된 객체가 변경되면 얕은 복사된 객체도 영향을 받습니다

JavaScript에서 불변성(immutability)이 중요한 이유는 코드의 예측 가능성, 디버깅의 용이성, 효율적인 상태 관리를 가능하게 하기 때문. 상태 변경 추적의 용이성불변성을 유지하면 데이터가 변경되지 않으므로, 상태가 언제, 어디서, 어떻게 변경되었는지 명

이벤트 위임에 대해 설명해주세요.이벤트 위임(Event Delegation)이벤트 위임은 JavaScript에서 효율적으로 이벤트를 처리하기 위한 기법으로, 부모 요소에 이벤트 핸들러를 설정하여 하위 요소에서 발생하는 이벤트를 처리하는 방식입니다. 이는 DOM 트리에서

CORS(Cross-Origin Resource Sharing)는 브라우저에서 교차 출처 요청(cross-origin requests)을 안전하게 제어하기 위해 도입된 보안 정책입니다. 이 정책은 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 리소

비동기 작업이 최종적으로 성공했는지 실패했는지를 나타내는 객체.모듈화 : 독립적인 함수로 분리한다고 생각하면 되는데, 여기저기 엮여있기 보다는 분리해서 사용하기 용이함.장점체이닝으로 여러 비동기 작업을 단계적으로 나눌 수 있다.각 .then()에서 반환 값을 통해 다음

이벤트 루프, 힙, 콜 스택https&#x3A;//seo-tory.tistory.com/83

상태관리는 왜 할까요? 그리고 평소 상태관리는 어떻게 하시나요?답변)의도: 상태 관리의 목적과 평소 상태 관리 패턴 파악 및 전역 상태 관리에 대해서도 추가 답변(사용하는 라이브러리 등)을 기대하는 질문.모범 답안: 상태관리의 필요성은 리액트의 MVVM 패턴과 관련지어

답변)의도: 리액트의 기본 원리와 가상 돔의 핵심을 이해하고 있는지, 그리고 가능하면 useState와의 관계성도 설명할 수 있는지 확인하는 질문모범 답안: 실제 돔은 HTML의 요소를 트리로서 가지고 있는 객체 기반의 모델이며, 브라우저는 실제 돔을 기반으로 화면을

답변)의도: 컴포넌트 라이프 사이클과 useEffect의 이해도를 가지고 있는지, 각 라이프 사이클에서 어떤 작업을 처리해야 하는지 설명할 수 있는지 확인하는 질문.모범 답안: 컴포넌트 라이프 사이클을 간단하게 설명하자면 create-mount-update-unmoun

답변)의도: 자칫 지나치기 쉬운 리액트의 기본 개념에 대해 확인하는 질문모범 답안: 네, 리스트 렌더링에서 key 속성은 리액트에게 있어서 각 요소를 식별하는 데에 사용되는 값입니다. 이 key 가 있어야 리액트는 가상 돔에서 어떤 요소가 어디에 있고, 어떻게 순서가

답변)의도: 자칫 지나치기 쉬운 리액트의 기본 개념을 확인하는 질문. 개발에 호기심이 많아야 알 수 있는 항목입니다.모범 답안: 단도직입적으로 말씀드리자면 바로 리액트의 StrictMode 때문입니다. 이 모드를 켜게 되면 오류를 피할 수 있도록 엄격한 개발 환경을 제

답변)의도: 커스텀 훅을 사용할 정도로 코드 퀄리티에 관심이 있는지 파악하려는 질문모범 답안: 네 저는 최근 프로젝트에서 커스텀 훅을 사용한 경험이 있습니다. 개인적으로도 정말 잘 사용하고 있는 기술이기도 합니다. 커스텀 훅을 사용한다면 기존의 컴포넌트 내부에 작성된

답변)의도: 성능 최적화에 관심이 있는지 확인하는 질문팁: 사용 예시를 들면 좋습니다.모범 답안: 리액트에서 컴포넌트가 리렌더링 되는 기준을 살펴보자면 대표적으로 받아온 props의 변경이 있습니다. props가 변경되면 하위 컴포넌트 모두가 리렌더링됩니다. 그런데 만

🛎️ 고차 컴포넌트(HOC)란?🔮 DOM vs Virtual DOMReact.Memo 보기

React.Suspense에 대해 설명해주세요. 답변) 의도: 비동기 데이터 로딩 및 렌더링 과정을 이해하고 Suspense를 사용할 수 있는지 확인하는 질문 모범 답안: 네 리액트의 Suspense는 비동기 데이터를 로딩할 때, 그

리액트의 상태가 불변성을 유지하는 이유는 무엇일까요?답변)의도 : 무의식적으로 사용하고 있던 개념에 대해 확인하는 질문모범 답안 : 네 리액트는 불변성을 유지하도록 설계되었습니다. 그래서 잘 아시다시피 상태를 변경하려면 직접 변경하는 것이 아니라, 새로운 객체를 만들어

React.Suspense에 대해 설명해주세요.답변)의도: 비동기 데이터 로딩 및 렌더링 과정을 이해하고 Suspense를 사용할 수 있는지 확인하는 질문모범 답안: 네 리액트의 Suspense는 비동기 데이터를 로딩할 때, 그리고 로딩 상태를 표시할 때 사용하면 좋은

리액트의 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.답변)의도: 리액트에 폼을 어떻게 다루었는지 확인하는 질문모범 답안: 네, 저는 리액트에서 폼을 다룰 때 제어 컴포넌트와 비제어 컴포넌트에 대해 익혔습니다. 리액트에서 폼을 다루는 방법에는 크게 두 가

flux 아키텍처를 설명해주세요.답변)의도: 리덕스에서 쓰였던 flux 아키텍처의 작동 방식을 알고 있는지 확인하는 질문팁: 마치 리덕스를 쓸 때처럼 순서대로 얘기하면 좋습니다.모범 답안: 네 flux 아키텍처는 단방향 데이터 흐름을 기반으로하는 아키텍처입니다. 이러한

리액트의 Strict 모드는 왜 필요할까요?답변)의도: 개발 환경에 따른 모드에 대해 알고 있는지 확인하는 질문모범 답안: 마치 ESLint가 필요한 이유와 같습니다. 우리는 사람이고 누구든지 완벽할 수는 없습니다. 그래서 linter가 안티 패턴을 잡아주는 것이구요.

SPA에 대해 설명해주세요.답변)의도: 최근 프론트엔드 패러다임인 Single Page Application에 대해 알고 있는지 확인하는 질문팁: 장단점을 명확하게 제시하면 좋습니다.모범 답안: 네, SPA는 Single Page Application의 약자로서 리액트

RESTful API에 대해 이해하고 설명할 수 있습니다.답변)의도:지원자가 RESTful API의 개념과 이를 사용하는 방법을 이해하고 있는지 평가.팁:REST의 정의와 원칙을 설명하세요.RESTful API의 주요 특징과 HTTP 메서드(GET, POST, PUT,

RESTful API에 대해 이해하고 설명할 수 있습니다.답변)의도:RESTful API의 개념과 사용법 이해 여부 평가.팁:REST의 정의와 원칙 설명.RESTful API의 주요 특징과 HTTP 메서드(GET, POST, PUT, DELETE)의 사용 사례를 언급.

RESTful API에 대해 이해하고 설명할 수 있습니다.답변)의도:RESTful API의 개념과 사용법 이해 여부 평가.팁:REST의 정의와 원칙 설명.RESTful API의 주요 특징과 HTTP 메서드(GET, POST, PUT, DELETE)의 사용 사례를 언급.

HTTP 프로토콜에 대한 기본 개념과 동작 방식을 이해합니다.답변)의도:HTTP 프로토콜의 기본 개념과 동작 방식 이해도 평가.팁:HTTP의 정의와 주요 특징 설명.HTTP 요청과 응답의 구조 설명.상태 코드(200, 404, 500 등)의 의미 언급.모범답안:HTTP

비동기 통신에 대한 개념을 이해하고 axios와 fetch를 활용하여 데이터를 가져올 수 있습니다.답변)의도:비동기 통신의 개념 이해, axios와 fetch를 사용해 데이터 가져오는 능력 평가.팁:비동기 통신의 개념과 필요성 설명.axios와 fetch의 차이점 언급

리액트에서 사용되는 Virtual DOM 의 동작방식을 설명할 수 있다.답변)의도:React의 Virtual DOM 개념 및 동작 방식을 이해 평가.팁:Virtual DOM의 정의와 필요성 설명.Virtual DOM이 실제 DOM과 어떻게 다른지 설명.Virtual D

axios의 instance와 interceptor를 이해하고 활용하여 좀 더 깊은 수준의 API call을 할 수 있습니다.답변)의도:axios의 instance와 interceptor에 대한 이해, 활용 과 API 호출을 효과적으로 관리하는 능력 평가.팁:axios

React-query의 장점과 사용법을 이해하고 있다.답변)의도:지원자가 React-query의 장점과 이를 사용하는 방법을 이해하고 있는지 평가.팁:React-query의 주요 기능과 장점을 설명하세요.React-query를 사용하는 방법을 설명하세요.React-qu

immer.js는 불변성을 유지하면서 가변적으로 보이는 코드 작성을 돕는 라이브러리라고 알고 있어. 근데 immer는 always라는 의미가 있다고 해. 이 의미와 immer.js의 사용에 연관이 있어?Editimmer라는 단어의 어원과 immer.js의 핵심 개념 사

flux 아키텍처 : 페이스북에서 개발, 리액트 상태 관리를 더 잘 하기 위해 데이터 흐름을 단방향으로 제어. 4단계의 과정으로 이루어지고 각 단계가 모듈화되어 독립적 관리에 용이하다.React.suspense : 비동기 작업 시 대기 상태 관리를 용이하게 하는 리액트

Tanstack Query의 useQuery, useMutation을 사용하여 데이터를 관리하고 캐싱하는 방법을 이해합니다.답변)의도:지원자가 Tanstack Query의 useQuery와 useMutation 훅을 사용하여 데이터를 관리하고 캐싱할 수 있는지 평가.팁

Tanstack Query의 useInfiniteQuery를 이용한 무한스크롤을 구현할 수 있다.답변)의도:지원자가 Tanstack Query의 useInfiniteQuery를 사용하여 무한 스크롤을 구현할 수 있는지 평가.팁:useInfiniteQuery의 개념과 사

Tanstack Query의 useInfiniteQuery를 이용한 무한스크롤을 구현할 수 있다.답변)의도:지원자가 Tanstack Query의 useInfiniteQuery를 사용하여 무한 스크롤을 구현할 수 있는지 평가.팁:useInfiniteQuery의 개념과 사

props drilling과 이를 해결하는 방법에 관하여 설명할 수 있습니다.답변)의도:지원자가 props drilling 문제를 이해하고, 이를 해결할 수 있는 방법을 알고 있는지 평가.팁:props drilling의 문제점을 설명하세요.props drilling을

css in js vs module.css에 대해 설명할 수 있습니다.답변)의도:지원자가 CSS-in-JS와 CSS Module의 차이점과 장단점을 이해하고 있는지 평가.팁:CSS-in-JS와 CSS Module의 개념을 설명하세요.두 방법의 장단점을 설명하세요.CSS

hook을 조건문 안에서 사용하면 안되는 이유에 대해 설명할 수 있습니다.답변)의도:지원자가 React Hook을 조건문 안에서 사용하면 안되는 이유를 이해하고 있는지 평가.팁:React Hook의 규칙을 설명하세요.Hook을 조건문 안에서 사용하면 발생하는 문제를 설

react 컴포넌트의 장점에 대해 설명할 수 있습니다.답변)의도:지원자가 React 컴포넌트의 장점을 이해하고 있는지 평가.팁:React 컴포넌트의 재사용성, 컴포지션, 유지보수성 등의 장점을 설명하세요.React 컴포넌트를 사용하는 예제를 떠올려 보세요.모범답안:Re

브라우저 - 서버 간HTML 문서뿐 아니라 동영상, 이미지 등 전송 가능1\. 비연결성 : 한 번 통신으로 단절. 쿠키, 세션 등을 이용해 연결 유지하는 것이 가능하다.2\. 무상태성 : 이전 상태를 기억하지 않는다. 쿠키, 상태로 상태 유지할 수 있다.응응답 상태라