web

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. 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 페이지에서 데이터베이스 생성 및 콜렉션 생성하기 - 제가 사용..

width: 30vw; /* 너비는 뷰포트의 30% */ aspect-ratio: 3 / 4; /* 너비 : 높이 = 3 : 4 */를 하면 너비와 높이가 비율에 맞게 줄어들었다가 늘어납니다.

REST (Representational State Transfer)아키텍처 스타일을 따르는 웹 서비스의 설계 방식입니다. REST는 클라이언트와 서버 간 통신에서 HTTP 프로토콜의 표준을 준수하며 리소스를 URL로 표현하고, HTTP 메서드를 통해 자원을 처리하는 구조를 따릅니다. RESTful은 이런 REST 원칙을 잘 구현한 API RESTful 설계의 의미RESTful 설계는 리소스를 URL로 명확하게 표현하고 HTTP 메서드를 활용해 CRUD (Create, Read, Update, Delete) 작업을 수행하는 구조입니다. RESTful API는 자원의 상태를 일정하게 유지하면서 요청과 응답을 처리하기 때문에 상태 비저장성과 클라이언트-서버 분리를 잘 구현할 수 있습니다.RESTful 설계 ..

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

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

1. kakao Developers 에서 API KEY 받기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 이렇게 API 키를 발급 받을 수 있습니다. 저는 웹개발에 사용할 예정이므로, javascript 의 키를 사용하겠습니다. 2. kakao Developers 에서 웹 사이트 도메인 등록하기 플랫폼 카테코리를 클릭 후, 원하는 플랫폼에 맞게 등록을 해주면 됩니다. 꼭 사용할 페이지는 모두 등록해야합니다. 3. 코드 작성하기 - 맵을 표시할 HTML 을 작성해줍니다. async mount..