[Front-end๐โโฌ] #39 ์๊ฐํ, git, Github
1. ์ ๊ทํํ์
๋ฌธ์ ๋ฅผ ๋ช ๊ฐ ํ์๋๋ฐ, #38 ์ ์ด์ด์ ์ ๋ฆฌํ๋ค.
2. ์๊ฐํ
1. Chart.js
chart.js, bootstrap ์ ์ด์ฉํด์ ๋ฐ์ดํฐ ์๊ฐํ๋ฅผ ํด๋ณด์๋ค. cdn ์ผ๋ก script๋ฅผ ๊ฐ์ ธ์์ label, data, config ์ ๋ฐ์ดํฐ์ ์ต์ ๋ค์ ์์ ํด์ ์ฝ๊ฒ ํ๋ฅผ ๋ง๋ค ์ ์์๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>chartjs</title>
<!-- chartjs cdn -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<canvas id="myChartOne"></canvas>
</div>
</div>
</div>
<script>
const labels = [
'1์',
'2์',
'3์',
'4์',
'5์',
'6์',
];
const data = {
labels: labels,
datasets: [{
label: '๋งค์ถ์ก ํํฉ(์ต)',
backgroundColor: ['gold', 'pink', 'skyblue'], // rgba(255, 0, 0, 0.5), #ff0000
borderColor: 'black',
borderWidth: 5,
hoverBorderWidth: 7,
data: [1, 2, 5, 2, 2, 3, 4],
}]
};
const config = {
type: 'bar', // pie, bar, line, doughnut, polarArea
data: data3,
options: {
plugins:{
title:{
display: true,
text: '๋งค์ถ์ก!!!!',
color: 'red',
position: 'bottom',
padding: {
top: 10,
bottom: 10
}
},
legend: {
display: true,
position:'right',
labels:{
color:'blue'
}
}
}
}
};
</script>
<script>
const myChartOne = new Chart(
document.getElementById('myChartOne'),
config
);
</script>
</body>
</html>
๊ณต๊ณต ๋ฐ์ดํฐ ํฌํธ์์ ์์ ํ์ผ์ csv๋ก ๋ฝ๊ณ ๊ทธ๊ฑธ ๋ค์ json์ผ๋ก ๋ณํํด์ ์ฌ์ฉํ ์ ๋ ์๋ค.
๊ณต๊ณต ๋ฐ์ดํฐ ํฌํธ - https://www.data.go.kr
csv to json - https://curryyou.tistory.com/252
2. Canvas
๊ฐ๋จํ๊ฒ ์ดํด๋ณด์๋ค!! iOS์์ ํ๋ฉด ์ก๋๊ฒ ์ฝ๊ฐ ์ด๋ฐ ํํ์ธ๋ฐ html์๋ ์๋ ๊ฒ์ด์๋ค.
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
// ์บ๋ฒ์ค์์ ์ด๋ป๊ฒ ๊ทธ๋ฆด์ง ๋ ๋๋ง ์ปจํ
์คํธ๋ฅผ ๋ฐ์์จ๋ค.
const ctx = canvas.getContext('2d');
// ์ค์ ๋ก ๊ทธ๋ฆฌ๋ ํจ์
function drawRect(ctx) {
let x = 10,
y = 10,
w = 150,
h = 100;
ctx.fillStyle = 'green';
ctx.fillRect(x, y, w, h);
}
function ์ผ๊ฐํ(ctx) {
ctx.beginPath();
ctx.moveTo(75, 70);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fillStyle = 'red';
ctx.fill();
}
drawRect(ctx);
</script>
</body>
3. D3
https://d3js.org
https://bl.ocks.org/mbostock/4063269
d3๋ ๊ฐ๋จํ๊ฒ ์ดํด๋ณด์๋ค.
- ๋์๊ณผ์
- Loading - ๋ฐ์ดํฐ ๋ก๋ฉ
- Selecting-Binding - ์ฝ๋ ์ฐ๋
- Transform - ๊ทธ๋ํ์ ์์, ์ถ ๋ฑ ์ค์
- Transition - ํด๋ฆญ ๋ฑ์ ํจ๊ณผ ์ง์
- ๊ธฐ๋ณธ๋ฉ์๋
- d3.select : ํ๊ทธ ํ๋ ์ ํ
- d3.selectAll : ํ๊ทธ ์ ์ฒด ์ ํ
- .data : ๋ฐ์ดํฐ ๋ก๋ฉ
- .enter : ํ๊ทธ๊ฐ ๋ฐ์ดํฐ์ ๋นํด ๋ถ์กฑํ๋ฉด ๋๋จธ์ง ๋ฐํ
- .append : ์๋ก์ด ํ๊ทธ ์ถ๊ฐ
- .exit : ์ข ๋ฃ
- .remove : ์ ํ๋ ํ๊ทธ ์ ๊ฑฐ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div class="canvas"></div>
<script>
const canvas = d3.select('.canvas');
const svg = canvas.append('svg')
.attr('height', 1000)
.attr('width', 1000);
// x y ๋ ์ข์ธก ์๋จ ๊ธฐ์ค ์ขํ.
svg.append('text')
.attr('x', 200)
.attr('y', 200)
.attr('fill', 'black')
.text('hello world')
.style('font-weight', 'bold')
.style('font-style', '34px')
svg.append('rect')
// .attr('x', 10)
// .attr('y', 10)
.attr('width', 200)
.attr('height', 200)
.attr('fill', 'hotpink')
svg.append('circle')
.attr('r', 50)
// cx, cy ๋ ์์ ์ค์ฌ
.attr('cx', 200)
.attr('cy', 200)
.attr('fill', 'pink')
svg.append('line')
.attr()
</script>
</body>
</html>
4. disqus
disqus ๋ฅผ ์ด์ฉํด์ ๋ธ๋ก๊ทธ์ ๋๊ธ์ฐฝ์ ๋ง๋๋ ๊ฒ์ ๊ตฌํํด ๋ณด์๋ค. github.io ๊ธฐ์ ๋ธ๋ก๊ทธ ๋ค์ด๊ฐ๋ฉด ๋ง์ด ๋ณด์ด๋ UI์ด๋๋ฐ ์ด๊ฑธ ์ฐ์ ๊ฑฐ์๋ค๋๊ฑธ ์๊ฒ ๋์๋ค. ๊นํ ๋ธ๋ก๊ทธ์ฒ๋ผ ํ์ด์ง๋ ์ ์ ์ธ๋ฐ ๋๊ธ์ ๋ค๋ ๊ฒ๋ง ํ์ํ ๋ ๋ง์ด ์ฌ์ฉํ๋ค๊ณ ํ๋ค.
1. ํ์๊ฐ์ ํ Get Started!
2. I want to install Disqus on my site
์ฐ๋ฆฌ๋ html์ ์ง์ ๋ง๋ค์ด์ ๋๊ธ์ฐฝ์ ๋ฃ๊ณ ์ถ์๊ฑฐ๋๊น@
3. Create my site
์น์ฌ์ดํธ ์ด๋ฆ๊ณผ ์นดํ ๊ณ ๋ฆฌ๋ฅผ ์ฑ์ฐ๊ณ ์์ฑํ๋ค.
4. ๋จ๊ณ ์งํ
์ด 4๋จ๊ณ๋ฅผ ์งํํด์ผํ๋๋ฐ,
- Select Plan ์ Basic์ผ๋ก
- I don't see my platform listed, install manually with Universal Code
๋๋ฅด๋ฉด ๋์ค๋ ์ฝ๋๋ฅผ ๋ณต์ฌํด์ html ํ๋จ์ ๋ถ์ฌ๋ฃ๊ณ ๋๋จธ์ง ๊ณผ์ ์ ๋ง๋ฌด๋ฆฌํ๋ค! ์ค์ ๋ก ์ฌ์ฉํ ๋ ํฌ๋ ์๋์์ด์ ๋๊ธ์ด ์จ์ง๋ ๊ฒ๋ง ํ์ธํ๊ณ ๋๋จธ์ง ์ค์ ์ ์งํํ์ง ์์๋ค.
3. Git / Github
1. Git
- git : ๋ก์ปฌ ์ ์ฅ์ / ์๊ฒฉ ์ ์ฅ์ ๋ก ๋๋๋ค. git ์ด๋ github ์ ๋ค๋ฅธ ๊ฒ!
- 4๊ฐ์ง ํ์ ๋ช ๋ น์ด : git pull / push / commit / add
git init # ์ ์ฅ์๋ก ์ด๋ ํ touch README.md
git add README.md git add . # ์ ์ฒด add git commit -m "first commit"
git ignore
# a comment - ์ด ์ค์ ๋ฌด์ํ๋ค. # ํ์ฅ์๊ฐ .a์ธ ํ์ผ ๋ฌด์ *.a # ์ ์ค์์ ํ์ฅ์๊ฐ .a์ธ ํ์ผ์ ๋ฌด์ํ๊ฒ ํ์ง๋ง lib.a๋ ๋ฌด์ํ์ง ์๋๋ค. !lib.a # ๋ฃจํธ ๋๋ ํ ๋ฆฌ์ ์๋ TODOํ์ผ์ ๋ฌด์ํ๊ณ subdir/TODO์ฒ๋ผ ํ์๋๋ ํ ๋ฆฌ์ ์๋ ํ์ผ์ ๋ฌด์ํ์ง ์๋๋ค. /TODO # build/ ๋๋ ํ ๋ฆฌ์ ์๋ ๋ชจ๋ ํ์ผ์ ๋ฌด์ํ๋ค. build/ # `doc/notes.txt`๊ฐ์ ํ์ผ์ ๋ฌด์ํ๊ณ doc/server/arch.txt๊ฐ์ ํ์ผ์ ๋ฌด์ํ์ง ์๋๋ค. doc/*.txt # `doc` ๋๋ ํ ๋ฆฌ ์๋์ ๋ชจ๋ .txt ํ์ผ์ ๋ฌด์ํ๋ค. doc/**/*.txt
git log # ์ปค๋ฐ ๊ธฐ๋ก ํ์ธ git diff # ๋ณ๊ฒฝ์ฌํญ ํ์ธ
github
// push : ์ ์ฅ์์ ์ฌ๋ผ๊ฐ git remote add origin pushํ ์ฃผ์ git push -u origin main git push origin branchname
// clone : ์ ์ฅ์์ ์๋ ๊ฒ์ ์ฒ์ ๋ฐ์์ฌ ๋ git clone ๊ฐ์ ธ์ฌ์ฃผ์ . #.์ ํด์ผ ์ ์ผ ์์ ํด๋๊ฐ ์์๊น. # clone ๋ฐ๊ณ ๊ถํ๋ ๋ฐ์์ผ ํ๋ค. Manage access > Add people
// pull : ์ด๋ฏธ ํด๋ก ๋ ์ ์ฅ์์ ๋ณ๊ฒฝ์ฌํญ์ ๋ฐ์์ด git pull origin main # github์ ์ ๋ฐ์ดํธ๋ ๊ฒ์ ๋ฐ์์ฌ๋.
branch
// branch : ๋ง ๊ทธ๋๋ก ๊ฐ์ง๋ฅผ ๋ป์! ์ง๊ธ ์ฝ๋์ ๊ฐ์ ๋ฒ ์ด์ค์์ ์์ ์ ํ์ง๋ง ๋ธ๋์น๋ผ๋ฆฌ ๋ฐ์์ ์๋จ. git branch # branch ํ์ธ git branch test # test branch ์์ฑ
// switch : ๋ธ๋์น ๋ณ๊ฒฝ git checkout test git switch test # switch ๋ธ๋์น๋ฅผ ์ฎ๊ธฐ๋ ๊ธฐ๋ฅ๋ง ๋ด๋น. git switch -c new-dev # ์ ๋ธ๋์น ๋ง๋ค์ด์ ์ฎ๊น
// restore : ํ์ผ ๋ด์ฉ ์์ ๋ณต์ / addํด์ ์คํ ์ด์ง์ ์ฌ๋ฆฐ ๊ฒ ๋บ ๋ ์ฌ์ฉ. git checkout -- README.md git restore README.md # reset ๋์ restore๋ฅผ ์ด์ฉํ๋ฉด ์์ ์ฌํญ ์กฐ์์ด ํธํ๋ค. git reset HEAD README.md git restore --staged README.md
// merge : ๊ฐ๋ฐ์ด ๋๋์ ๋ธ๋์น๋ฅผ ํฉ์นจ. git checkout main git merge test # test๋ฅผ main์ merge.
๊ธฐํ
// amend : ์ต์ ์ปค๋ฐ์ ์๋ก์ด ์ปค๋ฐ ์ถ๊ฐ # ํผ์ ์ฌ์ฉํ๋๊ฒ ์๋ ๋ธ๋์น๋ ๊ผฌ์ผ ์ ์์ผ๋ ์ฃผ์! git commit --amend
// stash : ์ปค๋ฐ ๋ชปํ ํ์ผ์ด ์๋๋ฐ ๋ค๋ฅธ ๋ธ๋์น์ ์ฒดํฌ์์ํ ๋ ์ ์ ํ์ผ๋ค์ ์น์๋๋ ๊ธฐ๋ฅ git stash git stash --all # ์ ์ฅ์์์ ๊ด๋ฆฌํ์ง ์๋ ํ์ผ๊น์ง ๋ชจ๋ ์น์ git stash pop # ๋ค์ ๋ธ๋์น์ ๋์์์ ์ํ.
// reset : ์๋ ์ปค๋ฐ์ผ๋ก ๋ธ๋์น๋ฅผ ๋๋๋ฆด ๋ git reset [mode] # hard, mixed, soft ๋ฅผ ๋ง์ด ์ฌ์ฉ. git reset --hard commit-id # ๋ชจ๋ ๋ณ๊ฒฝ์ฌํญ์ ๋ฒ๋ฆฌ๊ณ commit id ์์ ์ผ๋ก ํ๊ท # mixed : ๋ณ๊ฒฝ ์ฌํญ์ ๋ก์ปฌ์ ์ ์ฅํ๊ณ ์ปค๋ฐ์ ๋ฆฌ์ , ๋ณ๊ฒฝ๋ด์ญ์ด unstage์ ๋จ์ # soft : ์ปค๋ฐ์ ์ญ์ ํ๊ณ ๋ชจ๋ ๋ก์ปฌ ๋ณ๊ฒฝ์ฌํญ์ ์ ์ง, ๋ณ๊ฒฝ๋ด์ญ์ด stage์ ๋จ์.
// revert : ์ด๋ ฅ์ ๋จ๊ฒจ ๋ณ๊ฒฝ์ฌํญ์ ๋๋๋ฆฌ๊ณ ์ปค๋ฐ์ ์์ฑ # reset๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ํ๋, reset์ ํ์คํ ๋ฆฌ๋ฅผ ์ด๊ธฐํํด์ ๋ค๋ฅธ์ฌ๋ ํ์คํ ๋ฆฌ์๊น์ง ์ํฅ์ ์ฃผ๋ revert๋ฅผ ์ฌ์ฉํด ์ปค๋ฐ์ ์๋ก ๋ง๋ ๋ค. git revert commit-id
// cherry-pick : ๋ค๋ฅธ ๋ธ๋์น์์ ๊ฐ์ ธ์ค๊ณ ์ถ์ ์ปค๋ฐ๋ง ๊ฐ์ ธ์ด. git cherry-pick commit-id
2. Pull request
๋ค๋ฅธ repository ๋ฅผ fork ํด์์ ๊ฐ๋ฐํ๊ณ pull request๋ฅผ ๋ ๋ฆฌ๋ฉด ๋๋ค.
- ์ปค๋ฐ์ ์ฝ๋๊ฐ ์ถ๊ฐ๋์๋๋ฐ ์ถ๊ฐ๊ฐ ๊ธฐ๋ฅ ๋จ์์ผ๋
- add ๋ช ๋ น์ด๋ฅผ ์๊ณ ๋ ์์๋๋ฐ, ์์คํธ๋ฆฌ๋ ํ์ด์ฐธ ์ฐ๋ฉด์ add ์ํด๋ ๋จ๊ณ , ํ์ด์ฐธ์์๋ ํ์ผ ์์ฑํ ๋ add ํ๋๊ณ ๋ฌผ์ด๋ด์ค์ ๋ณ๋ก ์ ๊ฒฝ ์์ผ๋๋ฐ add์ commit์ ์ ํํ ์ฐจ์ด๋ฅผ ์๊ฒ ๋์๋ค.
4. threejs (ํน๊ฐ)
threejs์ ๋์ ์๋ฆฌ๋ renderer๊ฐ ๋ฐฐ๊ฒฝ์ ๋ง๋ค์ด์ ๋ณด์ฌ์ฃผ๊ณ , Scene ์ด๋ผ๋ ์ฅํ์ Geometry๋ฅผ ๋ฐฐ์นํด ๋๋ ๋ฐฉ์์ด๋ค. ๋น์ ๊ณ ์ ๋์ด ์๊ณ ์นด๋ฉ๋ผ๋ฅผ ์์ง์ฌ์ ๋ณธ๋ค. ์ท, ๋, ์ฝ, ์ ๊ฐ์๊ฒ์ Geometry์ Material ๋ก ๋ถ์ธ๋ค. ๊ทธ๋์ ๊ฐ๊ฐ์ ์์๋ฅผ ๋ง๋ค์ด์ ์ ์ดํด์ฃผ๋ฉด ๋๋ค.
์ฌ์ง ์ถ์ฒ - ์ ์ค๋ชจ ๋ํ๋์ ํ๊ธฐ
์์ฒญ ์์ธํ๊ฒ!! ๊ฐ์ด๋๋ฅผ ์์ฑํด์ฃผ์
จ๋๋ฐ npm start
ํ๋ฉด
์ด์ํ๊ฒ ์ฌ๊ธฐ์ ๋ ์งํ์ด ์๋ผ์ ๋ํ๋์ ํ๋ฉด๋ง ์ง์ผ๋ณด์๋ค.. ๊ทธ๋๋ ์ค๋ช
์ ์ํด์ฃผ์
์ ์ฌ๋ฐ์๋ค! ๋น์ฅ ์ธ ์ผ์ ์์ ๊ฒ ๊ฐ๊ธฐ๋ ํ๋ค...
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([Front-end๐โโฌ] #39 ์๊ฐํ, git, Github), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ddosang/Front-end-39์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค