본문 바로가기

전체보기

 (31)
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의 줄임말로..
[농실농실] 업데이트 일지 - 2024.07.19 농실농실에 도.소매 가격 정보 비교 기능이 추가되었습니다.오늘 애플 심사를 마치고 플레이스토어와 앱스토어에 모두 배포가 완료됐습니다.오늘은 추가된 기능과 애플 심사 리젝 사유에 대해서 알아보겠습니다.도·소매 가격 비교도.소매 가격 정보는 한국농수산식품유통공사에서 확인할 수 있었습니다.  공공데이터 API 사용 신청을 했고, 검색 코드는 DB에 저장하고 검색 결과는 api를 호출했습니다.  부류, 품목, 품종 코드는 농림축산식품의 코드와 다르게 되어있기 때문에 농축수산물 품목 및 등급 코드표를 통해 엑셀을 다운 받아 DB에 저장했습니다. 기존 품목검색 메뉴를 실시간/정산결과 메뉴로 옮기고 가격비교 메뉴를 추가했습니다.가격비교 메뉴에서는 지역-부류-품목-품종을 검색해 소매가격을 확인할 수 있습니다.도.소매가..
[농실농실] 업데이트 일지 - 2024.07.02 최근 농림축산식품부 창업경진대회에 출품할 앱/웹 서비스를 준비했습니다.해당 대회는 농림축산식품의 공공데이터를 활용한 서비스를 기획/개발했다면 누구든 참가할 수 있습니다. 저희는 농실농실 - 농산물 실거래 커뮤니티 서비스를 출품하기로 했습니다.2024.07.01 게시판 기능이 오픈되었고, 앱의 기능과 더불어 추가된 기능을 소개해보려고 합니다. 농실농실은 농산물 실시간 경락가 조회, 정산 결과 조회를 할 수 있는 웹과 모바일앱 플랫폼을 제공합니다. 현재 메뉴는 실시간, 정산결과, 농실소식, 품목검색, 설정이 있습니다. 메뉴와 함께 기능을 하나씩 알아보겠습니다. 실시간도매시장을 선택하면 모든 법인/부류/품목/품종에 대한 실시간 경락가 확인이 가능합니다.하나 이상 도매시장은 필수로 선택이 되어야 하며 이외에 옵..
Next.js + Mobx 로 Toast alert 만들어보기 안녕하세요. 메리입니다. 채용공고를 보던 중 상태관리 Mobx에 대한 내용이 종종 보이더라고요.그래서 "농실농실" 서비스 개선 할 겸 Mobx를 사용해 Toast alert를 만들어 보았습니다.  아참! 그리고 디스콰이엇에 농실농실 관련 포스팅이 올라갔습니다. 많은 관심 부탁드려요~🎉 농산물 실시간 경매 가격 조회앱 출시기 - 농실농실 | Disquiet*안녕하세요. 스터디 그룹 코드드림을 운영하고 있는 이승현입니다.최근 개발된 앱들이 있어 디스콰이엇에 소개도 할겸 프로덕트를 올려봤는데, 메이커로그 제안을 받아 이렇게 글을 작성하게disquiet.io1. MobxMobx는 저희가 흔히 알고 있는 Redux와 또 다른 상태 관리 라이브러리입니다.  객체지향 느낌의 라이브러리로 보일러플레이트 코드로 Com..
Flutter 모니터링하기(feat. Sentry.io) 이번에 메리님 덕분에 새로운 모니터링 툴을 배우게 됐습니다.도입도 간단하고 무엇보다 무료로 제공되고 있어 최근 배포한 농실농실 앱에 모니터링 Sentry.io를 적용해봤습니다.1. 프로젝트 생성Sentry에 접속해서 프로젝트를 생성해보겠습니다. 플랫폼에서 Flutter를 선택합니다.alert frequency를 이용해 알림에 대한 빈도 수도 설정할 수 있는 것 같습니다.  2. 라이브러리 추가Flutter 프로젝트를 실행하고 sentry_flutter를 추가합니다.flutter pub add sentry_flutter  3. Sentry 적용main 함수에서 SentryFlutter를 초기화합니다.이 때 runApp을 감싸는 형태로 초기화를 시킵니다. options.dsn 부분에 생성된 dsn 키를 추가..

티스토리툴바