View Code? Open in Web Editor
NEW
This project forked from woowacourse/javascript-subway-map-precourse
License: MIT License
javascript-subway-map-precourse's Introduction
๐ ์งํ์ฒ ๋
ธ์ ๋ ๋ฏธ์
์งํ์ฒ ์ญ ๊ด๋ จ ๊ธฐ๋ฅ
- ์งํ์ฒ ์ญ์ ๋ฑ๋กํ๊ณ ์ญ์ ํ ์ ์๋ค. (๋จ, ๋
ธ์ ์ ๋ฑ๋ก๋ ์ญ์ ์ญ์ ํ ์ ์๋ค)
- ์ค๋ณต๋ ์งํ์ฒ ์ญ ์ด๋ฆ์ด ๋ฑ๋ก๋ ์ ์๋ค.
- ์งํ์ฒ ์ญ์ 2๊ธ์ ์ด์์ด์ด์ผ ํ๋ค.
- ์งํ์ฒ ์ญ์ ๋ชฉ๋ก์ ์กฐํํ ์ ์๋ค.
์งํ์ฒ ๋
ธ์ ๊ด๋ จ ๊ธฐ๋ฅ
- ์งํ์ฒ ๋
ธ์ ์ ๋ฑ๋กํ๊ณ ์ญ์ ํ ์ ์๋ค.
- ์ค๋ณต๋ ์งํ์ฒ ๋
ธ์ ์ด๋ฆ์ด ๋ฑ๋ก๋ ์ ์๋ค.
- ๋
ธ์ ๋ฑ๋ก ์ ์ํ ์ข
์ ์ญ๊ณผ ํํ ์ข
์ ์ญ์ ์
๋ ฅ๋ฐ๋๋ค.
- ์งํ์ฒ ๋
ธ์ ์ ๋ชฉ๋ก์ ์กฐํํ ์ ์๋ค.
์งํ์ฒ ๊ตฌ๊ฐ ์ถ๊ฐ ๊ธฐ๋ฅ
- ์งํ์ฒ ๋
ธ์ ์ ๊ตฌ๊ฐ์ ์ถ๊ฐํ๋ ๊ธฐ๋ฅ์ ๋
ธ์ ์ ์ญ์ ์ถ๊ฐํ๋ ๊ธฐ๋ฅ์ด๋ผ๊ณ ๋ ํ ์ ์๋ค.
- ์ญ๊ณผ ์ญ์ฌ์ด๋ฅผ ๊ตฌ๊ฐ์ด๋ผ ํ๊ณ ์ด ๊ตฌ๊ฐ๋ค์ ๋ชจ์์ด ๋
ธ์ ์ด๋ค.
- ํ๋์ ์ญ์ ์ฌ๋ฌ๊ฐ์ ๋
ธ์ ์ ์ถ๊ฐ๋ ์ ์๋ค.
- ์ญ๊ณผ ์ญ ์ฌ์ด์ ์๋ก์ด ์ญ์ด ์ถ๊ฐ ๋ ์ ์๋ค.
- ๋
ธ์ ์์ ๊ฐ๋๊ธธ์ ์๊ธธ ์ ์๋ค.
![](/images/section1.png)
์งํ์ฒ ๊ตฌ๊ฐ ์ญ์ ๊ธฐ๋ฅ
- ๋
ธ์ ์ ๋ฑ๋ก๋ ์ญ์ ์ ๊ฑฐํ ์ ์๋ค.
- ์ข
์ ์ ์ ๊ฑฐํ ๊ฒฝ์ฐ ๋ค์ ์ญ์ด ์ข
์ ์ด ๋๋ค.
- ๋
ธ์ ์ ํฌํจ๋ ์ญ์ด ๋๊ฐ ์ดํ์ผ ๋๋ ์ญ์ ์ ๊ฑฐํ ์ ์๋ค.
![](/images/section2.png)
์งํ์ฒ ๋
ธ์ ์ ๋ฑ๋ก๋ ์ญ ์กฐํ ๊ธฐ๋ฅ
- ๋
ธ์ ์ ์ํ ์ข
์ ๋ถํฐ ํํ ์ข
์ ๊น์ง ์ฐ๊ฒฐ๋ ์์๋๋ก ์ญ ๋ชฉ๋ก์ ์กฐํํ ์ ์๋ค.
๐ป ํ๋ก๊ทธ๋จ ์คํ ๊ฒฐ๊ณผ
![](/images/station_manager.gif)
![](/images/line_manager.gif)
![](/images/section_manager.gif)
![](/images/map_print_manager.gif)
โ
ํ๋ก๊ทธ๋๋ฐ ์๊ตฌ์ฌํญ
- ์ญ ๊ด๋ฆฌ button ํ๊ทธ๋
#station-manager-button
id๊ฐ์ ๊ฐ์ง๋ค.
- ๋
ธ์ ๊ด๋ฆฌ button ํ๊ทธ๋
#line-manager-button
id๊ฐ์ ๊ฐ์ง๋ค.
- ๊ตฌ๊ฐ ๊ด๋ฆฌ button ํ๊ทธ๋
#section-manager-button
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ๋
ธ์ ๋ ์ถ๋ ฅ ๊ด๋ฆฌ button ํ๊ทธ๋
#map-print-manager-button
id๊ฐ์ ๊ฐ์ง๋ค.
์งํ์ฒ ์ญ ๊ด๋ จ ๊ธฐ๋ฅ
- ์งํ์ฒ ์ญ์ ์
๋ ฅํ๋ input ํ๊ทธ๋
#station-name-input
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ์ญ์ ์ถ๊ฐํ๋ button ํ๊ทธ๋
#station-add-button
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ์ญ์ ์ญ์ ํ๋ button ํ๊ทธ๋
.station-delete-button
class๊ฐ์ ๊ฐ์ง๋ค.
์งํ์ฒ ๋
ธ์ ๊ด๋ จ ๊ธฐ๋ฅ
- ์งํ์ฒ ๋
ธ์ ์ ์ด๋ฆ์ ์
๋ ฅํ๋ input ํ๊ทธ๋
#line-name-input
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ๋
ธ์ ์ ์ํ ์ข
์ ์ ์ ํํ๋ select ํ๊ทธ๋
#line-start-station-selector
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ๋
ธ์ ์ ํํ ์ข
์ ์ ์ ํํ๋ select ํ๊ทธ๋
#line-end-station-selector
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ๋
ธ์ ์ ์ถ๊ฐํ๋ button ํ๊ทธ๋
#line-add-button
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ๋
ธ์ ์ ์ญ์ ํ๋ button ํ๊ทธ๋
.line-delete-button
class๊ฐ์ ๊ฐ์ง๋ค.
์งํ์ฒ ๊ตฌ๊ฐ ์ถ๊ฐ ๊ธฐ๋ฅ
- ์งํ์ฒ ๋
ธ์ ์ ์ ํํ๋ button ํ๊ทธ๋
.section-line-menu-button
class๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ๊ตฌ๊ฐ์ ์ค์ ํ ์ญ select ํ๊ทธ๋
#section-station-selector
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ๊ตฌ๊ฐ์ ์์๋ฅผ ์
๋ ฅํ๋ input ํ๊ทธ๋
#section-order-input
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ๊ตฌ๊ฐ์ ๋ฑ๋กํ๋ button ํ๊ทธ๋
#section-add-button
id๊ฐ์ ๊ฐ์ง๋ค.
- ์งํ์ฒ ๊ตฌ๊ฐ์ ์ ๊ฑฐํ๋ button ํ๊ทธ๋
.section-delete-button
class๊ฐ์ ๊ฐ์ง๋ค.
์งํ์ฒ ๋
ธ์ ๋ ์ถ๋ ฅ ๊ธฐ๋ฅ
- ์งํ์ฒ ๋
ธ์ ๋ ์ถ๋ ฅ ๋ฒํผ์ ๋๋ฅด๋ฉด
<div class="map"></div>
ํ๊ทธ๋ฅผ ๋ง๋ค๊ณ ํด๋น ํ๊ทธ ๋ด๋ถ์ ๋
ธ์ ๋๋ฅผ ์ถ๋ ฅํ๋ค.
- ์ฌ์ฉ์๊ฐ ์๋ชป๋ ์
๋ ฅ ๊ฐ์ ์์ฑํ ๊ฒฝ์ฐ
alert
์ ์ด์ฉํด ๋ฉ์์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ณ , ์ฌ์
๋ ฅํ ์ ์๊ฒ ํ๋ค.
- ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(jQuery, Lodash ๋ฑ)๋ฅผ ์ฌ์ฉํ์ง ์๊ณ , ์์ Vanilla JS๋ก๋ง ๊ตฌํํ๋ค.
- ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์ปจ๋ฒค์
์ ์งํค๋ฉด์ ํ๋ก๊ทธ๋๋ฐ ํ๋ค
- indent(์ธ๋ดํธ, ๋ค์ฌ์ฐ๊ธฐ) depth๋ฅผ 3์ด ๋์ง ์๋๋ก ๊ตฌํํ๋ค. 2๊น์ง๋ง ํ์ฉํ๋ค.
- ์๋ฅผ ๋ค์ด while๋ฌธ ์์ if๋ฌธ์ด ์์ผ๋ฉด ๋ค์ฌ์ฐ๊ธฐ๋ 2์ด๋ค.
- ํํธ: indent(์ธ๋ดํธ, ๋ค์ฌ์ฐ๊ธฐ) depth๋ฅผ ์ค์ด๋ ์ข์ ๋ฐฉ๋ฒ์ ํจ์(๋๋ ๋ฉ์๋)๋ฅผ ๋ถ๋ฆฌํ๋ฉด ๋๋ค.
- ํจ์(๋๋ ๋ฉ์๋)์ ๊ธธ์ด๊ฐ 15๋ผ์ธ์ ๋์ด๊ฐ์ง ์๋๋ก ๊ตฌํํ๋ค.
- ํจ์(๋๋ ๋ฉ์๋)๊ฐ ํ ๊ฐ์ง ์ผ๋ง ์ ํ๋๋ก ๊ตฌํํ๋ค.
- ๋ณ์ ์ ์ธ์
var
๋ฅผ ์ฌ์ฉํ์ง ์๋๋ค. const
์ let
์ ์ฌ์ฉํ๋ค.
import
๋ฌธ์ ์ด์ฉํด ์คํฌ๋ฆฝํธ๋ฅผ ๋ชจ๋ํํ๊ณ ๋ถ๋ฌ์ฌ ์ ์๊ฒ ๋ง๋ ๋ค.
template literal
์ ์ด์ฉํด ๋ฐ์ดํฐ์ html string์ ๊ฐ๋
์ฑ ์ข๊ฒ ํํํ๋ค.
- data์์ฑ์ ํ์ฉํ์ฌ html ํ๊ทธ์ ์ญ, ๋
ธ์ , ๊ตฌ๊ฐ์ ์ ์ผํ ๋ฐ์ดํฐ ๊ฐ๋ค์ ๊ด๋ฆฌํ๋ค.
- localStorage๋ฅผ ์ด์ฉํ์ฌ, ์๋ก๊ณ ์นจํ๋๋ผ๋ ๊ฐ์ฅ ์ต๊ทผ์ ์์
ํ ์ ๋ณด๋ค์ ๋ถ๋ฌ์ฌ ์ ์๋๋ก ํ๋ค.
๐ ๋ฏธ์
์ ์ฅ์ ๋ฐ ์งํ ์๊ตฌ์ฌํญ