React Package 설치
Create React App 을 사용하여 React 프로젝트를 생성하고, React 프로젝트에 필요한 패키지를 설치하는 방법을 알아봅니다.
1. Create React App 이란?
Create React App은 React 프로젝트를 생성할 때 필요한 환경을 구축해주는 도구입니다.
장점
- 별도의 설정 없이 바로 React 프로젝트를 생성할 수 있습니다.
- 초기 개발 시간 단축, 개발 생산성 향상
- Babel, Webpack 같은 도구들을 별도로 설치할 필요가 없습니다.
- 프로젝트에 필요한 설정이 미리 적용되어 있고 패키지가 설치되어 있습니다.
단점
- 빌드 설정을 커스터마이징하기 어려움
- 리액트 앱 구조에 대해 이해하기 어려울 수 있음
- 원하지 않는 dependency가 설치될 수 있음
1. 작업환경 준비하기
- npm : https://www.npmjs.com/
- yarn : https://yarnpkg.com/
- Node.js
Webpack 과 Babel 같은 도구들은 자바스크립트 런타임인 Node.js 환경에서 만들어져있습니다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js 를 설치합니다.
https://nodejs.org/ko : LTS 버전으로 설치
- Homebrew
홈브루는 자유-오픈 소스 소프트웨어 패키지 관리 시스템의 하나로서 애플의 macOS 운영 체제의 소프트웨어 설치를 단순하게 만들어줍니다.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
- yarn
Yarn은 Node.js 자바스크립트 런타임 환경을 위해 페이스북이 2016년 개발한 소프트웨어 패키지 시스템이다.
brew install yarn
yarn add
npm install 로 설치
2. React 설치하기
설치하고 싶은 폴더에서 git bash or 터미널을 실행 후 아래 코드로 리액트를 설치합니다.
- 생성한 폴더에 설치
npx create-react-app ./
react-js
폴더 생성 후 설치
npx create-react-app react-js
- 업그레이드
npm i react@latest react-dom@latest
- typescript React 설치
npx create-react-app react-ts --template typescript
주의
첫 번째 줄의 ‘npx’는 실수가 아니며 npm 5.2+ 버전의 패키지 실행 도구입니다.
project-name 라는 디렉터리가 생기고 그 안에 리액트 프로젝트가 생성됩니다. 생성이 끝나면 cd 명령어를 사용하여 해당 디렉터리에 들어간 다음 yarn start 명령어를 입력해보세요 (yarn 이 없다면 npm start).
cd my-app
yarn start
3. create-react-app 구조
├─ my-app
├── node_modules
├── public
│ ├── index.html
│ ├── favicon.ico
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
├── package.json
└── README.md
- node_modules : 프로젝트에서 사용하는 패키지들이 설치되는 디렉터리(커밋 X)
- public : static 파일들이 위치하는 디렉터리
- src : 개발을 위해 작성하는 파일들이 위치하는 디렉터리 (js, jsx, css, scss, png 등)
- index.js :
- 리액트 프로젝트의 진입점
- App.js 를 불러와서 render
- index.html 의 root 에 App.js 를 렌더링
- App.js : 리액트 컴포넌트
- index.css : index.js 에서 사용하는 css
- index.js :
- package.json : 의존 모듈 정보를 json 형태로 저장하는 파일
3. React 수정
- src/App.js 수정
import React from 'react'
import './App.css'
function App() {
return (
<div className="App">
<h1>리액트 시작해봅시다.</h1>
</div>
)
}
export default App
3. React 배포
- 배포란 웹사이트를 실제 사용자가 사용할 수 있도록 하는 것을 말합니다.
- 빌드를 하면 파일이 작아지고, 따라서 사용자가 다운로드하는 시간이 줄어듭니다.
ctrl + C를 눌러 개발환경을 종료합니다.
npm run build
yarn build
npx serve -s build
Github Pages에 배포하거나 Netlify에 배포 방법
5. React 라이브러리 설치
- styled-reset
styled-reset은 CSS 스타일을 초기화하거나 재설정하는 데 사용되는 스타일 시트 라이브러리이다.
https://github.com/zacanger/styled-reset#readme
yarn add styled-reset
npm i styled-reset
- styled-components
styled-components는 CSS-in-JS 라이브러리로, 자바스크립트 파일 안에 스타일을 선언하는 방식으로 스타일을 관리할 수 있게 해준다.
https://styled-components.com/
yarn add styled-components
npm i styled-components
- react-sass
react-sass는 Sass를 사용할 수 있게 해주는 라이브러리이다.
https://github.com/sass/node-sass
yarn add node-sass
npm i node-sass
- emotion
emotion은 CSS-in-JS 라이브러리로, 자바스크립트 파일 안에 스타일을 선언하는 방식으로 스타일을 관리할 수 있게 해준다.
https://emotion.sh/docs/introduction
yarn add @emotion/react @emotion/styled
npm i @emotion/react @emotion/styled
- chakra
chakra는 개발자가 웹 응용 프로그램을 위해 액세스 가능하고 재사용 가능한 사용자 인터페이스 구성 요소를 빠르게 구축할 수 있도록 도와주는 React의 UI 구성 요소 라이브러리이다.
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
- Ant Design
Ant Design(앤트 디자인)은 중국의 개발자들이 개발한 UI 디자인 프레임워크로, React와 Angular 기반의 웹 애플리케이션을 위한 컴포넌트를 제공합니다.
yarn add antd
npm i antd
- React Icons
React Icons는 리액트용 아이콘 라이브러리로, 다양한 아이콘을 제공한다
https://react-icons.github.io/react-icons/
yarn add react-icons
npm i react-icons
- React Bootstrap
React Bootstrap은 리액트용 부트스트랩 라이브러리로, 부트스트랩의 컴포넌트를 리액트에서 사용할 수 있게 해준다
https://react-bootstrap.github.io/
yarn add react-bootstrap bootstrap
npm i react-bootstrap bootstrap
- Material UI
Material UI(머티어리얼 UI)는 React 기반의 웹 애플리케이션을 개발할 때 사용되는 사용자 인터페이스(UI) 프레임워크입니다.
이는 Google에서 개발한 Material Design을 기반으로 하고 있으며, React 컴포넌트를 사용하여 간편하게 재사용 가능한 UI 요소를 구축할 수 있도록 도와줍니다.
yarn add @material-ui/core
npm i @material-ui/core
- Semantic UI React
Semantic UI React는 React 프레임워크를 기반으로 하는 사용자 인터페이스(UI) 구축을 위한 라이브러리입니다. 이는 Semantic UI라는 CSS 프레임워크의 React 구현체로, 사용자가 웹 애플리케이션의 시각적 디자인을 쉽게 구축하고 사용할 수 있게 도와줍니다. 이 라이브러리는 반응형 디자인과 모바일 퍼스트 접근 방식을 채용하여 다양한 기기 및 화면 크기에서 일관된 사용자 경험을 제공합니다.
https://react.semantic-ui.com/
yarn add semantic-ui-react
npm i semantic-ui-react
- Grommet
Grommet은 React 기반의 웹 애플리케이션을 쉽게 개발하기 위한 UI 라이브러리 중 하나입니다. 이 라이브러리는 사용자 인터페이스(UI)를 구축하는 데 도움이 되는 다양한 컴포넌트와 디자인 패턴을 제공합니다. Grommet은 사용자가 시각적으로 매력적이고 기능적인 웹 애플리케이션을 만들 수 있도록 돕는 것이 목표입니다.
Grommet은 특히 반응형 디자인에 중점을 둔다는 특징이 있습니다. 즉, 다양한 디바이스 및 화면 크기에 대응하여 일관된 사용자 경험을 제공할 수 있도록 설계되었습니다.
yarn add grommet
npm i grommet
- Fluent UI
Fluent UI는 사용자 인터페이스(UI)를 설계하고 구현하기 위한 Microsoft의 디자인 시스템입니다. 이는 Microsoft의 제품과 서비스에서 일관된 디자인과 사용자 경험을 제공하도록 고안되었습니다. Fluent UI는 Windows, Office, Xbox, 및 기타 Microsoft 제품과 서비스에 걸쳐 일관된 디자인 원칙을 정의하고 있습니다.
https://developer.microsoft.com/ko-kr/fluentui#
yarn add @fluentui/react
npm i @fluentui/react
- Evergreen UI
Evergreen UI는 리액트용 UI 라이브러리로, 주로 특별한 스타일링이나 테마가 필요하지 않는 간단한 디자인에 중점을 둡니다. 따라서 Evergreen UI를 사용하면 빠르게 깔끔하고 간결한 UI를 개발할 수 있습니다.
https://evergreen.segment.com/
yarn add evergreen-ui
npm i evergreen-ui
- Rebass
Rebass는 간단하면서도 확장 가능한 디자인 컴포넌트를 제공하여 React 개발을 더 효율적으로 만들어줍니다. 이를 통해 개발자는 UI 요소를 쉽게 구성하고 스타일을 일관성 있게 적용할 수 있습니다.
yarn add rebass
npm i rebass
- React Responsive
React Responsive는 리액트용 반응형 디자인 라이브러리로, 반응형 웹을 쉽게 만들 수 있게 해준다
https://github.com/yocontra/react-responsive
yarn add react-responsive
npm i react-responsive
- React Toastify
React Toastify는 리액트용 토스트 메시지 라이브러리로, 토스트 메시지를 쉽게 만들 수 있게 해준다
https://fkhadra.github.io/react-toastify/introduction/
yarn add react-toastify
npm i react-toastify
- React Datepicker
React Datepicker는 리액트용 날짜 선택 라이브러리로, 날짜 선택을 쉽게 만들 수 있게 해준다
yarn add react-datepicker
npm i react-datepicker
- React Calendar
React Calendar는 리액트용 달력 라이브러리로, 달력을 쉽게 만들 수 있게 해준다
https://github.com/wojtekmaj/react-calendar#readme
yarn add react-calendar
npm i react-calendar
- React Hook Form
React Hook Form은 리액트용 폼 라이브러리로, 폼을 쉽게 만들 수 있게 해준다
yarn add react-hook-form
npm i react-hook-form
- React Router
React Router는 리액트용 라우터 라이브러리로, 페이지 이동을 쉽게 만들 수 있게 해준다
https://github.com/remix-run/react-router#readme
React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리!!
yarn add react-router-dom
//ts yarn add @types/react-router-dom
- React Query
React Query는 리액트용 상태 관리 라이브러리로, 서버 상태를 쉽게 관리할 수 있게 해준다
https://react-query.tanstack.com/
yarn add react-query
npm i react-query
- Zustand
Zustand는 리액트용 상태 관리 라이브러리로, 리덕스와 비슷한 기능을 제공하지만 코드가 훨씬 간결하다
https://github.com/pmndrs/zustand
yarn add zustand
npm i zustand
'Front > React' 카테고리의 다른 글
엘리먼트(Element) - React 배우기 (0) | 2023.10.07 |
---|---|
JSX - React 배우기 (0) | 2023.10.07 |
React란 무엇인가? - React 배우기 (1) | 2023.10.07 |
2. 작업환경 준비 (0) | 2021.05.19 |
01. 리액트는 어쩌다 만들어졌을까? (0) | 2021.05.19 |