MenuPicker 개발기 #1 - React에서 QR 코드 생성 및 기기 환경 판별 기능 구현하기

추석 연휴 중이라 간단한 기술을 기록해보겠습니다! 제가 토이 프로젝트로 진행했던 서비스에서 사용했던 기술이고 또 쓰게 될 것 같아서 기록해놓겠습니다. 깃허브 레포지토리 주소https://github.com/MenuPicker/MenuPicker_FE 1. 배경MenuPicker는 웹앱으로 개발하려고 생각했고, PWA를 사용하여 웹앱으로 개발을 진행했습니다. 그런데 요새 나오는 웹앱은 에이블리, 무신사처럼 기존의 웹페이지와는 다른 UI를 보여주고 있었어요. 기존의 웹과는 다른게 보여지시나요? 두 개의 사진 모두 노트북으로 보는 화면이지만, 동시에 너비와 높이만 줄이면 앱처럼 보일것 같지 않나요? 그래서 이런 UI를 사용했고, 또 에이블리에서 오늘 글의 요점인 QR 코드, 기기 환경 판별 아이디어를 가..

• format_list_bulleted Frontend
• · 2025. 10. 6.
• textsms

React 환경에서 웹 화면에 Modal 창 쉽게 적용하기

이 라이브러리를 만들기 전에 프로젝트를 할 때마다 매번 모달을 만들어서 했었어요. 근데 만들 때마다 너무 귀찮아서 '그냥 라이브러리로 만들어서 앞으로 있을 프로젝트에서는 쉽게 적용하자!' 란 생각으로 이 라이브러리를 만들게 됐습니다. 깃허브 레포지토리 주소https://github.com/nyeonseok/nyeonseok-modal 1. 설치먼저 이 라이브러리는 npm을 이용하여 다운받을 수 있습니다. 그리고 React 환경에서 사용할 수 있어요!# 프로젝트에 npm 패키지 설치npm install# nyeonseok-modal 라이브러리 설치npm install nyeonseok-modal 이미 프로젝트에 npm이 설치되어 있다면 2번 째 줄만 작성하시면 돼요. 2. Modal import필요한 라..

• format_list_bulleted 라이브러리
• · 2025. 9. 28.
• textsms