전체 글

최근에 Flutter와 Supabase를 활용해 테니스 다이어리앱 타이브레이크를 개발하고 있습니다. 테니스를 좋아하는 개발자다 보니 관심있는 도메인으로 앱을 하나 만들고 싶었는데, 어느덧 개발과 배포를 넘어 운영을 하고 있네요. 출시한지도 쫌 됐고 사용자가 아주 ?! 없지는 않아, 중간지점으로 삼고 정리를 한번 해보려고 합니다.  앱의 간략한 소개와 만들게 된 배경, 유저분들 피드백과 운영하며 배운점 등을 주저리 주저리 한번 적어보겠습니다. 테니스 다이어리앱을 만들게 된 배경 테니스를 치는 많은 분들이 SNS, 주로 인스타그램을 통해 자신의 플레이를 공유하고 있습니다. 저 또한 그날의 플레이와 날씨, 컨디션 등을 스토리를 통해 자주 공유를 했는데요, 한 가지 아쉬운점이 있다면 SNS 공유가 기록보다는 단..

최근, 사내에서 Docusaurus를 활용해 기술문서 작성을 접할 기회가 있었습니다. 생각보다 가독성이 괜찮고 간단한 마크다운 작성법과 React 커스터마이징이 가능해 이력서로 사용해도 괜찮을 것 같았습니다. 기존의 Notion 이력서에서 전환하였습니다. 전환하게 된 배경과 Docusaurus로 이력서를 작성하며 느낀점을 적어보겠습니다.  Docusaurus란 ?글에 들어가기 앞서 Docusaurus에 대해 먼저 소개해드리겠습니다. Docusaurus는 Meta에서 만든 오픈소스 프로젝트로 다양한 기업에서 사용하고 있는 SSG(Static site generator)툴 입니다. 오픈소스 프로젝트이다보니 커뮤니티 활동이 활발한 편이고 참고할 레퍼런스가 꽤 많았습니다. 공식문서에서 한국어도 어느정도 지원을 ..

React를 주로 개발하는 저에게 dispose란 단어는 조금 생소했습니다. 공식적인 단어의 뜻은 처리하다, 처분하다, 폐기하다 로 나타나고 개발쪽에서는 구독 해제, 메모리에서 리소스 해제 정도인 것 같네요. 아무래도 앱개발에서 메모리 관리가 중요하다보니 잘 알아둬야하는 키워드 같습니다.  riverpod으로 상태관리를 하다보면 적절한 시점에 프로바이더를 dispose 해줘야 합니다. 주로 다음과 같은 상황에서 자주 사용됩니다.  - 회원가입 혹은 폼 입력 화면에서 되돌아왔을 때, 입력 폼이 초기화되어있어야함 (임시저장기능이 없다고 가정할 때)- firebase 혹은 auth를 관리하는 상황에서 로그아웃 시 연결 해제- 앱의 메모리 절약  1번의 상황이 제가 Flutter로 개발하다 맞닥뜨린 이슈였습니..

이슈발생특정 화면에 진입 시 구독하고 있는 riverpod 상태를 초기화 할 필요가 있어 다음과 같이 코드를 작성하였습니다. 참고로 이때는 riverpod의 autoDispose 기능을 몰랐었네요. 공식문서의 중요성을 다시 한 번 깨달았습니다.  @override void initState() { super.initState(); ref.read(diaryCreateViewModelProvider.notifier).handleReset(); } View에서 최초로 한번만 실행하면 되기에 initState시 viewModel의 reset함수를 작동시키자 다음과 같이 에러가 발생하였습니다.  이슈파악에러 메세지를 통해 이슈를 파악해보겠습니다. Tried to modify a provider ..

오늘도 어슬렁 어슬렁 재밌는 기술 블로그 없나하고 탐색하던 중, 흥미로운 사이트를 발견했습니다. 자신이 직접 만든 블로그에 방명록 기능을 개발해서 탑재해 놓은 거였죠. 어라 ? 이거 Next.js랑 Supabase로 하면 금방 만들겠는데 하고 생각이 들었습니다. 비록 티스토리 블로그지만 좌측 메뉴에 링크만 걸어두면 접근할 수 있으니까요. 재밌어 보이면 빠르게 실행해야죠 ! 먼저 서버셋팅부터 해보겠습니다. Supabase서버는 고민없이 Supabase로 선택했습니다. 제가 요즘 취미로 개발하는 타이브레이크에서 요긴하게 사용하는 서비스인데 Firebase와 비슷한 BaaS입니다. 개인적으로 파이어베이스보다 개발자 친화적이며 풀스택 개발에 최적화된 서비스라 생각하네요. React, Flutter, Python..

스마트폰이 일상이 되어버린 시대에서 앱에서 공유기능은 필수가 되었습니다.점심시간만 되면 슬랙에 많은 배민 링크가 올라오거나 친구들끼리 카톡으로 맛집 링크를 공유하지 않으신가요 ? 사용자는 링크를 통해 쉽게 앱으로 이동할 수 있고, 서비스를 운영하는 측에서는 많은 사용자 유입을 기대할 수 있게되었죠.  최근에 테니스장 어플 '타이브레이크'의 웹버전을 개발하여 앱에서 공유할 수 있는 링크가 생겼습니다. 이번 포스팅에서는 share_plus를 통해 Flutter에서 앱 링크를 공유하는 과정을 가져보려합니다. 웹버전 구경도 한번 해보세요 ! https://tiebreak.vercel.app/ 타이브레이크내 손안의 테니스장, 타이브레이크tiebreak.vercel.app share_plusshare_plus는 F..

저는 선언적인 프로그래밍을 좋아합니다. 프론트엔드 개발 초기시절 styled-components로 공통화되지 않은 div를 찍어내다가 Flutter를 처음 접했을때 충격을 잊을수가 없죠. Scaffold와 같은 위젯에서 옵션을 제공해주는데 어찌나 편리하던지 ! 심지어 자동완성까지 지원해주는데 저는 그저 필요한 속성들만 쏙쏙 골라 사용하면 됐습니다.  만약 분기처리도 명령형이 아닌 선언형으로 작성하면 어떨까요 ? 복잡한 if/else와 switch문에서 조금은 구원받을 수 있을텐데요.  최근에 ts-pattern 라이브러리를 재미있게 보고 있습니다. JS에서 아직 공식적으로 제공하지 않는 패턴매칭을 도와주는 패키지인데 복잡한 데이터나 API를 선언적으로 분기처리할 때 유용할 것 같습니다. 패턴매칭의 용어에..

이슈 발생사내 프로젝트에 docker-compose를 사용해 docker container환경을 구축하던 중 다음과 같은 경고 메세지가 발생했다.    docker-compose의 버전관련 문제인듯 하여 찾아보니 깃허브 이슈에서 다음과 같은 코멘트를 확인할 수 있었다. 더이상 docker-compose.yaml  파일에서 버전을 지정하지 않는다는 것.    turborepo 공식 repository의 docker 파일을 참고하여 작성하였는데 2년전 코드라 호환성 이슈가 있었다. 공식 문서도 찾아보니 top-level에서 version을 지정하는 환경이 obsolete 됐다고 명시되어있다. 그나저나 deprecated는 많이 들어봤어도 obsolete는 처음보는것 같다 ?   이슈 해결이슈 해결은 간단히 ..

직장인들의 IT 개발모임 직띵에서 3기 FE 멤버로 현재 활동하고 있다. React 개발자로서 기초를 좀 더 다듬을 필요성을 느끼고 있었고, 무엇보다 회사 바깥의 FE개발자들과 교류의 장을 가지고 싶었다.  직띵 스터디 내에는 코딩테스트, 데브옵스, 스프링 등 여러가지 클래스가 존재하는데 그중 JS/React에 참가하고 있다. 데브옵스같은 인프라 관련 클래스에도 참가하고 싶었으나 시간적 여유 관계로 한 클래스에만 집중하고 있다.  JS/React 클래스의 경우, 커리큘럼을 딱히 정하기보다 각자 원하는 주제에 대해 공부하고 격주로 발표하는 형식으로 진행하고 있다. 발표 후 구성원들과 자유롭게 토의 하는 시간을 가지는 포맷이다.  첫번째 발표였던 지난번 내용은 아래 포스팅에서 확인할 수 있다.  https:..

이번 포스팅에서는 마이크로 프론트엔드의 개념과 도입방식, Webpack의 Module Federation에 대해 알아보고 예시 코드를 통해 간단한 마이크로 프론트엔드를 구현해보려고 한다. 최근에 여러 기업들의 Micro Frontend 도입기와 기술블로그를 읽으며 해당 개념에 대해 관심을 가지게 되었다. Webpack5에서 Module Federation이 등장한지도 벌써 4년이 넘었는데, 이제는 많은 테크 기업들이 안정적으로 도입한 같다. 당장 실무에서 도입할 스펙은 아니더라도 서비스의 확장과 분리에 대해 항상 염두해둬야한다 생각하기에 알아보았고, 감사하게도 많은 분들이 도입 사례를 공유해줘서 조금은 덜 헤맬 수 있었다.  마이크로 프론트엔드글에 들어가기 앞서, 마이크로 프론트엔드란 무엇인지 정의부터 ..