EC2에 배포한 웹 코드 수정 & VSCode에서 SSH로 접근
·
웹개발
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 에 알맞은 ..
[Next.js] aws ec2 배포하기(2) ( feat. 도메인 연결, SSL )
·
웹개발
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 ..
[Next.js] aws ec2 배포하기(1) (feat. Socket.io, pm2, nginx)
·
웹개발
0. Next.js로 개발한 웹을 aws ec2 로 배포하게 된 계기Next.js는 Vercel에서 만들어서 보통 Vercel 로 빠르고 편하게 빌드/배포할 수 있습니다.하지만 제가 개발한 'Stellar-Link' 는 실시간 채팅 웹앱으로 Socket.io 를 사용하여 개발하였습니다. 0-1. 문제점Vercel은 서버리스(Serverless) 아키텍처를 기반으로 동작하기 때문에, 지속적인 WebSocket 연결이 필요한 Socket.io와 같은 기술을 활용하는 데 제약이 있습니다. 주요 문제점을 정리하면 다음과 같습니다. 1. WebSocket 연결 유지 불가Vercel의 서버리스 환경은 요청이 들어올 때마다 새로운 인스턴스를 실행하는 방식으로 동작합니다. 즉, 지속적인 연결을 유지해야 하는 WebSo..
[React] Redux (중앙 상태 관리 라이브러리)를 채팅 웹앱에 실제로 적용하기
·
웹개발
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에 객체 형태로 전달하여, 스토어에서..
[React] SSE로 프론트엔드 쪽 코드 구현할때, 헤더(Authorization 등)설정하기 (feat. event-source-polyfill)
·
웹개발
SSE (Server-Sent events)?서버에서 클라이언트로 실시간 이벤트를 전달하는 웹 기술입니다.- 보통의 HTTP 통신 : 요청 1번 응답 1번 입니다.- SSE(Server-Sent events) : 한번의 연결로 여러번의 응답을 실시간으로 받을 수 있습니다.- 서버에서 클라이언트로의 단방향 스트리밍 EventSource :SSE 연결을 편리하게 할 수 있도록 해주는 Web API입니다. 실제로 SSE 구현해보기EventSource 는 헤더 설정이 불가능합니다. 따라서 event-source-polyfill 패키지의 도움을 받아야 합니다.event-source-polyfill ? : 이 라이브러리는 표준 EventSource를 폴리필로 제공하여, 추가적인 기능(예: 헤더 설정)을 지원합니다...
[react, web] 리액트로 글 작성 페이지 개발 시, 'ReactQuill' 의 유용성
·
웹개발
- 현재 개발 중인 블로그의 글쓰기 페이지입니다.  위의 코드를 통해, 특정부분의 폰트만 크게/작게, 두껍게/얇게 할 수 있습니다.또한, 중간 중간 사진도 첨부할 수 있습니다. 1. 설치npm install react-quillnpm install quill 2. 사용하려는 페이지에 import 문 추가import ReactQuill from 'react-quill';import 'react-quill/dist/quill.snow.css';
[네이버 맵 API] 커스텀 오버레이를 지도의 요소 중 최상단에 두고 싶을때 floatPane 사용하기
·
웹개발
위와 같이 목적지 설정 커스텀 오버레이가 출발/도착 마커 , 버스마커보다 하단을 내려가는 문제가 발생했습니다. 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 레이어를 선택하는게..
[vue.js] 카카오맵 API 사용하여 맵 불러오기[2] - 입력한 주소에 맞는 마커 (marker)생성하기 / 다음 우편번호 API 와 콜라보
·
웹개발
https://choi-hee-yeon.tistory.com/172 [vue.js] 무료로 daum의 우편번호 API 이용하기 (daum is undefined 오류해결하기) https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 choi-hee-yeon.tistory.com 위의 글을 통해 다음의 우편번호 API 서비스를 이용해봤습니다. https://choi-hee-yeon.tistory.com/173 [vue.js] 카카오맵 API 사용하여 맵 불러오기[1] (feat. 내 마음을 아프게 한 Uncaught TypeErro..
[vue.js] 카카오맵 API 사용하여 맵 불러오기[1] (feat. 내 마음을 아프게 한 Uncaught TypeError: kakao.maps.LatLng is not a constructor)
·
웹개발
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..
[python] 카카오톡 API를 사용하여, 친구에게 메시지 보내기
·
카테고리 없음
https://choi-hee-yeon.tistory.com/163 [python] 카카오톡 API를 사용하여, 나에게 카카오톡 메시지 보내기 1. 카카오 디벨롭스에 상단바의 내 애플리케이션을 클릭하여, 애플리케이션을 추가합니다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카 choi-hee-yeon.tistory.com 위 글을 읽고, 카카오톡 API를 사용하여, 나에게 메시지 보내는 걸 성공해야 이 글을 따라할 수 있습니다. 1. 내 애플리케이션에서 팀관리 페이지의 팀원 초대를 합니다. 2. 팀원의 계정으로도 앞선 포스트에서( https://choi-hee-yeon.tistory.com/163 ) ..