전체 글 (233) 썸네일형 리스트형 [PickPick] 라이브 서비스 중단 없이 데이터를 수정하려면? (PostgreSQL JSONB 활용기) 1. 들어가며: 라이브 서비스의 딜레마사용자가 직접 이상형 월드컵을 생성하고 공유하는 플랫폼을 개발하면서 겪은 일입니다. 서비스가 배포되고 사용자들이 월드컵을 플레이하기 시작했을 때, 예상치 못한 시나리오를 마주했습니다. "이미 게시되어 사람들이 플레이 중인 월드컵의 오타를 수정하고 싶다면?" 단순히 수정 버튼을 눌러 데이터를 고치고 저장하면 될 것 같았지만, 여기에는 치명적인 문제가 있었습니다.수정하는 도중에 '임시 저장'을 누르면, 작성 중이던 불완전한 데이터가 원본 데이터베이스를 덮어쓰게 되어 라이브 서비스 중인 콘텐츠가 망가지거나 비공개 상태로 전환되는 것이었죠. 이번 글에서는 PostgreSQL의 JSONB를 활용해, 라이브 서비스에 영향을 주지 않고 안전하게 콘텐츠를 수정하는 "Safe Dra.. [Leetcode] 994. Rotting Oranges - JS https://leetcode.com/problems/rotting-oranges/description/ 1. 문제 분석문제분석--------------------n x n grid가 주어지고, 각 cell은 0,1,2 값을 가질 수 있다.- 0은 빈 셀을 의미한다.- 1은 신선한 오렌지를 의미한다.- 2는 썩은 오렌지를 의미한다.매 분마다, 신선한 오렌지의 상하좌우에 인접한 썩은 오렌지가 그들을 썩게한다.모든 신선한 오렌지가 썩은 오렌지가 되기 까지 최소 시간을 반환하라. 불가능하다면 -1을 반환하라제한조건--------------------- m === grid.length- n === grid[i].length- 1 2. 접근 방법접근방법--------------------매 분마다 상하좌우로 확.. 클릭했는데 왜 부모가 반응할까? 이벤트 전파의 3단계 (캡처링, 버블링) 안녕하세요. 오늘은 "버튼을 클릭했는데, 왜 버튼을 감싸고 있는 div의 클릭 이벤트까지 실행될까?"라는질문에 대한 답, 바로 이벤트 전파(Event Propagation)에 대해 알아보겠습니다. 이벤트 전파는 DOM 요소에서 이벤트가 발생했을 때, 그 이벤트가 다른 요소들에게 알려지는 순서와 방식을 정의하는 규칙입니다.이 원리를 이해하면 이벤트 위임(Event Delegation) 같은 고급 패턴을 활용하거나,의도치 않은 이벤트 동작을 디버깅하는 데 큰 도움이 됩니다.이벤트 전파의 3단계: 택배 배송 과정으로 이해하기DOM 트리 안에서 이벤트가 발생하면, 마치 택배가 배송되는 것처럼 정해진 경로를 따라 이동합니다. 이 과정은 크게 세 단계로 나뉩니다.캡처링 단계 (Capturing Phase) 🚚 ".. React IFrame 양방향 통신 완성하기 (feat. 단일 책임 원칙) 안녕하세요. 지난번 블로그 글에서는 React 애플리케이션이 iframe에게 postMessage로 데이터를 보내는, 하향식(Top-down) 통신 방법에 대해 알아봤습니다. https://wix9939.tistory.com/244 React IFrame 통신: Jotai, localStorage를 거쳐 postMessage에 정착한 이유안녕하세요. 오늘은 React 애플리케이션에서 iframe을 다루면서 겪었던 고민과 해결 과정을 공유해 보려고 합니다. 회사 프로젝트에서는 Unity로 만든 뷰어와 에디터를 iframe으로 삽입하여 사용하는wix9939.tistory.com 하지만 실제 애플리케이션을 만들다 보니 반대의 경우, 즉 iframe 내부의 이벤트가 부모 React 앱의 상태를 변경해야 하는 .. 파일과 캡션, 어떻게 짝지어 보내야 할까? (React 이미지 업로드 기능 개선기) 안녕하세요. 오늘은 React와 Spring 환경에서 이미지 여러 장과 각각의 캡션을 함께 업로드하는 기능을 구현하며 겪었던 문제와 해결 과정을 공유해 보려고 합니다. 처음에는 단순한 기능이라고 생각했지만, "어떻게 파일과 캡션을 안정적으로 매칭할 것인가?"라는 중요한 문제에 부딪혔고, 팀원들과의 논의를 통해 더 나은 구조로 개선할 수 있었습니다.1. 문제의 시작: 순서가 보장될까?React에서 서버로 파일을 보낼 때는 보통 FormData 객체를 사용합니다. 여러 이미지와 캡션을 보낸다고 하면, 가장 먼저 떠오르는 코드는 아마 이럴 겁니다.// Naive approachformData.append('file', file1);formData.append('file', file2);formData.appe.. React IFrame 통신: Jotai, localStorage를 거쳐 postMessage에 정착한 이유 안녕하세요. 오늘은 React 애플리케이션에서 iframe을 다루면서 겪었던 고민과 해결 과정을 공유해 보려고 합니다. 회사 프로젝트에서는 Unity로 만든 뷰어와 에디터를 iframe으로 삽입하여 사용하는데,이 iframe 내부와 외부의 React 컴포넌트 간에 상태를 공유하는 것이 큰 숙제였습니다.마주한 문제: 분리된 세상, iframeiframe은 그 자체로 독립된 window 객체를 가집니다. 즉, 부모 앱의 React Context나 props를 전혀 공유할 수 없는, 완전히 분리된 세상이죠.그렇다면 이 두 세상은 어떻게 데이터를 주고받아야 할까요?첫 번째 좌절: 전역 상태 관리(Jotai)의 배신가장 먼저 떠올린 방법은 당연히 저희가 프로젝트에서 사용하던 전역 상태 관리 라이브러리 Jotai였.. React의 useEffect, 정말 다 안다고 말할 수 있나요? (feat. 실행 순서) 안녕하세요. 오늘은 React 개발자라면 매일같이 사용하는 훅, useEffect에 대해 깊이 파고들어 보겠습니다."Side Effect를 처리하는 훅"이라고 알고는 있지만,막상 "부모와 자식 중 누구의 useEffect가 먼저 실행될까요?"라는 질문을 받으면 순간 망설여지곤 합니다. 이 글은 useEffect의 기본 개념을 넘어, 면접에서 변별력을 가를 수 있는 실행 순서와 마운트 시점에 대한 궁금증을 명확하게 해결해 드립니다.기본 원칙: 자식이 부모보다 먼저!React에서 컴포넌트가 처음 화면에 그려질(마운트될) 때, useEffect의 실행 순서는 아주 명확한 규칙을 따릅니다.자식 컴포넌트의 useEffect가 부모 컴포넌트의 useEffect보다 항상 먼저 실행됩니다. 마치 집을 지을 때, 1층(.. 얕은 복사 vs 깊은 복사: 팀 프로젝트 파일로 이해하기 안녕하세요. 오늘은 객체를 복사할 때 자주 마주치는얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)의 차이에 대해 알아보겠습니다. 이 둘의 핵심 차이는 "참조(주소)를 복사하느냐, 아니면 실제 값을 전부 새로 만들어내느냐"에 있습니다.얕은 복사 (Shallow Copy) 📑얕은 복사는 객체를 복사할 때 가장 바깥쪽의 구조만 복사하는 방식입니다.만약 객체 안에 또 다른 객체(배열 등 참조 타입)가 있다면, 그 내부 객체의 메모리 주소만 복사합니다. 마치 팀 프로젝트 폴더를 복사해서 친구에게 주는 것과 같습니다. 폴더 자체는 새로 복사되었지만, 그 안에 들어있는 구글 독스(Google Docs) 링크는 원본과 동일한 문서를 가리킵니다.그래서 친구가 그 링크를 통해 문서를 수정하면, 내 원.. 이전 1 2 3 4 ··· 30 다음
