swh01007/study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[modern-react] 리액트 스터디 파일 추가

Browse Source
This commit is contained in:
안준영
2025-09-30 23:55:13 +09:00
parent 31bcb2efe1
commit 75ec02d506
546 changed files with 141345 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
modern-react/my-modern/App.js Normal file
View File

@@ -0,0 +1,11 @@
const APP_TITLE = 'React 앱';
export function getTriangle(base, height) {
return base * height / 2;
}
export class Article {
getAppTitle() {
return APP_TITLE;
}
}

5
modern-react/my-modern/Util.js Normal file
View File

@@ -0,0 +1,5 @@
export default class Util {
static getCircleArea(radius) {
return (radius ** 2) * Math.PI;
}
}

10
modern-react/my-modern/const.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="const.js"></script>
</body>
</html>

3
modern-react/my-modern/const.js Normal file
View File

@@ -0,0 +1,3 @@
const author = '야마다 요시히로';
author = 'WINGS 프로젝트';
console.log(author);

10
modern-react/my-modern/destruct_list.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="destruct_list.js"></script>
</body>
</html>

12
modern-react/my-modern/destruct_list.js Normal file
View File

@@ -0,0 +1,12 @@
const list = [10, 20, 30];
const [x, y, z] = list;
console.log(x, y, z); // 결과: 10 20 30
const [a, b] = list;
console.log(a, b); // 결과: 10 20
const [l, m, n, o] = list;
console.log(l, m, n, o); // 결과: 10 20 30 undefined
const [p, , r] = list;
console.log(p, r); // 결과: 10 30

10
modern-react/my-modern/destruct_list_rest.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="destruct_list_rest.js"></script>
</body>
</html>

3
modern-react/my-modern/destruct_list_rest.js Normal file
View File

@@ -0,0 +1,3 @@
const list = [10, 20, 30];
const [one, ...rest] = list;
console.log(one, rest); // 결과: 10 [20, 30]

10
modern-react/my-modern/destruct_nest.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="destruct_nest.js"></script>
</body>
</html>

10
modern-react/my-modern/destruct_nest.js Normal file
View File

@@ -0,0 +1,10 @@
const member = {
fullname: '사토 리오',
address: {
prefecture: '스즈오카현',
city: '후지에다시'
}
};
const { address, address: { city } } = member;
console.log(address); // 결과: { prefecture: '스즈오카현', city: '후지에다시' }
console.log(city); // 결과: 후지에다시

10
modern-react/my-modern/destruct_nest_array.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="destruct_nest_array.js"></script>
</body>
</html>

3
modern-react/my-modern/destruct_nest_array.js Normal file
View File

@@ -0,0 +1,3 @@
const list = [200, [300, 301, 302]];
const [x, [y1, y2, y3]] = list;
console.log(y1, y2, y3); // 결과: 300 301 302

10
modern-react/my-modern/destruct_obj.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="destruct_obj.js"></script>
</body>
</html>

19
modern-react/my-modern/destruct_obj.js Normal file
View File

@@ -0,0 +1,19 @@
const member = {
fullname: '사토 리오',
sex: '여성',
age: 18
};
const { fullname, sex, memo = '---' } = member;
console.log(sex, fullname, memo); // 결과: 여성 사토 리오 ---
// const { sex: gender } = member;
// console.log(gender); // 결과: 여성
// const { fullname, ...rest } = member;
// console.log(fullname); // 결과: 사토 리오
// console.log(rest); // 결과: { sex: '여성', age: 18 }
// let fullname, sex, memo;
// ({ fullname, sex, memo = '---' } = member);
// console.log(sex, fullname, memo); // 결과: 여성 사토 리오 ---

10
modern-react/my-modern/destruct_obj_param.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="destruct_obj_param.js"></script>
</body>
</html>

10
modern-react/my-modern/destruct_obj_param.js Normal file
View File

@@ -0,0 +1,10 @@
function greet({ name, age }) {
console.log(`안녕하세요, 저는 ${name}, ${age}세 입니다.`);
}
const my = { name: '사토리오', sex: '여성', age: 18 };
greet(my); // 결과: 안녕하세요, 저는 사토리오, 18세 입니다.
// function greet(obj) {
// console.log(` 안녕하세요, 저는 ${obj.name}, ${obj.age}세 입니다. `);
// }

10
modern-react/my-modern/func_def.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="func_def.js"></script>
</body>
</html>

10
modern-react/my-modern/func_def.js Normal file
View File

@@ -0,0 +1,10 @@
function getTrapezoidArea(upper = 1, lower = 1, height = 1) {
return (upper + lower) * height / 2;
}
console.log(getTrapezoidArea(10, 5, 3)); // 결과: 22.5 (=(10 ＋ 5) × 3 ÷ 2)
console.log(getTrapezoidArea(10, 5)) // 결과: 7.5 (=(10 ＋ 5) × 1 ÷ 2)
console.log(getTrapezoidArea(10)); // 결과: 5 (=(10 ＋ 1) × 1 ÷ 2)
// function getTrapezoidArea(upper = 1, lower = upper, height = upper) { ... }

10
modern-react/my-modern/func_rest.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="func_rest.js"></script>
</body>
</html>

13
modern-react/my-modern/func_rest.js Normal file
View File

@@ -0,0 +1,13 @@
function sum(...nums) {
let result = 0;
for (const num of nums) {
result += num;
}
return result;
}
console.log(sum(10, 25, 2)); // 결과: 37
console.log(sum(7, 13, 25, 6, 100)); // 결과: 151
// console.log(sum(...[10, 25, 2]));

10
modern-react/my-modern/let.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="let.js"></script>
</body>
</html>

5
modern-react/my-modern/let.js Normal file
View File

@@ -0,0 +1,5 @@
if (true) {
let x = 13;
}
// 블록 아래에서 선언한 변수를 참조하면 ...
console.log(x);

10
modern-react/my-modern/module_alias.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script type="module" src="module_alias.js"></script>
</body>
</html>

3
modern-react/my-modern/module_alias.js Normal file
View File

@@ -0,0 +1,3 @@
import { getTriangle as tri } from './App.js';
console.log(tri(10, 2)); // 결과: 10

10
modern-react/my-modern/module_all.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script type="module" src="module_all.js"></script>
</body>
</html>

3
modern-react/my-modern/module_all.js Normal file
View File

@@ -0,0 +1,3 @@
import * as app from './App.js';
console.log(app.getTriangle(10, 2)); // 결과: 10

10
modern-react/my-modern/module_basic.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script type="module" src="module_basic.js"></script>
</body>
</html>

6
modern-react/my-modern/module_basic.js Normal file
View File

@@ -0,0 +1,6 @@
import { Article, getTriangle } from './App.js';
console.log(getTriangle(10, 5)); // 결과: 25
const a = new Article();
console.log(a.getAppTitle()); // 결과: React 앱

10
modern-react/my-modern/module_dynamic.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script type="module" src="module_dynamic.js"></script>
</body>
</html>

6
modern-react/my-modern/module_dynamic.js Normal file
View File

@@ -0,0 +1,6 @@
import('./App.js').then(app => {
console.log(app.getTriangle(10, 5)); // 결과: 25
const a = new app.Article();
console.log(a.getAppTitle()); // 결과: React 앱
});

10
modern-react/my-modern/module_use_util.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script type="module" src="module_use_util.js"></script>
</body>
</html>

3
modern-react/my-modern/module_use_util.js Normal file
View File

@@ -0,0 +1,3 @@
import Util from './Util.js';
console.log(Util.getCircleArea(10)); // 결과: 314.1592653589793

10
modern-react/my-modern/number.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="number.js"></script>
</body>
</html>

2
modern-react/my-modern/number.js Normal file
View File

@@ -0,0 +1,2 @@
const value = 123_456_789;
console.log(value);

10
modern-react/my-modern/obj_computed.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="obj_computed.js"></script>
</body>
</html>

8
modern-react/my-modern/obj_computed.js Normal file
View File

@@ -0,0 +1,8 @@
let i = 0;
const member = {
[`attr${++i}`]: '사토 리오',
[`attr${++i}`]: '여성',
[`attr${++i}`]: '18세'
};
console.log(member);
// 결과: { attr1: '사토 리오', attr2: '여성', attr3: '18세' }

10
modern-react/my-modern/obj_method.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="obj_method.js"></script>
</body>
</html>

15
modern-react/my-modern/obj_method.js Normal file
View File

@@ -0,0 +1,15 @@
const member = {
name: '사토 리오',
greet: function() {
console.log(`안녕하세요, ${this.name} 님！`);
}
}
// const member = {
// name: '사토 리오',
// greet() {
// console.log(`안녕하세요, ${this.name} 님！`);
// }
// }
member.greet();

10
modern-react/my-modern/obj_prop.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="obj_prop.js"></script>
</body>
</html>

7
modern-react/my-modern/obj_prop.js Normal file
View File

@@ -0,0 +1,7 @@
const title = '리액트 입문';
const price = 500;
const book = { title, price };
// const book = { title: title, price: price };
console.log(book);

10
modern-react/my-modern/optional.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="optional.js"></script>
</body>
</html>

13
modern-react/my-modern/optional.js Normal file
View File

@@ -0,0 +1,13 @@
const str = null;
console.log(str.substring(1));
// if (str !== null && str !== undefined) {
// console.log(str.substring(1));
// }
// const str = null;
// console.log(str?.substring(1));
// const str = '위키북스';
// console.log(str?.substring(1));

13
modern-react/my-modern/package.json Normal file
View File

@@ -0,0 +1,13 @@
{
"name": "my-modern",
"version": "1.0.0",
"description": "",
"main": "App.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

10
modern-react/my-modern/template.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 입문</title>
</head>
<body>
<script src="template.js"></script>
</body>
</html>

5
modern-react/my-modern/template.js Normal file
View File

@@ -0,0 +1,5 @@
const fullname = '홍길동';
const msg = `안녕하세요, ${fullname} 님!
오늘 하루 잘 지내셨나요?`;
console.log(msg);