1. 채팅목록 컴포넌트를 길게 누르면 모바일에서 팝업창 뜨도록 개발'use client';import { useEffect, useState,useRef,Suspense } from "react";import { useSession } from 'next-auth/react';import { useTranslation } from 'react-i18next';import '../../../i18n';import Image from 'next/image';import Button from '@/app/components/Button';import DynamicText from '../../app/components/DynamicText';import { useRouter } from 'next/naviga..

1. VSCode에서 SSH로 EC2 연결하기1-1. VSCode에 SSH 확장 프로그램 설치- 확장 프로그램(Extensions)에서 Remote - SSH 검색 후 설치합니다. 1-2. EC2 SSH 접속 설정EC2 인스턴스를 생성할 때 받은 .pem 키가 있는지 확인해주세요!만약 없다면, 새로운 키를 생성해야 합니다. SSH 설정 파일 열기 nano ~/.ssh/config- vscode 에서 터미널을 열고 위와 같은 명령어를 입력하여 SSH 설정 파일을 열어줍니다. Host ec2-server HostName your-ec2-ip User ubuntu IdentityFile ~/.ssh/your-key.pem- your-ec2-ip 부분에 ip를 적어줍니다.- User 에 알맞은 ..

https://choi-hee-yeon.tistory.com/242 [Next.js] aws ec2 배포하기(1) (feat. Socket.io, pm2, nginx)0. Next.js로 개발한 웹을 aws ec2 로 배포하게 된 계기Next.js는 Vercel에서 만들어서 보통 Vercel 로 빠르고 편하게 빌드/배포할 수 있습니다.하지만 제가 개발한 'Stellar-Link' 는 실시간 채팅 웹앱으로 Sockechoi-hee-yeon.tistory.com이전 편을 보지 않았다면, 보고 오는 게 좋습니다.1. ec2 인스턴스에 도메인 연결1-1.  도메인 구매도메인이 없다면, 다음과 같은 곳에서 구매할 수 있습니다. • AWS Route 53 (AWS에서 제공하는 DNS 서비스)• Cloudflare ..

0. Next.js로 개발한 웹을 aws ec2 로 배포하게 된 계기Next.js는 Vercel에서 만들어서 보통 Vercel 로 빠르고 편하게 빌드/배포할 수 있습니다.하지만 제가 개발한 'Stellar-Link' 는 실시간 채팅 웹앱으로 Socket.io 를 사용하여 개발하였습니다. 0-1. 문제점Vercel은 서버리스(Serverless) 아키텍처를 기반으로 동작하기 때문에, 지속적인 WebSocket 연결이 필요한 Socket.io와 같은 기술을 활용하는 데 제약이 있습니다. 주요 문제점을 정리하면 다음과 같습니다. 1. WebSocket 연결 유지 불가Vercel의 서버리스 환경은 요청이 들어올 때마다 새로운 인스턴스를 실행하는 방식으로 동작합니다. 즉, 지속적인 연결을 유지해야 하는 WebSo..

1. 문제Next.js 로 개발중인 Stellar Link를 Vercel 로 빌드 및 배포를 시도하였다.그런데..... 분명 로컬 환경에서는 npm run build 를 통해 빌드가 제대로 되었는데, vecel 환경에서만 빌드가 도저히 되지 않았다.발생했던 오류는 [16:11:59.241] Running build in Washington, D.C., USA (East) – iad1[16:11:59.754] Cloning github.com/heeyeon9578/Stellar-Link (Branch: main, Commit: ecadf59)[16:12:00.080] Previous build cache not available[16:12:01.648] Cloning completed: 1.894s[16:..

Next.js의 router.push가 클라이언트 사이드 내비게이션을 수행하기 때문입니다. 클라이언트 사이드 내비게이션은 동일한 페이지 컴포넌트가 유지된 상태에서 URL만 업데이트하므로 해당 컴포넌트의 useEffect가 다시 실행되지 않습니다. 해결 방법1. 강제 새로고침 사용window.location.href를 사용하여 강제로 새로고침할 수 있습니다. 이 경우 useEffect는 실행됩니다.const handleGoToBack = () => { window.location.href = '/chat';}; 2. 라우팅 시 상태 관리router.push와 함께 특정 상태를 관리하거나 key를 변경하여 useEffect를 강제로 실행하도록 할 수 있습니다.const handleGoToBack = () ..

1. Intl.DateTimeFormat 이란?: ECMAScript Internationalization API의 일부로, 날짜와 시간을 로케일(지역) 및 특정 형식에 따라 포맷할 수 있는 기능을 제공합니다. 이를 사용하면 사용자가 선호하는 언어나 문화적 관습에 따라 날짜와 시간을 표시할 수 있습니다. 2. 주요 특징1. 로케일 지원: Intl.DateTimeFormat은 다양한 로케일(ko-KR, en-US, fr-FR 등)을 지원하여 지역에 따라 맞춤화된 형식을 제공합니다. 2. 유연한 포맷 옵션: 날짜, 시간, 또는 둘 다 표시하도록 세부적으로 설정할 수 있습니다. 3. 자동화된 포맷: 복잡한 포맷팅 작업 없이 간단한 설정으로 날짜와 시간을 출력합니다. 3. 사용 방법const formatter ..

1. socket.io 설치하기npm install socket.io socket.io-client 2. Next.js API Route에 Socket.io 서버 설정: pages/api/socket.ts를 생성하여 Socket.io 서버를 설정합니다.import { Server as IOServer, Socket } from "socket.io";import { NextApiRequest, NextApiResponse } from "next";import { Server as HTTPServer } from "http";import { connectDB } from "@/util/database";import { getServerSession } from "next-auth";import { authO..

1. $ 연산자의 주요 분류1.1 쿼리 연산자 ($로 시작): 데이터 검색에 사용됩니다. 조건을 정의하거나 특정 기준에 맞는 문서를 찾을 때 사용합니다.연산자설명$eq특정 값과 같은 문서를 찾음 (equal)$ne특정 값과 같지 않은 문서를 찾음 (not equal)$gt, $gte값이 특정 값보다 크거나 같음 (greater than, greater than or equal)$lt, $lte값이 특정 값보다 작거나 같음 (less than, less than or equal)$in배열에 포함된 값 중 하나와 일치하는 문서를 찾음$nin배열에 포함되지 않은 값을 가진 문서를 찾음$exists특정 필드의 존재 여부 확인$regex정규 표현식과 일치하는 문서를 찾음$size배열 필드의 크기가 특정 값과 같은..

1. Redux 환경 설정1-1. Redux Toolkit 설치npm install @reduxjs/toolkit react-redux1-2. Redux Store 생성: 프로젝트 루트에 store 폴더를 생성하고, store.ts 파일을 만듭니다.// store/store.tsimport { configureStore } from "@reduxjs/toolkit";import friendsReducer from "./friendsSlice"import chatReducer from "./chatSlice"const store = configureStore({ //Redux Toolkit에서 제공하는 스토어 생성 함수 reducer: { //configureStore에 객체 형태로 전달하여, 스토어에서..