frontend

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. 개발환경 준비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. 문제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:..

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에 객체 형태로 전달하여, 스토어에서..

1. 문제가 있던 코드 ( /api/auth/[...nextauth].js )import { MongoDBAdapter } from "@next-auth/mongodb-adapter";import NextAuth, { AuthOptions } from "next-auth";import GithubProvider from "next-auth/providers/github";import GoogleProvider from "next-auth/providers/google";import DiscordProvider from "next-auth/providers/discord";import CredentialsProvider from "next-auth/providers/credentials";import { ..

1. next-auth 라이브러리 다운로드 받고 데이터베이스 설정하기1-1. next-auth 라이브러리 다운로드우선 NextAuth 패키지를 설치해야 합니다. 터미널에서 아래 명령어를 실행하세요: npm install next-auth 또는 yarn을 사용한다면:yarn add next-auth 1-2. mongodb 데이터베이스 설치 및 설정하기MongoDB와 NextAuth를 연결하려면, 아래 패키지를 추가로 설치해야 합니다:npm install mongodb @next-auth/mongodb-adapter 또는 yarn을 사용한다면:yarn add mongodb @next-auth/mongodb-adapter 1-3. mongodb 페이지에서 데이터베이스 생성 및 콜렉션 생성하기 - 제가 사용..

position 속성은 CSS에서 요소의 위치를 지정하는 데 사용되며, 여러 값들이 있습니다. 각 값은 요소가 문서에서 어떻게 배치되는지를 결정합니다. 아래는 position 속성의 주요 값과 그 의미입니다:1. static (기본값)의미: 요소가 문서의 일반적인 흐름에 따라 배치됩니다. top, right, bottom, left, z-index 속성은 적용되지 않습니다.사용 예: 기본 레이아웃에서 요소를 특별히 조정할 필요가 없을 때 사용됩니다.2. relative의미: 요소가 일반적인 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용해 요소의 위치를 조정할 수 있습니다. 원래 위치를 기준으로 이동하므로 원래 공간은 유지됩니다.사용 예: 작은 위치 조정이 필요할 ..

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

Intersection Observer? scroll 이벤트 : - 스크롤 시 짧은 시간 내에 수 백, 수 천의 이벤트가 동기적으로 실행될 수 있어, 성능에 악영향을 줄 수 있습니다. Intersection Observer API : - 루트 요소와 타겟 요소의 교차점을 관찰합니다.  - 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공하고 있습니다.- scroll 이벤트와 다르게 교차 시 비동기적으로 실행됩니다. - 성능상 유리합니다. 교차점 정보는 다음과 같은 여러 가지 이유로 필요합니다.페이지가 스크롤될 때 이미지나 다른 콘텐츠가 레이지 로딩되는 현상.사용자가 페이지를 넘길 필요가 없도록 스크롤할 때 점점 더 많은 콘텐츠가 로드되고 렌더링되는 "무한 스크롤" 웹사이트를 구현합니다.광..

위와 같이 목적지 설정 커스텀 오버레이가 출발/도착 마커 , 버스마커보다 하단을 내려가는 문제가 발생했습니다. 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 레이어를 선택하는게..