next.js (5) 썸네일형 리스트형 AWS + Next.js + Nginx 대환장 파티 경험하기 안녕하세요. 오랜만에 돌아온 메리입니다. Nextjs를 공부하면서 Vercel로 배포를 해왔는데(다른 방식은 염두에도 안 둠) 이번에 에디님께서 "AWS로 배포를 해보는 게 어떨까?"라고 말 한마디 했다가 이 사태가 벌어지고 말았습니다. 어떤 블로그에서는 "배포를 못하는 개발자가 동네에서 축구하는 축구선수와 무엇이 다른가?"라고 하더라고요.자, 동네 축구 선수 지금 출동합니다. 1. AWS 인스턴스 생성 1-1. AWS 인스턴스 시작 AWS 서비스에 로그인하면 EC2 인스턴스에 들어갑니다. 저는 최근에 방문한 서비스 리스트에 있지만,새로 계정을 생성하신 분은 상단의 검색에서 EC2를 검색하시면 찾으실 수 있습니다. EC2란 ❓ 더보기EC2란 Amazon Elastic Compute Cloud의 줄임말로.. Next.js 모니터링 하기(feat. Sentry.io) '농실농실 - 실시간 농산물 가격 조회'가 어느 정도 마무리 단계에 있습니다. 현시점으로 가장 큰 문제는 아직 API 운영 승인되지 않아 개발 트래픽 100건에 머물러 있다는 것입니다. 그래서 테스트를 하다가 api 호출이 100건이 넘어가면 트래픽 오류를 뿜어내죠.그 외에도 아직 완벽한 단계가 아니라 여러 오류를 뿜뿜! 뿜어내곤 합니다. 그럴 때마다 백엔드 개발자분께서 "왜 오류가 나는 것이냐"라고 물어보시곤 하는데,오류가 날 때마다 개발자 도구 켜서 네트워크에서 찾아봐야 하는 것이 너무 귀찮기도 하고, 만약 서비스 사용자들이 많아지면 오류 트래킹하는것도 문제겠더라고요. 그래서 모니터링을 추가하기로 했습니다!1. Sentry.io 회원가입Sentry는 애플리케이션에서 오류가 발생하면 알려주는 에러 .. 인스타그램 API 연결하기 - 1편 : 기본 설정 새로운 토이프로젝트가 거의 마무리 단계까지 왔습니다. 제가 먹는 걸 좋아해서 맛집 관련 웹사이트를 간단히 만들어봤는데요. 기왕 하는거 캐릭터도 만들고 인스타그램도 개설해서 관리를 하는 게 어떨까 해서기존 웹서비스(MongoDB사용) 에서 인스타그램 API를 연결해서 데이터를 가져오기로 했습니다. 1. Instagram 기본 디스플레이 API 제품 > Instagram > 기본 디스플레이 > Instagram 앱 ID 필드에서) {redirect-uri}는 2단계에서 제" data-og-host="developers.facebook.com" data-og-source-url="https://developers.facebook.com/docs/instagram-basic-display-api/gettin.. Next.js + NextAuth를 활용한 로그인 구현 지난 글에서 언급했듯 코드드림의 어드민 서비스를 개발하기 시작했습니다. 팀원들과 모듈을 나누어 개발을 하기로 했고, 저는 로그인 모듈을 맡았습니다. Spring + Spring Security를 활용한 로그인은 많이 구현해봤지만 Next는 처음 해보게 되었습니다. 문법도 너무 어색하고 이게 어떻게 되는거지 싶은게 많았는데요. 기능이 잘 구현되니 꽤 재밌었습니다. 이번 포스팅에서는 로그인 기능을 구현한 과정을 소개합니다. DB를 연결해 사용하고 있기 때문에 지난 글을 통해 DB 연동을 하고 진행하시면 예제를 따라하는데 훨씬 수월하실거라 생각됩니다. 예제에 사용된 버전은 다음과 같습니다. Next.js 14 Mongoose 8.0.3 Typescript 5 NextAuth 4 먼저 로그인을 구현하기 전에 사.. 우리가 Next.js를 공부하게 된 이유 올해 9월, 앱 런칭을 위해 우리 팀은 Flutter를 공부했고 정식 배포까지 마무리했습니다. 그리고 앱을 소개하기 위한 사이트를 React로 만들었고 Git Pages로 호스팅했습니다. 어느 날, 한 팀원을 통해 Next.js를 알게 됐습니다. 그리고 코드드림팀에서는 Next.js를 공부하기로 했는데요. 우리가 공부하게 된 이유와 과정을 포스팅을 통해 공유하려고 합니다. 이번 포스팅에서는 Next.js를 공부하게 된 이유를 소개합니다. *이 포스팅 시리즈는 Next.js 공식 문서와 React 공식 문서, 타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발을 참고하여 작성했습니다. 1. 프론트엔드 개발 변천 jquery의 시작과 끝 프론트엔드는 어떻게 변화해왔을까요? 저는 6년차 .. 이전 1 다음
