프로그래밍 공부방

🙀 첫 번째 문제점 👉문제 내용 socket.io를 배포하면서 생긴 문제점과 그 해결과정에 대해서 얘기해보려고 합니다. 일단 저는 socket.io를 채팅 기능을 구현하기 위해서 사용하고 있었습니다. Next.js만으로 socket.io 채팅을 구현을 했는데 ... 로컬에서 개발할 때는 실행이 잘됐지만 vercel로 배포를 해보니 오류가 발생했습니다. 👉문제 원인 vercel에서는 websocket 연결을 유지할 수 없기 때문입니다. ✨해결 방법 따라서 Node.js로 간단하게 socket 서버를 따로 만들어준 후 AWS의 EC2로 배포했습니다. 아래 코드처럼 http서버를 이용해서 socketio 서버를 생성했습니다. // index.ts import express, { Express } from "e..

🐥 AWS EC2 인스턴스 생성하기 안녕하세요. 이번에는 putty를 이용해 AWS EC2에 접속하는 방법에 대해 알아보겠습니다~~ 이번 글에서는 EC2 인스턴스가 생성되어있고 putty 또한 설치되어있다는 가정 하에 진행하겠습니다. 인스턴스 생성 https://aws.amazon.com/ko/ec2/?nc2=h_ql_prod_fs_ec2 아마존 클라우드 서버 호스팅 | Amazon Web Services Amazon Elastic Compute Cloud(Amazon EC2)는 600개가 넘는 인스턴스, 그리고 최신 프로세서, 스토리지, 네트워킹, 운영 체제 및 구매 모델의 옵션과 함께 워크로드의 요구 사항에 가장 잘 부합할 수 있도록 aws.amazon.com putty 설치 https://www.p..

🐥우분투에서 Git 리포지토리 가져오기 안녕하세요. 우분투에서 git clone하는 방법에 대해서 알아보겠습니다. 1. 깃허브에서 clone할 리포지토리의 주소를 복사합니다. 2. 우분투에 접속한 후 git을 설치해줍니다. $ sudo apt install git 3. git clone [위에서 복사한 주소] 을 해줍니다. git clone을 하면 아래와 같이 Username와 Password 입력창이 뜹니다. - Username에는 본인의 깃허브 유저네임을 적어주세요. - Password에는 깃허브 personal access token을 적어주세요. personal access token 만드는 방법을 모르신다면 👉깃허브 Personal access token 만들기 [Git] Personal acc..

🐥 Personal access token 만들기 안녕하세요. 이번에는 깃허브에서 Personal access token 만드는 방법에 대해서 알아보겠습니다. 저는 우분투에서 깃허브의 리포지토리를 clone하기 위해 personal access token이 필요했습니다. 우선 본인의 깃허브로 들어가주세요! 1. Settings 클릭 2. Developer settings 클릭 3. Generate new toekn 클릭 4. access token 설정하기 expiration은 본인이 토큰이 필요한 기간 정도로만 적당하게 설정해주세요 Select scopes에서는 토큰이 어디까지 접근할 수 있게 할 것인지를 설정하는 것입니다. 저의 경우에는 repo, admin:repo_hook, delete_repo ..

🐥vercel에서 aws s3 사용 방법 오늘은 vercel에서 aws s3 사용하는 방법에 대해서 알아보겠습니다. 기존에 s3을 사용하기 위한 코드는 vercel 배포 후에 작동이 되지 않는 문제가 생겼었습니다 ㅠㅠ 따라서 vercel에서 사용할 수 있도록 코드를 새롭게 짰습니다. 1. upload-url.ts 일단 upload-url 파일을 먼저 보겠습니다. 이 파일에서는 s3에 이미지를 업로드할 수 있는 url을 생성할 수 있습니다. // upload-url.ts import S3 from "aws-sdk/clients/s3"; import { NextApiRequest, NextApiResponse } from "next"; import getExtension from "@libs/client/g..

🙀문제점 👉문제 내용 리뷰창을 띄운 후 리뷰를 작성할 수 있게 하는 기능을 구현하던 중에 생긴 문제가 생겼습니다. 리뷰 창에 별점을 줄 수 있는 기능이 있었는데 별점이 달라질 때마다 리뷰창이 사라졌습니다. 👉문제 원인 리뷰 점수 설정과 리뷰창 상태를 useState()로 설정을 해놨기 때문에 별점이 달라질 때마다 리렌더링되어서 리뷰창이 사라지는 것이었습니다. const [reviewState, setReviewState] = useState("false"); // 리뷰창 상태 const [reviewScore, setReviewScore] = useState(1); // 리뷰 점수코드 작성 ✨해결 방법 리뷰창의 상태를 useState()만으로 설정하지 않고 localstorage에도 저장해주는 방식으로 ..

🐥 Socke.IO 사용법 정리 안녕하세요. 오늘은 socket.io 사용법에 대해서 알아보겠습니다. 채팅 기능을 구현하기 위해 socket.io를 사용했는데 나중에 socket을 사용할 일이 종종 있을 것 같아서 정리했습니다. Socket.IO는 클라이언트와 서버 간의 짧은 대기 시간, 양방향 및 이벤트 기반 통신을 가능하게 하는 라이브러리 우선은 서버와 클라이언트로 나눠서 설명하겠습니다. 1. Server 1) 설치 일단 socket.io를 사용하기 위해 설치 먼저 진행해줍니다. npm install socket.io 2) 서버 초기화 HTTP 서버를 이용한 Socket 서버 초기화 import { createServer } from "http"; import { Server } from "socke..

🔥에러 내용: The provided value for the column is too long for the column's type prisma 이미지를 추가하기 위해서 이미지의 url을 넣어주는 작업을 하던 도중에 오류가 발생했습니다. 🤷‍♀️Why?🤷‍♀️ 저장할 데이터의 길이가 지정한 type의 크기보다 크기 때문에 발생한 오류입니다. ✨해결 방법 model User { ... avatar String? @db.Text ... } @db.Text를 추가해줘서더 긴 길이의 데이터를 넣을 수 있게 해주었습니다.