[Node.js 설치]
안깔아도되는데 까는 이유
프론트들이 뷰리액트앵귤러할때 쓴다?
안ㅅ까는 경우 cri말고 cdn?일때
LTS 정식버전 안정성 신뢰도 문제없음
Current 개발중 버그많음
버전은 짝수버전 사용하는것이 좋음 안정적
npm 프론트들의 메이븐레포지토리
cd /usr/local/bin
node -v
npm -v
npx -v
엥 22다운했는데 왜 23이지..?
Front Framework : Vue, React
- CDN(Web PC & Mobile), CLI(Mobile Web, 웹앱)
- CLI (Node.js 무조건 설치) => 서버에도 깔아줘야함
React, Vue 프로젝트를 생성시 라이브러리를 자동으로 설치
npm 설치 - 개발 pc에 전역 패키지 설치
mpx 설치 - 개발 pc에 부분(Project 부분) 패키지 설치
- CDN = Jquery.js와 동일하게 엔진 HTML 장착
Reactjs =>React + RestAPI
[react app 만들기]
STS4사용안하고 VSCode사용 (자동완성됨)
실무에서 이렇게 안깖
어디에깔지 지정해주고 깔아야함
npx create-react-app react_web
y
npm install -g npm@11.3.0
cd /usr/local/bin
cd react_web
npm start
http://localhost:3000 했을때 리액트가 빙글빙글 돌아가야함
node.js 기본포트 3000 서버에 등록해야함
컨트롤c 하면 종료됨
[vscode로 리액트 폴더 열기 - MAC]
커맨드 쉬프트 .
으로 숨겨진 파일 보이게 만들고
react_web 열기
index.html
View 역할
<html lang="ko">
한글로 바꾸기
주석 다 지우기
<noscript> => 스크립트를 못쓴다는뜻 <script>넣어봤자 작동안함
<noscript>줄 지우기 => 뭔말하는지 알았으니 이제 지우는거
body안에있는 root div는 React 화면을 출력하는 메인 div => view
타이틀 변경 React 기초 Application 사용법
바꾸면 실시간으로 변경됨
오타내면 흰화면만 보임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React 기초 Application 사용법</title>
</head>
<body>
<!-- React 화면을 출력하는 메인 div -->
<div id="root">안뇽하세욤</div>
<div id="webmain"></div>
</body>
</html>
5App.js
Model 역할
import logo from './logo.svg'; //src라는 폴더에 logo.svg라는 이미지를 import
import logo from './logo.png';
import './App.css';
//className : HTML에서 class 속성과 같음 react에서 className으로 사용
function App() {
return (
<div className="App">
<div className="box"></div>
</div>
);
}
export default App;
Index.js
Controller역할
주석 지우기
import React from 'react'; //Controller 어노테이션 역할 => 안쓰면 리액트못씀
import ReactDOM from 'react-dom/client'; //html, xml 출력해주는 역할
import './index.css'; //css파일 import
import App from './App'; //Module 로드
import reportWebVitals from './reportWebVitals'; //주석 달아도 작동함 풀어두는 경우는 성능 측정할 때 사용 (버그 및 데이터 상황의 리포트 확인)
import React from 'react'; //react 라이브러리 선언
import ReactDOM from 'react-dom/client'; //html, xml 출력해주는 역할
import './index.css'; //css파일 import
import App from './App'; //Module 로드
import reportWebVitals from './reportWebVitals'; //주석 달아도 작동함 풀어두는 경우는 성능 측정할 때 사용 (버그 및 데이터 상황에 대한 리포트 확인)
const root = ReactDOM.createRoot(document.getElementById('webmain'));
//render : Controller에서 해당 라이브러리에 대한 태그기준으로 Model의 역할을 함
root.render(
/*
<App /> : import App from './App'; 에서 온거
import 이름을 태그명으로 지정
*/
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals(); //안쓸거면 주석 달아도 됨
App.css
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.box{
width: 100px;
height: 100px;
background-color: #61dafb;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
이런시발 이미지 파일 넣으려다가 권한땜에 vscode로 드래그드랍안되길래
제미나이한테 물어보고 명령어 알려줘서 썼는데 react_web폴더가 다 삭제됨 엌ㅋㅋ
그냥 finder로 경로에 드래그드랍하자! ^----^개꿀잼이네
그리고 뭐 할때마다 권한때문에 안됨
cd /usr/local/bin
sudo chown -R $USER './react_web'
이거로 유저에게 권한 부여해줌
이제 잘된다