끄적이는 개발노트

웹 혹은 앱을 개발하다보면 사용자의 행동에 대한 반응이 필요한 경우가 있다. 다들 한번쯤은 저장 버튼을 클릭했을 때 "저장 완료" 라던지 혹은 어떠한 이유로 버튼 기능이 실패했을 경우, "잠시 후에 다시 시도해 주세요." 같은 메세지를 본 적이 있을 것이다. 특히 앱에서 많이 이용되는데 요새는 웹에서도 모바일 뷰를 대다수 의식하고 개발하는 만큼 alert 대신에 toast 혹은 dialog를 많이 활용한다. Toast Message 역시 마찬가지로 react-toastify, react-hot-toast와 같이 굉장히 좋은 라이브러리가 있지만, 저번 Calendar와 마찬가지로 내가 구현하고자 하는 Toast Message는 팝업과 자동 삭제 기능만 있으면 되고 추후에 기능이 추가되도 문제가 없게끔 커스..

프로젝트를 진행하면서 스케줄 캘린더가 필요했다. 회사에서 재직할 때 만들었던 캘린더는 기본적인 view와 날짜 선택 이벤트 정도만 필요했기 때문에 라이브러리를 활용해서 구현했었다. react-day-picker, react-datepicker, react-calendar 등 정말 많은 날짜 및 캘린더 라이브러리가 존재한다. 하지만, react-native 프로젝트를 진행해서 출시해보기도 하고 유지보수를 경험해보면서도 느낀건 라이브러리를 기반으로 제작하면 불필요한 기능으로 용량을 잡아먹거나 추가 기능이나 디자인을 적용 및 변경하고자 할 때 어려움이 생기거나 한계가 뚜렷하다는 느낌을 받았다.(물론, 정말 좋은 라이브러리도 많고 프로젝트 요구기능에 적합하다면 좋은 선택인 경우도 굉장히 많다.) 따라서, 최근에..

웹 개발에서 모달창 구현을 직접 하거나 편리한 라이브러리는 대부분 상태관리와 함께 이루어진다.(본인 역시 react-modal을 그동안 사용해왔다.)const [isOpen, setIsOpen] = useState(false);const toggleModal = () => setIsOpen(!isOpen);const openModal = () => setIsOpen(true);const closeModal = () => setIsOpen(false);아마 대부분이 이런 기본 형태의 state를 활용했을 것이다. 이를 개발하다보면 필연적으로 마주치는 상황들이 몇가지 있는데 대표적으로 아래와 같이 있다.모달창이 열린 상황에서 새로고침을 하면 state로 관리하기 때문에 모달창이 닫힘뒤로가기 버튼을 누르면 이..

React에서 전역 상태 관리를 하는 방법에는 Redux, Recoil, Zustand 등과 같이 다양하고 편리한 라이브러리가 많다. 이 중에서 본인은 Redux와 Recoil만 사용해봤는데 정작 React에서 제공하는 내장 도구 Context API를 사용해본 적이 없었다. 이번에 사용법을 익힐 기회가 생겨서 정리한다. 1. Context APIContext API는 React에서 전역 상태를 관리하기 위한 내장 도구이다. 컴포넌트 트리 전체에 데이터를 전달할 수 있으며, props drilling을 피하기 위해 사용된다.다만, 공유하는 context가 변경되면 사용하는 모든 컴포넌트는 리렌더링되기 때문에, 상태의 목적과 용도에 따라 context를 잘나눠서 provider를 통해 필요한 컴포넌트에만..

기본적으로 Next.js에서는 next/font를 통해 기본 글꼴들을 제공해준다. 하지만 React-Native에서도 다뤘듯이 custom font를 적용하는 경우가 많기 때문에 방법을 정리한다. 1. font 파일 추가public/assets/fonts에 다운로드한 폰트를 추가한다. 2. layout 수정localfont를 사용하면 custom 폰트를 지정할 수 있다.// layout.tsximport type { Metadata } from "next";import localFont from "next/font/local";import "./globals.css";const gmarket = localFont({ src: [ { path: "../../public/assets/fo..

Next.js 에서 css를 다루는 방법에는 기본적인 built-in 방식과 Styled Component, TailwindCSS 방식이 대표적일 것이다.물론, Next.js에서는 기본적으로 create app을 할 때부터 TailwindCSS 적용 옵션을 설정하면 기본 세팅을 해줄 정도로 가장 편리하고 공식적으로 추천하는 방법이다. (본인 역시 TailwindCSS를 선호한다.) 하지만, Styled-Components 역시 아직까지 꽤나 사용되는 방법이기에 적용 방법을 정리해둔다. 1. 작동 방식Styled-Components는 css-in-js 방식으로 작동한다.CSS-in-JS?Javascript 코드 내에 css를 생성하는 로직이 담기는 방식이다.그렇기 때문에 변수에 접근이 가능하여 props와..