yarn add sass
yarn add styled-components
yarn add react-icons
yarn add styled-reset
npm i -g json-server
icons
npm i -g json-server
json-server --watch 파일.json --port 포트번호
json-server --watch db.json --port 4000
(에러 생기시면 npx json-server --watch db.json --port 4000 )
===========================================
보안문제는
+ CategoryInfo : 보안 오류: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
•
----------------------------------------------------------
※관리자권한으로 PowerShell 실행해야합니다.
명령어 다음과 같이 입력
ExecutionPolicy <-- 현재상태확인
Restricted <-- 모든 스크립트 막은 상태
Set-ExecutionPolicy Unrestricted
ExecutionPolicy <-- 현재상태확인
Unrestricted <-- 모든 스크립트 허용 상태.
============================================
method: GET , POST , PUT , DELETE
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify( )
GET :조회,
POST : 생성 ,
DELETE:삭제
PUT:수정
headers에는 메타정보
body에는 보내고 싶은 내용
status는 HTTP response Code를 담고 있다. 일반적으로 성공적이었다면 200이 떨어지게 됨
•
-------------------------------------------
router
SPA(Single Page Application) 싱글페이지라고 부르는 이유는 유저가 처음 접속했을때 구체적인 data를 제외한 정적파일을 모두 불러오기 때문
리액트 라우터로 페이지를 나누어 유저가 접속하는 url마다 다른 data를 보여줄 수 할수 있음
설치 : yarn add react-router-dom
설치한 라우터를 적용하기 위해서 index.js에서 BrowserRouter를 이용해 App을 감싸줌
BrowserRouter: HTML5의 history API를 활용하여 UI를 업데이트
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<App />
</BrowserRouter>
src -index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
src - App.js
import 컴포넌트 from './컴포넌트';
<Route path="주소" component={보여주고싶은 컴포넌트}>
=> 경로와 중복되기 때문에 exact 일치
Route : 어떤경로로 들어왔을때 어떤 컴포넌트를 보여주겠다.. ( 컴포넌트 보이는 영역)
예) <Route path="/" exact={true} component={Home} />
switch : 라우트들을 이 컴포넌트에 감싸면 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않음
<switch>
<Route path="/abc" component={Abc} />
<Route path="/abc/:name" component={Abc} />
</switch>
Link : Router의 주소를 바꿈 a 태그지만 새로고침 안됨
<Link to="/">홈</Link>
<Link to="/path주소">소개</Link>
<Link to="/about">소개</Link>
