목록프론트엔드/Next.js (16)
프로그래밍 공부방
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/34wnj/btslughjkqE/VEUfYDkgaxXqaqaJuodzTK/img.png)
🐥 당근마켓 프로젝트 성능 최적화 과정1 제품이 500개일 경우에 상품을 출력하는 최적화하는 과정입니다! 무한 스크롤을 구현해서 상품 20개씩 가져오도록 설정하기 전체 상품을 한꺼번에 가져오지 않고 무한 스크롤을 이용해서 필요한 만큼만 가져오도록 설정해보겠습니다. 1. 무한 스크롤을 구현해서 상품 20개씩 가져오도록 설정하기 첫 번째 문제 fetch에 시간이 오래걸리는 문제가 있습니다. 두 번째 문제 style을 구성하는 데에 오래걸리는 문제가 있습니다. 개선 후 useSWRInfinite과 IntersectionObserver를 이용해서 무한 스크롤을 구현했습니다. useSWRInfinite을 이용해서 구현할 경우 지금까지 스크롤한 모든 내용을 다 저장해서 출력시켜줄 수 있기 때문에 스크롤의 위치를 기..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bPhq18/btsmlnML0o2/ksa7pvzR7tOjyRRe1GZqak/img.gif)
🐥 form enter키 클릭 시에 새로고침 막는 방법 안녕하세요. 오늘은 form 내에서 enter키를 눌렀을 때 자동으로 새로고침이 되지 않게 하는 방법에 대해서 알아보겠습니다. 👉form이란? form은 사용자로부터 입력을 받을 수 있는 HTML 입력 폼을 정의할 때 사용하는 태그입니다. - form 내에 type이 text인 input이 한 개만 존재할 경우: 해당 input에 포커스 된 상태로 enter를 누를 경우 submit 가능 - form 내에 type이 text인 input이 여러 개 존재할 경우: enter를 눌러도 submit 불가능 form의 경우에는 submit이 될 때 자동으로 새로고침 되는 것이 기본 동작입니다. 그렇다면 저희는 이 기본 동작을 막아야 새로고침이 불가능하게 만..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ckuehm/btsmlnlGXDP/KHr8EAewlkOBLEFigOcItk/img.png)
🙀문제점 👉문제 내용 Next.js에서 환경변수를 설정해서 사용하던 도중에 오류가 발생했습니다. EmailJs의 service ID를 환경변수로 사용하고 있는데 자꾸 service ID가 없다고 떴습니다. 혹시 환경변수에서 값을 못가져오나 싶어서 환경변수 값을 console로 찍어봤더니 undefined가 떴습니다. 따라서 service ID의 문제가 아니고 환경변수를 불러오는데에 문제가 있음을 발견했습니다. 👉문제 원인 이전에는 환경변수를 Node.js 환경에서 사용했기 때문에 변수명을 맘대로 지어도 문제가 없었지만, 이번에는 환경변수를 브라우저에서 사용하려고 했기 때문에 문제가 발생한 것이었습니다. ✨해결 방법 환경변수의 이름을 정할 때 이름 앞에 NEXT_PUBLIC_을 붙여주면 해결됩니다. 👉기존..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cyMMHy/btsm8M6wssW/KA7DjbUJHzT3mZRkH0s590/img.png)
안녕하세요. 오늘은 이메일 기능 구현을 위해 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/emEWk6/btsmANEQU9u/218CQTmQ7Q7Kt1gZbXgIKK/img.png)
🐥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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nIf7L/btsmzkpHD9x/k5keqCGR3ktFWyLoNLbUv0/img.gif)
🙀문제점 👉문제 내용 리뷰창을 띄운 후 리뷰를 작성할 수 있게 하는 기능을 구현하던 중에 생긴 문제가 생겼습니다. 리뷰 창에 별점을 줄 수 있는 기능이 있었는데 별점이 달라질 때마다 리뷰창이 사라졌습니다. 👉문제 원인 리뷰 점수 설정과 리뷰창 상태를 useState()로 설정을 해놨기 때문에 별점이 달라질 때마다 리렌더링되어서 리뷰창이 사라지는 것이었습니다. const [reviewState, setReviewState] = useState("false"); // 리뷰창 상태 const [reviewScore, setReviewScore] = useState(1); // 리뷰 점수코드 작성 ✨해결 방법 리뷰창의 상태를 useState()만으로 설정하지 않고 localstorage에도 저장해주는 방식으로 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/utPmC/btsmwWJgNuW/QqFl9UMpdHE4YvogUjFQ1K/img.png)
🐥 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를 사용할 경우에는 이동할 페이지를 새로 추가..