리액트 상태 관리는 꽤나 중요한 부분이다. 리액트 상태 관리를 어떻게 하냐에 따라 의미 없는 리렌더 등 성능 이슈가 생길 수 있고 어떤 상태 라이브러리를 쓰며 어떤 구조로 상태를 설계해서 다루냐에 따라서 유지보수 관점에서 코드의 라이프 사이클이 크게 짧아질 수도 길어질 수도 있다. 상태 설계는 만드는 개발자마다 중요하게 생각하는 지점이 갈릴 수도 있다. 한번 설계되면 프로젝트를 새로 만들지 않는 이상 고치기가 쉽지 않아서 깊은 고려를 하고 시작해야 되는 부분이다. 전역 상태 라이브러리로 Redux 가 매우 많이 쓰이고 있고, 많은 프로젝트에서 전역 상태가 무분별하게 사용되고 있다. 점차 전역 상태 라이브러리를 안쓰는게 좋다는 흐름이 생기고 있고, 리액트 팀에서는 Recoil 을 만들어서 기존의 전역 상태..

리액트 UI 라이브러리를 고려하던 중 MUI의 존재를 알게 되었고 나는 Material UI를 선택했다. 리액트 UI 라이브러리라고 하면 대표적으로 세가지를 꼽을 수 있겠다. antd, react-bootstrap, material-ui(현재는 mui) 최근 2년간의 그래프를 보면 위와 같다. antd와 react-bootstrap은 꾸준한 인기를 보여주고, material-ui는 저조한 성적을 보이다가 MUIv5가 릴리즈 되면서 엄청난 속도로 상승하고 있다. 사실 저 상승세를 보고 마음이 움직인 것도 있다 ㅎㅎ (그만큼 레퍼런스가 없습니다...) MUI는 구글의 디자인 철학인 Material Design을 구현한 자바스크립트 라이브러리이다. materialUI라고 불리던 MUI는 5버전으로 리뉴얼 되면..

서비스 개발을 하면서 디자이너와 의견을 맞추고 소통하기 위해 방법을 찾아봤다. 사실 많이 미숙해서 css부분을 좀 쉽게 가져갈 수 있는게 없을까 하면서 찾았던게 구글의 MUI 프레임워크다. 디자인 시스템? 그런거 잘 모르겠고, 일단 편한거부터 찾자! 하며 MUI의 공식문서를 보게 되었다. 처음 공식문서를 들어갔을때 방대한 양에 놀라기도 했고, 이런것도 해줘? 라며 놀라기도 했다. 그냥 기본적으로 제공해주는 것들을 다 가져다 쓰고싶은 심정이었다. 하지만, 기본 제공해주는건 디자이너 눈에는 와 저런것도 되면, 이것도 되겠네? 가 됐다 ㅎㅎ.. 그래서 MUI를 또 열심히 공부하게 됐고, 기본부터 정리하자는 생각에 구글링 하던 도중 디자인 시스템이란것을 알게 됐다. Design System? 2014년 6월 구..

React hook Form이란 form의 validation을 도와주는 라이브러리이다. 기본적으로 uncontrolled component를 베이스로 지원하고, controlled component에 대한 지원도 하고있다. ref를 기반으로 하기 때문에 다른 UI라이브러리와 호환이 잘 된다. useForm form을 만들기 위해서는 useForm을 사용해야한다. useForm에는 form을 만들기 위한 다양한 옵션이 있는데, 아래와 같다. const { register } = useForm({ mode: 'onSubmit', reValidateMode: 'onChange', defaultValues: {}, resolver: undefined, context: undefined, criteriaMode..

리액트로 개발을 진행하던 중 redux가 좀 복잡하고 귀찮아서 그냥 context도 써보고 상태관리에 대해 이것 저것 많이 알아보았다. 그러던중 Recoil이라는 오직 리액트를 위한 상태관리 라이브러리가 있는것을 알게 됐다. Recoil이란? 페이스북에서 개발한 새로운 상태관리 라이브러리. React에서는 자체적으로 상태관리 할 수 있는 Hooks나 ContextAPI를 제공하지만 사용하는데에 있어서 불편한점이 많다. 컴포넌트의 상태는 공통된 상위요소에서 공유될 수 있지만, 많은 컴포넌트가 상위-하위로 연결되어있을 때 이 거대한 트리가 다시 렌더링 되는 현상이 일어난다. Context는 단일 값만 저장할 수 있고, 여러 값들의 집합을 담을 수 없다. 이러한 특성들이 트리의 최상단으로 부터 최하단까지의 코..

이번에는 cli가 아닌 Amplify console에서 백엔드 환경을 연결해보자. 1. Amplify Studio 시작 Get Start를 누르면 몇 초 후 아래와 같은 화면이 나온다 2. authentication service 만들기 인증 부분을 구현하기 위해 Authentication 탭 클릭 인증 방식에 대한 설정을 할 수 있다. email을 id로 할 것인지, username을 id로 할 것인지 비밀번호 구성은 어떻게 할 것인지 등 설정을 해 준뒤 Deply이 버튼을 누르고 배포가 완료되면 아래 그림처럼 가이드가 나온다. (Deployment successful - click for next steps클릭) 복사해서 Amplify Cli로 작업을 해보자. 아래처럼 설정을 완료한 다음 amplif..

amplify에 vite로 번들링한 리액트 앱을 배포하다가 자꾸 에러가 나서 처음부터 천천히 다시 해보기로 했다. 1. vite-react 만들기 이번엔 yarn으로 만들어보자 yarn create vite amplify-react-vite 2. amplify로 배포하기 이번에는 백엔드 환경 설정하지 않고 바로 배포해보자. https://wonillism.tistory.com/274 AWS Amplify + React 튜토리얼(1) 1. AWS 계정 만들기 AWS 계정 만드는 방법은 생략. 프로젝트 진행은 루트 계정이 아닌 IAM 계정으로 진행하는 것을 권장한다. 2. Amplify CLI 설치 우선은 amplify cli를 전역적으로 설치해주고, amplfiy 설정 wonillism.tistory.co..

이번에는 AWS Amplify로 인증부분을 연결해보자. 1. authentication service 만들기 amplify add auth 진행하던 프로젝트에서 위 명령어를 입력 가이드에따라 자신이 원하는 방식으로 설정하면 amplify에서 자동으로 aws cognito와 연결해준다. amplify push 추가한 서비스를 배포하기위해 위 명령을 입력하면 인증 서비스가 배포된다. amplify console 프로젝트에 배포된 서비스를 확인하려면 위 명령어를 입력하면된다. amplify status cli에서 연결된 서비스를 확인하려면 위 명령어를 입력 2. 로그인 UI 생성 우선 최초에 프로젝트에 만들어진 필요없는 파일들을 지우자. npm install aws-amplify @aws-amplify/ui-..