💻 개발/Frontend

올해 첫 AWSKRUG Frontend 소모임에서 진행한 밋업에 다녀왔다. 해당 커뮤니티는 작년말부터 슬랙을 통해 참가했는데 오프라인 행사 참가는 이번이 처음이었다. 밋업 진행이 성수 무신사 오피스에서 진행되고 마침 이직한 회사도 성수에 위치해서 퇴근 후 저녁시간에 참가했다. AWSKRUG 프론트엔드는 매달 한번씩 오프라인 모임을 진행한다. 매번 발표자료와 슬라이드를 유튜브와 깃허브를 통해 제공하는데 내용이 하나같이 알차고 도움이 되었다. 이번 발표주제는 'cognito와 next-auth'에 관한 내용이었다. 마침 회사에서 프로젝트를 구축하면서 auth 관련해서 next-auth에 대해 살펴봐서 겹치는 부분이 있었다. cognito는 이번에 처음알게됐는데 생각보다 실무에서 두 스펙의 조합으로 많이 사..

최근 사내 디자인 시스템을 개발하면서 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..