이번 포스팅에서는 마이크로 프론트엔드의 개념과 도입방식, Webpack의 Module Federation에 대해 알아보고 예시 코드를 통해 간단한 마이크로 프론트엔드를 구현해보려고 한다. 최근에 여러 기업들의 Micro Frontend 도입기와 기술블로그를 읽으며 해당 개념에 대해 관심을 가지게 되었다. Webpack5에서 Module Federation이 등장한지도 벌써 4년이 넘었는데, 이제는 많은 테크 기업들이 안정적으로 도입한 같다. 당장 실무에서 도입할 스펙은 아니더라도 서비스의 확장과 분리에 대해 항상 염두해둬야한다 생각하기에 알아보았고, 감사하게도 많은 분들이 도입 사례를 공유해줘서 조금은 덜 헤맬 수 있었다. 마이크로 프론트엔드글에 들어가기 앞서, 마이크로 프론트엔드란 무엇인지 정의부터 ..
직장인들의 IT 개발모임 직띵에서 3기 FE 멤버로 활동하게 되었다. React 개발자로서 기초를 좀 더 다듬을 필요성을 느끼고 있었고, 무엇보다 회사 바깥의 FE개발자들과 교류의 장을 가지고 싶었다. 천성이 개발 이야기 하는것을 좋아하는 사람이라 입을 털(!?) 공간이 필요했고 다른 회사의 개발자들은 요즘 어떤식으로 개발하는지, 어떤 기술스택을 유심히 보는지 등 궁금한점들이 많았다. 인프런을 비롯해 몇몇 온라인 스터디모집 사이트에서 모집글을 찾아봤고 어렵지 않게 직띵에서 FE개발자를 모집해 참가하게 되었다. 찾아보며 느낀점이지만 스터디 모집은 인프런에서 하나면 충분한 듯 하다. 직띵(Zicdding)스터디 인원은 총 15명 정도였는데 FE, BE, DevOps등 다양한 분야의 개발자들로 구성되어 있다...
이번 포스팅에서는 Javacript의 모듈과 모듈 번들러의 탄생 및 핵심 기능, 마지막으로 Rollup.js 번들러에 대해 살펴보려고 한다. 모듈Rollup에 대해 이야기해보기 전에 모듈과 번들러에 대해 간략히 살펴보고 넘어가자. 프론트엔드 진영에서 개발을 하게 되면 항상 등장하는 개념인데, 용어 그대로 모듈(분리된 코드 및 조각)들을 묶어주는 역할을 한다. 건축,부동산 및 선박에 관심이 있는 사람이라면 '모듈 공법'에 대해 들어본 적도 있을것이다. 빌딩 혹은 선박을 한군데서 시공하는것이 아닌, 여러 부분을 모듈 형식으로 쪼갠 후 조립해 효율성을 극대화 하는 공법이다. 개발관점에서 보면 여러 PR을 통해 머지 후 어플리케이션을 완성하는 형태라고 보면 비슷할것 같다 ? 규모가 큰 프로그램을 개발할 때 모..
이슈 발생시형님 ! 예전 코드로 다시 원복해서 빌드했는데 예전 캐시가 적용이 안돼요.평온히 개발하고 있던 어느날 다음과 같은 이슈가 발생했다. 사내 프로젝트에서 Turborepo를 활용해 모노레포를 구축하여 사용하고 있는데, 갑자기 예전에 빌드된 캐시가 코드에 적용되지 않는 현상이 발생한 것이다. Turborepo는 강력한 캐시기능을 자랑한다. 로컬 캐시, 클라우드 캐시 등 다양한 캐시 전략을 통해 빠른 빌드 속도를 토대로 배포시간 단축에 도움을 준다. 우리 팀 또한 편리하게 개발하고 있었는데 이상하게 예전 코드로 돌아가면 빌드시에 현재 코드로 적용되는 현상이 발생한 것이다. 캐시기능을 off하고 사용할 수 도 있었지만 그러기엔 Turborepo가 자랑하는 캐시를 꺼버리기엔 아까운 상황. 다행히 몇번의 ..
Supabase 최근에 앱개발을 하면서 정말 잘 사용하고 있는 서비스가 있다. Firebase의 대체제라고도 하는 Supabase인데 앱 및 웹 서비스의 백엔드 구축을 쉽게 도와주는 Baas(Backend as a Service)이다. 몇 번의 클릭과 간단한 코드를 통해 손쉽게 인프라를 구축할 수 있다. Flutter로 앱개발을 하면서 Supabse를 도입하여 백엔드를 구성했는데, 개인적으로 Firebase보다 낫다고 생각한다. 더 나은 개발자 경험과 직관적인 코드, 편리한 대시보드 UI와 Free Plan에서 무제한 API요청 등 개발자가 클라이언트에 온전히 집중하여 개발할 수 있도록 도와준다. Supabase에 대해 간략히 설명해보자면 다음과 같다. Supabase 특징- PostgresSQL 기반..
React Native와 Flutter를 선택할 때 고려해야할 것 중의 하나가 Code Push의 유무다. Code Push란 각 플랫폼의 앱스토어 리뷰 과정 없이 앱의 업데이트를 반영할 수 있는 서비스이다. 웹과 다르게 스토어의 심사를 받아야만 업데이트가 가능한 앱에게는 한줄기 빛과도 같은 존재이다. 스타트업이든 대기업이든 앱 서비스의 빠른 업데이트는 필수적이다. 결제 페이지에서 오류가 나는데 하루가 넘게 걸리는 심사과정만 기다리고 있다면 속이 타들어 갈 것이다. 그와중에 주말이 겹치거나 리젝이라도 당한다면 ? 기업 입장에서는 상상하기도 싫을것이다. 이 때문에 많은 앱 서비스에서 핫픽스가 필요한 부분은 웹뷰로 개발한다. 필자도 앱 회사에서 개발할 때 결제와 예약페이지 등에서 빠른 수정이 가능한 부분은 ..
Flutter로 정신없이 개발하다보면 다음과 같은 화면을 마주할때가 많다. 리팩토링을 하거나 위젯을 분리하는 과정에서 사용하지 않는 import 문이 많아지곤 한다. 중복되고 사용하지 않는 지저분한 코드들이 발생한다. 매번 정리를 한다해도 수많은 파일들을 일일히 뒤져볼 순 없는 상황. 이럴때 도움이 되는 명령어를 알아보자. Dart Fix dart fix --apply 터미널에 dart fix --apply 한줄이면 손쉽게 정리가 가능하다. 명령어를 입력하면 다음과 같이 진행이 된다. 15개 파일에서 무려 24개나 사용지 않는 코드를 삭제했다. 코드가 지저분해졌다 느낄때마다 정리해주자. https://teveloper.tistory.com/70 [1인 앱 개발] 테니스장 앱 '타이브레이크' 출시 후기 (..
경고 발생 플레이스토어에 앱 업데이트를 할려고 번들 파일을 업로드 했더니 다음과 같은 경고 메세지가 발생한다. 해당 경고에 대한 상세 설명은 다음과 같다. 네이티브 충돌 지원 Google Play Console은 Android vitals에서 네이티브 충돌을 보고합니다. 몇 단계만 거치면 앱의 네이티브 디버그 기호 파일을 생성하고 업로드할 수 있습니다. 이 파일로 Android vitals에서 기호화된 네이티브 비정상 종료 스택 트레이스(클래스 및 함수 이름 포함)를 사용 설정하여 프로덕션에서 앱을 디버그할 수 있습니다. 이러한 단계는 프로젝트에서 사용하는 Android Gradle 플러그인의 버전과 프로젝트의 빌드 출력에 따라 다릅니다. 해결 방법 몇몇 파일을 압축해서 업로드 하는것으로 쉽게 해결할 수..
작년 11월부터 새로생긴 정책으로 인해 안드로이드 플레이스토어 출시가 굉장히 까다로워졌다. 개인 개발자들의 신규 계정에 대해 프로덕션 출시 이전 20명을 모아 비공개 테스트를 진행해야 한다는 것 ! 이게 무슨 해괴망측한 정책 변화인지 .. 기존에 플레이스토어 개발자 계정이 없던 필자는 당황할 수 밖에 없었다. 약 3년전에 Flutter 앱을 출시했을 때 플레이스토어는 굉장히 저렴하고 개발자 친화적인 스토어였는데 지금은 신규앱의 진입장벽이 많이 높아졌다. 지금은 앱스토어가 비싸지만 선녀로 보일 정도. 개인 개발자가 20명의 비공개 테스터를 모으긴 쉬운일이 아니다. 비공개 테스트를 하기 위해선 G메일의 구글 계정이 필요한데 본인 소유의 계정을 비롯해 지인 및 친구들에게 부탁해도 20명을 충족시키기란 보통일이..
최근 타 클럽과 교류전이 있어서 김포 테니스 아레나에 다녀왔다. 아치형돔과 아름다운 코트로 유명하다. 평소 한번쯤 방문하고 싶었는데 워낙 멀어서 갈 엄두가 나지 않았다. 코트 뷰로는 국내에서 손가락 안에 들지 않을까 싶다. 김포쪽에 갈일이 있으면 한번쯤 추천하는 코트. 장소 및 위치 접근성이 좋지는 않다. 김포에서도 외곽에 있어 서울에서 최소 1시간 반은 잡고 가야한다. 코트 옆에 굽네치킨 공장이 있는데 굽네에서 만든 테니스장인듯 싶다. 시내에서 빠져 으슥한 길로 운전하다 보면 웅장한 테니스장이 갑자기 등장한다. 한적한 곳에 위치해있다보니 주차공간은 넉넉한 편. 편의시설 휴게공간, 샤워실을 비롯해 앵간한 편의시설은 모두 구비되어있다. 간단한 물품을 파는 자판기도 있긴 하지만 필요한 물건들은 근처 편의점에..
