프로그래밍 실습/React3 react-router-dom 적용 CRA로 만든 리액트 앱에 간단한 무료 테마를 적용해 보았다. https://mui.com/store/items/onepirate/ Onepirate - MUI Store An example landing and Sign Up page. mui.com 이 테마가 내가 하려는 프로젝트와 맞는것 같아 Onepirate로 결정했다. SignIn 페이지와 SignUp 페이지부터 붙였는데 url 매핑이 필요해서 react-router-dom을 이용해 url과 Component를 매핑해보겠다. 1. Routes 사용 먼저 컴포넌트를 소개하자면 Home("/"), SignIn("/sign-in"), SignUp("/sign-up") 이렇게 세가지 컴포넌트가 각 url와 매핑되어야 한다. 가장 간단한 방법은 그냥 Br.. 2023. 3. 3. 리액트 초보의 Redux Toolkit 적용기 리액트 프로젝트에서 가장 까다로웠던 부분이 전역적으로 상태를 관리하는 것이였다. 사용자 정보 같은 전역적으로 필요한 데이터들을 가장 최상위 컴포넌트에서 정의하고 자식 컴포넌트로 내려주는 형태로 개발 했었는데 프로젝트가 커지면서 유지보수가 매우 힘들었던 경험이 있다. 그래서 이번 프로젝트는 Redux를 적용 해보려고 한다. Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식 제공하는 개발도구이다. 리액트도 서툴고 타입스크립트도 서툴지만 아래 튜토리얼을 따라 천천히 적용해 보았다. https://redux.js.org/tutorials/typescript-quick-start TypeScript Quick Start | Redux - How to set up and us.. 2023. 2. 23. React 프로젝트 생성 토이 프로젝트를 진행하려고 오랜만에 React 프로젝트를 만들어 보았다! 1. node 설치 먼저 맞는 사양의 node를 설치한다. 그 다음 잘 설치되었는지 노드의 버전 확인! node --version https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. yarn 설치 개발에 yarn을 사용할 것이므로 yarn을 설치해주었다. npm install -g yarn yarn --version yarn 버전을 확인해보려고 yarn을 실행하면 이 시스템에서는 스크립트를 실행할 수 없으므로... 라는 오류가 뜬다. 시스템의 설정.. 2023. 2. 3. 이전 1 다음
