오전
shopping-mall
설치
console
mkdir shopping mall
npx create-react-app shopping-mall
또는
cd .\shopping-mall\
npx create-react-app .
npm install bootstrap bootstrap
yarn add react-bootstrap bootstrap
리엑트 부트 스트랩
!! 일반 부트스트랩과의 차이
class사용시에는 reactstrap
함수형과 hook을 사용시에는 react-bootstrap을 사용
Stackoverflow 답변
App.js or index.js 임포트
import {Button,Navbar,Container} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';또는
index.html 임포트
//<head>태그사이에 cdn삽입
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>이미지 삽입방법(권장)
import Name from './background.jpg'
<div className='main-img'
style={{backgroundImage:'url(' +bgImg +')'}} ></div>데이터 처리
data2.json(key-value타입으로 작성되어있음)
-> export default [~내용~]; 형태로 data.js로 저장,
-> App.js에서 import Data from './data.js' 추가
-> let [shrit, setShrit] = useState(Data);으로 사용
//data.js
let a = [
{
"id" : 3,
"title" : "Flowey",
"content" : "only 5 inches",
"price" : 120000
},
{
"id" : 4,
"title" : "Baby shirt",
"content" : "for less than 6",
"price" : 120000
},
{
"id" : 5,
"title" : "Baby Shirt",
"content" : "Born in France",
"price" : 130000
}
];
//App.js
let [shrit, setShrit] = useState(Data);
<h4>{shrit[1].title}</h4>
<p>{shrit[1].content}</p>!! 응용
//app.js
function App() {
let [shrit, setShrit] = useState(Data);
return (
<div className="App">
<div class="container">
<div class="row">
<Card shrit={shrit}></Card>
<Card2 shrit={shrit}></Card2>
<Card3 shrit={shrit}></Card3>
</div>
</div>
</div>
);
}
//하위 component
function Card(props) {
return(
<div class="col-md-4">
<img src="https://raw.githubusercontent.com/ai-edu-pro/busan/main/t1.jpg" width="80%" />
<h4>{props.shrit[0].title}</h4>
<p>{props.shrit[0].content}</p>
<p>{props.shrit[0].price}</p>
</div>
);
}
function Card2(props) {
return(
<div class="col-md-4">
<img src="https://raw.githubusercontent.com/ai-edu-pro/busan/main/t2.jpg" width="80%" />
<h4>{props.shrit[1].title}</h4>
<p>{props.shrit[1].content}</p>
<p>{props.shrit[1].price}</p>
</div>
);
}
결과 : 각 상품별 이름,내용,가격 출력됨
이미지 반복의 경우
//app.js
<div class="container">
<div class="row">
{/* 배열데이터.map( ()=>{} ) */}
{
shrits.map((a, i)=>{
return <Card shrits={shrits[i]} i={i} key={i} />
})
}
</div>
// component '문자'+변수+'문자'
function Card(props) {
return(
<div class="col-md-4">
<img src={
'https://raw.githubusercontent.com/ai-edu-pro/busan/main/t'
+ (props.i + 1)
+ '.jpg'} width="80%" />
<h4>{props.shrits.title}</h4>
<p>{props.shrits.content}</p>
<p>{props.shrits.price}</p>
</div>
);
}
오후
React Router (리액트 라우터) 실습
(페이지 이동하기 : 교재 320p~345~354p)
라우팅이란?
웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것
싱글 페이지 애플리케이션으로 구성되어있다.
기술적으로는 한 페이지만 존재하는 것이지만, 사용자가 경험하기에는 여러 페이지가 존재하는 것 처럼 느낄 수 있다.
설치
npm install react-router-dom@6임포트
index.js
import {BrowserRouter} from "react-router-dom";
이후 하단에 `<App/>`을 브라우저로 감싸준다
<BrowserRouter>
<App />
</BrowserRouter>app.js
import { Route,Routes, Link } from 'react-router-dom'페이지 컴포넌트 만들기
src/pages/Home.js
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>가장 먼저 보여지는 페이지입니다.</p>
</div>
);
};
export default Home;src/pages/About.js
const About = () => {
return (
<div>
<h1>소개</h1>
<p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
</div>
);
};
export default About;Route 작성
Route
<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />예시
src/App.js
import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
const App = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
};
export default App;결과
Link컴포넌트로 페이지 이동
link
<Link to="경로">링크 이름</Link>src/pages/Home.js
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>가장 먼저 보여지는 페이지입니다.</p>
<Link to="/about">소개</Link>
</div>
);
};
export default Home;결과
URL 파라미터와 쿼리스트링
예시 프로필 정보들을 key-value 형태로 저장, 존재하지않으면 '존재하지 않는 프로필입니다'라고 보여준다.
URL 파라미터는 /profiles/:username 과 같이 경로에 : 를 사용하여 설정, 만약 URL 파라미터가 여러개인 경우엔 /profiles/:username/:field 와 같은 형태로 설정한다.
src/pages/Profile.js
import { useParams } from 'react-router-dom';
const data = {
velopert: {
name: '김민준',
description: '리액트를 좋아하는 개발자',
},
gildong: {
name: '홍길동',
description: '고전 소설 홍길동전의 주인공',
},
};
const Profile = () => {
const params = useParams();
const profile = data[params.username];
return (
<div>
<h1>사용자 프로필</h1>
{profile ? (
<div>
<h2>{profile.name}</h2>
<p>{profile.description}</p>
</div>
) : (
<p>존재하지 않는 프로필입니다.</p>
)}
</div>
);
};
export default Profile;src/App.js
import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import Profile from './pages/Profile';
const App = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/profiles/:username" element={<Profile />} />
</Routes>
);
};
export default App;src/pages/Home.js
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>가장 먼저 보여지는 페이지입니다.</p>
<ul>
<li>
<Link to="/about">소개</Link>
</li>
<li>
<Link to="/profiles/velopert">velopert의 프로필</Link>
</li>
<li>
<Link to="/profiles/gildong">gildong의 프로필</Link>
</li>
<li>
<Link to="/profiles/void">존재하지 않는 프로필</Link>
</li>
</ul>
</div>
);
};
export default Home;결과
쿼리스트링
아래서 useLocation 이라는 훅은 location 객체를 반환하며, 페이지의 정보를 지니고 있다.
pathname: 현재 주소의 경로 (쿼리스트링 제외)
search: 맨 앞의 ? 문자 포함한 쿼리스트링 값
hash: 주소의 # 문자열 뒤의 값 (주로 History API 가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용합니다.)
state: 페이지로 이동할때 임의로 넣을 수 있는 상태 값
key: location 객체의 고유 값, 초기에는 default 이며 페이지가 변경될때마다 고유의 값이 생성됨
src/pages/About.js
import { useLocation } from 'react-router-dom';
const About = () => {
const location = useLocation();
return (
<div>
<h1>소개</h1>
<p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>
<p>쿼리스트링: {location.search}</p>
</div>
);
};
export default About;key-value 로 파싱해야한다면 쉽게 해줄 도구
useSearchParams
중첩된 라우트
// 이렇게 따로 쓰는것보다
<Route path='/about' element={<About />} />
<Route path='/about/emp' element={<About />} />
<Route path='/about/location' element={<About />} />// 이렇게 태그 아래에 넣는게 url 매핑이 수월하다
<Route path='/about' element={<About />} >
<Route path='/emp' element={<About />} />
<Route path='/location' element={<About />} />
</Route>
이런식으로 게시글 목록이 있고, 게시글이 있는 구성에서 게시글의 하단에 목록을 보여줘야한다면?
위의 예제와 같이 App.js의 라우터를 수정해주고
<Route path="/articles" element={<Articles />}>
<Route path=":id" element={<Article />} />
</Route>그 다음에는 Articles 컴포넌트에서 리액트 라우터에서 제공하는 Outlet 이라는 컴포넌트를 사용해주어야 한다
상위인 src/pages/Articles.js 에
import { Link, Outlet } from 'react-router-dom'; 처럼
Outlet을 적용시켜주면 하위인 게시글 1,2,3에 중첩되어 보이게 된다.
useNavigate
cart.js , about.js 컴포넌트 생성 후, App.js에 임포트하면
navigate('/cart') 링크형태로 사용가능
NotFound 페이지 만들기
src/pages/NotFound.js
const NotFound = () => {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 64,
position: 'absolute',
width: '100%',
height: '100%',
}}
>
404
</div>
);
};
export default NotFound;src/app.js에 추가
<Route path="*" element={<NotFound />} />stream
스트림(stream) 공부
스트림은 선언, 가공, 반환 세 부분으로 이뤄지는데
방법은 차례대로 알아보자
선언
Stream<데이터타입> stream명 = Arrays.stream(배열명);
Stream<데이터타입> stream명 = 리스트명.stream();
Stream<데이터타입> stream명 = Stream.of('값', '값'....);
가공
.boxed()
Int, Long, Double 배열로 Stream을 만들었을 경우
각종 메소드를 사용하기 위해 사용
처음에는 붙이지 않고 쓰다가
특정 메소드가 안된다 싶으면 붙이는 식으로 사용하면 된다
- 컬렉션(List, Set, Map) 스트림 에서는 해당 메소드를 사용하지 않는다!!!
.count()
배열, 컬렉션 크기 확인
.sorted()
정렬
.sorted(Comparator.reverseOrder())
역정렬
.findFirst()
스트림의 처음 값 가져오기
.skip(배열크기 - 1).findFirst()
스트림의 마지막 값 가져오기
.skip(값)
값의 인덱스까지 생략하고 나머지를 가져옴
.limit(값)
값의 인덱스까지 가져옴
.distinct()
중복 생략
.max(데이터타입::compare)
최대값
.min(데이터타입::compare)
최소값
.average()
평균
- 배열일 경우에는 바로 사용 가능하지만
list, set, map의 경우에는 mapToDouble()을 이용해
한번 바꿔준 후 사용해야 함 하단 예제 코드 참고
.sum()
합계
- average와 동일하므로
list, set, map으로 합계를 구할때는 하단의 예제 참고
.map((파라미터) -> 코드)
각 인덱스의 값을 파라미터로 넘기고 코드를 수행한다
주로 값을 바꿔주거나 더해주거나 할때 사용하게 된다
map은 코드 부분에서 메소드 사용이 불가능한데
이건 아래의 forEach를 사용해주면 된다
전체 예제는 아래에 코드를 넣어놨으니
그걸 봐주면 된다
.forEach((파라미터) -> {코드})
각 인덱스의 값을 파라미터로 넘기고 코드를 수행
(값마다 다른 메소드를 수행한다거나 할때 사용)
map과 forEach는 흡사하지만
map은 값만 바꿔주는 정도고
forEach는 if else나 메소드 등을 사용한느 것이 중점이 되겠다
.anyMatch((파라미터) -> {코드})
.noneMatch((파라미터) -> {코드})
.allMatch((파라미터) -> {코드})
anyMatch는 스트림 중 하나의 값이라도 조건에 맞으면 true
noneMatch는 스트림 중 하나의 값도 조건에 맞지 않으면 true
allMatch는 스트림의 값이 모두 조건에 맞아야 true
.filter(파라미터) -> {코드})
코드에 맞는 값만 가져온다
.reduce(값, 데이터타입::sum)
스트림의 값을 모두 하나로 합칠때 사용하는데
데이터타입과 sum으로 하나로 합친 뒤
마지막에 값을 더해서 가져오게 된다
(String의 경우에는 값, String::concat을 사용)
가공의 경우에는 내용이 많기 때문에
항목마다 모두 예제를 만들어놓지 않았는데
위에도 써놨다시피
이것만 보고 어떻게 만들어가 아니라
맨 아래에 예제 코드가 있으므로
하다가 막히면 그걸 봐주면 된다
반환
값이 하나만 있는 경우라면
.g를 입력한 후 ctrl + space를 하면 나오는
위와 같이 get(), getAsInt() 등으로 가져올 수 있고
배열, 컬렉션(List, Set, Map) 형태로 가져오는 경우라면
배열의 경우에는 끝에
.toArray();
나머지는
.collect(Collectors.toList());
에서 List만 Set, Map으로 바꿔주면 된다
참고블로그 : https://wakestand.tistory.com/419
알고리즘문제풀이
백준 최소공배수,
프로그래머스
최댓값만들기,
팩토리얼,
합성수찾기
