너무 많은 일이 있었지만, 여차저차한 이유로 러닝커브가 컸던 탓에 RN을 포기하고 PWA로 Next.js로 개발을 하게 되었습니다.개발 시간은 정해져 있는데, 익숙한 플랫폼으로 개발을 하는 게 훨씬 빠르겠다는 판단으로 결정하게 되었는데, 이는 곧 큰 후회가 되게 됩니다.. 빠르게 올려볼게요! # 문제 상황- 실제 배포 후, 유저들의 피드백을 여러 개 수용. 그 중 가장 큰 문제 3가지1. 매번 앱 접속 시 계속 해야 하는 로그인 이슈2. 메인 페이지에서 뒤로 가기를 눌렀을 때 로그인 페이지로 가버리기 때문에, 다시 로그인을 해야한다.3. 앱 내부의 푸터와 갤럭시 내부의 하단 바가 겹치는 이슈 1번 같은 경우는 토큰과 한 달 주기로 리프레시 토큰을 해주는 것으로 일단 해결하였으며 (..)정말 임시적으로 ..

CTO님과의 중간 점검# 무슨 CTO이신..?말 그대로 기업 연계 인턴십이기 때문에 지금 저는 기업에서 정해준 주제를 구현하고 있었습니다,,이제 곧 마무리 단계라 마무리 전 방향성에 대해서 질의응답하기 위해 CTO님께 직접 연락드렸어요! 아무래도 바쁘신 분이다보니 다른 팀들처럼 매주 보고 & 피드백 등을 진행하진 않았습니다.(제 경우가 특수한 경우긴 해요. 다른 팀은 정말 기획 -> 기획, 백엔드 -> api 개발, 프론트엔드 -> 대시보드 개발인데,저는 진짜 주제만 가지고 기획-디자인-프론트-백엔드를 혼자 해왔습니다.) 대충 대화 요약1. 지난 몇 주간은 백엔드부터 다시 공부하며 모바일 ↔ 웹 실시간 연동 구조를 직접 구현하는 데 집중했습니다 (연락 늦어서 죄송해요)2. AI의 도움도 많이 받았지만, ..

메시지는 실시간으로 잘 받아지는데, 상대방이 타이핑하는 걸 실시간으로 볼 수 없을까? 목표- 모바일에서 입력 중 -> 웹에서 대기 할 수 있도록 입력 중이라는 애니메이션이 필요=> 타이핑 시작/중단 실시간 감지 및 UI 업데이트 기존 상황├── 메시지는 실시간으로 잘 받아짐├── 하지만 상대방이 타이핑 중인지 모름└── 사용자 경험 개선 필요 요구사항├── 모바일 사용자 타이핑 → 웹에서 "입력중..." 표시├── 타이핑 시작/중단 실시간 감지└── 3초 후 자동으로 사라짐 (안전장치) # 양방향으로 확장 가능성은 있는데, 단방향으로 먼저 만들고 추후 확장 예정이다.내가 유저라면 상담원이 입력 중인 건 굳이 필요없다는 생각이 들었기 때문에 먼저 단방향으로 구성했다. 과정1. 타입 시스템 확장// ..

ㅖ..모바일에서 메시지를 보냈는데 웹에서는 새로고침해야만 보여요. 이게 무슨 상황이었냐면 문제 상황1. 모바일 - 웹 연동 소켓 open2. 모바일 → 웹: 메시지 전송 성공3. 서버: 메시지 저장 및 브로드캐스트 성공4. 웹 클라이언트: 실시간 수신 실패, 약 10초 뒤 리스트에는 업로드. But 새로고침하지 않으면 반영되지 않음.- 채팅방 목록: 실시간 업데이트 정상- 채팅방: 실시간 업데이트 안됨. 새로고침하거나 창을 벗어나야 반영됨 핵심 문제React의 Stale Closure + Socket.IO 리스너 타이밍 이슈 라고 간단하게 정리해줬는데, 과정은 그렇게 간단하지 않았다. 문제 분석 과정 + 코드 분석증상 분석├── 모바일에서 메시지 전송├── 웹에서 실시간 수신 안됨├── 수동 새..

각설하고 갑자기 데베를 분리해보려고 한다. 사실은 Mysql만 알아서, 다른 거 고려도 안한 상태였는데 NoSql이란게 있단다.이럴때 써봐야지 언제 써보냐 하는 주변의 한마디에 팔랑귀가 도졌다. 이럴 때 컴퓨터 전공해서 참 다행이라 생각했다.MySql은 그래도 써본 경험이 있어서 그나마 좀 편하게 적용했던 것 같기 때문에..nosql도 비슷하겠지~ 싶긴 하다. 항목MySQL (Relational / SQL)NoSQL (Not Only SQL)데이터 구조테이블, 행(Row), 열(Column)문서(Document), 키-값(Key-Value), 그래프 등 다양스키마고정된 스키마 필요 (컬럼 타입 명확히 지정)유연한 스키마 (컬럼이 자유롭게 변할 수 있음)확장성수직 확장(더 좋은 서버로)수평 확장(..

1. 전체 흐름 한눈에 보기[고객(Mobile)] ←→ [백엔드(Node.js)] ←→ [상담원(Web)] ↓ 1. 메시지 전송 ↑ 3. 메시지 전달 └────────→ 2. DB 저장 및 브로드캐스트 ─────────┘ - 모바일 앱에서 고객이 메시지를 보내면,- 백엔드 서버가 메시지를 저장하고,- 웹 대시보드에서 상담원이 실시간으로 응답하는 구조! 2. 실제 동작 예시1) 고객(Mobile) → 백엔드로 메시지 전송// socketService.sendMessage(chatRoomId, content)socket.emit('user_message', { chatRoomId, senderType: 'USER', c..

저도 제가 풀스택이 될 줄 몰랐 아니 알았 몰랐어요..그냥 주어진 환경에 최선을 다하자고 생각했는데진짜 발등에 불이 떨어졌더라구요아뜨겁다 1. 프로젝트 초기 세팅1-1. 폴더 구조 backend/ ├─ src/ │ ├─ app.js │ ├─ config/ │ │ ├─ database.js │ │ └─ init-database.js │ ├─ services/ │ │ ├─ userService.js │ │ ├─ chatRoomService.js │ │ └─ messageService.js ├─ package.json ├─ .env └─ README.md 어떻게 해야 프론트처럼 최적화된 폴더 구조를 따질 수 있을지는 레퍼런스를 좀 더 찾아보고..

프로젝트에서 카테고리, 스토어, 할인 데이터를 효율적으로 관리하기 위해 React Query를 도입했습니다!! React Query란?서버 상태 관리를 위한 라이브러리 주요 기능:자동 캐싱: API 응답을 자동으로 캐시하고 재사용백그라운드 업데이트: 데이터를 백그라운드에서 자동으로 최신 상태로 유지에러 처리: 네트워크 에러 시 자동 재시도로딩 상태 관리: 데이터 로딩 상태를 자동으로 관리동기화: 여러 컴포넌트에서 같은 데이터를 요청할 때 중복 요청 방지 일단, #2-1에서 나왔던 세 알고리즘을 전부 혼용하기로 했다.카테고리 같은 경우는 처음 렌더링 되는 부분만 캐시로 박아두고 나머지 넘어갈때 api 불러오는 방식으로 하되, 카테고리가 업데이트 된다면 수동 무효화로 아예 캐시를 날리는 방식으로 진행하기..