web-development

브라우저에 영구적으로 데이터를 저장하는 방식.특징:영구 저장 (브라우저를 닫아도 유지)약 10MB 저장 가능문자열만 저장 가능 (객체는 JSON.stringify 필요)도메인별로 별도 저장소수동으로 삭제하기 전까지 유지브라우저 세션 동안만 데이터를 저장.특징:세션 종료

최근 온라인 스트리밍 플랫폼을 이용할 때 고화질(HD) 시청을 위해 추가 설치가 필요한 경우가 있음.특히, 아프리카TV와 치지직을 비교하면 차이가 확연함.아프리카TV는 자체 플레이어(Afreeca Player) 설치를 유도함.반면 치지직은 웹 표준 스트리밍 기술(HLS

catch (error) 블록 axios.isAxiosError(error)를 사용할지, 일반 catch (error)로 처리할지 헷갈린다면?Axios 요청에서 발생한 에러만 처리error.response를 확인하여 서버에서 온 응답(예: 409, 500 등)에 따라

레이아웃 스래싱은 JavaScript에서 DOM을 반복적으로 읽고 쓰는 작업으로 인해 브라우저가 레이아웃을 여러 번 다시 계산해야 하는 현상입니다.transform과 opacity 속성은 레이아웃 단계를 건너뛰고 합성 단계만 필요로 하기 때문에 더 효율적입니다.Chro

FSD(Feature-Slice Design)는 프론트엔드 애플리케이션을 개발할 때 코드를 구조화하는 아키텍처 방법론입니다.이 접근법은 주로 React, Vue, Angular 같은 프레임워크를 사용하는 복잡한 웹 애플리케이션에서 매우 유용합니다.FSD는 비즈니스 로직

React 컴포넌트를 개발할 때 다양한 크기(size)를 지원하는 것은 일반적인 요구사항입니다. Button, Input, Radio 등 거의 모든 UI 컴포넌트에는 sm, md, lg와 같은 크기 옵션이 필요합니다. 이러한 크기 변형을 처리하는 방법에는 크게 두 가지

React로 모달을 구현할 때 사용되는 핵심 개념들에 대해 자세히 알아보겠습니다.모달 컴포넌트를 만들 때 createContext, useContext, createPortal 같은 API들이 왜 필요하고 어떻게 작동하는지 알아보겠습니다.createContext는 컴포

이벤트 버블링은 DOM에서 이벤트가 발생했을 때, 그 이벤트가 상위 요소로 전파되는 현상입니다. 모달 컴포넌트에서는 이 특성을 이해하고 적절히 처리하는 것이 중요합니다.자식 요소에서 발생한 이벤트가 부모 요소로 '거품(bubble)'처럼 올라가는 현상입니다. 예를 들어

React 컴포넌트에서 이벤트 핸들러를 작성할 때 유용한 패턴 하나를 알게 되었습니다.특히 재사용 가능한 컴포넌트를 만들 때 많이 활용되는 기법입니다.이 코드를 보면 onClick?.() 이라는 표현이 있습니다.이것은 JavaScript의 선택적 체이닝(Optional

React로 개발을 하다 보면 여러 컴포넌트가 서로 연관되어 작동해야 하는 복잡한 UI 요소를 만들어야 할 때가 있습니다. 이런 상황에서 컴파운드 컴포넌트 패턴은 강력한 해결책을 제공합니다.컴파운드 컴포넌트는 서로 밀접하게 연관된 여러 컴포넌트를 하나의 네임스페이스로

웹 개발을 하다 보면 '이벤트'라는 개념을 자주 마주치게 됩니다.사용자가 버튼을 클릭하거나, 텍스트를 입력하거나, 마우스를 움직일 때 등 다양한 상호작용이 모두 이벤트로 처리됩니다. 웹 브라우저의 이벤트 처리 방식에 대해 정리해보았습니다.이벤트는 웹 페이지에서 발생하는

React로 모달 컴포넌트를 개발할 때 가장 기본적인 기능 중 하나는 "모달 외부를 클릭하면 모달이 닫히는 것"입니다. 이 기능을 구현하는 방법은 크게 두 가지가 있는데, 각각 장단점이 있습니다. 이 글에서는 두 가지 접근법을 비교하고 언제 어떤 방법을 사용해야 하는지

Vite(프랑스어로 '빠르다'라는 의미, 발음은 '비트')는 Vue.js의 제작자 Evan You가 개발한 차세대 프론트엔드 빌드 도구입니다. 2020년에 첫 버전이 공개된 이후 급속도로 인기를 얻어 현재는 React, Vue, Svelte, Lit 등 다양한 프레임워

React 프로젝트에서 SVG 배경을 사용할 때 화면 크기에 따라 잘리거나 제대로 표시되지 않는 문제가 발생할 수 있습니다.이번 프로젝트 작업 중 이런 문제가 생겼고, 여러 방법을 시도한 끝에 해결책을 찾았습니다.해결 방법과 함께 다른 대안들을 기록해보겠습니다.다음과

SSH 키는 개발자가 서버에 안전하게 접속하기 위한 필수 도구입니다.비밀번호 방식보다 훨씬 안전하며, 자동화된 배포 과정에서도 중요한 역할을 합니다.이 글에서는 SSH 키를 생성하고 안전하게 관리하는 방법을 알아보겠습니다.SSH(Secure Shell) 키는 공개키와

모던 웹 개발에서 페이지 간 이동을 처리하는 방법은 크게 두 가지로 나뉩니다: 서버 라우팅과 클라이언트 라우팅.이 두 접근 방식은 웹 애플리케이션의 성능, 사용자 경험, 개발 방식에 큰 영향을 미칩니다.오늘은 두 라우팅 방식의 차이점과 각각의 장단점을 살펴보겠습니다.서

안녕하세요! 오늘은 웹 애플리케이션에서 소셜 로그인과 JWT(JSON Web Token)를 활용한 안전한 인증 방식에 대해 알아보겠습니다. 특히 백엔드 중심의 소셜 로그인 구현 방식을 쉽게 설명해 드리겠습니다.소셜 로그인은 Google, Kakao, Facebook 등

웹 애플리케이션에서 사용자 입력 데이터의 유효성 검사는 필수적입니다. 특히 이메일 주소와 같은 정보는 정확한 형식을 갖추어야 하죠. 이번 포스팅에서는 React 컴포넌트에서 정규표현식(RegExp)과 test() 메소드를 활용해 이메일 유효성을 검사하는 방법에 대해 알

Docker를 실제로 쓰면서 image, container, volume이라는 말을 자주 듣게 되는데,처음엔 다 비슷하게 느껴지지만 실제로는 역할이 아주 명확하게 나뉘어 있다.이걸 진짜 쉽고 직관적으로 정리해보자.이미지는 앱이 실행되기 전의 정적인 설계도다.예를 들어

실시간 알림을 구현하려고 EventSource를 썼는데,토큰 인증이 안 돼서 401 Unauthorized 에러가 나왔다고요?이 포스팅에서 그 이유와 해결책을 아주 쉽게 설명해드립니다.예를 들어, fetch나 axios는 요청을 보낼 때우리가 직접 헤더를 설정할 수 있

회원탈퇴 버튼을 눌렀을 때, 모달이 열리자마자 곧바로 닫혀버리는 문제가 발생했다.심지어 Modal 컴포넌트 내부에서 클릭한 건데도 onClose()가 호출되며 사라졌다.모달 컴포넌트 내부 코드에서 다음과 같은 로직이 있었다:handleClick은 이렇게 동작했다:즉,

프론트엔드에서 API 요청을 보낼 때 우리는 흔히 이렇게 쓴다:/api만 써도 잘 작동한다. 그런데 SSE(Server-Sent Events)를 쓸 때는 이상하게도 절대 경로를 요구한다?왜 이런 차이가 발생할까?Vite, Webpack, Create React App

SSE(Server-Sent Events)를 사용해 실시간 알림 기능을 구현하면서 다음과 같은 문제를 겪었다.JSON.parse 오류로 인한 전체 로직 중단SSE 연결 오류 발생 시 무한 대기재연결(back-off) 로직 없음CORS 정책에 따른 실패 대응 불가이를 개