nextjs (7) 썸네일형 리스트형 Next.js 모니터링 하기(feat. Sentry.io) '농실농실 - 실시간 농산물 가격 조회'가 어느 정도 마무리 단계에 있습니다. 현시점으로 가장 큰 문제는 아직 API 운영 승인되지 않아 개발 트래픽 100건에 머물러 있다는 것입니다. 그래서 테스트를 하다가 api 호출이 100건이 넘어가면 트래픽 오류를 뿜어내죠.그 외에도 아직 완벽한 단계가 아니라 여러 오류를 뿜뿜! 뿜어내곤 합니다. 그럴 때마다 백엔드 개발자분께서 "왜 오류가 나는 것이냐"라고 물어보시곤 하는데,오류가 날 때마다 개발자 도구 켜서 네트워크에서 찾아봐야 하는 것이 너무 귀찮기도 하고, 만약 서비스 사용자들이 많아지면 오류 트래킹하는것도 문제겠더라고요. 그래서 모니터링을 추가하기로 했습니다!1. Sentry.io 회원가입Sentry는 애플리케이션에서 오류가 발생하면 알려주는 에러 .. 인스타그램 API 연결하기 - 2편 : API 연결 안녕하세요. 다시 돌아온 맛도리 탐정입니다.이번 편에서는 이전에 포스팅을 진행했던 Next.js + 인스타그램 API를 마무리 짓도록 하겠습니다. 4. 테스트 사용자 인증순서에 따라 아래의 인증 창 URL을 구성합니다. https://api.instagram.com/oauth/authorize ?client_id={app-id} &redirect_uri={redirect-uri} &scope=user_profile,user_media &response_type=code app-idredirect-uri표시된 부분 (클라이언트 OaAuth 리디렉션 URI | 콜백 URL 승인 취소 | 데이터 삭제 요청 URL)에배포된 사이트의 주소를 입력해 주고 하단의 변경 내용 저장 버튼을 클릭해 줍니다. 그.. 인스타그램 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 + Firebase를 활용한 모바일 푸시 구현 요즘 코드드림팀에서는 교회를 대상으로 하는 서비스를 개발하고 있습니다. 교회 다니는 팀원이 있어 간단한 서비스를 제공해볼까라는 이야기에서 시작되었는데요. 개발할수록 기능이 하나씩 추가되고 있어요. 최근에 서비스 안에 기능 중 모바일 앱으로 푸시를 보내는 기능이 필요해졌는데요. 파이어베이스에서 Node를 지원하는 것을 보고 파이어베이스를 이용하기로 했습니다. Spring에서만 해봤던 기능을 Next.js에서는 처음 해보게 돼서 포스팅을 작성해봤고, 테스트 환경은 다음과 같습니다. *모바일앱은 Flutter를 이용했고 푸시를 받기 위한 환경은 갖춰진 상태입니다. Next.js 14 Firebase admin sdk Typescript 5 1. 서비스 키 생성 1-1) 파이어베이스에 접속 후 프로젝트 선택 1.. AWS S3 이미지 업로드하기 (with NextJS) 안녕하세요. 오랜만에 쓰는 포스팅이네요. 코드드림 어드민 프로젝트가 거의 마무리되어 가고 있습니다. 저희는 AWS S3를 사용해 이미지를 저장하게 되었는데, 이때 배우게 된 내용을 복기하고자 이번 포스팅을 기획하게 되었습니다. 생각보다 별건 없습니다. 레고 1. AWS 계정 생성하기 우선 계정을 생성해 볼까요? 아래 링크로 들어가서 무료 계정을 생성해 봅시다. Amazon S3 동영상 Amazon S3 시작하기 - 데모(7:37) Amazon S3 데이터 보호 개요 - 버전 관리, 객체 잠금 및 복제(7:41) Amazon S3 Intelligent Tiering 스토리지 클래스 소개(1:18) Amazon S3 Glacier 스토리지 클래스 소개(1:30) 자습 aws.amazon.com 기존에 계정이.. 물러가라! Next.js (기초) 오늘은 Next.js의 기본적인( = 멋진) 기능 네 가지 기능해 대해서 소개하고자 합니다. 링크 next/link 는 Next.js에서 다른 페이지로 이동하기 위한 내장 컴포넌트입니다. import Link from 'next/link' go to main 위와 같이 코드를 쓰면 HTML에서는 아래와 같이 렌더링이 됩니다. go to main 쿼리 파라미터로 지정하는 경우, href 문자열로 지정하는 방법 외에 객체를 사용해서 지정할 수도 있습니다. go to main go to main 또한, router 객체의 메서드를 활용해서 페이지를 이동할 수도 있습니다. 아래의 코드를 확인해봅시다. import { useRouter } from 'next/router' const router = useRout.. 자 이제 시작이야, Next 세계로 1. Next.js의 렌더링 방법 자, 이제 Next.js를 시작해볼까요? 먼저 신규 타입스크립트용 Next.js 프로젝트를 만들어 봅시다. // 터미널을 켜서 해당 명령어를 입력 $ npx create-next-app@latest --ts 프로젝트명 // @latest > 최신 버전을 의미함 // --ts > 타입스크립트를 의미함 저는 해당 설정으로 신규 프로젝트를 생성하였습니다. 그럼 아래 사진과 같은 파일구조로 프로젝트가 생성될 것입니다. 그럼 이제 생성된 프로젝트를 실행시켜 볼까요? $ cd next-sample $ npm run dev 로그의 내용을 보면 http://localhost:3000 에서 서버가 정상적으로 실행 된 것을 확인할 수 있습니다. 브라우저에 URL을 입력해보면 다음과 같은 .. 이전 1 다음
