[지하철 노선도 미션] 조은현 미션 제출합니다. #57
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
- 역관리 templete 구현 - content를 표시할 section 태그 생성 - Station 객체 생성 - 사용자가 station을 입력하면 등록하는 기능 구현 - localStorage에 등록한 station 저장하는 기능 구현 - 중복된 이름 및 글자 수 예외처리
- 삭제버튼 class명 수정 - data 속성을 이용하여 역의 상태 표현
- template literal 사용 - 코드 공백 수정
- section -> main
- 노선 등록 화면 template 구현 - Line 객체 생성 - 사용자가 노선을 입력하면 등록하는 기능 구현 - 등록한 노선을 사용자가 조회할 수 있도록 테이블 구현 - localStorage에 등록한 노선을 저장하는 기능 구현 - 중복된 노선 이름 유효성 검사 기능 구현 - 노선 이름에 아무것도 입력하지 않았을 때 유효성 검사 기능 구현 - 상행종점과 하행종점이 같을 때 유효성 검사 기능 구현 - 다른 노선과 상행종점과 하행종점이 같을 때 유효성 검사 기능 구현 - 노선의 이름이 '선'으로 끝날 수 있도록 유효성 검사 기능 구현
- 노선에서 종점 선택하는 영역 스타일 추가
- lineStorage에서 종점 station만 가져올 수 있도록 메소드 추가 - 거꾸로 했을 때 종점이 같아도 예외처리 할 수 있도록 메소드 추가 구현
- 구간 등록 화면 template 구현 - 사용자가 노선을 선택하면 노선의 구간 목록 테이블을 볼 수 있도록 구현 - localStorage에 한개의 노선만 가져오는 기능 구현
- line storage에서 station 모두를 가지고 있는 것에서 id만 가지고 있게 수정 - 노선을 등록하고 삭제할 때, station storage에 적용안되던 것 적용되게 수정
- 중복된 역이 없는지 유효성 검사 구현 - 입력하는 index의 유효성 검사 구현
- 선택하지 않은 station에 노선 번호가 들어가는 오류 수정
- 전역변수로 있던 변수들을 init 함수에 넣기
- temeplate 코드 정렬 - 역관리 화면 파일(stationManagerPage) views 폴더 생성하여 이동 - stationManagerPage 속 변수명 수정 - 최소 글자수 상수로 저장 - 역 이름 및 삭제할 때 유효성 검사 코드 리팩토링
- views 폴더로 lineManagerPage 파일 이동 - 메소드 순서 수정
- 함수 역할 분리 - 불필요한 변수 삭제
- views 폴더로 SectionManager 파일 이동 - 불필요한 변수 삭제 및 빠른 return - 메소드 순서 변경
- views 폴더 생성 및 파일 이동
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주차 미션 제출합니다. :)
우아한 테크코스 프리코스에 붙어서 기뻐한 게 엊그제 같은데, 벌써 마지막 미션을 제출하는 날이 되었네요. 제가 이번 미션을 하면서 느낀 가장 큰 것은 다음과 같습니다.
git commit 타이밍
'가장 자신있게 이 점은 달라졌다'라고 말할 수 있는 부분은 커밋을 할 시점을 정하고, 어떻게 커밋을 해야할 지 고민하는 제 모습입니다. 확실히 README 문서에 썼던 기능 구현 목록을 바탕으로 하니, 코드를 작성할 때도 한가지 기능을 만드는 데 집중할 수 있었던 거 같습니다. 가끔 새로운 기능을 만들다가 전에 만들었던 기능의 버그나 오타를 발견할 때 당황하기도 했지만, 만들고 있는 기능에 큰 지장이 없다면 하던 일을 마저하고 바로 코드를 수정했습니다. 이번주 미션과 같이 (1, 2주차에 비해) 많은 양의 기능을 구현해야 할 때도 크게 두려워하지 않았던 거 같습니다. 먼저 요구사항 목록을 보고 문서로 정리하니 프로그램을 어떻게 짜야 할 지 고민부터 하고 키보드에 손을 올리는 저를 발견할 수 있었습니다.
예전에는 만들고 싶은 부분, 쉽게 고칠 수 있을 거 같은 부분에 대해서 먼저 코드를 작성하느라, 늘 시간에 쫓기면서 프로젝트를 했던거 같았는데 저는 늘 그것이 제 실력이 부족해서라고 생각했습니다. 그러나 분리한 기능별로 요구사항을 파악하고 그것에 맞게 코드를 작성하다 보니 어느정도 시간도 효율적으로 사용할 수 있고, 잠시 자리를 비우고 돌아와도 어디까지 코드를 작성하고 어느 부분을 시작해야 하는지 빠르게 파악할 수 있었습니다. 이제는 코드를 작성하는 데 있어서 가장 먼저 기능 구현 목록을 살펴보고, 예외처리를 해야하는 부분에 대해서는 문서를 수정하는 저를 보면서 내심 뿌듯한 마음이 듭니다.
naming
css 작업을 해야할 때 다 비슷비슷해보이는 태그들에 id와 class를 부여할 때도 이름 짓는 건 어려운 일이라고 생각했지만, 이번 미션을 통해서는 더 뼈저리게 느낀거 같습니다. 코드를 작성하면서 고통받으며 변수명을 지었지만, 리팩토링 하려고 살펴보니 어떻게 고쳐야할 지 몰라서 다른 분들의 코드를 살펴보았습니다. 한가지 예로 DOM을 그리는 부분은 아무생각 없이 'show-' 로 시작하는 변수를 지었는데, 대부분 render로 시작하는 변수명을 사용하는 것을 알았습니다. 생각해보니 DOM 객체를 화면에 그려주는 것이니깐 render로 시작하는 것이 더 직관적이겠다는 생각을 하였고, 이에 변수명을 수정하였습니다. 아직도 '이 변수는 무슨 뜻이다'라고 말하는 자기주장 강한 변수를 만들지 못해서 스스로 코드를 보면서 고통받고 있지만, 계속 연습하고 다른 사람들의 코드도 참고하면서 배워나가도록 하겠습니다.
sementic tag
늘 html 코드를 작성하면서 주의하고 또 잘하고 싶은 부분인 태그를 사용하는 부분에서 이번주 미션은 고민을 많이 하게 해주는 미션이었습니다. 특히 최대한 div 태그 대신에 section, main, article과 같은 태그를 사용하려고 노력하였습니다. 하지만 막상 사용하려고 하니 section과 article은 무슨 차이일까? 에 대해서 고민했고, 제 기준에 따라 section 태그를 사용했습니다. 예전에 UI를 공부하면서 참고한 글인데 시간 날때 읽으면 재밌는 글이라서 추천합니다
많은 고민에도 불구하고, 주어진 미션 화면과 비슷하게 만드려다보니 별로 sementic 하지 못한 부분이 보이지만, 미션을 제출하고 다시 한번 복습할 때 프로그램의 로직 뿐만 아니라 화면의 구성도 다시한번 고민해보려고 합니다. 또, 저는 그냥 미션 화면과 비슷하게 만들기만 했는데 데모 사이트를 통해서 예쁜 화면을 그린 분들의 코드를 보면서 한번 더 감탄하고 배워갑니다.
DOM 조작
사실 어렵게 생각한 부분도 아니었는데 라이브러리를 사용하지 않고 순수 JS로만 화면을 조작하는 것이 생각보다 매우 어려운 일이었습니다. 저는 된다고 생각하고 짠 코드가 움직이지 않을 때의 당혹스러움이란..:) 제가 파악한 저의 가장 큰 약점은 DOM 조작을 익숙하게 하지 못한다는 것입니다. 특히 버튼을 클릭하면 화면에 새로운 요소들을 붙이는게 append를 써야하는 건가? insertAdjacentHTM는 뭐지? 이러면서 innerHTML만 알았던 저에게는 너무 신선했던 충격이었습니다. 기본적인 것도 잘 모른다른 사실에 절망하기도 했지만, 그래도 제가 무엇을 어려워 하는지 알아갈 수 있어서 좋은 기회였던 것 같습니다.
정말 솔직하게 말하자면 전 3주간 크게 실력이 늘진 못한 거 같아요. 실제로 제 코드를 보면서 '나만 이해하는 코드군' 하면서 허탈하게 웃기도 했습니다. 하지만 가장 크게 제가 얻은건 좋은 코드를 고민하는 습관을 가지고 노력하고 있고, 스스로 무엇을 어려워하고, 어떤 코드를 작성할 때 시간이 오래 걸리는지 파악했다는 겁니다. 남은 3일간 부족한 부분을 다른 분들의 코드를 보면서 채워나가려고 합니다. 오프라인 코딩테스트에는 좀 더 많이 발전된 모습으로 만날 수 있게 열심히 노력하겠습니다.