본문 바로가기

면접준비

 (22)
useRef가 필요한 상황 useRef는 useState와 비슷하지만, useState는 상태가 변경될 때마다 컴포넌트를 리렌더링하지만, useRef는 값이 변경되더라도 컴포넌트를 리렌더링하지 않습니다. useRef는 DOM 요소에 대한 참조를 얻거나, 시간이 지나도 변경되지 않는 값을 저장할 때 유용합니다. import React, { useRef } from "react"; function App() { const counterRef = useRef(0); return ( 현재 카운트: {counterRef.current} { counterRef.current++; }}>카운트 증가 ); } export default App; inputRef는 DOM 요소에 대한 참조를 저장합니다. inputRef.current를 사용하여 D..
배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요 const로 배열이나 객체를 선언하면, 배열이나 객체 자체에 대한 주소값을 변경할 수 없습니다. 즉, 다른 배열이나 객체로 다시 할당할 수 없게 됩니다. 하지만, 배열의 요소나 객체의 속성은 여전히 수정할 수 있습니다. 이는 자바스크립트에서 const는 참조에 대한 상수성(constancy)을 보장하기 때문입니다. 객체나 배열의 내용은 바뀔 수 있지만, 선언된 변수가 항상 같은 객체나 배열을 참조하도록 보장합니다. const arr = [1, 2, 3]; arr.push(4); // 가능합니다. arr에 요소 추가 arr[0] = 10; // 가능합니다. arr의 첫 번째 요소를 변경 arr = [5, 6, 7]; // 오류 발생! arr에 다른 배열을 할당하려고 했습니다. const obj = { a:..
require와 import차이점을 설명 require와 import는 JavaScript 모듈을 불러오는 데 사용되는 두 가지 다른 방법입니다. require require는 CommonJS 모듈 시스템에 기반한 방법입니다. 주로 Node.js에서 사용됩니다. 동기식으로 코드를 불러옵니다. 즉, 모듈이 불러와질 때까지 코드 실행이 멈춥니다. 파일 확장자를 생략할 수 있습니다. 사용법 const moduleName = require('modulePath'); 상황 예시 Node.js 백엔드 어플리케이션 개발 동기적으로 불러오는 방식이 필요한 경우 import import는 ECMAScript 모듈 (ESM) 시스템에 기반한 방법입니다. 최신 웹 브라우저 및 Node.js 환경에서 사용할 수 있습니다. 비동기식으로 코드를 불러옵니다. 즉, 모듈 ..
브라우저 저장소에 대해서 차이점(local storage, sessin storage, cookie) 브라우저 저장소에는 주로 세 가지 기술이 사용됩니다. Local Storage (로컬 스토리지) - HTML5 Web Storage의 한 부분으로, 클라이언트 측에서 데이터를 저장할 수 있는 기능을 제공합니다. - 영구적인 데이터 저장을 위해 사용되며, 데이터는 사용자가 직접 삭제하지 않는 한 저장됩니다. - 저장 용량이 쿠키보다 크며 대략 5MB ~ 10MB 정도의 용량을 가집니다 (브라우저마다 다름) - 서버에 데이터가 전송되지 않으므로, 초당 요청 수를 줄일 수 있습니다. Session Storage (세션 스토리지) - HTML5 Web Storage의 한 부분으로, Local Storage와 같은 인터페이스를 제공합니다. - 각 브라우저의 탭/윈도우별로 독립적인 저장 공간을 제공합니다. - 세션..
this 가 동작하는 원리와 용법 this는 코드 실행 시점에 가리키는 객체를 참조하는 역할을 합니다. 사용되는 상황에 따라 동적으로 바뀝니다. 전역함수 및 메소드 내부에서의 this: 전역 스코프에서 사용된 this는 전역 객체를 가리킵니다(Web 브라우저의 경우, window 객체). 일반 함수 내부에서 사용된 this도 전역 객체를 참조합니다. // 일반 함수에서의 this function globalFunction() { console.log(this); } globalFunction(); // window 객체 또는 전역 객체 객체 메소드 내부에서의 this: 객체의 메소드 내부에서 사용된 this는 메소드를 호출한 객체를 참조합니다. // 객체 메소드에서의 this const obj = { prop: "Hello,", meth..
HTTP에 대해 설명, HTTP 메세지 구조에 대해 설명 HTTP(Hypertext Transfer Protocol)는 웹 브라우저와 서버 간 정보 교환을 위한 프로토콜입니다. 클라이언트의 웹 페이지 요청과 서버의 웹 페이지 제공 방식으로 동작합니다. 클라이언트가 서버에 리소스 요청을 'request'하고, 서버가 처리 결과를 'response'로 돌려줍니다. 주요 HTTP 메소드는, GET, POST, PUT, DELETE가 있으며, 각각 서버에 저장된 리소스 조회, 추가, 수정, 리소스 삭제를 수행합니다. 응답 과정에서 상태 코드를 사용해 서버 처리 결과를 전달합니다. HTTP 메세지 구조는 클라이언트와 서버 간 통신에 사용되는 요청과 응답 메세지의 구성을 설명합니다. 이 구조는 시작 라인, 헤더, 본문 세 부분으로 구성되어 있습니다. 시작 라인은 요청 및..
position 을 어떻게 사용하는지 position은 CSS 속성 중 하나로, HTML 요소의 위치를 조절하는 데 사용됩니다. static (기본값): 요소가 일반적인 문서 흐름에 따라 위치합니다. top, right, bottom, left와 같은 위치 지정 속성은 static에서는 영향을 주지 않습니다. relative: 요소를 기본 위치에서 상대적으로 이동시킵니다. top, right, bottom, left 속성에 지정된 값을 사용해 이동 위치를 결정합니다. absolute: 가장 가까운 부모 요소 중 position 값이 "static"이 아닌 요소에 대한 상대적인 위치를 지정합니다. top, right, bottom, left 속성을 사용해 위치를 결정합니다. fixed: 뷰포트에 대해 고정된 위치를 설정합니다. 스크롤해도 요소..
캐시의 장단점과 어떤 부분에 활용하는지 ? FE에서 캐시를 사용할 수 있는 영역 캐시란? 캐시(Cache)는 웹 브라우저가 자주 사용하는 데이터나 자원을 로컬 저장소에 임시로 저장해 두는 것 캐시의 장점 성능 향상: 캐시를 사용하면 원래의 데이터 소스(예: 서버)에서 데이터를 다시 가져오지 않아도 되므로 응답 시간이 빨라짐 서버 부하 감소: 캐시에 데이터를 저장하면 서버의 요청 처리량이 감소하여 전체 시스템의 부하를 줄일 수 있음 캐시의 단점 데이터 일관성: 캐시된 데이터가 원본 데이터와 일치하지 않는 경우 데이터 일관성 문제가 발생 저장 공간: 캐시는 추가적인 저장 공간을 사용하기 때문에, 가용한 저장 공간에 비례하여 캐시 크기가 결정 관리 복잡성: 캐시 정책과 만료 시간 등 캐시 관련 설정을 관리하기 위해서는 추가적인 관리 노력이 필요 프론트엔드에서 캐시를 사용할 수 있는 영역 ..

티스토리툴바