Frontend

Frontend

Next.js에서 recoil-persist 사용하기

Recoil이란? Recoil A state management library for React. recoiljs.org Recoil은 리액트를 위한 상태관리 라이브러리이다. NPM Trends를 살펴봤을 때 (2023.07 기준) 다른 라이브러리들에 비해 다운로드 수가 다소 낮은 수준이지만, 그럼에도 불구하고 편리한 사용성으로 적지 않은 관심을 받고 있는 라이브러리이다. 이번 글은 Recoil을 소개하는 글이 아니니 자세한 설명은 생략하겠다. Next.js와 Recoil Next.js와 Recoil 라이브러리 자체는 잘 어울리는 편이다. Magic의 영역이 다소 있지만 사용법 자체가 워낙 직관적이고, Next.js에서의 일반적인 개발 흐름에 잘 맞는다. SSR 환경에서도 잘 동작하고... 그런데 만약에..

Frontend

Next.js SSR 환경에서 Mantine 사용하기

Mantine You've submitted a pull request Fix incorrect notification message (#187) 34 minutes ago mantine.dev Mantine이란? Mantine은 React에서 사용할 수 있는 UI Component 라이브러리이다. 2023년 7월 기준 v6까지 출시되었으며, 지속적으로 업데이트되고 있다. Chakra UI와 컨셉이 굉장히 유사한데, 깔끔하고 직관적인 디자인에 풍부한 컴포넌트, 다양하고 유용한 훅 제공 등, 단순 UI 컴포넌트뿐 아니라 종합 라이브러리 역할도 겸하는 것 같다. 여러 프레임워크/라이브러리들을 지원하고 있고, 최근 많이 사용되는 Next.js 환경에서 Mantine을 사용하면서 겪은 Layout Shift 이..

Frontend

Cloudflare Pages는 게임 체인져가 될 수 있을까?

JAM 스택의 웹앱을 호스팅해주는 PaaS(Platform as a Service)가 여럿 존재한다. Netlify, Vercel, Github Pages 등... 여기에 Cloudflare Pages가 도전장을 내밀고 있는 추세이다. 클라우드플레어가 보유하고 있는 인프라와 네트워크가 주무기인데, 과연 Cloudflare는 기존의 벽을 넘어설 수 있을까? Cloudflare 공식 홈페이지에 올라온 바에 따르면 빌드와 배포가 빠르다는 것을 전면에 내세우고 있다. 또 기존에 클라우드플레어가 보유 중인 edge network의 퍼포먼스를 온전히 활용할 수 있다는 점과, 서버리스 플랫폼인 Cloudflare Workers를 이용해 풀스택 서비스를 만들어낼 수 있다는 점도 눈에 띈다. 직접 Cloudflare P..

Frontend

[해결] 2022-04-03 CRA로 Chakra UI 매뉴얼 세팅했을 때 오류 발생하는 이슈

CRA with NPM/TypeScript failing · Issue #5804 · chakra-ui/chakra-ui Description When I run the "TypeScript using npm" command found here I am getting errors in my terminal and the command exits before completing. Link to Reproduction This happens in the t... github.com Cra template project can't work · Issue #5803 · chakra-ui/chakra-ui Description Can't run the cra typescript template, Steps to ..

Frontend

Chakra UI 간단 사용기

이번에 '포도당 노래책' 프로젝트를 진행하며 Chakra UI를 처음 사용해보았다. 이전에 대학생 개발자 단톡방에서 React에서 사용 가능한 UI Library 추천을 받았었는데, 그때 추천받았던 Chakra UI가 상당히 깔끔해서 마음에 들었다. Material UI와 Ant Design도 간략히 사용해봤었는데, 개인적으로 Charka UI의 디자인 스타일이 더 좋아서 이번 기회에 사용해보기로 했다. 1. 설치 GitHub - chakra-ui/chakra-ui: ⚡️ Simple, Modular & Accessible UI Components for your React Applications ⚡️ Simple, Modular & Accessible UI Components for your React..

HAENU
'Frontend' 카테고리의 글 목록