Development Vlog

1️⃣ React Query가 만들어진 이유와 이점React Query는 서버 상태 관리의 복잡성을 줄이기 위해 만들어졌습니다. React의 기본 상태 관리 방식은 클라이언트 상태를 관리하는데 적합하지만, 서버 상태를 관리할때 아래의 문제들이 발생합니다. 데이터 동기화 문제서버 데이터와 UI 간의 동기화를 수동으로 처리해야 합니다. 캐싱과 갱신 문제서버에서 가져온 데이터를 효율적으로 캐싱하고 필요한 경우 새로 고쳐야 합니다. 로딩, 오류 상태 관리의 복잡성데이터 fetching과 관련된 로딩 및 에러 상태를 따로 관리해야 합니다. 의존성 관리여러 쿼리가 서로 의존성을 가지는 경우, 이들의 데이터 흐름을 관리하기 어렵습니다. React Query는 위 문제들을 해결하기 위해 설계된 라이브러리로, 서버 상태..

1️⃣ 세션 기반 인증과 토큰 기반 인증을 비교해서 설명해 주세요.세션 기반 인증 작동 방식사용자가 로그인하면 서버에서 사용자의 인증 정보를 확인한 뒤, 고유한 세션 ID를 생성합니다.이 세션 ID는 서버에 저장되고, 사용자에게는 쿠키를 통해 전달됩니다.이후 사용자가 서버에 요청을 보낼 때, 쿠키에 포함된 세션 ID를 통해 서버에서 사용자 정보를 조회하여 인증을 처리합니다. 특징서버 저장소 필요 : 서버는 활성 세션 ID를 저장하고 관리해야 합니다.상태 유지 : 세션 상태는 서버에서 유지되므로 서버는 stateful로 작동합니다.쿠키 의존성 : 세션 ID는 보통 쿠키에 저장됩니다.보안 : 서버에서 세션 데이터를 관리하므로 제어가 쉽지만, 세션 탈취 공격에 취약할 수 있습니다. 장단점서버에서 사용자 상태를..

1️⃣ CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.CORS(Cross-Origin Resource Sharing) 에러는 웹 브라우저가 다른 도메인에서 리소스를 요청할 때 발생하는 보안 메커니즘입니다. 브라우저는 동일 출처 정책을 따르며, 이를 통해 스크립트가 다른 출처의 리소스에 무단으로 접근하지 못하도록 제한합니다. 동일 출저 정책 : 웹 사이트의 도메인, 프로토콜, 포트 번호가 모두 같아야 요청을 허용하는 보안 정책. 만약 요청을 받는 서버가 CORS 설정을 통해 특정 도메인의 요청을 허용하지 않는다면, 브라우저는 요청을 차단하고 CORS 에러를 발생시킵니다. CORS 에러에 대한 경험이전 직장에서 개발 서버와 운영 서버 모두 동일한 API 서버를 사용했지만, API 서버가..

1️⃣ 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.우선 `Next.js`는 `React.js`를 기반으로 한 웹 개발 프레임워크로, `React.js`를 보다 강력하고 편리하게 사용할 수 있도록 다양한 기능을 제공합니다. `React`의 확장판으로 이해할 수 있으며, Vercel에서 개발하여 오픈소스로 운영되고 있습니다.Next.js의 주요 특징1. 페이지 라우팅Next.js는 파일 기반 라우팅 시스템을 제공합니다.Pages 디랙토리 안의 파일들이 URL 경로로 자동 매핑됩니다.2. 빌트인 최적화 기능서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 기본적으로 지원합니다.코드 스플리팅, 이미지 최적화, Lazy Loading 등 웹 성능을 극대화하기 위한 기..

1️⃣ JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.`TypeScript`는 `JavaScript`의 상위 집합으로, `JavaScript`의 기능을 모두 포함하면서 추가적인 기능을 제공합니다. 이를 통해 `JavaScript`에서 발생할 수 있는 많은 문제를 해결하고, 대규모 애플리케이션 개발 시 많은 이점을 제공합니다. JavaScript vs TypeScript특징JavaScriptTypeScript타입 시스템동적 타입 언어정적 타입 언어실행 방식인터프리터 언어컴파일 언어독립성독립적으로 사용 가능JS로 컴파일된 후 실행(JS 의존적)유연성타입에 제한이 없음(더 유연)더 나은 구조, 간결함, 일관성, 재사용성파일 확장자.js.ts프로젝트 적합성작..

1️⃣ 리액트 생명주기(life cycle)에 대해 설명해 주세요.React Life Cycle이란?React는 컴포넌트 기반의 View 중심인 라이브러리로, 각각의 컴포넌트에는 고유한 라이브사이클(생명주기)이 존재합니다. 컴포넌트의 생명주기는 보통 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 종료됩니다. 이를 통해 React는 컴포넌트 생성, 업데이트, 그리고 제거될 때마다 특정 작업을 수행할 수 있는 기회를 제공합니다. React 라이프사이클은 크게 세 단계로 나눌 수 있습니다. Mounting (마운트)컴포넌트가 처음 생성되어 DOM에 삽입되는 단계입니다. `componentDidMount`와 같은 메서드를 통해 초기화 작업을 수행할 수 있습니다. Updating (업데이트)..

1️⃣ React에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. Virtual DOM란?Virtual DOM(Virtual Document Object Model)은 실제 DOM을 조작하기 전에 그 변경 사항을 메모리상에 시뮬레이션하는 가상화된 객체입니다. 주로 React 같은 프레임워크에서 사용되며, 실제 DOM과 동기화 작업을 효율적으로 처리하여 성능 개선하는 데 도움을 줍니다. Virtual DOM의 작동 방식 1. 변경 사항 추적상태가 업데이트되면, Virtual DOM이 새로운 Virtual DOM 트리를 생성하여 변경된 부분을 추적합니다. 2. 차이 계산(Diffing)이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 어떤 요소가 변경되었..

1️⃣ 자바스크립트 실행 컨텍스트(Execution context)에 대해 설명해 주세요.자바스크립트에서 실행 컨텍스트는 코드가 실행되는 환경을 의미합니다. 즉, 코드를 실행하기 위해 필요한 정보들을 모아둔 상자와 같은 것이라고 생각하면 됩니다. 자바스크립트는 코드를 실행하기 전에 어떤 변수들이 있고, 어떤 함수들이 있는지, 그리고 현재 this가 무엇을 가리키는지 알고, 실행 컨텍스트가 관리합니다. 실행 컨텍스트의 종류1. 전역 실행 컨텍스트자바스크립트 파일을 처음 실행할 때 가장 먼저 만들어지는 환경이며, 전역 변수나 전역 함수가 여기에 저장됩니다. 2. 함수 실행 컨텍스트함수를 호출할 때마다 그 함수만의 실행 환경이 따로 만들어집니다. 즉, 함수가 실행될 때마다 새로 만들어지는 환경입니다. 실행 컨..

1️⃣ 렉시컬 스코프(Lexical scope)에 대해 설명해 주세요.렉시컬 스코프는 변수의 유효 범위가 함수의 정의 위치에 따라 결정되는 규칙입니다. 자바스크립트에서 함수가 어디에 선언되었는지에 따라 해당 함수가 접근할 수 있는 변수가 정해지며, 이는 함수의 호출이 아닌 선언에 따라 결정됩니다.  주요 특징상위 스코프 접근 : 중첩된 함수는 자신이 정의된 상위 함수의 변수에 접근할 수 있습니다.하위 스코프 접근 불가 : 상위 함수는 하위 함수에서 선언된 변수에 접근할 수 없습니다.정의 시점 : 함수가 호출되는 시점이 아닌, 정의된 시점에 따라 변수가 결정됩니다.// 예시function outerFunc() { let outerVar = 'outer'; function innerFunc() {..

📚 이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요.이벤트 버블링, 캡쳐링, 위임은 웹 페이지에서 이벤트가 발생할 때, 그 이벤트가 요소들 간에 어떻게 전파되고 처리 되는지 설명하는 중요한 개념들입니다.이벤트 버블링 (Event Bubbling)`이벤트 버블링`은 자식 요소에서 발생한 이벤트가 부모 요소까지 전파되는 현상을 말합니다. 특정 요소에서 이벤트가 발생하면 해당 요소에 등록된 이벤트 핸들러가 실행된 후, 그 이벤트가 부모 요소로 전달되면서 부모 요소에 등록된 이벤트 핸들러가 차례로 실행됩니다. 이 과정은 최상위 요소에 도달할 때까지 계속되며, 이벤트가 아래에서 위로 올라가듯 전파되기 때문에 `버블링`이라는 용어를 사용합니다. 참고로 이벤트 버블링은 이벤트 객체의 `stopPropagatio..