[지하철 노선도 미션] 천영석 미션 제출합니다. #35
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<description>
<description>
<description> localStorage와 data속성을 활용하는 내용 추가
<description> 기본적으로 출력되는 HTML 요소들을 입력했다. display:none으로 숨겨놓고, 버튼을 클릭하면 display:block으로 화면에 표시되도록 할 것이다.
<description> display : none으로 되어 있는 section들을 버튼을 클릭하면 그에 맞는 section이 display:block으로 바뀌면서 화면에 나타난다.
<description> 버튼을 클릭해서 맞는 화면을 출력해줄 때, 이미 띄워저 있는 화면을 숨길 필요가 있기 때문에 화면을 숨기는 함수를 따로 만들었다.
<description>
<description> 버튼을 클릭하면 controller에서 필요하지 않은 화면을 숨기고 필요한 화면을 보여주도록 함수를 호출한다.
<description>
<description> 버튼을 클릭하면 input의 유효성을 검사한 후 localStorage에 저장하는데, 저장할 때 배열로 저장하기 위해서 기존의 localStorage를 가져와서 저장하는 방식이 필요했다. 추가로 구현해야 할 것은 dataset을 활용하기 위해 추가된 역의 삭제 버튼에 dataset을 등록해 삭제할 때 dataset을 활용하는 것이고, input의 유효성을 검사하는 것, 화면 랜더링하는 것이 추가로 구현되어야 한다.
<description> 화면에 출력하고, localStorage에 등록하는 것까지 완료했다. 이제 버튼에 dataset을 등록하고, eventListener을 등록하는 것을 해야한다.
<description> 역을 추가할 때, dataset-station에 역 이름을 추가하고, 삭제 버튼에 click 이벤트를 등록했다.
<description>
<description> storage에 등록되어 있는 station value는 배열이기 때문에 filter로 삭제시켜주었다.
<description> 역을 삭제하면 localStorage에서 삭제하고, 관련 테이블을 삭제한다.
<description> 1. 중복 불가 2. 2글자 미만 불가 3. 한글만 가능
<description>
<description> 많이 쓰일 것 같아서 따로 분리했다.
<description>
<description> js가 실행될 때 localStorage에 있는 값들을 화면에 추가해주고 시작한다.
<description>
<description> localStorage에서 모든 데이터를 관리하는 것이 위험하다고 생각되어서 초기에 데이터를 받아올 때만 local을 이용하고, 그 뒤에는 Station class를 이용하기로 했다. 기존에 있던 localStorage를 사용하던 함수를 변경하고 있다.
<description> 유효성을 검사하는 함수에서 기존에 local에서 값을 받아왔던 것에서 class에서 값을 받아오는 것으로 변경
<description> 처음에 로드할 때 화면에 추가하는 것보다 원하는 화면을 클릭했을 때마다 랜더링되는 것이 좋을 것 같아서 변경했다.
<description> 다시 잘 생각해보니 굳이 할 필요가 없다.
<description> 역이 추가될 때마다 노선의 종점이 추가되는 함수를 구현중이다. 현재는 페이지가 로드될 때마다 종점이 추가된다.
<description> 역을 추가하면 자동으로 종점에도 역이 추가된다.
<description> 역을 제거할 때 종점도 같이 제거될 수 있도록 구현했다.
<description>
<description> element들은 input.js에서 관리한다.
<description> View에서 각종 screen을 담당하는 함수들에서 상수화 시킬 수 있는 요소들을 모두 상수로 만들었다.
<description> 추출할 수 있는 element들은 모두 element.js파일로 옮겼다
<description>
<description> 각 element별로 정리했다. station, line, section, map과 관련있는 것끼리 정리하고 줄 바꿈을 했다.
<description> 예를 들어 구간 관리에서 6호선을 보고 있다가 노선 관리로 들어가서 6호선을 지운 뒤에 구간 관리로 다시 돌아오면 6호선이 그대로 남아있는 버그가 있어서 라인을 삭제할 때 화면을 숨겨 접근하지 못하도록 했다.
<description>
<description> 해석하면 바로 어떤 element인지 알 수 있게 변경
<description>
<description>
<description>
<description> confirm 메시지를 상수화했고, KEY를 적용하지 못한 Model에 적용해주었다.
<description>
<description> 일반 line, station을 매개변수로 할당한 것과 비교하기 위해 변경
<description> 처음부터 display:none으로 숨겨주었다.
<description>
<description>
<description>
<description> Model은 Control을 몰라야 한다.
<description> 이전에 노선을 삭제했을 때, 구간에 그대로 남아있는 것을 보고 구간을 hide로 없어지게 만들었었는데, 삭제하는 것을 깜빡 잊고 하지 않았다. 오늘 버그를 발견해서 노선을 삭제할 때, 삭제된 노선을 구간에서도 삭제해주고, 구간 자체도 숨기는 것으로 구현했다.
<description>
<description> 역 모델은 더이상 컨트롤러를 알 수 없고, 식별자도 가독성 있게 변경했다. value => stationName
<description> 파일 명을 변경했다.
<description> View가 control을 알고 있으면 안되기 때문에 index로 옮기는 작업을 하고 있다.
<description> 현재 View의 add-screen에서 스크린에 역 삭제 버튼, 노선 삭제 버튼, 구간 삭제 버튼, 구간 로드 버튼을 만들 때 버튼에 event를 등록하는 것을 controller에서 가져와서 사용중인데, 이것을 분리해야 할 것 같아서 따로 설정중
<description>
<description> View의 버튼을 분리하기 위해 controller에 set-button-event.js파일을 만들었다.
<description> 단순히 상수들의 모음이기 때문에 controller에 있을 필요가 없다고 생각했다.
<description> 이전에는 event 처리를 View에서 했고, index는 가장 늦게 실행되기 때문에 함수선언식으로 사용하지 않으면 Lexical Enviornment에 들어가지 않아 사용이 불가능했다. 하지만 이제는 모든 import를 index에서 받아온 후에 실행을 하기 때문에 더이상 위와 같은 문제가 발생하지 않기 때문에 안정적인 함수 표현식으로 에로우 함수를 사용했다.
<description> 실수로 하나를 빼먹었다.
<description> 숫자 ❌ 이하의 수를 입력해주세요. 라고 출력되는 버그 수정
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
프리코스 3주차 미션 제출합니다.
3주차 미션을 진행하면서 느낀 점은 우테코 3차 프리코스를 마무리하며 에 작성했습니다.
이번 미션은 저에게는 정말 어려워서 오래 걸렸습니다.
처음에는 시작도 하지 못할 만큼 어려웠는데, 계속 하던 대로 기능 구현 목록을 작성하면서 천천히 나아갔고, 기능 구현을 완료했습니다.
솔직히 코드가 깔끔하고, 완벽하다고 생각하지 않습니다.
하지만 주어진 시간 동안 쉬지 않고 최선을 다해서 미션에 임했고, 즐거웠기에 후회는 없습니다.
3주 동안 지속적으로 함수 쪼개기, 모듈화를 진행하다 보니 이전에는 이해할 수 없었던 MVC 패턴에 대해서 이해할 수 있게 되었고, 처음으로 MVC 패턴으로 구현을 시도해봤습니다.
이제는 리팩토링을 하지 않고도 처음부터 어느 정도 모듈화를 하면서 코딩을 할 수 있게 되었습니다.
3주 동안 피드백 해주셔서 감사하고 값진 경험을 하게 해주셔서 정말정말 감사합니다.