프로그래밍 공부방

안녕하세요. 오늘은 이메일 기능 구현을 위해 EmailJS 사용 방법에 대해서 알아보곘습니다. 원래는 Twilio의 Email API를 이용하려고 했지만 회원가입하자마자 로그인이 막혀서... 결국 사용하지 못했습니다. 제가 구현하려는 기능에 EmailJS를 이용하는 것이 좋은 방법은 아닙니다. 우선은 EmailJS로 구현을 해본 후 나중에 제 의도에 더 알맞은 이메일 서비스를 찾아보겠습니다..! 🐥EmailJS 이용 방법 1. EmailJS 홈페이지 접속 후 Add New Service 클릭 - 저는 이미 한개를 연동해놔서 Gmail이 있는 겁니다. 2. 본인이 사용할 이메일 서비스를 선택합니다. - 예를 들어 Gmail을 선택하면 Gmail에서 메시지를 보내주는 겁니다. 3. Connect Accoun..

🙀 첫 번째 문제점 👉문제 내용 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..

🐥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에도 저장해주는 방식으로 ..

🐥 map(Number), map(parseInt) 정리 우선 Number()와 parseInt에 대해서 먼저 알아보겠습니다. 1. Number() Number(value) Number의 경우에는 매개변수가 한 개입니다. 해당 인수를 숫자로 변환 후 반환합니다. 2.parseInt() parseInt(string) parseInt(string, radix) parseInt는 매개변수가 2개입니다. radix에 아무 값을 주지 않은 경우에는 string값을 정수형으로 바꾼 후 반환합니다. 하지만 radix에 값을 줄 경우에는 string값을 radix진수로 표현한 정수를 반환합니다. 이제 Number와 parseInt에 대해서 알아봤으니 map에 이것들을 적용했을 때 어떻게 되는지 알아보겠습니다. cons..

🐥 router.push와 router.replace 차이점 안녕하세요. 오늘은 router.push와 router.replace의 차이점에 대해서 알아보겠습니다. next.js에서는 페이지를 전환하기 위한 방법은 아래와 같습니다. Link 사용 useRouter 사용 저희가 이번에 알아볼 것은 useRouter에서의 push와 replace입니다. 1. router.push import { useRouter } from 'next/router' export default function Page() { const router = useRouter() return ( router.push('/about')}> // push 사용 Click me ) } push를 사용할 경우에는 이동할 페이지를 새로 추가..

🐥 BigInt 정리 BigInt 는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다. 즉, 이 말은 큰 숫자를 다루고 싶을 때 BigInt를 사용하면 된다는 것입니다. BigInt는 정수 뒤에 n을 붙이거나 함수 BigInt()를 호출해 생성할 수 있습니다. console.log(9999019309203910) // 9999019309203910 console.log(9999019309203910n) // 9999019309203910n console.log(BigInt(9999019309203910)) // 9999019309203910n BigInt를 사용했을 경우 결과값에 n이 붙는 것을 확인할 수 있습니다. ⚠️주의할 점 ..

💛 문제점 아래 화면처럼 페이지를 이동할 때마다 header가 다시 렌더링되면서 깜빡이는 문제가 발생합니다. 로그인 여부에 따라서 헤더의 오른쪽 컴포넌트가 바뀌어야하기 때문에 생기는 문제입니다. 사용자가 홈페이지를 이용할 때 보기 안좋을 것 같군요...ㅠㅠ 이 문제가 발생했을 때의 코드를 확인해보겠습니다. 🤔 문제가 발생한 코드 let [loginState, setLoginState] = useState(); const accessToken = localStorage.getItem('accessToken'); const confirmLoginState = () => { if (accessToken === decryptAccessToken()) setLoginState(true); } useEffect((..