March 29, 2024
서론 필자는 Windows 컴퓨터를 사용하면서 개발 환경은 WSL2로 Ubuntu OS 위에서 동작하도록 구성해 놓은 상황이었는데 이번에 React Native를 사용하게 되면서 환경 구성했던 방법을 기록해보고자 한다. Expo를 통해서 빠르게 개발 환경을 구성하는 방법도 있지만, 추후에 결국 eject해야 하는 일이 발생한다는 경험담이 있어서 React…
March 08, 2024
서론 웹에서 사용자로부터 제출 양식을 입력받는 것은 자주 사용되는 패턴인데요. 이러한 기능을 구현해야 한다면 고려해야 할 내용은 다음과 같습니다. 각 필드에 입력된 내용을 기억하고 있어야 합니다. 각 필드의 유효성 여부를 판단하고, 적절한 오류 메시지를 보여줄 수 있어야 합니다. 사용자가 각 필드에 대해 상호작용했는지의 여부를 기억해야 합니다. (예를 …
March 07, 2024
서론 모아밤에서는 백그라운드 환경에서도 사용자의 지속적인 참여를 유도하기 위해 파이어베이스에서 제공하는 푸쉬 알림 서비스인 FCM을 활용했는데요. 개발하던 당시에는 아직 서비스 워커에 익숙하지 않은 상황이었기에 웹 푸쉬를 위한 서비스 워커만 실행하거나, 혹은 MSW를 위한 서비스 워커를 실행하는 등 분기 처리를 했었으나 이번에 둘을 동시에 실행할 수 있…
March 03, 2024
서론 프론트엔드 개발을 하다 보면 로컬 환경에서 통신할 수 있는 개발용 API 서버를 마련하기 어려운 상황이거나, 병렬 개발로 인해 아직 실제 API 호출이 불가능한 상황에서 개발해야 하는 경우가 생기기도 합니다. 이러한 경우에 간단하게 Mock 데이터만 만들어서 화면을 그리는 형태로 미리 작업을 해두는 방법도 있긴 한데요, 이 경우에는 두 가지 정도의 …
March 01, 2024
서론 이미지 다운로드 버튼을 누르면 파일을 다운로드하는 기능을 구현해야 했었다. 이미지의 원본 데이터는 S3 버킷에 저장하고 있는 상태였는데 이미지 경로를 태그의 src 속성에 담아 보여주는 것 자체는 문제가 없었지만, 다운로드를 위해서는 파일 데이터를 ajax 요청으로 가져오고 Blob 데이터로 만들 필요성이 있었다. 따라서 S3 버킷에서 허용하는 O…
January 30, 2024
서론 사용자에게 서비스가 복잡하다는 인상을 주지 않도록 한 번에 많은 정보를 노출하지 않고 순차적으로 제공하는 패턴을 이용하기도 합니다. 모아밤 프로젝트도 이런 패턴을 그룹방을 만드는 기능에서 활용해 보았는데요, 사용자 경험 측면에서 스크롤이 길어지는 것 보다는 다른 스텝으로 나누어서 제공하는 것이 좋다는 판단을 했었기 때문입니다. 이번 글에서는 퍼널 …
January 09, 2024
서론 일반적으로 ESLint는 코딩 컨벤션에 대한 일관성을 지키거나 잘못된 문법으로 인한 오류를 방지하는 도구로, Prettier는 코드의 스타일을 유지하기 위해서 사용된다. 그런데 ESLint에도 , 처럼 코드의 스타일을 위한 규칙이 존재해서 Prettier를 함께 적용할 경우에 충돌이 발생하기도 한다. 이 경우에는 로 충돌되는 모든 ESLint의 …
January 07, 2024
개요 저번 시간에 TS 컴파일러로 리액트 컴포넌트를 JS로 변환하는 과정까지 했었는데, 이번에는 모듈 번들러 Webpack을 통해서 하나의 파일로 번들링하고 실행할 수 있는 환경을 구성해보자. Webpack 설치 package.json package.json 을 수정해준다. 모든 js 파일을 기본적으로 ESM 방식으로 인식하도록 했고, 빌드와 개발 서버 …
January 07, 2024
개요 내가 리액트를 처음 공부할 때 CRA를 활용해서 빠르게 초기 환경을 구성하는 편이었다. 그러다 작년 7월 쯤 알게 된 빌드 도구인 를 알게 된 이후로는 주로 Vite를 활용해서 개발 초기 환경을 구성해 왔었는데 문득 이런 의문이 들었다. ❓ Babel에는 JSX나 TS를 변환해주는 프리셋이 존재한다. 그런데, 타입스크립트를 사용하면 TS 컴파일러…
December 28, 2023
www 리다이렉션 빌드된 React 앱을 S3 + Cloudfront에 배포하는 과정을 이전 포스트에 기록한 적이 있었다. 당시에 하나의 Cloudfront 배포가 연결하는 대체 도메인으로 두 개를 같이 등록했었는데, 큰 문제가 되는 건 아니지만 사용자가 로 접속할 수도 있고 로 접속할 수도 있게 되는 것이기 때문에 백엔드 서버에서 허용해야 할 or…