반응형
React로 간단한 웹을 만들어보았는데, 제작하면서 확연히 느낀 React의 특징이 있었다.
- 가독성이 좋음 - 컴포넌트들을 여러 파일로 쪼개서 조립하는 원리여서 소스코드가 복잡하지 않다.
- 유지보수에 좋음 - 위의 이유로 중복 코드도 많이 줄일 수 있고, 좋은 가독성에 따라 물론 유지보수도 훌륭하다.
- 속도가 매우 빠름 - 일반 웹사이트들끼리 링크로 넘나들때의 로드 시간은 1초정도 걸리는데에 반해, React Router은 컴포넌트만 가져오는 식이라 눈깜짝할새에 로드된다.
웹사이트 주소
jooyeokkim.github.io/React-SimpleProject-Algorithm/
React App
jooyeokkim.github.io
깃허브 소스코드
github.com/jooyeokkim/React-SimpleProject-Algorithm
jooyeokkim/React-SimpleProject-Algorithm
test2. Contribute to jooyeokkim/React-SimpleProject-Algorithm development by creating an account on GitHub.
github.com
주요 소스 코드 3개
[App.js]
컴포넌트들의 광장 App.js이다.
요청한 주소에 맞게 컴포넌트를 제공해주는 역할을 한다.
Route의 exact path 속성으로 웹앱 페이지의 주소를 설정한다.
이 주소는 나중에 설명할 Link 태그로 접근할 수 있다.
import React, { Component } from 'react';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
import './App.css';
import Dynamic from './algorithms/dynamic';
import Greedy from './algorithms/greedy';
import Bfs from './algorithms/bfs';
import Dfs from './algorithms/dfs';
import Bruteforce from './algorithms/bruteforce';
import Home from './algorithms/home';
function App() {
return (
<div className="App">
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<Route exact path="/dynamic"><Dynamic></Dynamic></Route>
<Route exact path="/greedy"><Greedy></Greedy></Route>
<Route exact path="/bfs"><Bfs></Bfs></Route>
<Route exact path="/dfs"><Dfs></Dfs></Route>
<Route exact path="/bruteforce"><Bruteforce></Bruteforce></Route>
<Route exact path="/"><Home></Home></Route>
</body>
</html>
</div>
);
}
export default App;
[home.js]
위의 웹앱 사이트 링크에 접속했을 때 뜨는 홈 화면이다.
Link의 to속성은 App.js의 Route와 연결시킬 주소이다.
import React, { Component } from 'react';
import '../App.css';
import algorithm from '../images/algorithm.jpg';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
class Home extends Component{
render(){
return (
<html>
<head>
<meta charset="utf-8" />
<title>Welcome!</title>
</head>
<body>
<h1> Welcome! </h1>
<div className='notice'> 설명을 들을 알고리즘을 클릭하세요! </div>
<div><a href ="https://kimcoder.tistory.com" className='kimcoder'>김코더 김주역 블로그</a></div>
<p>
<ul>
<li><Link to="dynamic" className="nav">동적계획법(다이나믹)</Link></li>
<li><Link to="greedy" className="nav">탐욕(그리디)</Link></li>
<li><Link to="bfs" className="nav">BFS(너비우선탐색)</Link></li>
<li><Link to="dfs" className="nav">DFS(깊이우선탐색)</Link></li>
<li><Link to="bruteforce" className="nav">브루트 포스(완전탐색)</Link></li>
</ul>
</p>
<img src={algorithm} width = "30%"></img>
</body>
</html>
);
}
}
export default Home;
[dynamic.js]
알고리즘을 소개하는 js 파일은 5개가 있는데 모두 구조는 비슷하다.
고로 대표로 dynamic.js 만 소개한다.
import React, { Component } from 'react';
import '../App.css';
import dynamic from '../images/dynamic.jpg';
import {BrowserRouter, Route, Switch, Link, NavLink} from 'react-router-dom';
class Dynamic extends Component{
render(){
return (
<html>
<head>
<meta charset="utf-8" />
<title>Dynamic algorithm</title>
</head>
<body>
<h1> Dynamic algorithm </h1>
<p>
<strong>
동적 계획법의 원리는 매우 간단하다.
일반적으로 주어진 문제를 풀기 위해서, 문제를 여러 개의 하위 문제(subproblem)로 나누어 푼 다음,
그것을 결합하여 최종적인 목적에 도달하는 것이다.
각 하위 문제의 해결을 계산한 뒤, 그 해결책을 저장하여 후에 같은 하위 문제가 나왔을 경우 그것을 간단하게 해결할 수 있다.
이러한 방법으로 동적 계획법은 계산 횟수를 줄일 수 있다.
특히 이 방법은 하위 문제의 수가 기하급수적으로 증가할 때 유용하다.
동적 계획 알고리즘은 최단 경로 문제, 행렬의 제곱 문제 등의 최적화에 사용된다.
이것은 동적 계획법은 문제를 해결하기 위한 모든 방법을 검토하고, 그 중에 최적의 풀이법을 찾아내기 때문이다.
이에 우리는 동적 계획법을 모든 방법을 일일이 검토하여 그 중 최적해를 찾아내는 주먹구구식 방법이라고 생각할 수 있다.
그러나 문제가 가능한 모든 방법을 충분히 빠른 속도로 처리할 수 있는 경우, 동적 계획법은 최적의 해법이라고 말할 수 있다.
때로는 단순한 재귀함수에 저장 수열(이전의 데이터를 모두 입력하는 수열)을 대입하는 것 만으로도 최적해를 구할 수 있는 동적 알고리즘을 찾을 수 있다.
그러나 대다수의 문제는 이보다 훨씬 더 복잡한 프로그래밍을 요구한다.
그 중에 일부는 여러 개의 매개 변수를 이용하여 재귀 함수를 작성해야 하는 것도 있고, 아예 이러한 방법으로 동적 알고리즘을 짤 수 없는 문제 또한 존재한다.
이러한 퍼즐로는 대표적으로 Egg Dropping Puzzle이 있다.
</strong>
</p>
<img src={dynamic} width = "30%"></img>
<Link to="../" className="nav">홈으로</Link>
</body>
</html>
);
}
}
export default Dynamic;반응형
'Frontend > React' 카테고리의 다른 글
| [React] JSX expresstion must have one parent element 오류 해결 (0) | 2020.09.29 |
|---|---|
| [React] Component 단위로 요소 검사하기 (0) | 2020.09.23 |
| [React] React 프로젝트를 Github에 배포하기 (0) | 2020.09.01 |
| [React] React를 git과 연동하여 버전관리 하기 (0) | 2020.09.01 |
댓글