diff --git a/README.md b/README.md index 51abd25..7e1ec2d 100644 --- a/README.md +++ b/README.md @@ -1 +1,166 @@ -# javascript-subway-final \ No newline at end of file +# ๐Ÿš‡ ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ๊ฒฝ๋กœ ์กฐํšŒ ๋ฏธ์…˜ + +- ๋“ฑ๋ก๋œ ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„์—์„œ ๊ฒฝ๋กœ๋ฅผ ์กฐํšŒํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•œ๋‹ค. + +## ๐Ÿš€ ๊ธฐ๋Šฅ ์š”๊ตฌ์‚ฌํ•ญ + +- ์—ญ์˜ ์ด๋ฆ„์€ 2๊ธ€์ž ์ด์ƒ์œผ๋กœ ์ž‘์„ฑํ•œ๋‹ค. +- ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์—ญ์€ ์ž‘์„ฑํ•  ์ˆ˜ ์—†๋‹ค. +- ์ถœ๋ฐœ์—ญ๊ณผ ๋„์ฐฉ์—ญ์˜ ์ด๋ฆ„์€ ๋‹ฌ๋ผ์•ผ ํ•œ๋‹ค. +- ์ถœ๋ฐœ์—ญ๊ณผ ๋„์ฐฉ์—ญ ๋‘˜ ๋‹ค ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค. +- ํ”„๋กœ๊ทธ๋žจ์ด ์ˆ˜ํ–‰์ด ์•ˆ ๋  ์‹œ `alert` ๋ฉ”์‹œ์ง€๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค. +- ์ตœ๋‹จ๊ฑฐ๋ฆฌ ํด๋ฆญ ํ›„, ๊ธธ ์ฐพ๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋ชฉํ‘œ์ง€๊นŒ์ง€์˜ ์ตœ๋‹จ๊ฑฐ๋ฆฌ, ์†Œ์š”์‹œ๊ฐ„, ๊ฐ€๋Š” ๋ฃจํŠธ๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค. +- ์ตœ์†Œ์‹œ๊ฐ„ ํด๋ฆญ ํ›„, ๊ธธ ์ฐพ๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋ชฉํ‘œ์ง€๊นŒ์ง€์˜ ๊ฑฐ๋ฆฌ, ์ตœ์†Œ์†Œ์š”์‹œ๊ฐ„, ๊ฐ€๋Š” ๋ฃจํŠธ๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค. + +### ์ดˆ๊ธฐ ์„ค์ • + +- ํ”„๋กœ๊ทธ๋žจ ์‹œ์ž‘ ์‹œ ์—ญ, ๋…ธ์„ , ๊ตฌ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ ์ดˆ๊ธฐ ์„ค์ • ํ•ด์•ผ ํ•œ๋‹ค. +- ๊ฑฐ๋ฆฌ์™€ ์†Œ์š” ์‹œ๊ฐ„์€ ์–‘์˜ ์ •์ˆ˜์ด๋ฉฐ ๋‹จ์œ„๋Š” km์™€ ๋ถ„์„ ์˜๋ฏธํ•œ๋‹ค. +- ์•„๋ž˜์˜ ์‚ฌ์ „ ๋“ฑ๋ก ์ •๋ณด๋กœ ๋ฐ˜๋“œ์‹œ ์ดˆ๊ธฐ ์„ค์ •์„ ํ•œ๋‹ค. + +``` +1. ์ง€ํ•˜์ฒ ์—ญ์œผ๋กœ ๊ต๋Œ€, ๊ฐ•๋‚จ, ์—ญ์‚ผ, ๋‚จ๋ถ€ํ„ฐ๋ฏธ๋„, ์–‘์žฌ, ์–‘์žฌ์‹œ๋ฏผ์˜์ˆฒ, ๋งค๋ด‰ ์—ญ ์ •๋ณด๊ฐ€ ๋“ฑ๋ก๋˜์–ด ์žˆ๋‹ค. +2. ์ง€ํ•˜์ฒ  ๋…ธ์„ ์œผ๋กœ 2ํ˜ธ์„ , 3ํ˜ธ์„ , ์‹ ๋ถ„๋‹น์„ ์ด ๋“ฑ๋ก๋˜์–ด ์žˆ๋‹ค. +3. ๋…ธ์„ ์— ์—ญ์ด ์•„๋ž˜์™€ ๊ฐ™์ด ๋“ฑ๋ก๋˜์–ด ์žˆ๋‹ค.(์™ผ์ชฝ ๋์ด ์ƒํ–‰ ์ข…์ ) + - 2ํ˜ธ์„ : ๊ต๋Œ€ - ( 2km / 3๋ถ„ ) - ๊ฐ•๋‚จ - ( 2km / 3๋ถ„ ) - ์—ญ์‚ผ + - 3ํ˜ธ์„ : ๊ต๋Œ€ - ( 3km / 2๋ถ„ ) - ๋‚จ๋ถ€ํ„ฐ๋ฏธ๋„ - ( 6km / 5๋ถ„ ) - ์–‘์žฌ - ( 1km / 1๋ถ„ ) - ๋งค๋ด‰ + - ์‹ ๋ถ„๋‹น์„ : ๊ฐ•๋‚จ - ( 2km / 8๋ถ„ ) - ์–‘์žฌ - ( 10km / 3๋ถ„ ) - ์–‘์žฌ์‹œ๋ฏผ์˜์ˆฒ +``` + +### ๊ฒฝ๋กœ ์กฐํšŒ ๊ธฐ๋Šฅ + + + +- ์ถœ๋ฐœ์—ญ๊ณผ ๋„์ฐฉ์—ญ์„ ์ž…๋ ฅ๋ฐ›์•„ ๊ฒฝ๋กœ๋ฅผ ์กฐํšŒํ•œ๋‹ค. +- ๊ฒฝ๋กœ ์กฐํšŒ ์‹œ ์ด ๊ฑฐ๋ฆฌ, ์ด ์†Œ์š” ์‹œ๊ฐ„์„ ํ•จ๊ป˜ ์ถœ๋ ฅํ•œ๋‹ค. +- ๊ฒฝ๋กœ ์กฐํšŒ ์‹œ `์ตœ๋‹จ ๊ฑฐ๋ฆฌ` ๋˜๋Š” `์ตœ์†Œ ์‹œ๊ฐ„` ์˜ต์…˜์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค. + +### ์˜ˆ์™ธ ์ฒ˜๋ฆฌ + +- ์ถœ๋ฐœ์—ญ๊ณผ ๋„์ฐฉ์—ญ์€ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผ ํ•œ๋‹ค. +- ์กด์žฌํ•˜์ง€ ์•Š๋Š” ์—ญ์„ ์ถœ๋ฐœ์—ญ ๋˜๋Š” ๋„์ฐฉ์—ญ์œผ๋กœ ์ž…๋ ฅํ•  ์ˆ˜ ์—†๋‹ค. +- ๊ฒฝ๋กœ ์กฐํšŒ ์‹œ ์ถœ๋ฐœ์—ญ๊ณผ ๋„์ฐฉ์—ญ์ด ๊ฐ™์„ ์ˆ˜ ์—†๋‹ค. +- ๊ฒฝ๋กœ ์กฐํšŒ ์‹œ ์ถœ๋ฐœ์—ญ๊ณผ ๋„์ฐฉ์—ญ์ด ์—ฐ๊ฒฐ๋˜์ง€ ์•Š์œผ๋ฉด ๊ฒฝ๋กœ๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์—†๋‹ค. +- ๊ทธ ์™ธ ์ •์ƒ์ ์œผ๋กœ ํ”„๋กœ๊ทธ๋žจ์ด ์ˆ˜ํ–‰๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ `alert`์œผ๋กœ ์—๋Ÿฌ๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค. + +
+ +## ๐Ÿ’ป ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์‹คํ–‰ ๊ฒฐ๊ณผ + +### ๊ฒฝ๋กœ ์กฐํšŒ + + + +## โœ… ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์š”๊ตฌ์‚ฌํ•ญ + +### ๊ธธ์ฐพ๊ธฐ ๊ด€๋ จ ๊ธฐ๋Šฅ + +- ์ถœ๋ฐœ์—ญ์„ ์ž…๋ ฅํ•˜๋Š” input ํƒœ๊ทธ๋Š” `departure-station-name-input` id ์†์„ฑ๊ฐ’์„ ๊ฐ€์ง„๋‹ค. +- ๋„์ฐฉ์—ญ์„ ์ž…๋ ฅํ•˜๋Š” input ํƒœ๊ทธ๋Š” `arrival-station-name-input` id ์†์„ฑ๊ฐ’์„ ๊ฐ€์ง„๋‹ค. +- ์ตœ๋‹จ๊ฑฐ๋ฆฌ, ์ตœ์†Œ์‹œ๊ฐ„์„ ์„ ํƒํ•˜๋Š” radio๋Š” `search-type` name ์†์„ฑ๊ฐ’์„ ๊ฐ€์ง„๋‹ค. + - **radio option์˜ default ๊ฐ’์€ ์ตœ๋‹จ๊ฑฐ๋ฆฌ์ด๋‹ค.** +- ๊ธธ์ฐพ๊ธฐ ๋ฒ„ํŠผ์€ `search-button` id ์†์„ฑ๊ฐ’์„ ๊ฐ€์ง„๋‹ค. +- ๐Ÿ“ ๊ฒฐ๊ณผ๋Š” `table`์„ ์ด์šฉํ•˜์—ฌ ๋ณด์—ฌ์ค€๋‹ค. + +## โ—๏ธํžŒํŠธ + +## ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” + +์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ• ์ค‘์— ํ•˜๋‚˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด data๋ฅผ `export`ํ•˜๊ณ , `import`ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. + +```javascript +export const users = [ + { + name: "Alt", + }, + { + name: "Jamie", + }, + { + name: "Sony", + }, +]; + +export const courses = [ + { + name: "frontend", + }, + { + name: "backend", + }, + { + name: "iOS", + }, + { + name: "Android", + }, +]; +``` + +์œ„์™€ ๊ฐ™์ด ๋ฐ์ดํ„ฐ๋ฅผ `export`ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋ฐ์ดํ„ฐ๋ฅผ `import` ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. + +```javascript +import { users, courses } from "./data.js"; + +function App() { + this.users = users; + this.courses = courses; +} +``` + +## ์ตœ๋‹จ ๊ฒฝ๋กœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ + +- `utils/Dijkstra.js` ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๊ฐ„ํŽธํ•˜๊ฒŒ ์ตœ๋‹จ๊ฑฐ๋ฆฌ๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋‹ค. +- ์ •์ (Vertex)๊ณผ ๊ฐ„์„ (Edge), ๊ทธ๋ฆฌ๊ณ  ๊ฐ€์ค‘์น˜ ๊ฐœ๋…์„ ์ด์šฉ + - ์ •์ : ์ง€ํ•˜์ฒ ์—ญ + - ๊ฐ„์„ : ์ง€ํ•˜์ฒ ์—ญ ์—ฐ๊ฒฐ์ •๋ณด + - ๊ฐ€์ค‘์น˜: ๊ฑฐ๋ฆฌ or ์†Œ์š” ์‹œ๊ฐ„ +- ์ตœ๋‹จ ๊ฑฐ๋ฆฌ ๊ธฐ์ค€ ์กฐํšŒ ์‹œ ๊ฐ€์ค‘์น˜๋ฅผ ๊ฑฐ๋ฆฌ๋กœ ์„ค์ • +- ์ตœ์†Œ ์‹œ๊ฐ„ ๊ธฐ์ค€ ์กฐํšŒ ์‹œ ๊ฐ€์ค‘์น˜๋ฅผ ์‹œ๊ฐ„์œผ๋กœ ์„ค์ • + +```javascript +import Dijkstra from "./utils/Dijkstra.js"; +const dijkstra = new Dijkstra(); + +//dijkstra.addEdge("์ถœ๋ฐœ์—ญ", "๋„์ฐฉ์—ญ", ๊ฑฐ๋ฆฌ ๋˜๋Š” ์‹œ๊ฐ„); +dijkstra.addEdge("V1", "V2", 2); +dijkstra.addEdge("V2", "V3", 2); +dijkstra.addEdge("V1", "V3", 100); + +const result = dijkstra.findShortestPath("V1", "V3"); +// result = ["V1", "V2", "V3"] +``` + +#### ํ…Œ์ŠคํŠธ์„ค๋ช… + + + +- ์—ญ ์‚ฌ์ด์˜ ๊ฑฐ๋ฆฌ๋ฅผ ๊ณ ๋ คํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ V1->V3 ๊ฒฝ๋กœ๊ฐ€ ์ตœ๋‹จ ๊ฒฝ๋กœ +- ์—ญ ์‚ฌ์ด์˜ ๊ฑฐ๋ฆฌ๋ฅผ ๊ณ ๋ คํ•  ๊ฒฝ์šฐ V1->V3 ๊ฒฝ๋กœ์˜ ๊ฑฐ๋ฆฌ๋Š” 100km, V1->V2->V3 ๊ฒฝ๋กœ์˜ ๊ฑฐ๋ฆฌ๋Š” 4km์ด๋ฏ€๋กœ ์ตœ๋‹จ ๊ฒฝ๋กœ๋Š” V1->V2->V3 + +
+ +### ์š”๊ตฌ์‚ฌํ•ญ + +- ์‚ฌ์šฉ์ž๊ฐ€ ์ž˜๋ชป๋œ ์ž…๋ ฅ ๊ฐ’์„ ์ž‘์„ฑํ•œ ๊ฒฝ์šฐ `alert`์„ ์ด์šฉํ•ด ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ , ์žฌ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค. +- ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(jQuery, Lodash ๋“ฑ)๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , ์ˆœ์ˆ˜ Vanilla JS๋กœ๋งŒ ๊ตฌํ˜„ํ•œ๋‹ค. +- **์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ ์ปจ๋ฒค์…˜์„ ์ง€ํ‚ค๋ฉด์„œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ** ํ•œ๋‹ค + - [https://google.github.io/styleguide/jsguide.html](https://google.github.io/styleguide/jsguide.html) + - [https://ui.toast.com/fe-guide/ko_CODING-CONVENSION/](https://ui.toast.com/fe-guide/ko_CODING-CONVENTION) +- **indent(์ธ๋ดํŠธ, ๋“ค์—ฌ์“ฐ๊ธฐ) depth๋ฅผ 3์ด ๋„˜์ง€ ์•Š๋„๋ก ๊ตฌํ˜„ํ•œ๋‹ค. 2๊นŒ์ง€๋งŒ ํ—ˆ์šฉ**ํ•œ๋‹ค. + - ์˜ˆ๋ฅผ ๋“ค์–ด while๋ฌธ ์•ˆ์— if๋ฌธ์ด ์žˆ์œผ๋ฉด ๋“ค์—ฌ์“ฐ๊ธฐ๋Š” 2์ด๋‹ค. + - ํžŒํŠธ: indent(์ธ๋ดํŠธ, ๋“ค์—ฌ์“ฐ๊ธฐ) depth๋ฅผ ์ค„์ด๋Š” ์ข‹์€ ๋ฐฉ๋ฒ•์€ ํ•จ์ˆ˜(๋˜๋Š” ๋ฉ”์†Œ๋“œ)๋ฅผ ๋ถ„๋ฆฌํ•˜๋ฉด ๋œ๋‹ค. +- **ํ•จ์ˆ˜(๋˜๋Š” ๋ฉ”์†Œ๋“œ)์˜ ๊ธธ์ด๊ฐ€ 15๋ผ์ธ์„ ๋„˜์–ด๊ฐ€์ง€ ์•Š๋„๋ก ๊ตฌํ˜„ํ•œ๋‹ค.** + - ํ•จ์ˆ˜(๋˜๋Š” ๋ฉ”์†Œ๋“œ)๊ฐ€ ํ•œ ๊ฐ€์ง€ ์ผ๋งŒ ์ž˜ ํ•˜๋„๋ก ๊ตฌํ˜„ํ•œ๋‹ค. +- ๋ณ€์ˆ˜ ์„ ์–ธ์‹œ [var](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var) ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค. [const](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const) ์™€ [let](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let) ์„ ์‚ฌ์šฉํ•œ๋‹ค. +- [import](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import) ๋ฌธ์„ ์ด์šฉํ•ด ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ชจ๋“ˆํ™”ํ•˜๊ณ  ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ ๋‹ค. +- [template literal](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)์„ ์ด์šฉํ•ด ๋ฐ์ดํ„ฐ์™€ html string์„ ๊ฐ€๋…์„ฑ ์ข‹๊ฒŒ ํ‘œํ˜„ํ•œ๋‹ค. + +
+ +## ๐Ÿ“ ๋ฏธ์…˜ ์ €์žฅ์†Œ ๋ฐ ์ง„ํ–‰ ์š”๊ตฌ์‚ฌํ•ญ + +- ๋ฏธ์…˜์€ [https://github.com/woowacourse/javascript-subway-path-precourse](https://github.com/woowacourse/javascript-subway-path-precourse) ์ €์žฅ์†Œ๋ฅผ fork/cloneํ•ด ์‹œ์ž‘ํ•œ๋‹ค. +- **๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์ „์— javascript-subway-path-precourse/docs/README.md ํŒŒ์ผ์— ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ ๋ชฉ๋ก**์„ ์ •๋ฆฌํ•ด ์ถ”๊ฐ€ํ•œ๋‹ค. +- **git์˜ commit ๋‹จ์œ„๋Š” ์•ž ๋‹จ๊ณ„์—์„œ README.md ํŒŒ์ผ์— ์ •๋ฆฌํ•œ ๊ธฐ๋Šฅ ๋ชฉ๋ก ๋‹จ์œ„๋กœ ์ถ”๊ฐ€**ํ•œ๋‹ค. +- [ํ”„๋ฆฌ์ฝ”์Šค ๊ณผ์ œ ์ œ์ถœ](https://github.com/woowacourse/woowacourse-docs/tree/master/precourse) ๋ฌธ์„œ ์ ˆ์ฐจ๋ฅผ ๋”ฐ๋ผ ๋ฏธ์…˜์„ ์ œ์ถœํ•œ๋‹ค. diff --git a/images/dijkstra_example.png b/images/dijkstra_example.png new file mode 100644 index 0000000..7c75197 Binary files /dev/null and b/images/dijkstra_example.png differ diff --git a/images/path_result.gif b/images/path_result.gif new file mode 100644 index 0000000..ee394bd Binary files /dev/null and b/images/path_result.gif differ diff --git a/images/path_result.jpg b/images/path_result.jpg new file mode 100644 index 0000000..40a4bed Binary files /dev/null and b/images/path_result.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..82a634c --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + ์ง€ํ•˜์ฒ  ๊ธธ์ฐพ๊ธฐ + + + +
+
+ + + diff --git a/src/Core/Component.js b/src/Core/Component.js new file mode 100644 index 0000000..b435032 --- /dev/null +++ b/src/Core/Component.js @@ -0,0 +1,22 @@ +import { reRenderEvent, dispatchReRender } from "../utils/events.js"; + +export default class Component { + constructor() { + this.state = { + start: "", + end: "", + method: "minimumDistance", + route: [], + short: [], + }; + } + + setState(state) { + this.state = state; + dispatchReRender(); + } + + mount() {} + + render() {} +} diff --git a/src/FindRoute/FindRoute.js b/src/FindRoute/FindRoute.js new file mode 100644 index 0000000..5cc3224 --- /dev/null +++ b/src/FindRoute/FindRoute.js @@ -0,0 +1,188 @@ +import Component from "../Core/Component.js"; +import { stationData } from "../StationData/stationData.js"; +import { + isMoreThanTwoWords, + existStationName, + isDiffrentStationName, + haveSpaceInName, +} from "../utils/validateStationName.js"; +import { ERROR } from "../utils/error.js"; +import { + dijkstraDistance, + dijkstraTime, +} from "../utils/dijkstraTimeDistance.js"; + +export default class FindRoute extends Component { + constructor() { + super(); + this.state = { + start: "", + end: "", + method: "minimumDistance", + route: [], + short: [], + }; + + this.handleDepartureStation = (departure) => { + if ( + isMoreThanTwoWords(departure) && + existStationName(departure) && + haveSpaceInName(departure) + ) { + this.setState({ ...this.state, start: departure }); + } else { + alert(ERROR.MESSAGE); + } + }; + + this.handleArrivalStation = (arrival) => { + if ( + isMoreThanTwoWords(arrival) && + existStationName(arrival) && + haveSpaceInName(arrival) && + isDiffrentStationName(this.state.start, arrival) + ) { + this.setState({ ...this.state, end: arrival }); + } else { + alert(ERROR.MESSAGE); + } + }; + + this.handleDistanceInput = (distance) => { + this.setState({ ...this.state, method: distance }); + }; + + this.handleTimeInput = (time) => { + this.setState({ ...this.state, method: time }); + }; + + this.findRouteButtonClick = () => { + if (this.state.method === "minimumDistance") { + const routeResult = dijkstraDistance.findShortestPath( + this.state.start, + this.state.end + ); + const path = calculateShort(routeResult); + this.setState({ ...this.state, route: [...routeResult], short: path }); + } else { + const routeResult = dijkstraTime.findShortestPath( + this.state.start, + this.state.end + ); + const path = calculateShort(routeResult); + this.setState({ ...this.state, route: [...routeResult], short: path }); + } + }; + } + + mount() { + this.mountDepartureStationInput(); + this.mountArrivalStationInput(); + this.mountMinimumDistanceInput(); + this.mountMinimumTimeInput(); + this.mountFindRouteButton(); + } + + mountDepartureStationInput() { + const departureStationInput = document.querySelector( + "#departure-station-name-input" + ); + departureStationInput?.addEventListener("blur", (event) => { + this.handleDepartureStation(event.target.value); + }); + } + + mountArrivalStationInput() { + const arrivalStationInput = document.querySelector( + "#arrival-station-name-input" + ); + arrivalStationInput?.addEventListener("blur", (event) => { + this.handleArrivalStation(event.target.value); + }); + } + + mountMinimumDistanceInput() { + const minimumDistanceInput = document.querySelector("#min-distance"); + minimumDistanceInput?.addEventListener("change", (event) => { + this.handleDistanceInput(event.target.value); + }); + } + + mountMinimumTimeInput() { + const minimumTimeInput = document.querySelector("#min-time"); + minimumTimeInput?.addEventListener("change", (event) => { + this.handleTimeInput(event.target.value); + }); + } + + mountFindRouteButton() { + const findRouteButton = document.querySelector("#search-button"); + findRouteButton?.addEventListener("click", this.findRouteButtonClick); + } + + render() { + const { start, end, method, route, short } = this.state; + return ` +

๐Ÿš‡ ์ง€ํ•˜์ฒ  ๊ธธ์ฐพ๊ธฐ

+
+ ์ถœ๋ฐœ์—ญ + +
+
+ ๋„์ฐฉ์—ญ + +
+
+ + + + +
+ + ${ + route.length === 0 + ? "" + : `
+

๐Ÿ“ ๊ฒฐ๊ณผ

+

์ตœ์†Œ์‹œ๊ฐ„

+ + + + + + + + + + + + + + + + +
์ด ๊ฑฐ๋ฆฌ์ด ์†Œ์š” ์‹œ๊ฐ„
${short[1]}km${short[0]}๋ถ„
${route.join("โ†’")}
+
` + } + `; + } +} + +function calculateShort(result) { + let time = 0; + let distance = 0; + for (let i = 0; i < result.length - 1; i++) { + const v1 = result[i]; + const v2 = result[i + 1]; + + stationData.forEach((station) => { + if (station.V1 === v1 && station.V2 === v2) { + time += station.time; + distance += station.distance; + } + }); + } + return [time, distance]; +} diff --git a/src/StationData/stationData.js b/src/StationData/stationData.js new file mode 100644 index 0000000..84e0d8c --- /dev/null +++ b/src/StationData/stationData.js @@ -0,0 +1,21 @@ +export { stationData, stationNameArray }; + +const stationData = [ + { V1: "๊ต๋Œ€", V2: "๊ฐ•๋‚จ", distance: 2, time: 3 }, + { V1: "๊ฐ•๋‚จ", V2: "์—ญ์‚ผ", distance: 2, time: 3 }, + { V1: "๊ต๋Œ€", V2: "๋‚จ๋ถ€ํ„ฐ๋ฏธ๋„", distance: 3, time: 2 }, + { V1: "๋‚จ๋ถ€ํ„ฐ๋ฏธ๋„", V2: "์–‘์žฌ", distance: 6, time: 5 }, + { V1: "์–‘์žฌ", V2: "๋งค๋ด‰", distance: 1, time: 1 }, + { V1: "๊ฐ•๋‚จ", V2: "์–‘์žฌ", distance: 2, time: 8 }, + { V1: "์–‘์žฌ", V2: "์–‘์žฌ์‹œ๋ฏผ์˜์ˆฒ", distance: 10, time: 3 }, +]; + +const stationNameArray = [ + "๊ต๋Œ€", + "๊ฐ•๋‚จ", + "์—ญ์‚ผ", + "๋‚จ๋ถ€ํ„ฐ๋ฏธ๋„", + "์–‘์žฌ", + "๋งค๋ด‰", + "์–‘์žฌ์‹œ๋ฏผ์˜์ˆฒ", +]; diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..5253888 --- /dev/null +++ b/src/index.js @@ -0,0 +1,13 @@ +import { dispatchReRender } from "./utils/events.js"; +import FindRoute from "./FindRoute/FindRoute.js"; + +const app = document.querySelector("#app"); +const findRoute = new FindRoute(); + +function reRender() { + app.innerHTML = findRoute.render(); + findRoute.mount(); +} + +window.addEventListener("changeState", reRender); +dispatchReRender(); diff --git a/src/utils/Dijkstra.js b/src/utils/Dijkstra.js new file mode 100644 index 0000000..7c6cfd5 --- /dev/null +++ b/src/utils/Dijkstra.js @@ -0,0 +1,220 @@ +export default function Dijkstra() { + const Node = { + init: function (val, priority) { + this.val = val; + this.priority = priority; + }, + }; + + const PriorityQueue = { + init: function () { + this.values = []; + }, + enqueue: function (val, priority) { + const newNode = Object.create(Node); + newNode.init(val, priority); + + this.values.push(newNode); + + let idxOfNewNode = this.values.length - 1; + + while (idxOfNewNode > 0) { + const idxOfParentNode = Math.floor((idxOfNewNode - 1) / 2); + + const parentNode = this.values[idxOfParentNode]; + + if (priority < parentNode.priority) { + this.values[idxOfParentNode] = newNode; + this.values[idxOfNewNode] = parentNode; + idxOfNewNode = idxOfParentNode; + continue; + } + break; + } + return this.values; + }, + dequeue: function () { + if (this.values.length == 0) { + return; + } + const dequeued = this.values.shift(); + const lastItem = this.values.pop(); + if (!lastItem) { + return dequeued; + } + this.values.unshift(lastItem); + + let idxOfTarget = 0; + + while (true) { + let idxOfLeftChild = idxOfTarget * 2 + 1; + let idxOfRightChild = idxOfTarget * 2 + 2; + let leftChild = this.values[idxOfLeftChild]; + let rightChild = this.values[idxOfRightChild]; + + function swap(direction) { + const idxOfChild = + direction == "left" ? idxOfLeftChild : idxOfRightChild; + const child = direction == "left" ? leftChild : rightChild; + this.values[idxOfChild] = this.values[idxOfTarget]; + this.values[idxOfTarget] = child; + idxOfTarget = idxOfChild; + } + + if (!leftChild) { + return dequeued; + } + + if (!rightChild) { + if (leftChild.priority < lastItem.priority) { + swap.call(this, "left"); + continue; + } + return dequeued; + } + + if (leftChild.priority == rightChild.priority) { + swap.call(this, "left"); + continue; + } + + if ( + leftChild.priority < rightChild.priority && + leftChild.priority < lastItem.priority + ) { + swap.call(this, "left"); + continue; + } + + if ( + rightChild.priority < leftChild.priority && + rightChild.priority < lastItem.priority + ) { + swap.call(this, "right"); + continue; + } + } + }, + }; + + const WeightedGraph = { + init: function () { + this.adjacencyList = {}; + this.length = 0; + }, + addVertex: function (vertex) { + if (!this.adjacencyList.hasOwnProperty(vertex)) { + this.adjacencyList[vertex] = {}; + this.length++; + } + }, + addEdge: function (vertex1, vertex2, weight) { + this.addVertex(vertex1); + this.addVertex(vertex2); + this.adjacencyList[vertex1][vertex2] = weight; + this.adjacencyList[vertex2][vertex1] = weight; + return this.adjacencyList; + }, + removeEdge: function (vertex1, vertex2) { + if (!this.adjacencyList.hasOwnProperty(vertex1)) { + return `There's no ${vertex1}`; + } + if (!this.adjacencyList.hasOwnProperty(vertex2)) { + return `There's no ${vertex2}`; + } + + function removeHelper(v1, v2) { + if (!this.adjacencyList.hasOwnProperty(v1)) { + return `There's no edge between ${v1} and ${v2}`; + } + delete this.adjacencyList[v1][v2]; + if (Object.keys(this.adjacencyList[v1]).length == 0) { + delete this.adjacencyList[v1]; + } + } + + removeHelper.call(this, vertex1, vertex2); + removeHelper.call(this, vertex2, vertex1); + + return this.adjacencyList; + }, + removeVertex: function (vertex) { + if (!this.adjacencyList.hasOwnProperty(vertex)) { + return `There's no ${vertex}`; + } + const edges = this.adjacencyList[vertex]; + for (const key in edges) { + this.removeEdge(key, vertex); + } + return this.adjacencyList; + }, + findShortestRoute: function (start, end) { + if (!start || !end) { + throw Error("์ถœ๋ฐœ์ง€์™€ ๋„์ฐฉ์ง€๋ฅผ ๋ชจ๋‘ ์ž…๋ ฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค."); + } + const distance = {}; + const previous = {}; + const pq = Object.create(PriorityQueue); + pq.init(); + pq.enqueue(start, 0); + const visited = {}; + + const hashOfVertex = this.adjacencyList; + for (const vertexName in hashOfVertex) { + const priority = vertexName == start ? 0 : Infinity; + distance[vertexName] = priority; + previous[vertexName] = null; + } + + while (true) { + let current = pq.dequeue(); + if (!current?.val) { + return; + } + current = current.val; + if (current == end) { + break; + } + const neighbors = hashOfVertex[current]; + + for (const vertexName in neighbors) { + if (visited.hasOwnProperty(vertexName)) { + continue; + } + const distFromStart = distance[current] + neighbors[vertexName]; + + if (distFromStart < distance[vertexName]) { + pq.enqueue(vertexName, distFromStart); + distance[vertexName] = distFromStart; + previous[vertexName] = current; + } + } + visited[current] = true; + } + + let node = end; + + const route = []; + while (node) { + route.unshift(node); + node = previous[node]; + } + + return route; + }, + }; + + this.addEdge = (source, target, weight) => { + WeightedGraph.addEdge(source, target, weight); + }; + + this.findShortestPath = (source, target) => { + return WeightedGraph.findShortestRoute(source, target); + }; + + this.addVertex = (vertex) => { + WeightedGraph.addVertex(vertex); + }; + + WeightedGraph.init(); +} diff --git a/src/utils/dijkstraTimeDistance.js b/src/utils/dijkstraTimeDistance.js new file mode 100644 index 0000000..94dcc3a --- /dev/null +++ b/src/utils/dijkstraTimeDistance.js @@ -0,0 +1,11 @@ +import Dijkstra from "../utils/Dijkstra.js"; +import { stationData } from "../StationData/stationData.js"; +export { dijkstraDistance, dijkstraTime }; + +const dijkstraDistance = new Dijkstra(); +const dijkstraTime = new Dijkstra(); + +stationData.forEach((station) => { + dijkstraDistance.addEdge(station.V1, station.V2, station.distance); + dijkstraTime.addEdge(station.V1, station.V2, station.time); +}); diff --git a/src/utils/error.js b/src/utils/error.js new file mode 100644 index 0000000..3d54602 --- /dev/null +++ b/src/utils/error.js @@ -0,0 +1,3 @@ +export const ERROR = { + MESSAGE: "์—ญ์˜ ์ด๋ฆ„์ด ์ž˜๋ชป๋˜์—ˆ์Šต๋‹ˆ๋‹ค.", +}; diff --git a/src/utils/events.js b/src/utils/events.js new file mode 100644 index 0000000..62486bd --- /dev/null +++ b/src/utils/events.js @@ -0,0 +1,4 @@ +export { reRenderEvent, dispatchReRender }; + +const reRenderEvent = new CustomEvent("changeState"); +const dispatchReRender = () => window.dispatchEvent(reRenderEvent); diff --git a/src/utils/validateStationName.js b/src/utils/validateStationName.js new file mode 100644 index 0000000..2a73f4b --- /dev/null +++ b/src/utils/validateStationName.js @@ -0,0 +1,24 @@ +import { stationData, stationNameArray } from "../StationData/stationData.js"; + +export { + isMoreThanTwoWords, + existStationName, + isDiffrentStationName, + haveSpaceInName, +}; + +function isMoreThanTwoWords(stationName) { + return stationName.length >= 2; +} + +function existStationName(stationName) { + return stationNameArray.includes(stationName); +} + +function isDiffrentStationName(startStation, endStation) { + return startStation !== endStation; +} + +function haveSpaceInName(stationName) { + return !stationName.split("").includes(""); +}