Skip to content

Commit c00dcbd

Browse files
limkhllimkhl
committed
init: SPA 사이트 세팅
1 parent 3b8962b commit c00dcbd

File tree

20 files changed

+2034
-0
lines changed

20 files changed

+2034
-0
lines changed

‎.gitignore‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
# Created by https://www.toptal.com/developers/gitignore/api/node,yarn
2+
3+
# Edit at https://www.toptal.com/developers/gitignore?templates=node,yarn
4+
5+
### Node
6+
7+
# Logs
8+
9+
logs
10+
_.log
11+
npm-debug.log_
12+
yarn-debug.log*
13+
yarn-error.log*
14+
lerna-debug.log*
15+
.pnpm-debug.log*
16+
17+
# Diagnostic reports (https://nodejs.org/api/report.html)
18+
19+
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
20+
21+
# Runtime data
22+
23+
pids
24+
_.pid
25+
_.seed
26+
\*.pid.lock
27+
28+
# Directory for instrumented libs generated by jscoverage/JSCover
29+
30+
lib-cov
31+
32+
# Coverage directory used by tools like istanbul
33+
34+
coverage
35+
\*.lcov
36+
37+
# nyc test coverage
38+
39+
.nyc_output
40+
41+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
42+
43+
.grunt
44+
45+
# Bower dependency directory (https://bower.io/)
46+
47+
bower_components
48+
49+
# node-waf configuration
50+
51+
.lock-wscript
52+
53+
# Compiled binary addons (https://nodejs.org/api/addons.html)
54+
55+
build/Release
56+
57+
# Dependency directories
58+
59+
node_modules/
60+
jspm_packages/
61+
62+
# Snowpack dependency directory (https://snowpack.dev/)
63+
64+
web_modules/
65+
66+
# TypeScript cache
67+
68+
\*.tsbuildinfo
69+
70+
# Optional npm cache directory
71+
72+
.npm
73+
74+
# Optional eslint cache
75+
76+
.eslintcache
77+
78+
# Microbundle cache
79+
80+
.rpt2_cache/
81+
.rts2_cache_cjs/
82+
.rts2_cache_es/
83+
.rts2_cache_umd/
84+
85+
# Optional REPL history
86+
87+
.node_repl_history
88+
89+
# Output of 'npm pack'
90+
91+
\*.tgz
92+
93+
# Yarn Integrity file
94+
95+
.yarn-integrity
96+
97+
# dotenv environment variables file
98+
99+
.env
100+
.env.test
101+
.env.production
102+
103+
# parcel-bundler cache (https://parceljs.org/)
104+
105+
.cache
106+
.parcel-cache
107+
108+
# Next.js build output
109+
110+
.next
111+
out
112+
113+
# Nuxt.js build / generate output
114+
115+
.nuxt
116+
dist
117+
118+
# Gatsby files
119+
120+
.cache/
121+
122+
# Comment in the public line in if your project uses Gatsby and not Next.js
123+
124+
# https://nextjs.org/blog/next-9-1#public-directory-support
125+
126+
# public
127+
128+
# vuepress build output
129+
130+
.vuepress/dist
131+
132+
# Serverless directories
133+
134+
.serverless/
135+
136+
# FuseBox cache
137+
138+
.fusebox/
139+
140+
# DynamoDB Local files
141+
142+
.dynamodb/
143+
144+
# TernJS port file
145+
146+
.tern-port
147+
148+
# Stores VSCode versions used for testing VSCode extensions
149+
150+
.vscode-test
151+
152+
# yarn v2
153+
154+
.yarn/cache
155+
.yarn/unplugged
156+
.yarn/build-state.yml
157+
.yarn/install-state.gz
158+
.pnp.\*
159+
160+
### yarn
161+
162+
# https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored
163+
164+
.yarn/\*
165+
!.yarn/releases
166+
!.yarn/plugins
167+
!.yarn/sdks
168+
!.yarn/versions
169+
170+
# if you are NOT using Zero-installs, then:
171+
172+
# comment the following lines
173+
174+
!.yarn/cache
175+
176+
# and uncomment the following lines
177+
178+
# .pnp.\*
179+
180+
# End of https://www.toptal.com/developers/gitignore/api/node,yarn

‎eslintrc.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// eslint + prettier 설정 참고 : https://pravusid.kr/javascript/2019/03/10/eslint-prettier.html
2+
3+
module.exports = {
4+
env: {
5+
browser: true,
6+
es2021: true,
7+
},
8+
extends: ['google', 'plugin:prettier/recommended'],
9+
parserOptions: {
10+
ecmaVersion: 12,
11+
sourceType: 'module',
12+
},
13+
rules: {},
14+
}

‎index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>JS Mini Project 25</title>
8+
<link
9+
rel="shortcut icon"
10+
href="/src/assets/favicon.ico"
11+
type="image/x-icon"
12+
/>
13+
<link
14+
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
15+
rel="stylesheet"
16+
/>
17+
<link
18+
rel="stylesheet"
19+
href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"
20+
/>
21+
<link rel="stylesheet" href="/src/styles/style.css" />
22+
</head>
23+
<body>
24+
<div id="app"></div>
25+
<script src="/src/main.js" type="module"></script>
26+
</body>
27+
</html>

‎package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"scripts": {
3+
"start": "node main.js",
4+
"lint": "eslint *.js",
5+
"lint:fix": "eslint --fix *.js"
6+
},
7+
"devDependencies": {
8+
"eslint": "^7.32.0",
9+
"eslint-config-airbnb-base": "^14.2.1",
10+
"eslint-config-google": "^0.14.0",
11+
"eslint-config-prettier": "^8.3.0",
12+
"eslint-plugin-import": "^2.24.0",
13+
"eslint-plugin-prettier": "^3.4.0",
14+
"prettier": "^2.3.2"
15+
}
16+
}

‎prettierrc.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"printWidth": 100,
3+
"tabWidth": 2,
4+
"singleQuote": true,
5+
"trailingComma": "all",
6+
"bracketSpacing": true,
7+
"semi": true,
8+
"useTabs": false,
9+
"endOfLine": "lf"
10+
}

‎project1-colors/src/Project1Page.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Button from "./Button.js";
2+
3+
export default function Project1Page({ $target }) {
4+
const $page = document.createElement("div");
5+
6+
$page.className = "project1 page";
7+
8+
new Button({
9+
$target: $page,
10+
onClick: (colorCode) => {
11+
$page.style.backgroundColor = `#${colorCode}`;
12+
},
13+
});
14+
15+
this.render = () => {
16+
$target.append($page);
17+
};
18+
}

‎project2-HexColorsGradient/src/Project2Page.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Button from "./Button.js";
2+
import Sign from "./Sign.js";
3+
4+
export default function Project2Page({ $target }) {
5+
const $page = document.createElement("div");
6+
7+
$page.className = "project2 page";
8+
9+
const signBoard = new Sign({ $target: $page });
10+
11+
new Button({
12+
$target: $page,
13+
onClick: (direction, startColor, endColor) => {
14+
$page.style.background = `linear-gradient(to ${direction}, #${startColor}, #${endColor})`;
15+
signBoard.setState({
16+
...signBoard.state,
17+
direction,
18+
colorCode: { start: startColor, end: endColor },
19+
});
20+
},
21+
});
22+
23+
this.render = () => {
24+
$target.append($page);
25+
};
26+
}

‎project3-RandomQuoteGenerator/src/Project3Page.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import App from "./App.js";
2+
3+
export default function Project3Page({ $target }) {
4+
const $page = document.createElement("div");
5+
6+
$page.className = "project3 page";
7+
8+
new App({ $target: $page });
9+
10+
this.render = () => {
11+
$target.append($page);
12+
};
13+
}

‎src/assets/favicon.ico‎

1.12 KB
Binary file not shown.

‎src/components/App.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import Header from "../layouts/Header.js";
2+
3+
import HomePage from "../pages/HomePage.js";
4+
import NotFoundPage from "../pages/NotFoundPage.js";
5+
import Project1Page from "../../project1-colors/src/Project1Page.js";
6+
import Project2Page from "../../project2-HexColorsGradient/src/Project2Page.js";
7+
import Project3Page from "../../project3-RandomQuoteGenerator/src/Project3Page.js";
8+
9+
export default function App({ $target }) {
10+
new Header({ $target });
11+
12+
const $main = document.createElement("main");
13+
$target.append($main);
14+
15+
const homePage = new HomePage({ $target: $main });
16+
const notFoundPage = new NotFoundPage({ $target: $main });
17+
const project1Page = new Project1Page({ $target: $main });
18+
const project2Page = new Project2Page({ $target: $main });
19+
const project3Page = new Project3Page({ $target: $main });
20+
21+
this.route = () => {
22+
$main.innerHTML = ``;
23+
const { pathname } = location;
24+
25+
if (pathname === `/`) {
26+
homePage.render();
27+
} else if (pathname.indexOf(`/project/`) === 0) {
28+
const [, , projectId] = pathname.split("/");
29+
switch (parseInt(projectId)) {
30+
case 1:
31+
project1Page.render();
32+
break;
33+
case 2:
34+
project2Page.render();
35+
break;
36+
case 3:
37+
project3Page.render();
38+
break;
39+
}
40+
} else {
41+
notFoundPage.render();
42+
}
43+
};
44+
45+
this.route();
46+
47+
window.addEventListener("click", (e) => {
48+
if (e.target.className === "link") {
49+
e.preventDefault();
50+
history.pushState(null, null, e.target.href);
51+
52+
this.route();
53+
}
54+
});
55+
}

0 commit comments

Comments
 (0)