서론 회사의 신규 프로젝트를 소개할 웹페이지를 개발 중, 다국어 기능을 개발이 필요했다. "dependencies": { "next": "15.5.4", "next-intl": "^4.3.12", "react": "19.1.0", }, 고민 next-i18next vs react-i18next vs next-intl 1. next-i18next더보기i18next 기반, Next.js Pages Router 전용특징:i18next 생태계를 Next.js에 통합한 래퍼 라이브러리Pages Router에서만 작동 (App Router 미지원)serverSideTranslations 함수로 SSR/SSG 지원성숙한 i18next 생태계 활용 가능장점:i18next의 강력한 기능 전부 ..

서론 웹 개발을 하다 보면 이미지를 어디에 두어야 할지 고민하게 된다. src/assets` / `public` 둘 다 이미지를 저장할 수 있지만, 이 선택이 빌드 결과와 배포에 어떤 영향을 미치는지 명확히 이해하고 싶어 이 글을 쓴다. 이를 이해하려면 먼저 "정적 자산"이라는 개념부터 알아야 한다. 웹 자산(Web Assets)이란?웹사이트를 구성하는 모든 리소스를 "웹 자산"이라고 한다. 크게 두 가지로 나뉜다 정적 자산 - 내용이 고정된 파일동적 데이터 - 상황에 따라 변하는 데이터 정적 자산 (Static Assets)정적 자산은 변하지 않는 고정된 파일로, 서버에서 전달된다. Html 파일 Css 파일 Image파일이 될 것이다. 이러한 파일들은 빌드 타임에 최종 형태로 생성되어 배포 서버에 ..

일반적으로 private 레포지를 public처럼 클론을 하게 되면 다음과 같은 에러 보게된다.Cloning into '프라이빗 레포지 이름'...remote: Repository not found.fatal: repository 'https://github.com/@@@@@@@@@@@@@@@@@.git/' not found 맥북 기준 루트 터미널에서 ssh-keygen 입력후 엔터여러번 하고 비밀번호 입력 하면 $ ssh-keygenGenerating public/private ed25519 key pair.Enter file in which to save the key (/Users/username/.ssh/id_ed25519): /Users/username/.ssh/id_ed25519 alread..

서론 넥스트 브라우저 fetch API를 사용하면 넥스트의 기본 캐시를 사용할 수 있다. 따라 fetch된 데이터를 넥스트 서버에 캐싱이 가능하여 불필요한 호출을 방지할 수 있다. 그러나 리엑트쿼리 역시, 서버의 data를 클라이언트 측에서 캐시하여 불필요한 호출을 방지한다. 여기서 이 두 기능에 대한 중복과, 어떤 사용이 더 효율적인지 고민인 상태에서 글을 작성하려고 한다. * 넥스트의 기본 캐싱을 사용하기 위해선 http 라이브러리(ex - axios) 가 아닌 브라우저 fetch를 사용해야한다. 세팅 내장 fetch의 캐시 로그를 눈으로 보기위해선 next.config.mjs 에 세팅이 필요하다.아래 세팅은 넥스트 14버전 이상에서 사용가능한 로깅 설정으로 fetch요청 로그를 확인할 수 있다./*..

셋팅 목표 타입스크립트 / 리엑트 네이티브 / 테일윈드 프로젝트데스크탑에 ios 및 안드로이드 확인할 수 있는 에뮬 및 시뮬 설치. 사전 셋팅 macOS 환경Homebrew 설치됨Watchman 설치됨(선택) 셋팅 시작하기전에 앱스토어에서 xcode 및 웹에서 안드로이드 스튜디오 설치 - 용량이 크고 다깔면 (10gb이상) 상당히 오래걸린다 (20~30분) 먼저 xcode는 app 스토어에서. 설치 완료시 ios도 다운받는다 2번째 꺼 https://developer.android.com/studio?hl=ko Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android DevelopersAndroid Studio provides app ..

서론채팅구현을 위한 마지막 페이지, 채팅방 내부 구현을 이어서 작성하려고 한다. 컴포넌트 구조 구성 요소 및 기능필요한 Side Effect들 (useEffect & useLayoutEffect)초기 메시지 세팅: 서버 데이터를 화면 표시용으로 변환 및 Set 초기화페이지 진입/복귀 시 강제 동기화: focus/visibilitychange 이벤트로 실시간 동기화첫 진입 시 하단 스크롤: 최신 메시지를 보여주기 위한 스크롤 조정스크롤 관리: 새 메시지 도착 시 조건부 자동 스크롤 처리컴포넌트 언마운트 시 정리: 채팅방 리스트 캐시 무효화핵심 이벤트 핸들러들handleLoadMore: 과거 메시지 불러오기 및 스크롤 위치 보정handleReceive: 웹소켓 메시지 수신 및 옵티미스틱 업데이트 처리hand..

페이지 구조부터 잡아보자.프로젝트가 데스크탑과 모바일을 전부 지원하기 때문에 사실 데스크탑에선 아이패드의 카카오처럼 구현하려했으나, 일단 먼저 구현부터 하고 그 다음을 고민하기로 했다. 채팅 페이지는 생각처럼 딱 두페이지다. 채팅을 위한 백엔드 API 요약.사실 현재 API가 채팅구현을 위한 일반적인 방식은 아니다. 원래는 글로벌 알림채널 과 개별 채팅채널을 통해 구현을 하는게 정석이다. 이 글로벌 알림채널이란것은 사용자가 로그인하면 자신의 전체 채팅 관련 이벤트를 받는 개인 채널을 의미한다. 이벤트 기반 업데이트: 새 메시지, 읽음 상태 변경, 채팅방 생성 등의 이벤트가 이 채널로 전달자동 동기화: 프론트엔드는 이 이벤트를 받아서 채팅방 리스트, 읽지 않은 메시지 수 등을 실시간으로 업데이트효율적인..

서론 프로젝트 내 채팅기능이 필수적으로 필요하나, 관련 개발을 한번도 해보지 않은 입장에서 개발이 완료된 모든 과정을 기록하기 위해 적어내려간다. 오로직 채팅에 필요한 유저경험을 토대로 프롬프트를 자세하게 작성하여, AI를 통해 개발은 완성된 상태이고 이제 그 과정을 역으로 추적하며 공부해가는 글이다. 백엔드 Chat - API잦은 변경으로 개발이 완료된 시점에 사용된 모든 API를 정리한 문서이지만, 완벽한 명세를 받았다는 가정하에 채팅의 "채" 자도 모른다고 가정하고 시작한다. 실시간 메시지 송수신: WebSocket + STOMP 프로토콜채팅방 관리: 1:1 채팅 (상품 기반)메시지 히스토리: 페이징 처리 (무한 스크롤)읽지 않은 메시지: 실시간 카운트사용자 경험: 옵티미스틱 업데이트 1. 웹소켓..