본문 바로가기

전체 글

 (57)
[Algorithm][LeetCode 560] Subarray Sum Equals K 문제 풀이 - 누적합과 Hash Map 활용법 🟢 LeetCode 560. Subarray Sum Equals K 문제 풀이 (with 누적합 + 해시맵)최근 Leetcode 2845. Count of Interesting Subarrays 문제를 풀다가 막히는 부분이 있었는데, 유튜브에서 힌트를 찾아보다가 아래 영상을 발견했습니다.How to solve Count of Interesting Subarrays (Leetcode 2845)이 영상에서는 Leetcode 560번과 523번 문제를 먼저 풀어보면 이해가 잘 된다고 추천하더라고요.그래서 먼저 Leetcode 560. Subarray Sum Equals K 문제를 풀어보았습니다.🟢 문제 설명Given an array of integers nums and an integer k,return ..
자바스크립트의 비동기 실행 흐름 정리 자바스크립트는 싱글 스레드 기반으로 동작하기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다.따라서 콜 스택(Call Stack), 이벤트 루프(Event Loop), Web API, 큐(Queue)를 통해 동기/비동기 작업을 처리하게 됩니다.✅ 예제 코드console.log(1);setTimeout(() => { console.log(2)}, 100);console.log(3);1. 동기 작업 진행 console.log(1)이 콜 스택에 올라가 실행됩니다. setTimeout(...) 실행 setTimeout 함수 자체는 콜 스택에서 실행되지만, 내부 콜백 함수 () => console.log(2)는 Web API 영역으로 넘겨집니다. Web API가 100ms..
[RxJS] 3편. RxJS로 CRUD 구현하기 – 그리고 절차형처럼 느껴지는 부분 이번 글에서는 RxJS로 게시글 CRUD(생성, 조회, 삭제 등)를 어떻게 구현할 수 있는지 살펴보고, 그 과정에서 일부 코드가 절차형처럼 느껴지는 이유에 대해서도 함께 정리해본다.🧱 postStore.js – 전역 상태 + API 흐름 구성import { BehaviorSubject, Subject, from, of } from 'rxjs';import { switchMap, tap, catchError } from 'rxjs/operators';const postSubject = new BehaviorSubject([]);export const posts$ = postSubject.asObservable();const fetchTrigger$ = new Subject();// 초기 fetchfetc..
[RxJS] 2편. React에서 RxJS로 상태관리를 한다는 것은? React는 컴포넌트 기반 + 선언형 UI 프레임워크다. RxJS는 데이터 흐름을 선언적으로 다루는 스트림 라이브러리다. 그렇다면 React에서 RxJS로 상태 관리를 한다는 것은 어떤 의미일까?🌐 전역 상태를 스트림으로 선언RxJS에서는 전역 상태를 BehaviorSubject로 선언하고, 이를 Observable로 구독하게 만든다.const count$ = new BehaviorSubject(0);export const counter$ = count$.asObservable();export const increment = () => count$.next(count$.value + 1);📂 React Hook으로 구독function useCounter() { const [count, setCoun..
[RxJS] 1편. RxJS와 선언형 프로그래밍의 관계 1편. RxJS와 선언형 프로그래밍의 관계RxJS는 단순한 유틸리티 라이브러리를 넘어서, 선언형 프로그래밍의 철학을 코드에 옮긴 대표적인 예다. 이 글에서는 RxJS가 왜 선언형 프로그래밍과 관련이 깊은지 살펴보자.✨ 선언형 프로그래밍이란?- "무엇을 할 것인가"에 집중- 데이터 흐름을 명시적으로 선언하고, 내부의 처리 방식은 숨김- 대표 예시: HTML, SQL, React JSX, Array.map/filter⚡ RxJS는 선언형 프로그래밍 그 자체RxJS는 Observable 스트림을 통해 비동기 데이터를 선언적으로 다룬다. 직접 흐름을 제어하지 않고, 연산자를 조합해서 "무엇을 할 것인지" 선언한다.fromEvent(document, 'click') .pipe( map(event => ev..
React에서 useEffect를 꼭 써야 할까? — 오히려 안 써도 되는 경우가 더 많다 React에서 useEffect를 꼭 써야 할까? — 오히려 안 써도 되는 경우가 더 많다React를 쓰다 보면 useEffect를 거의 습관처럼 쓰게 되는 경우가 많다.상태를 바꾸거나, 데이터를 갱신하거나, 뭔가 “변화”가 있으면 useEffect부터 떠오른다.하지만 React 공식 문서에서는 이렇게 말한다:"You might not need an effect."(공식 문서: https://react.dev/learn/you-might-not-need-an-effect)📌 useEffect는 React의 '비상구'다React는 기본적으로 선언형 프로그래밍 철학을 따르고 있다.하지만 세상에는 선언형으로 다 표현할 수 없는 일들이 있다. 브라우저 타이틀 변경 외부 API 호출 이벤트 리스너 등록 ..
React를 쓰면서도 몰랐던 선언형 프로그래밍 이야기 React를 쓰면서도 몰랐던 선언형 프로그래밍 이야기React를 처음 접했을 때, 나는 그냥 시키는 대로 문법을 익히고, JSX를 따라 썼다.useState, map, onClick… 그렇게 UI를 만들고, 기능을 붙이고, 화면을 완성해 나갔다.그런데 어느 순간, 문득 이런 생각이 들었다.“나는 어떻게 UI를 구성하고 있었던 거지?”“이게 다 선언형 프로그래밍이라고?”React를 공부하면서 자연스럽게 사용했던 방식들이 사실은 선언형 프로그래밍이라는 걸, 꽤 시간이 지나서야 깨달았다.선언형 vs 절차형, 간단 정리스타일절차형 프로그래밍선언형 프로그래밍초점어떻게 처리할까무엇을 만들까특징명령 중심, 순차적의도 중심, 추상화예시DOM 직접 조작JSX로 UI 구조 선언절차형 프로그래밍은 “1번 하고 → 2번 하고..
상태관리 [5편]: Redux, Zustand, Tanstack Query — 언제, 무엇을 써야 할까? 🧠 상태 관리 도구, 왜 이렇게 많을까?프로젝트를 하다 보면 "이건 Redux로?" "Zustand가 더 쉽지 않나?" 같은 고민이 생깁니다.게다가 서버에서 데이터를 받아오면 Tanstack Query도 써야 한다고? 😵‍💫1. 도대체 이 도구들은 각각 뭘 하는 건가요?항목ReduxZustandTanstack Query주 역할전역 상태 관리간편한 전역 상태 공유서버 상태 관리 (fetch, cache 등)비동기 처리thunk, saga 등 외부 도구 필요fetch 직접 사용내장된 자동 처리캐싱직접 구현직접 구현기본 제공optimistic UI수동 구현수동 구현지원개발자 경험보일러플레이트 많음간단하고 직관적서버 상태 처리에 최적화주요 예시로그인, UI 상태모달, 다크모드게시물, 유저 정보 2. 예제로..

티스토리툴바