woowacourse / javascript-subway Goto Github PK

View Code? Open in Web Editor NEW

2.0 5.0 27.0 4.95 MB

License: MIT License

HTML 25.48% CSS 70.38% JavaScript 4.13%

webpack woowacourse-fe-lv1-mission

javascript-subway's Introduction

level1 - 지하철 노선도 관리 SPA

Browser History API를 이용해 구현하는 지하철 노선도 관리 SPA

🔥 Projects!

🎯 step1

Webpack을 통한 번들링

Webpack에서 babel을 설정한다.
기타 플러그인 및 설정은 본인이 필요에 따라 추가한다.

라우팅 기능

Browser History Api를 이용하여 SPA처럼 라우팅을 적용한다.

회원 기능

유저는 회원 가입을 할 수 있다,
- 회원 가입시 받는 정보는 email, name, password이다.
유저는 로그인 할 수 있다.
- 로그인하고 나면 로그인 버튼은 로그아웃 버튼으로 변경되어야 한다.
- 로그인한 유저만, 정보의 수정이 가능하다.
- 로그인하지 않은 유저에게는 로그인 외 다른 버튼은 보이지 않는다.
유저는 로그아웃할 수 있다.
- 로그아웃하면 / 루트 페이지로 돌아온다.

🎯🎯 step2

지하철역 관리 기능

지하철 노선 관리 기능

지하철 노선을 등록할 수 있다.
- 지하철 노선의 이름은 2글자 이상이어야 한다.
- 중복된 지하철 노선 이름이 등록될 수 없다.
- 지하철 노선의 이름은 최대 10자 이하이다.
- 지하철 노선 생성시 필요한 값은 색상, 상행역, 하행역, (최초 상행역과 하행역 구간의)거리, 시간이다.
지하철 노선을 수정할 수 있다.
- 지하철 노선의 이름, 상행역, 하행역, 거리, 시간, 색상을 수정할 수 있다.
지하철 노선을 삭제할 수 있다.
- 삭제 시 confirm을 이용하여 한 번 더 유저가 확인할 수 있어야 한다.

지하철 구간 관리 기능

지하철 노선에 구간을 추가, 수정, 삭제할 수 있다.
구간 조회 시, 노선을 변경하면 해당 노선의 Color로 Select 엘리먼트의 배경색을 변경한다.

🎯🎯🎯 step3

전체보기 기능

노선의 상행 종점부터 하행 종점까지 연결된 순서대로 노선과 역 목록을 조회할 수 있다.
조회를 위한 UI는 스스로 만든다.

길찾기 기능

출발역과 도착역을 입력받아 경로를 조회한다.
경로 조회 시 총 거리, 총 소요 시간을 함께 출력한다.
경로 조회 시 최단 거리 또는 최소 시간 옵션을 선택할 수 있다.
길 찾기를 위한 UI는 스스로 만든다.

⚙️ Before Started

로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법

로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있습니다. 이를 위해서는 우선 npm이 설치되어 있어야 합니다. 구글에 npm install 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.

npm install -g live-server

실행은 아래의 커맨드로 할 수 있습니다.

live-server 폴더명

👏 Contributing

만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.

🐞 Bug Report

버그를 발견한다면, Issues에 등록해주세요.

📝 License

This project is MIT licensed.

javascript-subway's People

Contributors

Stargazers

Watchers

javascript-subway's Issues

API에 HTTPS 적용이 필요합니다

🤦🏻 이슈 내용

안녕하세요! API에 https 적용이 필요해보여서 이슈 올립니다!
구현한 걸 배포할 때 보통 Github Pages를 사용하는데, https로 배포됩니다.
이 때문에, API 요청을 보내면 Mixed Content 문제로 응답을 받을 수 없는 상황이 생깁니다.
(http에서 https로 요청을 보내는 것은 가능하지만, https에서 http로 요청을 보낼 수 없는 상태입니다.)

📃 이슈 재현

https로 배포된 페이지에서 통상적인 API 요청을 보낸다.

🕵🏼 기대 결과

정상적인 응답을 받고, 페이지가 의도대로 정상 동작한다.

😢 실제 결과

위 에러 메시지와 함께 정상적인 응답을 받을 수 없다.

@jho2301

1225

[5688](A co 67) ## 🤦🏻 이슈 내용

POST /members HTTP/1.1
Content-Type: application/json; charset=UTF-8
Host: localhost:42745
Content-Length: 96

{
"email" : "[email protected]",
"password" : "OTHER_password",
"name" : "사용자"
}
HTTP/1.1 201 Created
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Location: /members/2
Date: Thu, 18 Mar 2021 18:30:48 GMT
Keep-Alive: timeout=60
Connection: keep-alive

🕵🏼 기대 결과

경로 조회 시 에러 처리

경로 조회 시 예외 상황 에러 메시지 처리하기

존재하지 않은 역
출발역과 도착역이 같은 경우

Feature Suggestion: 아이디 중복을 확인할 수 있는 API가 필요합니다.

https://woowacourse.slack.com/archives/C01KX4WCV5X/p1616111219066100

노선 수정 시 request body 변경

🤦🏻 이슈 내용

노선 내의 역들은 구간 수정을 통해 생성과 삭제가 가능하게 때문에,
노선 정보 수정 시, 역과 구간의 정보(upStationId, downStationId, distance, duration)는 포함되지 않아도 된다고 생각합니다.

변경 전

PUT /lines/1 HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJpZFwiOjEsXCJlbWFpbFwiOlwiZW1haWxAZW1haWwuY29tXCIsXCJwYXNzd29yZFwiOlwicGFzc3dvcmRcIixcIm5hbWVcIjpcIuyCrOyaqeyekFwiLFwicHJpbmNpcGFsXCI6XCJlbWFpbEBlbWFpbC5jb21cIixcImNyZWRlbnRpYWxzXCI6XCJwYXNzd29yZFwifSIsImlhdCI6MTYxNjgyODExNywiZXhwIjoxNjE2ODMxNzE3fQ.c-YLzCIE9wOotZxqqQC85yjo32yFsw88EBnzk7Pc9VU
Content-Type: application/json; charset=UTF-8
Host: localhost:45515
Content-Length: 55

{
  "name" : "구분당선",
  "color" : "bg-old-600"
  "upStationId" : 1,
  "downStationId" : 2,
  "distance" : 10,
  "duration" : 10
}

변경 후

PUT /lines/1 HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJpZFwiOjEsXCJlbWFpbFwiOlwiZW1haWxAZW1haWwuY29tXCIsXCJwYXNzd29yZFwiOlwicGFzc3dvcmRcIixcIm5hbWVcIjpcIuyCrOyaqeyekFwiLFwicHJpbmNpcGFsXCI6XCJlbWFpbEBlbWFpbC5jb21cIixcImNyZWRlbnRpYWxzXCI6XCJwYXNzd29yZFwifSIsImlhdCI6MTYxNjgyODExNywiZXhwIjoxNjE2ODMxNzE3fQ.c-YLzCIE9wOotZxqqQC85yjo32yFsw88EBnzk7Pc9VU
Content-Type: application/json; charset=UTF-8
Host: localhost:45515
Content-Length: 55

{
  "name" : "구분당선",
  "color" : "bg-old-600"
}

노선에 등록된 역 삭제 요청에 대한 응답 status 변경 요청

🤦🏻 이슈 내용

노선에 역이 등록되어있을 때, 삭제 요청에 대한 응답 요청이 500으로 옵니다.

🕵🏼 기대 결과

status를 더 명시적으로 만들기 위해 4XX 대로 Bad request 처리해주셨으면 좋겠습니다 !!

지하철 노선 수정 PUT /lines/ 이 노선명을 필수적으로 변경해야합니다

🤦🏻 이슈 내용

노선 이름을 바꾸지 않고, 다른 값들을 수정해서 api 요청 시, 이미 존재하는 노선 이름입니다라는 400 에러메시지 응답.

무조건 노선이름을 수정해야하는듯 보입니다

🕵🏼 기대 결과

노선이름을 수정하지 않고도 여타 값 수정 가능해야할 것 같습니다

1235

🤦🏻 이슈 내용

POST /members HTTP/1.1
Content-Type: application/json; charset=UTF-8
Host: localhost:42745
Content-Length: 96

🕵🏼 기대 결과

DELETE method 오류

안녕하세요, 브라운! 역 삭제 관련해서 오류가 있는 것 같아 확인차 이슈 올렸습니다.
현재 postman 에서 확인 결과 서버 에러가 아닐까 조심스레 추측해보고 있는데.. 확인 부탁드리겠습니다. 😅

🤦🏻 이슈 내용

{
    "timestamp": "2021-03-22T15:14:31.033+00:00",
    "status": 500,
    "error": "Internal Server Error",
    "message": "",
    "path": "/stations/1"
}

🕵🏼 기대 결과

HTTP/1.1 204 No Content
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Date: Mon, 22 Mar 2021 11:06:46 GMT
Keep-Alive: timeout=60
Connection: keep-alive

구간 추가에 대한 Issue

🍺 B역와 C역 사이에 D역을 추가(노선 A역--(거리:5)--B역--(거리:5)--C역)

🤦🏻 이슈 1

2-1) B역와 C역 사이에 거리와 같은 구간을 추가했을 때(B-D: 거리 5)

추가 됨 (문제라고 생각합니다.)
- 이유 : 이렇게 추가가 되면 D와 C역 사이의 거리가 0이 됨

🕵🏼 기대 결과 1

Response

역과 역 사이의 거리보다 좁은 거리를 입력해 주세요.

🤦🏻 이슈 2

2-2) 거리:0, 시간:0 인 구간을 추가했을 때

추가 됨

🕵🏼 기대 결과 2

Response

거리와 시간은 1 이상인 값이어야 합니다.

구간 추가 버그

🤦🏻 이슈 내용

구간 추가 시,

상행 종점 역 추가 후
하행 종점역을 추가하면
기존 하행종점역이 상행종점역에 추가 됩니다.

페이지를 다시 로드해서 서버에서 get line/ 해왔을 때도 같은 결과가 반환됩니다.

초기 노선 aa - bb
상행종점 추가 cc - aa - bb
[에러 발생]하행종점 추가 cc -aa -bb -dd
추가된 하행종점 구간 bb - dd가 서버응답 시 stections 배열 첫번째에 위치함

🕵🏼 기대 결과

상행 종점 역 추가 이후, 하행 종점역을 추가했을 때 정상적으로 하행종점역이 추가된다
->서버응답 body 중 sections배열의 순서가 보장이 된다
아니면 안되는게 원래 스펙인지 궁금합니다! 원의도가 순서를 바로잡기 위해 stations를 이용해야하는 건가요?

Fghhhh

🤦🏻 이슈 내용

POST /members HTTP/1.1
Content-Type: application/json; charset=UTF-8
Host: localhost:42745
Content-Length: 96

🕵🏼 기대 결과

PUT, DELETE 메서드 CORS 오류

🤦🏻 이슈 내용

안녕하세요 브라운
불철주야 고생하십니다.

CORS 이슈로 다시 찾아뵈었습니다. 죄송합니다
전수조사했습니다

역삭제 DELETE /stations/1
역수정 PUT /stations/1
노선 수정 PUT /lines/1
노선 삭제 DELETE /lines/1
구간제거 DELETE /lines/1/sections?stationId=2

위 5개 api에서 cors에러가 발생합니다

나머지 GET, POST API에서는 cors에러가 발생하지 않는 것을 확인했습니다.

DELETE /lines

-General 
Request URL: https://www.boorownie.com/lines/1/sections?stationId=2
Request Method: OPTIONS
Status Code: 403 
Remote Address: 3.35.213.149:443
Referrer Policy: strict-origin-when-cross-origin

- Response Headers 
Connection: keep-alive
Date: Tue, 23 Mar 2021 06:34:05 GMT
Server: nginx/1.18.0 (Ubuntu)
Transfer-Encoding: chunked
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers

- Request Header
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7,zh-CN;q=0.6,zh;q=0.5,th;q=0.4,ja;q=0.3,de;q=0.2,fr;q=0.1
Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: DELETE
Connection: keep-alive
Host: www.boorownie.com
Origin: http://localhost:9000
Referer: http://localhost:9000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

PUT /lines/1/sections


-General

Request URL: https://www.boorownie.com/lines/1/sections?stationId=2
Request Method: OPTIONS
Status Code: 403 
Remote Address: 3.35.213.149:443
Referrer Policy: strict-origin-when-cross-origin

- Response Headers 

Connection: keep-alive
Date: Tue, 23 Mar 2021 06:37:12 GMT
Server: nginx/1.18.0 (Ubuntu)
Transfer-Encoding: chunked
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers

- Response Header

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7,zh-CN;q=0.6,zh;q=0.5,th;q=0.4,ja;q=0.3,de;q=0.2,fr;q=0.1
Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: PUT
Connection: keep-alive
Host: www.boorownie.com
Origin: http://localhost:9000
Referer: http://localhost:9000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

🕵🏼 기대 결과

DELETE /lines

HTTP/1.1 204 No Content
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Date: Mon, 22 Mar 2021 11:06:46 GMT
Keep-Alive: timeout=60
Connection: keep-alive

PUT

HTTP/1.1 200 OK
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Date: Mon, 22 Mar 2021 11:06:47 GMT
Keep-Alive: timeout=60
Connection: keep-alive

@Puterism

지하철 경로 조회 API가 동작하지 않는 Issue

🤦🏻 이슈 내용

Request
http://3.35.213.149/paths?source=292&target=300&type=DISTANCE

Response

{
  "timestamp": "2021-03-24T06:41:08.331+00:00",
  "status": 500,
  "error": "Internal Server Error",
  "message": "",
  "path": "/paths"
}

🕵🏼 기대 결과

조회가 되기를 기대합니다.

노선 조회에 대한 Issue

🤦🏻 이슈 내용

구간을 조회할 때, 구간 간의 거리가 응답으로 오지 않습니다.
구간 등록 요청을 보내야지만 구간 등록 가능 여부를 알 수있습니다.
두 구간 사이의 경로 조회를 매번 해야 구간 간의 거리를 알 수 있습니다.

🕵🏼 기대 결과

Request

GET /lines/1 HTTP / 1.1
Authorization : Bearer {Access Token}
Content-Type: application/json; charset=UTF-8

Response

HTTP/1.1 201 Created
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Location: /stations/1
Content-Type: application/json
Transfer-Encoding: chunked
Date: Mon, 22 Mar 2021 11:06:46 GMT
Keep-Alive: timeout=60
Connection: keep-alive
Content-Length: 138
{
 "id" : 1,
 "name" : "신분당선",
 "color" : "bg-red-600",
 "stations" : [ {
  "id" : 1,
  "name" : "강남역",
  "createdDate" : "2021-03-24T00:38:43.343381",
  "modifiedDate" : "2021-03-24T00:38:43.343381"
 }, 
 {
  "upStationId" : 1,
  "downStationId" : 2,
  "distance" : 10,
  "duration" : 10
 },
 {
  "id" : 2,
  "name" : "광교역",
  "createdDate" : "2021-03-24T00:38:43.362289",
  "modifiedDate" : "2021-03-24T00:38:43.362289"
 } ],
 "createdDate" : "2021-03-24T00:38:43.392073",
 "modifiedDate" : "2021-03-24T00:38:43.392073"
}

지하철역 수정 관련 API 추가 요청

🤦🏻 이슈 내용

지하철역 수정 관련한 api 가 없는 것 같아서 문의 드립니다 !

🕵🏼 기대 결과

Request

PUT /stations/1 HTTP / 1.1
Authorization : Bearer {Access Token}
Content-Type: application/json; charset=UTF-8

{
  "name" : "수정역"
}

Response

HTTP/1.1 201 Created
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Location: /stations/1
Content-Type: application/json
Transfer-Encoding: chunked
Date: Mon, 22 Mar 2021 11:06:46 GMT
Keep-Alive: timeout=60
Connection: keep-alive
Content-Length: 138

{
  "id" : 1,
  "name" : "수정",
  "createdDate" : "2021-03-22T11:06:47.305347",
  "modifiedDate" : "2021-03-22T11:06:47.305347"
}

지하철 역 생성이 아이디 별로 구분되지 않습니다!

🤦🏻 이슈 내용

지하철 역 생성이 아이디 별로 구분되지 않습니다.

예를 들어
[email protected] 에서 강남 을 추가했을 경우
[email protected]에서는 강남이 추가되지 않는 문제가 있습니다.

🕵🏼 기대 결과

계정 내에서만 역이름이 중복되지 않는다면
다른 계정에서 이미 추가한 역이름도 추가가 가능해야 할 것 같습니다.

항상 감사합니다! 브라운 ㅎㅎ 😁

GET /stations, /lines CORS 오류

브라운 고생 많으십니다..
다름아니라 cors 이슈가 발생해서 이슈란에 글올립니다

🤦🏻 이슈 내용


-General
Request URL: https://www.boorownie.com/stations
Request Method: OPTIONS
Status Code: 500 
Remote Address: 3.35.213.149:443
Referrer Policy: strict-origin-when-cross-origin

-Response Header
Connection: keep-alive
Content-Language: en
Content-Length: 455
Content-Type: text/html;charset=utf-8
Date: Mon, 22 Mar 2021 10:48:36 GMT
Server: nginx/1.18.0 (Ubuntu)

-Request Header
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7,zh-CN;q=0.6,zh;q=0.5,th;q=0.4,ja;q=0.3,de;q=0.2,fr;q=0.1
Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: GET
Connection: keep-alive
Host: www.boorownie.com
Origin: http://localhost:9000
Referer: http://localhost:9000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

콘솔

stations:1 Access to fetch at 'https://www.boorownie.com/stations' from origin
 'http://localhost:9000' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
 If an opaque response serves your needs, set the request's mode 
to 'no-cors' to fetch the resource with CORS disabled.

🕵🏼 기대 결과

HTTP/1.1 200 OK
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Content-Type: application/json
Transfer-Encoding: chunked
Date: Sat, 20 Mar 2021 01:03:46 GMT
Keep-Alive: timeout=60
Connection: keep-alive
Content-Length: 142

[ {
  "id" : 1,
  "name" : "지하철역",
  "createdDate" : "2021-03-20T01:03:47.185685",
  "modifiedDate" : "2021-03-20T01:03:47.185685"
} ]

@Puterism

구간 데이터 정렬 요청

🤦🏻 이슈 내용

현재 받아오는 노선 배열 내부에 있는 sections 배열이 정렬 되어있지 않은 것으로 추정됩니다.
이 부분에 대해서 확인 한번 부탁드리겠습니다 !

🕵🏼 기대 결과

정렬된 sections 를 받을 수 있길 희망합니다 :)

구간 아이디 추가 요청

🤦🏻 이슈 내용

구간 삭제 이벤트를 핸들링하기 위해서는 각 section의 key 역할을 할 수 있는 무언가가 필요할 것 같습니다.

🕵🏼 기대 결과

특정 라인의 각 구간마다 아이디가 부여되었으면 좋겠습니다 !

woowacourse / javascript-subway Goto Github PK

javascript-subway's Introduction

level1 - 지하철 노선도 관리 SPA

🔥 Projects!

🎯 step1

Webpack을 통한 번들링

라우팅 기능

회원 기능

🎯🎯 step2

지하철역 관리 기능

지하철 노선 관리 기능

지하철 구간 관리 기능

🎯🎯🎯 step3

전체보기 기능

길찾기 기능

⚙️ Before Started

로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법

👏 Contributing

🐞 Bug Report

📝 License

javascript-subway's People

Contributors

Stargazers

Watchers

Forkers

javascript-subway's Issues

🤦🏻 이슈 내용

📃 이슈 재현

🕵🏼 기대 결과

😢 실제 결과

🕵🏼 기대 결과

🤦🏻 이슈 내용

변경 전

변경 후

🤦🏻 이슈 내용

🕵🏼 기대 결과

🤦🏻 이슈 내용

🕵🏼 기대 결과

🤦🏻 이슈 내용

🕵🏼 기대 결과

🤦🏻 이슈 내용

🕵🏼 기대 결과

🍺 B역와 C역 사이에 D역을 추가(노선 A역--(거리:5)--B역--(거리:5)--C역)

🤦🏻 이슈 1

2-1) B역와 C역 사이에 거리와 같은 구간을 추가했을 때(B-D: 거리 5)

🕵🏼 기대 결과 1

🤦🏻 이슈 2

2-2) 거리:0, 시간:0 인 구간을 추가했을 때

🕵🏼 기대 결과 2

🤦🏻 이슈 내용

🕵🏼 기대 결과

🤦🏻 이슈 내용

🕵🏼 기대 결과

🤦🏻 이슈 내용

DELETE /lines

PUT /lines/1/sections

🕵🏼 기대 결과

DELETE /lines

PUT

🤦🏻 이슈 내용

🕵🏼 기대 결과

🤦🏻 이슈 내용

🕵🏼 기대 결과

🤦🏻 이슈 내용

🕵🏼 기대 결과

Request

Response

🤦🏻 이슈 내용

🕵🏼 기대 결과

🤦🏻 이슈 내용

콘솔

🕵🏼 기대 결과

🤦🏻 이슈 내용

🕵🏼 기대 결과

🤦🏻 이슈 내용

🕵🏼 기대 결과

Recommend Projects

Recommend Topics

Recommend Org