Skip to content

Conversation

@nxxc
Copy link

@nxxc nxxc commented Dec 15, 2020

👨🏻‍💻 3주간의 프리코스를 마치며

  • 제출하기 전까지 다른사람의 pull request를 보지않기

3주간 프리코스를 진행하며 많은 요구사항들이 있었지만 내가 내 스스로 지키고 싶은것은 위에 적은 것 하나였다. 이유는 프리코스를 진행하기전 받은 메일에 있는 문구 때문이었다.

우아한테크코스가 목표가 아니라 좋은 개발자로 성장하는 것을 목표로 하면서 성장해 나가는 과정으로 생각하고 도전했으면 합니다.

1주차 미션을 수행하기도 전에 머리를 한대 딱 맞은 느낌이었다.
내가 우아한테크코스를 지원한 의미를 다시금 생각해 보게 하는 문구였다.
나는 코스에 지원하기전에 온라인으로 진행하는 설명회 영상을 다시보기로 전체적으로 봤다.
지금 기억나는 것 중에 하나는 어떤 학생이 지원을 했는데 대학을 갈지 아니면 우아한 테크코스를 지원할지 고민하는 질문이었다. 그때 포비님의 답변은 한 치의 망설임도 없이 우아한 테크코스를 추천한다고 하셨고 이 뿐만 아니라 영상을 보면서 관계자분들의 답변을 들으며 우아한 테크코스는 우테코만의 확고한 철학이 있다고 느껴졌고 지원서의 질문마따나 인생의 10개월을 걸어볼만 하다고 생각하고 지원을 했다.
이때 마음 속으로 나는 어쩌면 우아한 테크코스를 목표로 지원하지 않았을까...
하지만 메일 속에 있는 문구를 보고 '그래 퀄리티야 장담하진 못하지만 내 스스로 한번 처음부터 끝까지 다 해보자'라고 생각을 고쳐먹고 1주차를 시작했던 기억이난다.

그렇게 1주차 미션을 받고 진행하며 느낀점은 시작하기 왜 이렇게 힘들고 어려울까
'나는 역시 쫄보인가'라는 느낌...
그 동안 독학하며 내 코드는 나만 봤다. 협업이라는 좋은 경험을 해본 적도 없어 github을 사용하긴 했지만 개인 저장소로 이용하는 용도로 밖에 사용하지 않았다.요구사항을 읽어보고 지키기 위해 미션 저장소를 fork 하고 내 로컬 저장소에 브랜치를 만들고 기능 목록을 작성하는 것까지는 수월했다.
하지만 그 후에 코드를 작성하기까지 많은 시간이 걸렸다....
이유는 단 하나, 다른 사람이 내 코드를 본다는 생각 때문이었다. 이러한 생각을 하니 시작하기 쉽지 않았다.
사실 1주차에서 요구하는 프로그램에 기능은 어렵지 않다고 생각했다. 머릿속으로는 어떻게 해야할지 생각났지만 다른사람이 읽기 편한 코드로 작성하려니 쉽지 않았던 것이다. 그래서 시작하기도 전에 메일에 있는 코딩 컨벤션들을 찾아보고 유튜브나 인터넷 글들을 통해 코드를 '이쁘게'작성하는 방법을 찾는데만 많은 시간이 걸렸던 것 같다. 그러다 보니 제출 기한이 가까워 졌고 부족하지만 야금야금 생각했던 것들을 하나하나 적용해 서 pull reqeust를 작성하고 메일까지 제출하여 미션을 완료했다!

2주차 역시 나는 조금 성장했지만 1주차 보다 조금 나은 쫄보일뿐 여전히 쫄보였다.
README.md 에 기능목록만 작성하고 어떻게 시작해야 할 지 생각하는 시간이 코드를 작성하는 시간보다 더 오래걸렸다. 그래도 1주차보다는 성장한 쫄보로서 1주차에 배운 부분을 2주차에 적용해 보는 것들이 재미있었다. 함수가 하나의 일만 하도록 쪼개는 것도 처음에는 이렇게 함수를 많이 작성하는 것이 효율적인가 생각했지만 모듈을 분리하기위해서 각자 모듈이 해야하는 역할에 따라 함수를 생각하고 분리해 나가는 과정을 겪으면서 어느정도 이 코스에 익숙해 지고 있다는 느낌을 받았다. 그렇게 완벽하진 않지만 나름 만족한 결과물을 제출하고 이것저것 테스트 해 보다 버그가 있는 것을 발견하고 스스로 뺨을 두대 정도 때린 것 같다.

자책하는 마음가짐으로 맞이한 3주차...
3주차 미션을 전달받고 피드백과 요구사항들을 읽어보았다. 그리고 요구사항을 또 읽어보았다. 읽고난뒤 또 읽어보았다. 응....? 난이도가 갑자기 이렇게 어려워 진다고? 1주차에서 2주차로 넘어갈때는 1.5배의 난이도 상승이었다면 2주차에서 3주차 체감 난이도 상승은 15배정도 되었던 것 같다. 하지만 자세히 읽고 하나하나 따져보니 1주차 2주차때 학습했던 것을 적용한다면 문제될게 없어 보였다. 나는 많이 성장한 쫄보로서 이번 과제는 생각하는 시간을 오래한다면 절대 시간안에 제출하지 못할 것이라는 느낌을 받았다. 처음에는 동적으로 메뉴들을 생성하여 보여주는 것을 생각했는데 너무 복잡하고 어려울 것 같아 기본적인 html 마크업을 하고 DOM접근을 최소화 하고 최대한 이벤트 위임을 활용하고 모듈을 분리함으로써 깔끔한 코드를 작성하는 것을 목표로 하고 시작했다. 물론 역시 쫄보는 쫄보라 reset을 여러번 하며 처음 틀을 잡았다. 기능을 하나하나 완성하면서 느낀점은 틀만 다를뿐 사용하는 기능은 중복되는 것이 많았다. 그래서 일단 작성하고 리팩토링 과정을 통해 최대한 재사용 가능한 모듈들로 분리하고 지금껏 미션에서 요구한 요구사항들을 맞춰보도록 노력했다. 여러가지 이슈들이 있었지만 계속 이상했던 점이 있었는데 localStorage에서 객체를 받아올 때에 생성자가 없어져 메서드를 사용하지 못했던 것이었는데 이 또한 검색을 통해 data를 받아볼때 새로운 객체를 생성하여 반환함으로써 해결했다. 또 3주차 미션을 진행하면서 계속 생각했던 부분이 바로 data에 관한 것이었다. 각 메뉴마다 데이터를 수정할 시 다른 메뉴에서도 동일한 데이터를 가지고 기능들을 수행하여야 하기 때문에 data를 어디에 어떠한방식으로 어떠한 모양으로 저장해야 하는지가 고민이었다. 이를 해결하기 위해 data가 변경될때마다 동기화 하여 같은 데이터를 사용할 수 있도록 했다. 그렇게 어느정도 기능들을 완성하고 리팩토링을 시작했다. 전체적으로 보니 중복되는 부분이 상당히 많았다. 그래서 최대한 줄일 수 있도록 노력하였고 함수의 이름이나 상수들의 이름또한 신경써서 작성하였다. 확실히 1주차보단 남이 읽어도 이해할 수 있는 코드가 된 것 같아 성장한 느낌을 많이 받았다.

프리코스를 마치며 확실히 진행하기 전보다 많은 부분이 스스로 성장했다고 느낀다.
목록을 하나하나 작성한다면 수도 없이 많겠지만 이번 프리코스를 진행하며 제일 크게 느낀점은
내가 내 스스로 좋은개발자가 되기위해 한발 짝 전진 했다는 느낌을 받았다는 것이다. 이러한 감정만으로 나는 충분하다고 생각한다.

nxxc added 30 commits December 10, 2020 18:00
- 기능 목록 업데이트
- css selector 기반으로 HTML 마크업을 작성하였다.
- 프로젝트의 기본 폴더를 구성하였다.
- display 속성을 이용하여 메뉴를 조작하도록 함
- Component class 를 이용하여 manager들의 공통적인 기능을 공유 하도록 함
- 사용자가 역 이름 입력시 state 객체에 stationList 배열에 역 이름을 추가
할 수 있도록 함.
- form 태그의 기본이벤트를 방지해서 새로고침이 일어나지 않도록 함
- checkOverlap 함수를 이용하여 중복을 확인한다.
- checkOverlap 함수에서 배열에 포함되어있지 않으면 업데이트가 가능하니
리턴값을 수정함
- 최소길이를 상수로 관리해 역이름의 길이를 확인할 수 있도록 함
- table의 row에 html data 프로퍼티를 이용해 역 이름과 인덱스를 관리함
- 상태가 변경될 때 마다 목록을 다시 출력할 수 있도록 함
- 삭제 버튼의 data-id와 tr태그의 data-id 를 비교하여 해당 역을 삭제한다.
- README.md에 사용자 확인 기능 목록을 추가함.
- confirm()함수를 이용하여 사용자의 의사를 확인한다.
- 각 메뉴에서 변경된 데이터들을 공유할 수 있도록 함
- Line class를 이용하여 사용자가 입력한 input의 값들로 새로운 객체 생성
- 역관리 메뉴에서 역 수정시 노선관리 메뉴의 select태그의 옵션들이 변경
될 수 있도록 수정
- lineList 는 state에 저장하여 각 메뉴에서 공유
- 역관리에서 사용한 중복확인 함수를 재활용해 노선이름의 중복을 확인한다.
- 노선목록을 templated 업데이트를 통해 출력한다
- 요류를 줄이기 위해 template 에 전달하는 arguments를 객체형로 전달한다.
- HTML 잘못된 마크업 수정
- 역 관리와 같은 방식으로 노선 삭제기능을 추가함
- 노선의 유일한 값을 data프로퍼티를 이용하여 관리함
- confirm 을 이용하여 노선 삭제시 사용자의 확인을 받는다.
- line데이터를 동기화 하여 역 삭제시 구간에 포함되어있는 모든 역을 조회
하여 포함되어 있는 경우 삭제가 불가능하게 함
- localStorage를 이용하여 새로고침을 하여도 최근 데이터를 불러와 각 메뉴
의 목록들을 표시 한다.
- localStorage를에 저장하는 데이터는 JSON을 활용하여 객체로 저장한다.
- selector에서 공통되는 부분을 줄이고 이해하기 쉽게 변경함
  ex) LINE.LINE_CONTAINER_ID  =>  LINE_SELECTOR.CONTAINER_ID
- 축약했던 변수명을 축약하지 않음
  ex) btn => button
- 구간 관리 메뉴 선택시 사용자가 등록한 노선을 선택할 수 있도록 표시함.
- storage에서 초기 data의 형태를 정할 수 있게함
- 노선 클릭시 해당하는 노선의 데이터를 활용 할 수 있게 함
- state보다 data의 의미가 명확하기때문에 변경함
- 구간관리에서 노선버튼 이외의 곳을 눌러도 이벤트가 발생하던 버그 수정
- e => event 로 변수명 변경
- localStorage 에 저장된 객체는 생성자까지 저장되지 않는다 따라서 새로고
침시에 localStorage에 저장된 데이터를 불러올 때 미들웨어를 통해 lineList
의 정보들을 새로운 생성자를 호출함으로써 새로운 인스턴스들로 데이터를 반
환하여 메서드들을 사용할 수 있도록 하였다
- 사용자가 입력한 구간을 등록하고 목록을 갱신하여 보여준다.
- 초기 진행시 localStorage에 데이터가 없을 경우 작동이 안되던 버그 수정
- 새로고침시 구간이 제대로 불려오지 않았던 버그 수정
- HTML 오탈자 수정
nxxc added 14 commits December 15, 2020 12:47
- 노선은 최소 2개역을 포함해야 하기 때문에 길이가 2인경우 삭제가 불가능
하게 함
- 올바르지 않은 입력일 경우 경고창을 표시해 다시 입력할 수 있도록 한다.
- this.data를 복사해 새로운 값을 동기화 함으로써 렌더링은 값이 변경될때
한번씩만 일어나도록 함
- 노선 등록시 올바르지 않을 경우 경고창 표시
- 중복되는 메서드들을 Component Class로 공유하도록 하였다.
- template을 이용하여 노선을 출력함
- alert나 confirm에 사용되는 문장들을 한 곳에서 관리한다
- 함수가 하나의 일만 하도록 만들기 위하여 전체적으로 정리함
- 메서드의 순서를 통일해 각 Manager의 역할을 알기 쉽게 함
- Component Class에서 syncData 메서드를 등록해 사용할 수 있도록 함
- import 의 순서를 중요도 순으로 변경함
- template 에서 arguments를 전부 객체 형식으로 전달함
- 유효성을 검사하는 함수들의 이름을 직관적으로 이해하기 쉽게 변경함
  ex) check => isValid
- add버튼에 직접적으로 이벤트를 거는것이 아니고 form 이벤트를 이용하기
때문에 불필요한 돔에 접근을 최소하함
- 의미를 명확하게 하기 위하여 getSection => setSection 으로 이름변경
- 함수의 활용성을 높이기 위해 isEmpty함수가 문자열 배열 모두 검사할수 있
도록 변경
- 구간관리 메뉴를 벗어났다 다시 돌아와도 선택했던 노선이 그대로 있던버그
수정
- Update README.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant