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. 채팅목록 컴포넌트를 길게 누르면 모바일에서 팝업창 뜨도록 개발'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. 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에 객체 형태로 전달하여, 스토어에서..

SSE (Server-Sent events)?서버에서 클라이언트로 실시간 이벤트를 전달하는 웹 기술입니다.- 보통의 HTTP 통신 : 요청 1번 응답 1번 입니다.- SSE(Server-Sent events) : 한번의 연결로 여러번의 응답을 실시간으로 받을 수 있습니다.- 서버에서 클라이언트로의 단방향 스트리밍 EventSource :SSE 연결을 편리하게 할 수 있도록 해주는 Web API입니다. 실제로 SSE 구현해보기EventSource 는 헤더 설정이 불가능합니다. 따라서 event-source-polyfill 패키지의 도움을 받아야 합니다.event-source-polyfill ? : 이 라이브러리는 표준 EventSource를 폴리필로 제공하여, 추가적인 기능(예: 헤더 설정)을 지원합니다...

- 현재 개발 중인 블로그의 글쓰기 페이지입니다.  위의 코드를 통해, 특정부분의 폰트만 크게/작게, 두껍게/얇게 할 수 있습니다.또한, 중간 중간 사진도 첨부할 수 있습니다. 1. 설치npm install react-quillnpm install quill 2. 사용하려는 페이지에 import 문 추가import ReactQuill from 'react-quill';import 'react-quill/dist/quill.snow.css';

위와 같이 목적지 설정 커스텀 오버레이가 출발/도착 마커 , 버스마커보다 하단을 내려가는 문제가 발생했습니다. overlay.onAdd = function() { let overlayLayer = this.getPanes().overlayLayer; overlayLayer.appendChild(this._element); }; 위의 코드를 다음과 같이 수정했더니 최상단으로 올라왔습니다. overlay.onAdd = function() { let floatPane = this.getPanes().floatPane; // floatPane 레이어를 선택 floatPane.appendChild(this._element); // 오버레이 요소를 floatPane에 추가 }; floatPane 레이어를 선택하는게..