꾸준히 재밌게
728x90
728x90
article thumbnail
NextJS 웹 앱을 React Native 모바일 앱으로 전환하여 배포하기 (AAB, APK, IPA)
공부방 2024. 4. 30. 13:56

초년차 백엔드 개발자의 사이드 프로젝트 앱 배포 경험기입니다.(기술적 서술이 없습니다.) NextJS로 구성된 웹앱을 React Native + Expo를 사용해 안드로이드 앱으로 전환하고 배포하는 과정의 기록입니다.(기본 도메인 세팅이 완료되었고, Vercel로 배포해놓은 상태입니다.)    개발서버기존 NextJS로 구성된 프론트를 React Native로 EXPO를 통해 테스트용 APK를 만들어보기로했음.  expo-cli는 deprecated되었고, node 17v 이상과 호환성 문제가 발생할 수 있다고 합니다.프로젝트 내 자체 cli를 설치하여 사용하는 걸 권장한다고 합니다.expo build명령어도 eas build로 대체되었다고 하네요# expo cli 설치npm install expo-cl..

article thumbnail
클라우드 비용을 줄여보자 (AWS 비용 절감 시도 - 1)
트러블슈팅 2024. 4. 24. 08:24

프리티어 만료 며칠 전, AWS에서 메일하나가 왔다. 벌써 AWS 프리티어를 사용한지 1년이 다되어가나보다. 아래는, 프리티어에 대한 총 사용량과, 문제의 지지난달 요금이다. 추가로, 로드밸런서의 로깅용으로 S3를 사용했는데 따로 잡히지는 않은 모습이다. 다른 프리티어 사용자분들께 여쭤보고, 포스팅도 찾아보고 해봤지만, 나처럼 요금이 많이 나오는 경우가 잘 없나보다. 만료가 되고서야 한 3~5만원정도 요금이 잡히는 것 같았다. 처음부터 많이 나오지는 않았는데, 과금이 많이 발생한 시점이 사이드 프로젝트를 프론트, 백엔드 모두 배포하여 사용하면서 개발 컨테이너, 프로덕션 컨테이너까지 분리하여 총 네개의 컨테이너를 사용한 시점부터였다. 관련 기술블로그들을 정독해봤지만, 당최 무슨말인지 이해하려면 너무 오래걸..

article thumbnail
멜론 플레이리스트 유튜브 뮤직 재생목록으로 옮기기 with NodeJS, Selenium
프로젝트 2024. 4. 14. 00:13

개발 동기 유튜브 프리미엄이야 그렇다쳐도, 멜론을 처음 스트리밍클럽에 가입했던게 2010년도 초반쯤이었다. 그때는 분명 3천원이었던걸로 기억하는데... 하기사 체감 물가가 김밥 한줄에 천원하던 시대에서 3~4천원하니 그럴만도 하다 싶지만, 돈을 좀 아껴보고자 멜론 구독을 이제 보내줄 때가 된 것 같다. 가수 - 노래제목 형태의 CSV파일로 파싱해서 soundiiz 로 유튜브 뮤직 플레이리스트를 만들어 줄 수 있다고 한다. 나는 이제 개발자이기도 하니까, 직접 해보기로했다. 오랜만에 셀레니움도 다시 써볼겸 작업을 했는데, 여전히 셀레니움으로 구글 플랫폼을 핸들링하는 데 짜증이낫다. 구글 로그인과정에서 오래 잡아먹어서 한 7~8시간정도 걸렸다. 작업물 GitHub - mag123c/from-Melon-to-..

article thumbnail
[NestJS] Failed to catch error thrown by guard in nestjs in interceptor / guard의 uncaughtException
트러블슈팅 2024. 4. 9. 16:36

Guard에서의 uncaughtException 새 프로젝트를 진행중인데, 에러를 캐치하지 못해서 서버가 뻗어버렸다. 바로 본론으로 들어가서, 프로젝트의 에러 핸들링 설계는 아래처럼 구성했었다. 에러 발생 > 인터셉터에서 에러 로깅 및 필요에 따라 WebHook 전송 > 필터에서 클라이언트에 보낼 에러 포맷 정의 이러한 방식의 설계는, NestJS의 요청 응답 사이클과 각 구성요소의 역할에 대해 완전히 이해하지 못했기 때문에 만들어졌다. NestJs req-res lifecycle Interceptor에서 간과한 부분이 있었다. 클라이언트에서 보낸 API 요청이 프로젝트 전역에 설정한 Global Interceptor에서 가로채기 전에 가드에서 에러가 발생했다. 그렇기에 Exception Intercep..

article thumbnail
[NestJS] enum과 literal type 중 어떤걸 사용할까? (feat. Tree-shaking, Template Literal Ty
공부방 2024. 3. 29. 15:16

정확한 정보 전달이 아닌, 여러 좋은 포스팅들을 보며 적용해보고개인의 관점에서의 의견 서술입니다. 여러 피드백들을 적극 환영합니다.    요약트리 쉐이킹(Tree Shaking)은 번들링 시 사용하지 않는 불필요한 코드를 제거하는 최적화 작업을 말한다.프론트에서의 트리쉐이킹은 번들의 크기를 최소화해서 UX의 향상에 목적이 있다고 하지만 백엔드 관점에서의 최적화는 코드의 안정성, 유지보수 등에 초점이 맞춰지고, 프로젝트의 특성과 요구사항과 등을 고려하는 것이 좋다고 생각한다.TypeScript4.1에 추가된 Template Literal Type처럼, 명시된 타입들을 조합하는 복잡한 타입 조합이 필요하지 않을 경우, 이넘을 사용하는 것이 어떠한 이넘 값으로 강제되기 때문에 오히려 더 명확한 의도를 전달할 ..

article thumbnail
[쿼리튜닝 - 2] 사내 조회쿼리 성능의 개선 과정 두번째 이야기
공부방 2024. 3. 17. 12:24

해당 글을 보고 오시면 좋아요  [쿼리튜닝] 신입 개발자의 간단한 사내 조회 쿼리의 쿼리튜닝 여정.발단 계속해서 짧은 주기로 프로젝트를 쏟아내고 있던 와중에 DB연산이 많은 작업을 수행하는 경우가 생겼다. 개발 단계에서 API 자체를 돌리는 과정에서도 1~2000ms가 되어 걱정하고 있던 과정에 Qmag1c.tistory.com     서론팀장님께서 나를 불렀다."집계 함수를 사용해서 요청사항 집계를 하는 SQL문이 있는데 ~~~ 성능 최적화를 좀 할 수 있을까요?" 기존 쿼리를 받아들고 돌려보았다.    기존 상태SELECT    YEAR(a.registe_time) AS year,    MONTH(a.registe_time) AS month,    a.code,    count(a.code) AS t..

article thumbnail
사내 개발문화 개선하기 - 깃허브 이슈 사용하기
2024. 3. 14. 11:24

개선 동기 LogBack 관련 포스팅을 훑던 도중에, 블로그 주인분의 깃 레포를 자연스레 보게 되었다. Shin._.Mallang https://github.com/shin-mallang 충남대학교 컴퓨터융합학부 19학번, 우아한테크코스 5기 BE ttl-blog.tistory.com 오픈소스 기여도 많이하시고 꾸준하신 것 같아서 긍정적인 에너지를 막 받고있는 찰나에, 레포 하나가 눈에 들어왔는데, 1인 개발 프로젝트 레포에서도, issue를 적극 활용하는 모습이었다. 사내 두 서비스의 노드 기반 백엔드를 담당하고 있는데, 1인 개발이라는 같은 상황에서 기존 사내 해당 서비스의 개발 형태를 개선할 생각을 하지 못했던 나 자신을 되돌아보며 개선을 했으면 좋겠다 싶어서 남기는 포스팅이다. 템플릿 작성 이슈 ..

article thumbnail
[로그 분석/시각화 -2] 실제 서비스에 적용해보기(PLG : Promtail / Loki/ Grafana)
프로젝트 2024. 3. 9. 06:35

이전글과 이어집니다. [로그 분석/시각화 - 1] 기존 로그 관리의 문제점과 PLG로 로그 시각화 구현해보기 (Promtail, Loki, Graf 개발 동기 현재 사내 서비스들에 대한 로그는 winston으로 날짜별/레벨별로 관리되고 있다. nest-winston A Nest module wrapper for winston. Latest version: 1.9.4, last published: 6 months ago. Start using nest-winston in your pro mag1c.tistory.com 프로젝트의 빌드 프로세스 변경 우선, 프로젝트 배포 시 프로젝트 내부에서 docker-compose를 이용해서, 로키와 프롬테일 모두 빌드시켜주고 있는 기존 프로세스가 잘못됐다고 판단했다. ..

728x90
728x90