본문 바로가기

FE

(15)
이벤트 전파 사용자 인터페이스를 구현하다 보면, 클릭 이벤트가 예상치 못한 요소까지 전달되는 현상을 마주할 때가 있다. 예컨대 버튼을 클릭했는데, 그 상위 div에 걸어둔 이벤트 리스너도 함께 실행되는 것이다.이러한 문제를 더 개념적으로 파고들어보자. 이벤트 전파란?이벤트 전파(Event Propagation)는 HTML 요소에서 이벤트가 발생했을 때, 그 이벤트가 DOM 트리를 따라 전파되는 흐름을 말한다. 이 흐름은 총 세 단계로 나뉜다:캡처링 단계 (Capturing Phase)타깃 단계 (Target Phase)버블링 단계 (Bubbling Phase) 이벤트가 발생하면 먼저 캡처링 단계에서 최상위 요소(document)부터 타깃 요소까지 내려가고, 타깃 요소에서 이벤트가 실행된 후, 버블링 단계에서 타깃 ..
null, undefined, undeclared, NaN null, undefined, undeclared, NaN을 헷갈리면 어떤 일이 생길까?없는 값을 체크한다고 생각했는데, 그 값이 NaN이라 의도치 않게 연산이 꼬인다.undefined라고 생각한 값을 null만 체크해서 조건문이 통과되지 않는다.선언된 줄 알았던 변수가 실제로는 undeclared 상태라 런타임 에러가 난다.그래서 이 네 가지 개념을 한 번에 정리해보자.1. null – 의도적으로 비어있음을 표현정의: 명시적으로 "값이 없음"을 나타내기 위해 사용하는 값타입: object (설계 오류로 인해 typeof null은 "object" 반환)예시: 특징:의도적으로 비어 있음을 명시주로 객체 초기화에 사용null == undefined → true (느슨한 비교: 형 변환 발생)null ===..
브라우저 저장소 간단 정리 각 저장소의 기본 특성저장소용량지속성서버 전송접근 방식특이사항Cookies약 4KB설정 가능✅ 자동 전송document.cookie도메인/경로 설정 가능, HttpOnly 및 Secure 설정으로 보안 강화 가능, 크기 제약 큼LocalStorage5~10MB영구 저장❌동기적 API도메인 기준으로 저장, 같은 출처에서만 접근 가능, XSS 공격에 취약할 수 있음SessionStorage약 5MB탭 종료 시 삭제❌동기적 API탭 단위 저장, 새로고침 시 유지되며 탭 닫으면 삭제됨, 다른 탭에서는 접근 불가IndexedDB수백 MB 이상영구 저장❌비동기 API객체 저장 가능, 인덱싱 및 검색 지원, 트랜잭션 처리 가능, 구조화된 데이터에 적합 ✅ 상황별 추천 정리1. 로그인 상태를 유지해야 할 때Cookie..
CSS: padding, margin, position 1. padding (안쪽 여백) 내용 콘텐츠와 테두리 사이에 공간이 생김. 내부 여백을 만들어줌. 붉은 점선 내부가 padding 영역. 2. margin (바깥쪽 여백) 요소 바깥쪽에 공간이 생김. 다른 요소와의 거리 확보용. 3. position: static static 기본값. 요소는 문서 흐름에 따라 배치됨. top, left 등 오프셋 속성은 적용되지 않음. 4. position: relative relative 요소는 원래 자리 기준으로 오프셋(top, left 등..
JavaScript: var, let, const 자바스크립트에서 변수를 선언하는 방법은 세 가지가 있다: var, let, 그리고 const. 그런데 이 셋은 단순히 문법이 다른 게 아니다. 동작 방식 자체가 다르다. 그래서 어떤 걸 쓰느냐에 따라 버그가 생길 수도, 막을 수도 있다. 이번 글에서는 var, let, const를 스코프(Scope), 중복 선언, 호이스팅(Hoisting), 전역 객체(window) 네 가지 관점에서 비교해본다.1. 스코프: 변수가 살아 있는 공간var: 함수 스코프var는 오직 함수 단위로만 스코프를 나눈다. {} 블록은 무시한다.if (true) { var x = 1;}console.log(x); // 1 (밖에서도 접근됨)함수 안에서 선언하면 그 함수 안에서만 유효하지만, 함수 바깥에서 {} 안에 선언하면 밖에서..
Tailwind CSS vs Styled Components 이번 글에서는 Tailwind CSS와 Styled Components를 사용하면서 느낀 장단점을 정리해본다.1️⃣ CSS 렌더링 방식 차이방식Tailwind CSSStyled Components스타일 적용 방식정적 CSS 파일 (빌드 타임 적용)런타임에 JavaScript가 스타일 생성브라우저 성능 영향미리 컴파일된 CSS를 사용하여 빠름실행 중 스타일을 생성해야 하므로 성능 저하 발생🔹 Tailwind CSS: 빌드 시 필요한 클래스만 포함하여 최적화된 CSS 파일을 생성(PurgeCSS 적용). 덕분에 실제 배포 환경에서는 매우 작은 CSS 파일이 만들어져 페이지 로딩 속도가 빨라진다.🔹 Styled Components: JavaScript 실행 후 스타일을 생성하고, DOM에 스타일 태그를 주..
useState가 의도대로 동작을 하지 않는다. 기존 코드다음은 showTradeList 함수가 currentPage 상태를 기반으로 API 요청을 보내는 코드const showTradeList = async () => { if (loading || currentPage > allPageCount) { return; } setLoading(true); const formData = new FormData(); formData.append("page_num", currentPage.toString()); await apiService.post( "/posts/search_second_hand/", formData, ).then(res => { if (res.data.code === 200) { ..
React useRef vs useState 이전에 react-hook-form의 input 입력에서는 ref를 사용하는 것을 확인했다. 그렇다면 라이브러리에서도 ref를 사용하는데, useState보다 ref가 더 좋은 방법일까?useRef와 useState의 차이React 공식 문서에서는 ref를 "컴포넌트가 일부 정보를 기억하고 싶지만, 해당 정보가 렌더링 로직에 영향을 미치지 않는 경우" 사용하는 것이 적절하다고 설명한다. 주로 포커스 제어, 값 가져오기, DOM 요소 조작 등에 사용된다고도 적혀있다.반면, useState는 컴포넌트의 상태를 저장하고, 값이 변경될 때 리렌더링을 발생시키는 역할을 한다.코드 예제: useRef와 useState 비교import { useState, useRef } from 'react';export defa..