react (3) 썸네일형 리스트형 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)에배포된 사이트의 주소를 입력해 주고 하단의 변경 내용 저장 버튼을 클릭해 줍니다. 그.. 자 이제 시작이야, 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 다음
