전체 글

📡 WebView Bridge 통신이란?React Native ←→ WebView (웹 페이지)두 환경이 이벤트 기반으로 데이터를 주고 받는 통신 구조를 말한다. 직접적으로 함수 호출이 불가능하므로,중간에서 데이터를 전달하는 "메시지 브릿지(message bridge)"를 만들어서 서로 소통한다. 🤔 왜 브릿지가 필요한데?✅ 네이티브 기능을 웹에서 사용하고 싶을 때∙ WebView 안에서 사진 업로드 버튼 →네이티브 카메라 실행웹만으로는 카메라를 켤 수 없으므로, 네이티브 코드가 대신 실행해야한다. ✅ 웹에서 토큰 / 사용자 정보 공유∙ 웹뷰 로그인 성공 → RN 앱에 accessToken 전달앱은 해당 토큰을 저장하고 API 요청에 사용.(단, 네이티브에서 토큰을 사용하지 않을 경우에는 따로 저장을..

실시간 기능 (채팅, 알림, 센서 데이터, 대시보드 업데이트 등)을 구현하려면 웹소켓 (WebSocket) 기술이 필요하다.NestJS는 이를 간단하게 사용할 수 있도록 Gateway(게이트웨이)라는 구조를 제공한다. 📡 WebSocketWebSocket은 브라우저와 서버가 지속적으로 연결되어 서로 자유롭게 데이터를 주고 받을 수 있는 양방향 통신 기술이다. 기존 HTTP API 요청-응답 구조가 아니라 연결이 유지된 상태에서 서버가 클라이언트에게 즉시 Push를 보낼 수 있다. 🧱 GatewayWebSocket 서버를 관리하는 NestJS의 Controller 같은 역할을 한다.NestJS는 웹소켓을 편하게 사용하도록 Gateway라는 추상화 레이어를 제공한다. ✅ 클라이언트의 연결/해제 감지✅ 클..

NestJS에서 간단한 API를 작성해보자.제일 많이 사용하는 ToDo 기능의 API를 작성해보자. 📝 TODO🕹️*.controller.tsAPI의 진입점.즉, 요청을 받는 곳을 정의한다. ✅ URL 라우팅 정의 (@Get(), @Post 등)✅ 요청 Parameter, Body 받는다.✅ 비즈니스 로직은 작성하지 않는다.✅ 대부분 service에 일을 "위임" "/todos" 경로로 요청을 보냈을 때 CRUD를 작성.import { Controller, Get, Post, Body, Param, Patch, Delete } from '@nestjs/common';import { TodosService } from './todos.service';@Controller('todos')export cl..

회사에서 Undo, Redo를 만들어야해서 작성해본다.🫵🏻 커맨드 패턴이란?커맨드 패턴은 요청(명령)을 객체로 캡슐화하여, 실핼자(Invoker)와 실제 수행자(Receiver)를 분리하는 패턴이다. 쉽게 말하자면, "하고 싶은 일을 하나의 객체로 만들어서 필요할 때 실행하는 방식"이다. 역할설명Command실행할 동작을 가진 인터페이스 혹은 추상 클래스ConcreteCommand실제 실행 로직(Receiver를 이용하여 작업 수행)Receiver실제 작업을 처리하는 객체Invoker명령을 보관/실행하는 객체 (Button, Scheduelr 등) 🤔 왜 필요한데?🎭 실행자와 작업 내용을 분리할 수 있다.버튼 클릭 → 구체적인 로직 실행이렇게 밀착되어 있으면 유지보수가 어려워진다.커맨드를 사용하면..

다중 접속 편집 기능을 만들기 위해 소켓을 사용해보고자간단한 채팅을 만들어보려고한다. 로그인 후, 사용자가 채팅방을 입력하면 새로운 윈도우에 채팅방을 열어준다. 첫 번째 메인 윈도우를 닫으면 모든 윈도우를 닫아버릴지 고민하다가.레퍼런스는 카카오톡으로 잡았으며, 채팅창이 열린 상태에서 메인 윈도우(채팅창 관리 윈도우)가 꺼져도 채팅창은 살아있다. 위 내용을 보면❓소켓만 테스트하지 왜?질문을 할 수 있지만, 나는 뭔가 완벽함(?)을 추구하여서 하나를 만들더라도 제대로 만져보고싶다. 🏗️ WindowManager우선 윈도우를 관리하기 위해서 매니저를 만들어준다. 내가 만든 매니저의 인터페이스는 다음과 같다.글을 안 보고 직접 구현해보고 싶은 사람은 인터페이스를 보고 직접 구현해보아도 좋다.export ..

🗝️ QueryKey란?React Query에서 캐시된 데이터를 식별하는 고유한 키이다.JavaScript 배열 형태로 정의되며, 캐시된 데이터를 저장하고 조회하는데 사용한다.// 간단한 형태['todos']// 구체적인 형태['todos', 'list']['todos', 'detail', 1]['todos', 'list', {status: 'done', page: 1}] 👷🏻 QueryKey 역할✅ 캐시 식별자각 쿼리의 결과를 캐시에 저장할 때 사용하는 키이다.동일한 QueryKey를 가진 쿼리는 같은 데이터를 공유한다. ✅ 의존성 관리QueryKey가 변경되면 자동으로 새로운 데이터를 fetch 한다.파라미터가 포함된 QueryKey는 의존성처럼 동작한다.// userId가 변경될 때마다 자동..

🐚 @데코레이터란?NestJS에서 데코레이터는 클래스, 메서드, 프로퍼티, 파라미터에 추가 메타데이터를 부여하거나 동작을 바꾸는 역할을 한다.TypeScript의 데코레이터 문법을 기반으로 하며, NestJS의 핵심 철학인 메타프로그래밍 + 의존성 주입(DI)을 가능하게 해주는 핵심 요소이다. 쉽게 말해,"Nest가 이 코드가 어떤 역할을 하는지 이해하도록 알려주는 태그" 🤔 왜 데코레이터가 필요한데?NestJS는 Angular 영향을 크게 받은 데코레이터 기반 구조를 사용한다.Nest는 데코레이터를 통해 클래스를 스캔(scanning)하고 역할을 파악해 낸부 IoC/DI 컨테이너에 등록한다. 즉, 데코레이터가 있어야 Nest는 다음 내용들을 이해할 수 있다.✅ 어떤 클래스가 컨트롤러인지✅ 어떤 클래..

나만의 데스크 앱을 만드려는데 고전적인 스타일의 상단 타이틀 바가 마음에 들지 않는다. Youtube Music의 데스크탑 앱만 보더라도 뭔가 다양하다. ( 유튜브 대기업 치고는 못 생긴 거 같다...) 우리도 커스텀해보자. 🗑️ 타이틀바 프레임 제거 우선 기존 TitleBar는 사라지도록 📄electron/main.ts 에서 웹 브라우저가 생성될 때 타이틀바와 메뉴바가 없는 상태로 변경한다.unction createWindow() { win = new BrowserWindow({ icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"), webPreferences: { preload: path.join(__dirname, ..