Javascript
실습한 소스 정리
•
obj_copy.js
const obj1 = {
key1: 10,
key2: "안녕하세요",
key3: {
isLogin: false
}
}
const obj2 = obj1 // 주소값 복사
const obj3 = { ...obj1 } // 객체의 얕은 복사 [객체 내의 객체는 주소값 복사]
const obj4 = JSON.parse(JSON.stringify(obj1));
obj1.key1 += 1;
obj1.key3.isLogin = true;
console.log("obj1", obj1);
console.log("obj2", obj2);
console.log("obj3", obj3);
console.log("obj4", obj4);
JavaScript
복사
•
spread_po.js
const [name, ...info] = ["최민식", 50, "서울"];
console.log("name", name);
console.log("info", info);
const names = ['최민식', '유해진', '이도현', '김고은'];
const stars = ['이도현', ...names, ...names];
console.log(stars);
const fruits = ['사과', '오렌지', '딸기', '수박'];
const [apple, orange, ...rest] = fruits;
console.log(rest);
let me = {
my_name: "jonathan",
my_age: 10,
my_region: '서울',
my_email: 'jonathan@naver.com'
}
const { my_name, my_age, ...my_rest } = me;
console.log(my_rest);
JavaScript
복사
•
arrow_func.js
function sum1(x, y) { return x + y; }
const sum2 = function (x, y) { return x + y; }
const sum3 = (x, y) => { return x + y; }
const sum4 = (x, y) => x + y;
const sum5 = (x, y) => { return x + y; }
console.log(sum1(1, 2))
console.log(sum2(1, 2))
console.log(sum3(1, 2))
console.log(sum4(1, 2))
console.log(((x, y) => x + y)(1, 2))
console.log(sum5(1, 2))
JavaScript
복사
•
map.js
// 배열 메서드 map
// 배열 안의 요소들을 처리해서, [새로운 배열 생성]
const arr = [1, 3, 5, 7, 9];
const mapArr1 = arr.map((value) => value + 1);
const mapArr2 = arr.map((value, index) => value + index);
const mapArr3 = arr.map((value, index, array) => value + array[4]);
console.log(mapArr1);
console.log(mapArr2);
console.log(mapArr3)
JavaScript
복사
•
filter.js
// 배열 메서드 filter
// 콜백 조건에 충족하는 요소만을 추출해 [새로운 배열 반환]
const arr = [1, 2, 3, 4, 5, 6];
// const mapArr1 = arr.map(value => value % 2 == 1);
// console.log(mapArr1);
const filterArr1 = arr.filter(value => value % 2 == 1);
console.log(filterArr1);
const filterArr2 = arr.filter((value, index) => index > 3);
console.log(filterArr2);
const filterArr3 = arr.filter((value, index, array) => value > array[2]);
console.log(filterArr3);
JavaScript
복사
•
forEach.js
// 배열 메서드 forEach
// 배열 각 요소에 대해서 함수를 실행한다.
const weekArr = ['월', '화', '수', '목', '금']
weekArr.forEach((value => {
console.log(value + "요일");
}));
JavaScript
복사
•
reduce.js
// 배열 메서드 reduce
// 배열을 통해 하나의 값을 만든다
const arr = [1, 2, 3, 4, 5];
const value1 = arr.reduce((acc, cur) => { return acc + cur });
const value2 = arr.reduce((acc, cur) => { return acc + cur }, 900);
console.log(value1);
console.log(value2);
const lastArr = arr.reduce((acc, cur) => {
if (cur % 2 === 0) {
acc.push(cur)
}
return acc;
}, []);
console.log(lastArr)
JavaScript
복사
React
•
first_react
import './App.css';
function App() {
const name = "React"
const url = "https://naver.com"
const style = { color: 'red', backgroundColor: 'black' }
const num = 10;
return (
// 중괄호를 이용해 변수 삽입 가능
<div>
<h1>{name + " JS"} 시작</h1>
<a href={url}>네이버</a>
{/* 단일 태그도 태그를 닫아야 한다 */}
<br></br>
<input type='text' value={name}></input>
<br/>
<input type='password' />
{/* class, for => className, htmlFor */}
<div className="title">제목</div>
<label htmlFor="user_id">아이디</label>
<input type='text' id="user_id"></input>
{/* style */}
<div style={{color: 'red', backgroundColor: 'black'}}>안녕하세요</div>
<div style={style}>안녕하세요</div>
<div>
{
num > 10 ?
<h1>num은 10보다 크다</h1> :
<h1>num은 10보다 같거나 작다</h1>
}
</div>
</div>
);
}
export default App;
JavaScript
복사
•
component_react
◦
Comp.jsx
const Comp = () => {
return (
<div>
나의 첫 컴포넌트
</div>
)
}
export default Comp;
JavaScript
복사
◦
Comps.jsx
const Header = () => {
return (
<div>
<h1>
<a href='/'>React</a>
</h1>
</div>
);
}
const Navi = () => {
const menuList = [
{ name: "홈", link: "/" },
{ name: "추천", link: "recomm" },
{ name: "뷰티", link: "beauty" },
]
return (
<nav>
{
menuList.map((menu) => {
return (
<div>
<a href={menu.link}>
{menu.name}
</a>
</div>
)
})
}
</nav>
);
}
const Article = (props) => {
const style = {
textAlign: 'center',
backgroundColor: "#aaa",
height: '20vh',
margin: '10px 50px',
}
return (
<article style={style}>
<h2>{props.text}</h2>
</article>
);
}
export default { Header, Navi, Article };
JavaScript
복사
◦
Introduce.jsx
import Button from "../Button";
const Introduce = (props) => {
return (
<div>
<h2>안녕하세요</h2>
<Button size="small" color='red'>클릭</Button>
<Button size="medium" color='orange'>누르세요</Button>
<Button size="large" color='yellow'>Click</Button>
<Button event={() => alert('클릭되었습니다.')}></Button>
<p>내 친구 이름 {props.name}입니다.</p>
<p>내 친구의 성별은 {props.gender}입니다.</p>
</div>
);
}
Introduce.defaultProps = {
name: "minsung",
gender: '남자'
}
export default Introduce;
JavaScript
복사
◦
App.js
import './App.css';
import Comp from './components/Comp';
import Comps from './components/Comps';
import Introduce from './components/Introduce';
function App() {
return (
<div>
<Comps.Header></Comps.Header>
<Comps.Navi></Comps.Navi>
{ /* props: 부모컴포넌트가 자식컴포넌트에게 전달하는 값 */ }
<Comps.Article text="환영합니다."></Comps.Article>
<Comps.Article text="만나서 반갑습니다."></Comps.Article>
<Comp />
<Introduce name="유재석" gender="남자"></Introduce>
<Introduce name="김종국" gender="남자"></Introduce>
<Introduce name="지석진" gender="남자"></Introduce>
<Introduce name="전소민" gender="여자"></Introduce>
<Introduce></Introduce>
</div>
);
}
export default App;
JavaScript
복사
•
layout_react - 게시판 꾸미기
◦
Layout.css
header {
background-color: lightgreen;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header a {
text-decoration: none;
color: black;
font-size: 18px;
}
header nav {
display: flex;
}
header nav li {
background-color: lightsalmon;
list-style-type: none;
margin-right: 10px;
padding: 3px 6px;
border-radius: 10px;
border: 1px solid black;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
}
main {
padding: 50px;
min-height: 50vh;
}
footer {
background-color: #bbb;
padding: 20px;
}
CSS
복사
◦
Layout.jsx
import "./Layout.css";
const Layout = ({children}) => {
return (
<>
<header>
<a href="/">메인로고</a>
<nav>
<li><a href="/#menu1">menu1</a></li>
<li><a href="/#menu2">menu2</a></li>
<li><a href="/#menu3">menu3</a></li>
<li><a href="/#menu4">menu4</a></li>
</nav>
</header>
<main>
{children}
</main>
<footer>연락처 정보</footer>
</>
);
}
export default Layout;
JavaScript
복사
◦
App.js
import logo from './logo.svg';
import './App.css';
import Layout from './components/Layout';
function App() {
return (
<div className="App">
<Layout>
<div>
<h1>게시판 화면</h1>
<table>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
</tr>
<tr>
<td>1</td>
<td>안녕하세요</td>
<td>minsung</td>
</tr>
<tr>
<td>2</td>
<td>현실은 차갑다</td>
<td>minsung</td>
</tr>
</table>
</div>
</Layout>
</div>
);
}
export default App;
JavaScript
복사
JSON 서버 설치
•
npm 실행
sudo npm i -g json-server
CSS
복사
•
server 실행 (json server와 react 서버가 동시에 실행되어 있어야 함)
json-server --watch data.json --port 8080
--watch/-w can be omitted, JSON Server 1+ watches for file changes by default
JSON Server started on PORT :8080
Press CTRL-C to stop
Watching data.json...
♡⸜(˶˃ ᵕ ˂˶)⸝♡
Index:
http://localhost:8080/
Static files:
Serving ./public directory if it exists
Endpoints:
No endpoints found, try adding some data to data.json
CSS
복사