올해 첫 AWSKRUG Frontend 소모임에서 진행한 밋업에 다녀왔다. 해당 커뮤니티는 작년말부터 슬랙을 통해 참가했는데 오프라인 행사 참가는 이번이 처음이었다. 밋업 진행이 성수 무신사 오피스에서 진행되고 마침 이직한 회사도 성수에 위치해서 퇴근 후 저녁시간에 참가했다. AWSKRUG 프론트엔드는 매달 한번씩 오프라인 모임을 진행한다. 매번 발표자료와 슬라이드를 유튜브와 깃허브를 통해 제공하는데 내용이 하나같이 알차고 도움이 되었다. 이번 발표주제는 'cognito와 next-auth'에 관한 내용이었다. 마침 회사에서 프로젝트를 구축하면서 auth 관련해서 next-auth에 대해 살펴봐서 겹치는 부분이 있었다. cognito는 이번에 처음알게됐는데 생각보다 실무에서 두 스펙의 조합으로 많이 사..
Supabase를 셋팅하고 Flutter에서 네트워크 요청을 하니 다음과 같이 에러가 발생한다. 처음엔 Supabase 권한 관련 이슈인가 했는데 mac OS에서 네트워크요청을 하려면 따로 설정이 필요하더라. flutter: ClientException with SocketException: Connection failed (OS Error: Operation not permitted, errno = 1), address = supzxhsocoxyxyfszruz.supabase.co, port = 443, uri=https://supzxhsocoxyxyfszruz.supabase.co/rest/v1/courts?select=%2A&id=eq.303 Reloaded 1 of 1425 libraries in..
약 2년만에 Flutter를 다시 개발중이다. Flutter New Project를 통해 기본 개발환경을 설정했는데 하도 오래만에 개발하다보니 초기 셋팅에 이것저것 추가된 것 같다. 컴포넌트를 개발중인데 자꾸만 다음과 같은 Warning Message가 등장한다. 아마도 Flutter 팀에서 기본적인 lint 설정을 해줬나 보다. 찾아보니 https://pub.dev/packages/flutter_lints 패키지가 추가된 것 같다. 컴포넌트마다 최상단에 ignore 명령어를 작성할 수 없으니 다음 세줄의 명령어를 analysis_options.yaml의 rules에 추가해주자. //analysis_options.yaml linter: rules: prefer_const_constructors: fals..
연말에 하려던 테니스 회고록을 기어코 해를 넘겨서 작성하게 되었다. 2023년의 여름은 무난히 더웠던 여름으로 기억된다. 태양볕의 찌는듯한 더위보다는 숨이 턱턱 막히고 유난히 습하던 여름으로 기억된다. 평소 겨울 테니스보다 여름 테니스에 상성이 강했던 필자였지만 작년의 여름은 유난히 힘들었다. 한반도 기후가 동남아를 닮아간다는데 이미 절반은 넘은 것 같다. 그럼에도 불구하고 작년에도 열심히 테니스를 쳤기에 한번 회고록을 남기고 싶었다. 2월 교류전으로 시작해 11월 MT를 비롯해 송년회까지 많은 행사가 있었고 꼬박꼬박 열심히 참가했다. 치는만큼 실력이 늘었으면 좋겠지만 언제나 그렇듯이 테니스는 그것을 쉽게 허락해주지 않는다. 2월 - 교류전 (김포 에이스 테니스장) 연초의 시작을 교류전으로 시작했다. 교..
사이드 프로젝트를 진행하며 DB 구축을 진행하고 있다. 지도맵에서 보여줄 필요가 있어서 크롤링을 통해 주소를 확보하면 해당 주소를 위도, 경도로 변환하는 작업이다. 주소를 입력 -> Lat, Lng로 변환하는 작업인데 찾아보니 크게 2가지 방법으로 가능하다. 첫번째는 오픈소스 API를 사용하는 방법이고 두번째는 Kakao Map을 통해서 위도 경도를 획득할 수 있다. Nominatim Geo 관련해서 여러 API를 제공하는 오픈소스인 듯 하다. 사이트를 들어가보니 다음과 같이 서비스를 소개하고 있다. Open-source geocoding with OpenStreetMap data 여러 블로그에서도 소개하고 있어서 다음과 같이 소스를 작성하고 실행해 보았다. from geopy.geocoders impo..
Flutter 셋팅 중 Supabase를 사용하려고 하니 Flutter 버전 업그레이드가 필요하다고 한다. Flutter의 버전을 업그레이드 해보자. // flutter 버전 확인 flutter --version // flutter stable 채널 변경 flutter channel stable // flutter 업그레이드 flutter upgrade // 프로젝트의 패키지 업그레이드 (-v 옵션 추가해서 로그 출력) > flutter -v pub get 프로젝트의 패키지까지 업그레이드하면 다음과 같이 로그가 표시된다. Upgrading Flutter to 3.16.5 from 3.3.9 in /Users/sihyungpark/dev/flutter... Downloading Darwin arm64 Da..
Flutter로 개발중 iOS 시뮬레이터로 실행하였는데 다음과 같은 에러가 발생하였다. [!] Automatically assigning platform `iOS` with version `11.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`. 대략 Runner의 플랫폼 버전을 명시하라는 뜻인것 같다. 해당 에러를 수정하기 위해서는 podfile 수정이 필요하다. Podfile 수정하기 ios/Podfile로 들어가 상단에 주석처리된 ..
최근 사내 디자인 시스템을 개발하면서 Stroybook을 활용하여 컴포넌트 문서화를 진행하고 있다. 마크다운 파일에서 직접 jsx, tsx를 활용할 수 있는 MDX를 활용하여 문서를 작성하고 있는데 무엇보다 익숙한 마크다운 문법과 컴포넌트 코드를 분리할 수 있다는 장점을 활용할 수 있어 개별 컴포넌트마다 MDX 파일로 컴포넌트 문서를 관리하고 있다. 이번 포스팅에서는 Stroybook에서 MDX 파일을 활용한 방법과 템플릿을 공유해본다. Storybook에서 MDX 설정 Storybook에서 MDX를 활용하기 위해서는 Storybook에서 제공하는 플러그인이 필요하다. 혹시 설치가 되어있지 않다면 다음 플러그인을 설치한다. 자세한 설치방법은 https://www.npmjs.com/package/@stor..
최근 사내 백오피스를 개발하면서 엑셀 다운로드, 엑셀 업로드 및 압축파일을 다루는 화면 개발을 작업했습니다. 기존의 이미지 업로드, 다운로드와 같은 간단한 미디어 작업은 다뤄봤지만 엑셀 작업을 진행하면서 Blob에 대해 처음 알게 되었습니다. 엑셀 관련 기능 구현은 하였지만 Blob에 대해서는 생소했던 터라 이번 포스팅을 통해 Blob에 대해 자세히 살펴보겠습니다. Blob은 Binary Large Object의 약자로 말 그대로 커다란 이진 데이터의 집합체 입니다. 원시 데이터를 다양한 포맷으로 나타내거나 가공할때 사용되며 주로 이미지, 비디오, 영상 등의 미디어 데이터에서 활용됩니다. 미디어 뿐만 아니라 html, plain text 등 바이너리로 표현 가능한 많은 데이터에서 쓸 수 있습니다. Blo..
웹 최적화 프론트엔드 개발에서 웹 최적화는 중요 부분을 담당하고 있습니다. 사이트의 속도가 느려서 유저가 이탈하거나 SEO가 제대로 작동하지 않아서 노출이 되지 않으면 회사의 매출과도 직결되기 때문이죠. 하지만 우리는 웹 페이지가 느리다는 것을 어떻게 정의할 수 있을까요. 단순히 로딩 속도가 느리다와 같은 추측만으로는 부족하기 때문에 눈으로 확인할 수 있는 정량적인 지표들이 필요합니다.이를 도와주는 도구가 Google이 제공하는 Lighthouse입니다. 이번 포스팅에서는 Lighthouse에 대해 간단히 알아보고 Lighthouse CI와 Github Actions를 활용하여 PR 단계에서 웹 성능을 측정하는 과정을 다뤄보겠습니다. Lighthouse Lighthouse는 Google에서 제공하는, 웹..
