프론트엔드 (22) 썸네일형 리스트형 npm 라이브러리를 만들어보자!(2) 안녕하세요. 미룬이 메리입니다.왜 미룬이고 물으신다면, 지금 이 포스팅을 쓰기 싫어 미뤘기 때문이죠. (하하) 오늘은 두가지에 대한 포스팅을 추가적으로 써보려고 합니다.1. Typescript 지원2. Github Actions를 사용한 배포 자동화1. Typescript 지원가깝지만 먼 사이, 타입스크립트를 예제 라이브러리에 적용시켜 봅시다. 기존 예제는 이전 포스팅을 참고해주세요. 1-1. 타입스크립트 설치// ts를 js로 변경하는 컴파일러 제공npm install typescript 1-2. ts-node 설치// ts파일을 js로 컴파일해서 node 실행 제공npm install -D ts-node 1-3. tsconfing.json 생성npx tsx --init 설치가 완료되면 tsconfin.. npm 라이브러리를 만들어보자! 안녕하세요, 메리입니다.개발 공부를 하다 보면 '우와! 언젠간 이런것도 해보고 싶다'라는 생각을 종종 하곤 하는데요. 그중에서도 저는 제가 만든 라이브러리를 배포해보고 싶었습니다. 그래서 시간적 여유가 있는 지금, 라이브러리를 하나 만들어 보았습니다. 1. npm이란? npm이란 노드 패키지 매니저(Node Package Manager)로 말 그대로 노드 패키지를 관리해 주는 툴입니다.npm을 사용하면 개발자들이 자바스크립트로 만든 다양한 패키지를 온라인 데이터 베이스에 올리고 패키지 관리자를 통해 설치 및 삭제가 가능합니다. 이때 패키지들의 의존성 관리가 중요한데(하나의 문제가 발생하면 다른것도 영향을 받음), 그래서 이를 관리하기 위해 package.json이 사용됩니다. 2. npm 회원가입패키지를.. AWS + Next.js + Nginx 대환장 파티 경험하기(2) 안녕하세요. 죽지 않고 돌아온 메리입니다.저번에 AWS EC2를 사용해서 Next.js를 배포하는 방법을 포스팅했는데요. 엄청난 스샷 때문에 힘들었습니다.그래도 포스팅을 하면 뿌듯하고, 리마인드가 된 것 같아 조금 더 똑똑해진 제 모습이 마음에 듭니다. (뿌듯) 오늘은 두가지에 대한 포스팅을 추가적으로 써보려고 합니다.1. Github Actions 를 사용해서 배포 자동화 시키기 2. 가비아로 구매한 호스팅 연결하기 1. Github Actions 를 사용해서 배포 자동화 시키기1-1. 기존 설정 수정이전 포스팅에서 Nginx를 사용해서 배포할 때 index.html을 연결해 주느라 next export로 정적 파일을 생성해 주었는데요.여러 블로그를 참고하는 과정에서 이해가 안 가는 부분이 있어서 .. AWS + Next.js + Nginx 대환장 파티 경험하기 안녕하세요. 오랜만에 돌아온 메리입니다. Nextjs를 공부하면서 Vercel로 배포를 해왔는데(다른 방식은 염두에도 안 둠) 이번에 에디님께서 "AWS로 배포를 해보는 게 어떨까?"라고 말 한마디 했다가 이 사태가 벌어지고 말았습니다. 어떤 블로그에서는 "배포를 못하는 개발자가 동네에서 축구하는 축구선수와 무엇이 다른가?"라고 하더라고요.자, 동네 축구 선수 지금 출동합니다. 1. AWS 인스턴스 생성 1-1. AWS 인스턴스 시작 AWS 서비스에 로그인하면 EC2 인스턴스에 들어갑니다. 저는 최근에 방문한 서비스 리스트에 있지만,새로 계정을 생성하신 분은 상단의 검색에서 EC2를 검색하시면 찾으실 수 있습니다. EC2란 ❓ 더보기EC2란 Amazon Elastic Compute Cloud의 줄임말로.. Next.js + Mobx 로 Toast alert 만들어보기 안녕하세요. 메리입니다. 채용공고를 보던 중 상태관리 Mobx에 대한 내용이 종종 보이더라고요.그래서 "농실농실" 서비스 개선 할 겸 Mobx를 사용해 Toast alert를 만들어 보았습니다. 아참! 그리고 디스콰이엇에 농실농실 관련 포스팅이 올라갔습니다. 많은 관심 부탁드려요~🎉 농산물 실시간 경매 가격 조회앱 출시기 - 농실농실 | Disquiet*안녕하세요. 스터디 그룹 코드드림을 운영하고 있는 이승현입니다.최근 개발된 앱들이 있어 디스콰이엇에 소개도 할겸 프로덕트를 올려봤는데, 메이커로그 제안을 받아 이렇게 글을 작성하게disquiet.io1. MobxMobx는 저희가 흔히 알고 있는 Redux와 또 다른 상태 관리 라이브러리입니다. 객체지향 느낌의 라이브러리로 보일러플레이트 코드로 Com.. 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.. 이전 1 2 3 다음
