본문 바로가기

FrontEnd/CS, 면접공부

 (9)
리액트의 render phase와 commit phase에 대해서 설명해주세요. A리액트의 렌더링 과정은 크게 render단계와 commit 단계로 나눌 수 있습니다. 먼저 render 단계에서는 UI가 어떻게 변화할지를 계산하는 단계입니다.실제로 DOM이 업데이트되지 않고, 새로운 virtual dom을 생성해 기존의 virtual dom 비교 계산을 통해 변경된 부분을 찾아냅니다. commit 단계에서는 render 단계에서 계산된 부분을 실제 DOM에 업데이트하는 과정입니다.
자바스크립트는 싱글 스레드 언어인데, 어떻게 동시에 여러 작업들을 수행하나요? A자바스크립트는 싱글 스레드 언어로, 한번에 하나의 작업만 진행할 수 있는 단일 콜스택을 가집니다.하지만 Web API, 이벤트루프를 통해 비동기 작업을 진행할 수 있습니다. 1. fetch, promise, setTimeout과 같은 비동기 작업이 발생하면, 자바스크립트 엔진은 해당 작업을 브라우저 web api에 위임하고 다음 코드를 실행합니다.2. web api에서 비동기 과정이 완료되면, 해당 콜백함수가 태스크 큐에 추가됩니다.3. 이벤트 루프는 콜스택이 모두 비어있는지를 확인 후, 비어있다면 태스크 큐의 작업들이 콜스택으로 전달합니다. 이러한 구조로 싱글 스레드인 자바스크립트에서 동시에 여러 작업을 수행할 수 있습니다. Q 앞서 말씀하신 태스크 큐의 종류에는 어떤 게 있나요? 태스크 큐의 종류는..
useEffect가 호출되는 시점에 대해 설명해 주세요. AuseEffect는 컴포넌트의 생애주기와, 의존성 배열에 담긴 값의 변화에 따라 함수가 호출됩니다.컴포넌트의 생애주기는 mount - update - unmount 로 이루어집니다. 먼저 의존성 배열을 넘기지 않는다면, 초기 마운트 시점과 매 렌더링마다 실행됩니다.의존성 배열이 비어있다면, 마운트 될 때, 1번만 실행합니다.반면 특정 값이 들어 있다면, 그 값이 업데이트 될 때마다 호출됩니다. useEffect가 반환하는 함수는 클린업 함수로, 컴포넌트가 언마운트 될때 실행하고,의존성 배열 값이 변해 리렌더링될때 먼저 실행된 후, 새로운 effect를 실행합니다.이 함수를 이용해서 이벤트 리스너 제거, 타이머 해제, 메모리 정리 등의 작업을 할 수 있습니다. Q useEffect는 왜 렌더링 중 실행되..
리액트에서 index를 key값으로 사용하면 안되는 이유에 대해서 설명해주세요. A리액트는 key를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제 되었는 지를 추적합니다.따라서 key값이 달라지면 새로운 요소로 인식하여 불필요한 리렌더링이 발생할 수 있습니다. 만약 index로 key값을 설정하면, 리스트 중간 요소를 제거하거나, 리스트 요소의 순서가 변경될 때 등과같은 상황에서 잘못된 렌더링이 발생할 수 있습니다. 따라서 key는 db id와 같은 고유한 값이나 item.title과 같은 속성들을 결합해 유니크한 값을 사용합니다.또한 uuid나 Math.random과 같이 동적으로 id를 생성하는 것도 렌더링 간 key가 일치하지 않아 부적합합니다. 참고자료  [React] 배열의 index를 key로 쓰면 안되는 이유React 공식 Document를 보다가 아래 노란색으로 캡쳐..
Promise의 resolve()와 fulfilled에 대해서 설명해주세요. Aresolve()는 pending 상태인 promise를 완료 상태로 변경하는 함수이고,fulfilled는 resolve()에 의해 promise가 완료된 상태를 의미합니다. promise는 대기 상태인 pending, 성공 상태인 fulfilled, 실패 상태인 rejected 3가지의 상태가 존재합니다. promise가 생성될 때, resolve와 reject를 인자로 받는 콜백함수를 실행하며 비동기 작업이 진행됩니다.비동기 처리 성공 후 resolve를 호출되면 fulfilled 상태가 되고, 비동기 처리가 실패 시 reject를 호출해 rejected 상태가 됩니다. fulfilled가 된 promise는 then()에서 값을 받게 되고, rejected가 된 promise는 catch()에서 ..
localStorage와 sessionStorage의 차이점에 대해서 설명해주세요. A 로컬 스토리지와 세션 스토리지는 클라이언트에서 데이터를 저장할 수 있는 저장소입니다.둘의 가장 차이는 언제까지 저장을 하는지와 데이터 공유 범위입니다 로컬스토리지는 새로고침이나 브라우저가 종료되어도 로컬스토리지에 저장된 데이터를 영구적으로 유지합니다.그리고 동일 도메인 내 모든 탭에서 데이터가 공유됩니다주로 다크 모드나 설정 언어와 같이 장기적으로 유지되야 하는 데이터 저장에 적합합니다. 반면 세션스토리지는 브라우저 세션이 종료됨에 따라 저장된 데이터가 제거됩니다.또한 해당 세션 내에서만 데이터가 공유되고, 새로운 창이나 다른 창에서는 데이터가 공유되지 않습니다. Q 세션스토리지와 로컬스토리지 모두 보안에 취약할 수 있는데, 이를 안전하게 사용하는 방법에 대해 설명해주실 수 있나요?클라이언트 스토리지..
프론트엔드 모의면접 질문 정리 하 질문을 받자마자 머리가 새하얘져서 아무말이나 했다..아 지능 모자라.. 오늘 받은 질문 정리 상태 관리를 왜 하고, 평소에 상태 관리를 어떻게 하나요?요약 ) 리액트에서 상태의 역할, 리렌더링, useState  리액트에서 상태 관리는 애플리케이션 UI와 데이터의 동기화를 유지하는데 중요한 역할을 합니다리액트에서는 기존 상태와 변경된 상태를 버추얼 돔을 통해 비교하고 실제 dom에 반영되어 리렌더링이 발생하게 됩니다 저는 가장 기본적으로 useState를 통해 상태관리를 합니다리렌더링의 조건에는 state가 변경이 되거나, props가 변경이되었을 때 리렌더링이 발생하게 됩니다 하지만 useState는 전역적으로 필요한 데이터 전달을 위해서는 props drilling이 발생하여, 실제 props의 ..
[CS] 개발하며 한번쯤은 만나는 CORS 오류 원인과 해결 방법 정리 CORS (Cross Origin Resource Sharing) : 교차 출처 리소스 공유CORS는 서로 다른 출처(origin) 간에 자원을 공유할 수 있도록 해주는 보안 매커니즘이다. 기본적으로 브라우저에서는 보안을 위해 같은 출처에서만 자원 공유를 허용한다 (= SOP)따라서 CORS 오류는 다른 Origin으로 리소스를 요청했을 때 발생한다. 다른 도메인으로 요청을 보내면 cross-origin HTTP 요청에 의해 요청 되며, 요청 헤더에 Origin 필드를 추가한다하지만 대부분의 브라우저들은 보안상의 이유로 cross-origin 요청을 제한한다 이때 SOP로 인한 보안상의 이유가 원인이다. SOP (Same Origin Policy) : 동일 출처 정책해당 정책은 브라우저의 기본 보안 정책..

티스토리툴바