1. 결과물 2. Date 코드 ( moment 사용)// components/Date.tsximport React from 'react';import { Text, TouchableOpacity,View } from 'react-native';import moment, { Moment } from 'moment';import styles from '../styles/Calendar.style';import 'moment/locale/ko'; // 한글 로케일을 불러옵니다.import { theme } from '../styles/theme';moment.locale('ko'); // 전역 locale을 한글로 설정interface DateProps { date: Moment; onSelectDat..

1. 안드로이드 스튜디오 설치하기https://developer.android.com/studio?hl=ko Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android DevelopersAndroid Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.developer.android.com 설치 후 필수 설정: Android SDK 설치Preferences → Appearance & Behavior → System Settings → Android S..

1. 개발환경 준비1-1. Node.js, npm 설치-Node.js: 공식 홈페이지에서 최신 LTS 버전을 설치합니다. (v22.13.1) node -v-npm: Node.js 설치 시 기본 제공됩니다. 1-2. React Native CLI 설치npm install react-native-cli2. React Native 프로젝트 생성2-1. 프로젝트 생성 명령어 실행npx @react-native-community/cli init 자신이 원하는 프로젝트 이름 2-2. 생성된 디렉토리 구조 개요 3. TypeScript 및 타입 관련 패키지 설치3-1. TypeScript 컴파일러와 React, React Native에 대한 타입 정의 파일 설치npm install --save-dev typescri..

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 ..