개발자꿈나무
[자판기 관리 프로젝트] 프로젝트 생성 및 bootstrap 사용 본문
서론
이제 리액트의 가장 기본이 되는 개념에 대한 설명은 끝났고 이제 본격적으로 쇼핑몰 프로젝트를 진행해볼 예정이다. 오늘은 프로젝트를 생성하고 리액트에서 부트스트랩을 사용하는 방법에 대해 배웠다.
본론
새로운 프로젝트 생성
리액트 폴더에서 터미널을 열고 리액트 프로젝트 생성 명령어를 입력해준다.
npx create-react-app [프로젝트명]
이후 VScode를 통해 폴더를 열어주고 터미널을 열어 npm start를 눌러 제대로 프로젝트가 실행되는지 확인해본다.
깃허브에 새로운 레포지토리를 생성하여 프로젝트를 연결해주고 혼자 작업하지만 버전 관리를 더 효율적으로 하기위해 develop 브랜치를 하나 파서 develop 브랜치에서 작업을 진행할 것이다.
부트스트랩 이용하기
html, css를 하나하나 쳐서 화면을 구성하기 힘들기 때문에 bootstrap 라이브러리를 이용해보도록 하겠다. 예전 팀프로젝트를 진행할 때 부트스트랩을 이용해서 화면을 구성했었는데 react-bootstrap이라는 라이브러리가 있다는건 처음 알았다.
Get started를 누르면 설치 명령어가 뜨는데 해당 명령어를 터미널에 입력해주면 된다.
npm install react-bootstrap bootstrap
그리고 어떤 특정 스타일은 bootstrap CSS 파일을 요구하는 경우가 있으므로 CSS파일을 index.js 안에 적어주거나 index.html <head> 태그 안에 복사해주면 된다.
리액트-부트스트랩을 사용하려면 해당 사이트 들어가서 필요한 예제코드를 복붙해준다. 예를 들어 버튼을 하나 입력한다고 가정했을 때 예제코드를 그대로 복사해준다.
import Button from 'react-bootstrap/Button';
function Shop() {
return (
<>
<Button variant="primary">Primary</Button>
</>
);
}
export default Shop;
위에 대문자로 표현된 부분들은 컴포넌트이다. 해당 부분을 사용하려면 컴포넌트들을 Import 해줘야 한다.
'React' 카테고리의 다른 글
| [자판기 관리 프로젝트] 메인 화면 레이아웃 설정, 이미지 추가 (2) | 2024.10.01 |
|---|---|
| 11. class 이용 (2) | 2024.09.23 |
| 10. Input 기능 다루기 (4) | 2024.09.19 |
| 09. props 기본개념 (2) | 2024.09.14 |
| 08. 반복문 쓰기 (3) | 2024.09.12 |
