[지하철 노선도 미션] 김선정 미션 제출합니다 #59
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
- eslint 설정 - prettier 설정 - gitignore와 gitmessage 설정 - server.js로 서버 설정
- 기능 구현 목록: 지하철 역 추가
- 기능 구현 목록: 화면 관련 기능 추가 - 일부 단어 수정
- 기능 구현 목록:화면 관련 기능 수정
- 메인 레이아웃 구현 - 지하철역 관리화면 레이아웃 구현 - 메인 레이아웃 내 섹션으로 각 기능 화면을 이용한다 - '역 관리' 버튼을 누르면 섹션을 지하철역 화면으로 교체한다
- 지하철 노선관리 레이아웃 구현 - '노선 관리' 버튼을 누르면 섹션을 지하철 노선관리 화면으로 교체한다
- 화면 관리버튼의 이벤트 리스너를 화면 관련 모듈 내로 이동 - 모듈의 응집성을 고려하여 이동함 - 이름을 좀 더 명확하게 짓기 위하여 새 메소드 생성
- 구간 관리 레이아웃 구현 - '구간 관리' 버튼을 누르면 레이아웃이 전환되는 기능 구현
- 지하철 노선도 출력 레이아웃 구현 - '지하철 노선도 출력' 버튼을 누르면 레이아웃 전환
- 지하철 열 등록 버튼을 누르면 표 행 추가 - 아직 데이터를 저장하는 기능은 구현하지 않음 - section의 오타 수정
- station.js -> stationLayout.js 로 변환 - 지하철역 레이아웃은 '클래스' 로 작성 - 상위클래스 pageLayout 추가 - MVC패턴을 이용하는 controller 추가 - 비즈니스 로직은 일단 controller에서 관리함
- 지하철역 '추가' 버튼을 누르면 테이블에 추가 - 지하철역 '추가' 버튼을 누르면 localStorage에 저장 - '역관리' 버튼을 누르면 localStorage에 저장한 정보를 테이블에 표시
- '삭제' 버튼을 누르면 지하철역을 테이블에서 삭제한다 - '삭제' 버튼을 누르면 지하철역을 localStorage에서 삭제한다 - insert-delete 단어쌍이 맞도록 메소드 이름 수정
- line.js -> lineLayout.js 로 변환 - 지하철 노선 관련 레이아웃 모듈을 클래스로 변환
- section.js -> sectionLayout.js로 변환 - 지하철 구간 레이아웃 모듈을 클래스로 변환 - 아직 데이터를 모델에 저장/불러오는 기능은 구현하지 않음
- 새로 추가한 지하철역이 localStorage에 저장되지 않는 버그 수정
- stationNode 클래스 추가. localStorage에 저장되는 DTO 역할. - localStorage에 stationList에 저장하는 객체 변경) - stationList에 저장하는 내용을 stationName -> stationNode 로 변경함. - stationNode는 DTO 객체 & 노선정보 링크드리스트에 쓰일 노드
- 지하철역 노선 '추가' 버튼을 누르면 localStorage에 저장 - 지하철역 노선 '추가' 버튼을 누르면 결과 테이블에 추가
- 모호한 이름 변경
- 노선 '삭제' 버튼을 누르면 테이블에서 노선 정보를 삭제한다 - 노선 '삭제' 버튼을 누르면 localStorage에서 노선 정보를 삭제한다 - 삭제한 노선에 포함된 지하철역의 노선리스트에서 해당 노선을 삭제한다
- 지하철 구간관리 > 수정할 노선 선택시 구간 등록 화면 표시 - 선택한 노선의 역 정보를 구간 등록 화면의 역 선택자에 표시 - 아직 결과 테이블은 구현하지 않음
- 모든 클래스에서 공통으로 사용할 수 있는 유틸리티 클래스 구현 - isEmpty 메소드 추가
- element를 만드는 함수와 DOM에 추가하는 함수를 분리
- 아직 DOM에 추가되지 않은 엘리먼트들은 가상DOM에 있다고 가정함
- 가상DOM을 조작하는 함수명은 앞에 '$'가 붙는다
- 가상 DOM 엘리먼트 구조:
element = {
$el: 실제 엘리먼트노드 (아직 실제 DOM에 추가되진 않음)
$children: { 해당 컨테이너의 child로 추가될 가상 DOM 엘리먼트}
}
- 가상 DOM의 구조를 바탕으로 실제 DOM에 붙이는 함수 : $render()
- lineLayout을 가상 DOM을 이용하여 렌더링함 - element를 만드는 함수와 DOM에 추가하는 함수를 분리 - 아직 DOM에 추가되지 않은 엘리먼트들은 가상DOM에 있다고 가정함 - 가상DOM을 조작하는 함수명은 앞에 '$'가 붙는다
- sectionLayout을 가상 DOM 이용하게끔 변경 - section관리에 필요한 비즈니스 로직 추가
- 예외사항이 일어나면 알림을 띄운다 - 예외사항은 README.MD참고 - 메세지는 상수로 처리했다
Author
|
프리코스 후기를 작성했습니다. 링크는 https://sunmon.github.io/woowacourse-review/ 입니다 |
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주차 미션 제출합니다.
이번 과제는 제일 재미있었습니다. 그만큼 어렵기도 했지만 난이도가 있던 덕분에 오기가 생겨 제일 재밌게 했습니다!
이번 과제에서는 모듈화에 집중했습니다. 클래스를 나누고, 상속을 이용하고, 공통 모듈을 따로 빼는 등 저번보다 모듈화에 더 신경썼습니다.
거듭된 모듈화로 엘리먼트 생성과 생성된 엘리먼트를 DOM에 붙이는 기능도 따로 구현했습니다. 근래의 프론트엔드 프레임워크에서 사용하는 VDOM의 원리도 모듈화라는 것을 알 수 있었습니다.
이번주는 시간이 부족하여 CSS는 하지 못했으나, 기능들은 모두 구현했습니다.
프리코스 후기와 프리코스에서 배운 것들은 이번주 내로 블로그에 정리해서 올릴 계획입니다.
블로그 주소입니다. ( sunmon.github.io )
모듈화 또 다시 모듈화
브라우저 동작 원리를 보고, 최적화에 대해 고민했습니다.
reflow를 줄이면 브라우저 동작 속도를 높일 수 있지 않을까? 라는 고민에서 시작하여,
결국 엘리먼트의 생성과 렌더링 함수를 따로 구분하는 결과를 도출했습니다.
비록 시간이 없어 완전히 모듈로 분리하진 못했지만 생성 / 추가 단계까지도 모듈화를 할 수 있구나~라는 것을 배울 수 있었습니다.
MVC와 DTO
MVC 패턴과 DAO-DTO를 이용하여 UI와 비즈니스 로직을 분리했습니다.
모델 - 뷰 - 컨트롤러로 모듈을 나눴고, localStorage와 모델은 stationNode라는 DTO를 표방한 클래스로 통신했습니다.
링크드 리스트를 이용하고 싶었으나, 문자열과 JSON의 특성상 그렇게까진 쓰지 못하더군요.
그래서 localStorage에 이차원 배열로 저장을 했는데, 매번 직렬화과정을 거치고 일일히 배열을 탐색해야하니 성능상으론 문제가 생길 수 있을 것 같긴 합니다.
설계를 잘 할 것
처음에는 '아~그냥 하다가 수정하면 되겠지'라는 생각으로 일단 코드를 짰습니다.
조금씩 리팩토링하면 되겠지, 라는 안일한 생각에 결국 코드가 파묻히고 말았습니다.
코드를 짜는 시간보다 리팩토링 하는 시간이 곱절로 걸렸습니다...
게다가, 설계 없이 일단 코드를 작성하니 중복되는 부분도 너무 많고, 조금만 바꾸면 재사용할 수 있는 코드를 다시 작성하게 되었습니다.
다시 한 번 설계의 중요성을 느낀 미션이었습니다.