- 프로젝트 환경
- 우분투 20.04
- node 16.13.2
- css 잘 몰라요... 이해해 주세요
- github link
GitHub - ladianchad/react_ui_study
Contribute to ladianchad/react_ui_study development by creating an account on GitHub.
github.com
React란?
간단히 말해서 UI만드는 framework다. fackebook에서 만들었으며, single page application이나 mobile application을 개발할 때 사용할 수 있다.
현재 웹/앱의 View를 만들때 Vue와 더불어서 가장 인기있다.
환경 세팅
React를 사용하기 위해선 일단 Node.js가 깔려있어야 하니깐 다음과 같이 설치해 준다.
- Node.js 홈페이지에서 lts 버전 확인
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
- apt에 package 등록
sudo curl -sL <https://deb.nodesource.com/setup_{LTS_VERSION}.x> | sudo -E bash -
- node install
sudo apt-get install -y nodejs
- node , npm, npx version 확인
node -v
npm -v
npx -v
- react package 생성
npx create-react-app {PACKAGE_NAME}
이렇게 생성하면 {PACKAGE_NAME} dir이 만들어 졌을 것이다. 여기서 react가 기본으로 만들어주는 화면이 있는데, 실행 방법은 다음과 같다.
cd ~/{your project}/
npm start
정상 실행시 자동으로 브라우저가 켜지며 다음과 같이 화면이 나온다.
이제 잘 작동하는 걸 확인했으니 필요 없는 기본 요소들을 지운다.
- 필요 없는것
- plublic
- favicon.ico
- logo*
- manifest.json
- robots.txt
- src
- logo.svg
- plublic
그리고 파일들을 다음과 같이 수정해 준다.
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React Study</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100vw;
height: 100vh;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
#root{
width: 100%,
height: 100%
}- App.js
import './App.css';
function App() {
return (
<div className="App">
Hello World!!
</div>
);
}
export default App;
- App.css
.App {
}
수정이 끝나면 localhost:3000의 화면은 다음과 같이 바뀌어 있다.
'웹' 카테고리의 다른 글
| React UI 만들기 (3) : AWS Amplify로 배포 (0) | 2022.02.17 |
|---|---|
| React UI 만들기 (2) : Component, MainContainer 만들기 (0) | 2022.02.17 |
| Spring + Kotlin API Server 만들기 (7) : 간단한 Page추가, CSR & SSR (0) | 2022.02.16 |
| Spring + Kotlin API Server 만들기 (6) : AWS EB + github action으로 CI/CD 구축 (0) | 2022.02.15 |
| Spring + Kotlin API Server 만들기 (4) : Service , TDD (0) | 2022.02.15 |
