Dachae's DevLogs

map() 자바스크립트에서 배열을 다룰 때, 반복문 없이 우아하게 데이터를 변형할 수 있는 방법이 있습니다. 바로 map() 메서드입니다. map()은 배열을 다른 배열로 변형할 때 자주 사용되는 메서드로, 초보자부터 고급 개발자까지 자주 사용하는 핵심 도구 중 하나입니다. 1. map()이란?map()은 자바스크립트 배열(Array)의 내장 메서드로, 배열의 각 요소에 대해 주어진 콜백 함수를 호출하고 그 결과를 모아 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.const numbers = [1, 2, 3];const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6]문법arr.map(callback(curre..

Intersection Observer Intersection Observer API는 DOM 요소가 다른 요소나 브라우저의 뷰포트와 교차하는지(Intersection)를 비동기적으로 관찰할 수 있는 웹 API입니다. 이 API를 사용하면 스크롤 이벤트를 직접 감지하지 않고도, 어떤 요소가 화면에 들어오거나 나갈 때를 효율적으로 감지할 수 있어 성능과 코드의 가독성 모두에서 이점을 제공합니다. 1. Intersection Observer란?웹 개발에서 특정 요소가 뷰포트(또는 다른 요소)와 교차되는 시점을 감지하고 싶을 때, 기존에는 scroll 이벤트와 getBoundingClientRect() 를 조합해서 구현하곤 했습니다. 하지만 이 방법은 성능에 큰 부담을 주고 복잡했습니다.이를 해결하기 위해 ..

Blob 웹 애플리케이션에서 이미지, 동영상, 텍스트 파일 등을 다룰 때, 자바스크립트만으로 데이터를 처리하고 싶은 순간이 자주 생깁니다. 이때 사용하는 강력한 도구가 바로 Blob(Binary Large Object) API입니다. Blob은 브라우저에서 바이너리 데이터를 파일처럼 다룰 수 있도록 해주는 객체로, 이미지 미리보기, 파일 다운로드, 서버 업로드, 미디어 스트리밍 등 다양한 기능을 제공합니다. 1. Blob이란?Blob은 자바스크립트에서 이진 데이터를 표현하는 객체입니다. Blob은 파일의 형태를 갖지만, 실제로는 메모리에 존재하는 데이터 덩어리입니다.기본 생성 방법const blob = new Blob(["Hello, world!"], { type: "text/plain" });첫 번째..

useEffect 리액트에서 함수형 컴포넌트를 사용할 때 가장 자주 만나게 되는 훅 중 하나가 useEffect 입니다. useEffect 는 컴포넌트가 렌더링된 이후 특정 작업(사이드 이펙트)을 실행할 수 있게 도와주는 훅입니다. 예를 들어, API 호출, 이벤트 리스너 등록, 타이머 설정, 외부 라이브러리 초기화 등의 작업이 이에 해당합니다.이 글에서는 useEffect 의 기본 개념부터 동작 방식, 의존성 배열, 정리(clean-up) 함수까지 단계별로 알아보겠습니다. 1. useEffect란?useEffect 는 리액트 컴포넌트가 렌더링된 이후 실행되는 함수입니다. 컴포넌트가 처음 렌더링될 때, 특정 값이 바뀔 때, 컴포넌트가 사라질 때 등 다양한 타이밍에 맞춰 동작할 수 있습니다.useEffe..

useRef 리액트에서 DOM에 직접 접근하거나 컴포넌트 간 특정 값을 공유하고 싶을 때, useRef 훅은 매우 유용한 도구입니다. 초보자에게는 조금 낯설 수 있지만, 잘 활용하면 불필요한 리렌더링을 줄이고, DOM 요소를 직접 제어하며, 타이머나 이전 상태 값을 저장하는 등 다양한 상황에서 활용할 수 있습니다. 1. useRef란?useRef 는 리액트 훅 중 하나로, 변경 가능한 참조 객체(mutable ref object)를 반환합니다. 이 객체는 .current 라는 프로퍼티를 가지고 있으며, 여기에 원하는 값을 저장하거나 DOM 요소를 참조할 수 있습니다.const myRef = useRef(initialValue);myRef.current 에 값이 저장됩니다..current 의 값이 변경..

useState 리액트를 처음 접하거나 훅(Hook)에 입문하는 개발자라면 가장 먼저 만나게 되는 개념 중 하나가 바로 useState입니다. useState는 컴포넌트 내부에서 상태(state)를 관리할 수 있게 해주는 리액트 훅이며, 함수형 컴포넌트에서도 클래스 컴포넌트 못지않게 동적인 UI를 구현할 수 있게 해줍니다. 1. useState란?useState는 리액트에서 제공하는 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태(state)를 선언하고 관리할 수 있게 해주는 함수입니다. 상태는 컴포넌트의 데이터나 UI를 동적으로 변경할 때 사용하는 값입니다.기본 문법const [state, setState] = useState(initialValue);state : 현재 상태 값setState :..

filter() 자바스크립트에서 데이터를 다룰 때, 가장 많이 하는 작업 중 하나는 "필터링", 즉 조건에 맞는 요소만 골라내는 작업입니다.나이가 30 이상인 사람만 뽑기완료된 작업만 리스트에 보여주기검색어와 일치하는 항목만 출력하기이런 일을 할 때 가장 유용한 메서드가 바로 Array.prototype.filter() 입니다. 1. filter() 메서드란? filter() 는 배열에서 조건을 만족하는 요소만 추출하여 새 배열로 반환하는 메서드입니다. const newArray = array.filter(callback);기존 배열은 변경하지 않습니다.조건을 만족하는 요소만 모은 새로운 배열을 반환합니다. 2. 기본 사용법const numbers = [1, 2, 3, 4, 5];const even..

useContext 리액트 앱을 만들다 보면 컴포넌트 간 상태를 공유해야 하는 경우가 많습니다. 예를 들어, 로그인 여부, 테마 설정, 다크모드, 언어 설정 등은 여러 컴포넌트가 함께 사용하는 전역 상태입니다.이럴 때 React의 Context API + useContext 훅을 사용하면 아주 깔끔하게 상태를 관리할 수 있습니다. 1. useContext란?useContext는 Context 객체의 값을 쉽게 꺼내 쓰기 위한 React 훅입니다.Context는 React에서 전역 상태를 만들 수 있도록 도와주는 기능이고, useContext는 이 Context에 저장된 값을 컴포넌트 내부에서 간단히 꺼내 쓰게 해주는 도구입니다.언제 useContext를 쓰는가? 로그인 여부 관리 : isAuthenti..

세션 쿠키(Session Cookie) 웹사이트에서 로그인한 뒤 브라우저를 껐다 켰더니 로그인이 풀린 경험, 한 번쯤 있으셨을 거예요. 이는 대부분 세션 쿠키(Session Cookie) 때문입니다. 세션 쿠키는 사용자 인증과 세션 유지의 핵심 도구로, 일시적인 정보 저장에 적합합니다.이 글에서는 세션 쿠키의 개념과 특징, 일반 쿠키와의 차이, 그리고 개발 시 언제 세션 쿠키를 사용할지에 대해 자세히 설명합니다. 1. 세션 쿠키란?세션쿠키는 브라우저가 켜져 있는 동안만 유지되는 쿠키입니다. 즉, 사용자가 브라우저를 닫는 순간 쿠키는 자동으로 삭제됩니다.저장 위치 : 사용자의 브라우저 메모리만료 시점 : 브라우저 종료 시사용 예시 : 로그인 세션, 임시 필터 정보, 쇼핑 카트 임시 저장 등세션 쿠키의 동..

Set 자바스크립트에서 배열은 가장 널리 쓰이는 컬렉션 타입이지만, 중복된 값을 제거하거나 고유한 데이터만 관리하고 싶을 때는 Set이 훨씬 간단한 도구입니다. 1. Set 객체란?Set은 값들의 집합(collection) 을 저장하는 자료구조입니다. 가장 큰 특징은 중복된 값을 허용하지 않는다는 점입니다. 즉, 동일한 값이 여러 번 추가되어도 하나만 저장됩니다.const mySet = new Set();mySet.add(1);mySet.add(2);mySet.add(2); // 중복된 값, 무시됨console.log(mySet); // Set { 1, 2 }또한, Set에 저장되는 값의 순서는 삽입 순서(insert order) 를 따릅니다. 2. 주요 메서드 및 속성a. add(value)Set..

Map 자바스크립트에서 데이터를 키-값 쌍으로 저장하는 가장 기본적인 방법은 객체(Object)를 사용하는 것입니다. 하지만 ECMAScript 2015(ES6)부터 도입된 Map 객체는 기존 객체보다 더 유연하고 강력한 키-값 쌍 저장 기능을 제공합니다. 1. Map 객체란?Map은 키-값 쌍을 저장하는 내장 객체로, 모든 자료형을 키로 사용할 수 있으며 저장된 순서를 유지합니다. 이는 일반 객체와의 큰 차이점 중 하나입니다.const myMap = new Map();myMap.set('key', 'value');myMap.set(123, 'number key');myMap.set(true, 'boolean key');위 예시처럼 문자열뿐만 아니라 숫자, 불린, 객체 등 어떤 타입도 키로 사용할 수 ..

[Lv. 1] 폰켓몬 https://school.programmers.co.kr/learn/courses/30/lessons/1845 문제설명당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다.홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다..

React Lifecycle 리액트 컴포넌트를 사용하다 보면 "언제 데이터를 불러와야 할까?", "언제 정리(clean-up)를 해야 할까?" 같은 고민이 생깁니다. 이럴 때 중요한 개념이 바로 컴포넌트의 라이프사이클(Lifecycle) 입니다. 이 글에서는 리액트 컴포넌트가 생성되고, 업데이트되고, 제거되는 일련의 과정을 클래스형 컴포넌트와 함수형 컴포넌트(Hooks 사용) 관점에서 자세히 설명합니다. 1. 리액트 라이프사이클이란?리액트 컴포넌트는 화면에 렌더링되는 동안 여러 가지 단계를 거칩니다. 이 일련의 과정이 라이프사이클이며, 크게 세 단계로 나뉩니다:마운트(Mount) : 컴포넌트가 DOM에 삽입될 때업데이트(Update) : 상태나 props가 바뀌어 컴포넌트가 다시 렌더링될 때언마운트(U..

코드 스플리팅(Code Splitting) 애플리케이션이 커질수록 번들 파일 크기가 커지고, 이로 인해 페이지 초기 로딩 속도가 느려집니다. 사용자는 빈 화면을 오래 기다려야 하고, 모바일 환경에서는 데이터 사용량까지 증가하죠. 이 문제를 해결하는 대표적인 기술이 바로 코드 스플리팅(Code Splitting)입니다.코드 스플리팅은 하나의 큰 자바스크립트 번들을 여러 개의 작은 청크(chunk)로 분할하여, 필요한 순간에만 불러오도록 하는 최적화 기법입니다. 1. 코드 스플리팅이란?코드 스플리팅(Code Splitting)은 웹 애플리케이션의 코드를 기능 단위 또는 페이지 단위로 분리하여, 필요한 시점에만 각 코드 블록을 로드하도록 만드는 기술입니다.왜 필요한가요?초기 로딩 시간 단축렌더링 속도 개선불..

지연 로딩(Lazy Loading) 웹 페이지의 성능과 사용자 경험은 로딩 속도에 크게 좌우됩니다. 사용자가 실제로 보지도 않는 리소스를 미리 모두 불러오는 건 자원 낭비일 뿐만 아니라, 사용자에게 느린 사이트라는 인식을 심어줄 수 있습니다.이 문제를 해결하기 위한 대표적인 기법이 바로 Lazy Loading(지연 로딩)입니다. 1. Lazy Loading이란?Lazy Loading은 웹 페이지를 불러올 때 즉시 필요한 리소스만 로드하고, 나머지는 사용자가 필요로 할 때 로딩하는 방식입니다. 예를 들어 스크롤을 내려야 보이는 이미지나, 특정 버튼을 눌러야 보이는 컴포넌트 등이 그 대상입니다.이 기법을 통해 다음과 같은 효과를 기대할 수 있습니다.초기 로딩 속도 단축불필요한 네트워크 요청 감소사용자 경험..