전체 글 검색 결과

해당 글 234건

[Legacy][React] 중요한 변수는 state로 관리하자 (useState)

[React] 중요한 변수는 state로 관리하자 (useState) 이전 게시글에서 이어지는 내용입니다. 이전 게시글을 보지 않았다면 확인하세요. 이동하기 이번 게시글에서는 React에서 중요한 변수는 state로 관리하는 방법을 알아보겠습니다. 실습을 진행하다 아래와 같은 에러가 표시되는 경우 참고하세요. 에러 해결하기 혹시 실습을 진행하는 데 아래 에러가 표시되면 해당 package를 설치해주어야 합니다. 설치 명령어 : yarn add @emotion/react or npm install @emotion/react 설치 명령어 : yarn add @emotion/styled or npm install @emotion/styled useState react에서 중요한 변수는 state로 관리하곤 합..
기타 (+ Legacy)/Legacy 2021. 11. 5. 07:00

[Legacy][React] React 꾸미기 (material-ui 연동)

[React] React 꾸미기 (material-ui 연동) 이전 게시글에서 이어지는 내용입니다. 이전 게시글을 보지 않았다면 확인하세요. 이동하기 이번 게시글에서는 React 프로젝트에 mateiral-ui를 적용하는 방법을 알아보겠습니다. material-ui 적용하기 mateiral-ui를 사용하는 이유는 간단합니다. 내가 필요한 컴포넌트가 있는데 다른 사람이 해당 컴포넌트를 이쁘게 만들었다면 그걸 사용하는게 개발 속도가 훨씬 빠릅니다. 이 이유로 mateiral-ui를 사용하고 material-ui뿐만이 아니라 다른 것들도 많으니 이후 프로젝트 진행 시 자신에게 맞는 것을 사용하면 좋을 것 같습니다. material-ui 설치방법은 아주 간단합니다. 명령어 : yarn add @mui/mater..
기타 (+ Legacy)/Legacy 2021. 11. 4. 07:06

[Legacy][React] CRA를 이용하여 React 프로젝트 생성하기 및 기본 설정 (절대경로)

[React] CRA를 이용하여 React 프로젝트 생성하기 및 기본 설정 (절대경로) 이전 게시글에서 이어지는 내용입니다. 이전 게시글을 보지 않았다면 확인하세요. 이동하기 이번 게시글에서는 CRA(create-react-app)을 통해 react 프로젝트를 생성하고 가장 기본적인 설정 하는 방법을 알아보겠습니다. CRA (create-react-app) 우선 CRA 명령어를 사용하기 전, 항상 최신 CRA를 사용하고 싶은 경우 npx가 필요합니다. npx가 설치되어 있지 않은 경우 설치를 해주세요. 명령어 : yarn global add npx or npm install npx -g 설치가 다 되었다면 프로젝트를 생성할 폴더로 이동한 후 명령어 npx create-react-app 프로젝트명 을 입력..
기타 (+ Legacy)/Legacy 2021. 11. 3. 07:00

[Legacy][React] React 뿌시기

[React] React 뿌시기 이전에 React에 대해 간단히 소개하면서 useState, useRef … 등 까지 작성했는데, 내가 적은 글을 내가 봐도 이해를 못 할 것 같고 아는 것과 설명하는 것에 대한 차이가 심하다는 것을 깨닫게 되었습니다. 이번엔 제대로 오래 걸리더라도 글을 이해하기 쉽게 작성하여 React에 대해 소개해보겠습니다. 우선 React에 대해 알아볼 순서는 아래 목차와 같습니다. React 뿌시기 목차 CRA를 이용하여 React 프로젝트 생성하기 및 기본 설정 (절대경로) React 꾸미기 (material-ui 연동) 중요한 변수는 state로 관리하자 (useState) 왜 값이 변경 안되지? - 1 (immutable 불변성) (useState) 왜 값이 변경 안되지? -..
기타 (+ Legacy)/Legacy 2021. 11. 2. 07:59

React에서 금액 입력하기

[React] React에서 금액 입력하기 개발하다보면 금액 입력할 때가 있다. 이때 1000자리마다 ,를 입력해주어야 하는데 이게 여간 귀찮은 일이 아니다. 이럴 때 빨리 해결하는 방법이 만들어진 npm package를 사용하는 것이다. 이번 시간에는 react-number-format package를 설치하여 NumberFormat 컴포넌트를 사용하여 금액을 입력받아보자. 우선 해당 npm 모듈을 설치하자. 명령어 : yarn add react-number-format or npm install react-number-format 해당 package만 설치하였으면 사실상 끝났다. 코드는 아래 참고해보자. import NumberFormat from "react-number-format"; import..
기타 (+ Legacy)/Legacy 2021. 11. 1. 07:22