우아한테크코스 3기 프리코스 3주차 후기

 

벌써 마지막 미션 안내 메일을 받았다.

원래 오프라인으로 진행할 예정이던 최종 코딩테스트는 코로나19 악화에 따른 정부 방침으로 온라인으로 변경해서 진행할 것이라고 안내해 주셨다.

 

 

　1주차 미션　　　  2020. 11. 25. (수) ~ 12. 01. (화)
　2주차 미션　　　 2020. 12. 02. (수) ~ 12. 08. (화)
> 3주차 미션　　　 2020. 12. 09. (수) ~ 12. 16. (수)
　최종 코딩테스트　2020. 12. 19. (토)
　최종 합격자발표　2020. 12. 30. (수)

 

 

---

미션 내용

[1] 기능 요구사항

- 지하철 노선도 미션 구현

[2] 프로그래밍 요구사항

- alert 메서드 사용

- depth < 3, 함수 간결화 (1함수 1기능), 코드 컨벤션 적용

- 함수길이 < 15줄

- var 사용(X)

- import로 스크립트 모듈화

- 템플릿 리터럴로 가독성 개선

- 각 요소에 지정된 id값 및 class값 부여

- 노선도 출력 시 <div class="map"></div> 태그 추가

- data 속성 활용해서 데이터값 관리

- localStorage 이용해서 새로고침 하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 함

 

[3] 미션진행 요구사항

- README.md에 기능목록 작성

- commit 단위는 기능목록 단위로 추가

 

제출방법 : 다음 주 화요일 23시 59분까지 Github제출 + 메일 발송

 

---

2주차 피드백 요약

[01] 　기능목록은 구현하면서 계속 업데이트 한다.

[02] 　기능목록에 예외적인 상황도 정리한다.

[03]　 기능목록을 너무 상세하게 작성하지 않는다.

　　　- 작성예시)  자동차는 4 이상인 경우 전진한다.
　　　　　　　　자동차는 4 미만인 경우 정지한다. 
　　　　　　　　0 ~ 9 사이의 임의의 값을 생성한다. 
　　　　　　　　여러 대의 자동차 중 최대 위치 값을 구한다. 
　　　　　　　　최대 위치 값에 해당하는 자동차 목록을 구한다.

[04]　 가능하면 하드코딩되는 값들을 상수로 활용한다.

[05]　 Boolean을 return 하는 경우 되도록 간결하게 한다.

[03]　 메서드를 구현하기 전에 javascript api에서 제공하는 기능인지 먼저 검색한다.

[04] 　불필요한 멤버 변수를 줄이기 위해 노력한다.

[05]　 비즈니스 로직과 UI 로직을 분리한다.

[06]　 현재 미션에는 참조할 이슈/PR이 없기 때문에 commit 메시지에 #번호를 추가하지 않는다.

[07]　주석은 꼭 필요한 것이 아니면 남기지 않는다.

[08] 　.idea .vscode node_modules 모두 git으로 관리할 필요는 없다.

[09]　 main 이 아닌 새로 만든 브랜치가 맞는지 확인 후 PR을 보낸다.

 

 

 

 

---

후기 & 자체 피드백

 

지난 3주간 어떻게 학습했는가

6일간 과제를 진행하고, 마지막 날에는 한 주를 돌아보는 시간을 가졌다.

주 단위 학습 루틴을 정리해보았다.

 

미션 1일 차 (수요일)

오전에는 푹 쉰다.

오후에 미션 메일을 받으면 요구사항/피드백을 각각 요약정리한다.

모르는 용어가 있으면 찾아본다.

주어진 참고 문서를 읽는다. (한 번에 다 못 볼 것 같으면 언제 볼지 배정한다)

기능 구현 목록을 작성한다.

 

미션 2~7일 차 (목요일 ~ 화요일)

열심히 기능을 구현한다.

막히면 구글/유튜브에 검색해본다.

새로 알게 된 내용 중 기록해두고 싶은 내용이면 블로그에 적어둔다.

PR 올리신 분이 있으면 들어가서 구경한다.

 

미션 7일 차 (화요일)

코드 작성을 마무리하고 요구사항/피드백을 지켰는지 마지막으로 검토한다.

푸시한다.

한 주 동안 어떻게 보냈는지 셀프 피드백을 한다.

(최소 반나절 동안을 글을 정리할 수 있도록 화요일 오전까지는 최대한 과제를 내려고 노력했다.)

내용을 간추려 미션 제출 메일에 담아 보낸다.

 

지난 3주를 보내며 달라진 점은 무엇인가

프리코스를 시작하면서 이 순간에 배운 점, 느낀 점을 꼭 남겨두고 싶어서 티스토리 블로그를 새로이 개설했다.

 

코드 한 줄 쓰기 전에 먼저 자연스럽게 구현 기능 목록부터 작성하게 되었다. 아직도 작성하기 어렵지만 구현 기능 목록을 작성하면 작업량이 대략적으로 정량화되고 덕분에 나름대로 작업시간을 산출하고 조율할 수도 있게 되었다.

 

모듈을 분리하고 하나의 프로그램을 구성하는 것을 경험을 했다. 이것도 서툴지만 함수를 짤 때 단일 기능을 담도록 고민하는 습관이 생겼다.

 

원래 하던 스터디를 병행할 수 있을까 걱정했는데 잘 소화한 것 같다. 하루에 한두 시간 투자하는 난이도는 절대 아니었지만(...) 체감 난이도가 1주 차가 100이라면 2주 차는 150, 3주 차는 1,000 같은 느낌이었다. 1,000을 해야 하면 어떻게는 1,000만큼 배우게 되는 것 같다. 

 

1주 차 첫날, 반나절만에 미션을 완성 제출하시는 능력자 분들을 보고 초조한 마음이 생겼고 틈만 나면 PR이 몇 개나 올라왔는지 확인하기 위해 새로고침을 했었다. 그렇게 레포를 들락날락하며 PR 코드를 읽고 깃헙 계정을 따라 블로그 순회까지 이르렀는데 그분들의 블로그에서 더 나은 코드를 짜기 위해 오랜 시간 고민한 흔적들, 내가 경험해보지 못한 다양한 경험과 좋은 인생을 살기 위한 노력을 엿볼 수 있었다. 좋은 자극이 되었다. 불필요하게 다른 사람과 나를 '비교'하는 것은 지양해야겠지만 '비교'에도 순기능이 있다는 생각이 들었다. 성장의 원동력 삼을 수 있겠다는 것이다.

 

 

 

 

---

배운 내용 정리

HTML 테이블 만들기

<table border="1">
  <th>제목 A</th>
  <th>제목 B</th>
  <tr>
    <!-- row1 -->
    <td>1번째 줄 - A</td>
    <td>1번째 줄 - B</td>
  </tr>
  <tr>
    <!-- row2 -->
    <td>2번째 줄 - A</td>
    <td>2번째 줄 - B</td>
  </tr>
  <tr>
    <!-- row3 -->
    <td>3번째 줄 - A</td>
    <td>3번째 줄 - B</td>
  </tr>
</table>

코드 실행 결과

localStorage

메서드

- .setItem(키, 값)

- .key(키)

- .getItem(키)

- .removeItem(키)

- .clear()

 

유의사항

1. http, https는 서로 다른 localStorage를 갖는다

2. 시크릿 모드에서는 창을 종료하면 localStorage가 사라진다.

 

쿠키 vs 세션 vs 로컬스토리지

	쿠키	세션 스토리지	로컬 스토리지
용량	4KB	5MB	10MB
브라우저	HTML4/HTML5	HTML5	HTML5
접근범위	다른 창에서도 접근가능	같은 탭에서만 접근가능	다른 창에서도 접근가능
만료	만료기한이 정해져 있음	탭을 닫으면 만료됨	만료되지 않음
저장위치	브라우저 및 서버	브라우저만	브라우저만

참고영상 How to use Local Stroage in JavaScript  Javascript Cookies vs Local Stroage vs Session

 

비즈니스 로직 vs UI 로직

참고영상  [멘토링] UI와 비즈니스 로직을 분리한다는 것

 

MVC 패턴

Why MVC?

- 각 컴포넌트의 코드 결합도를 낮추고, 코드의 재사용성을 높일 수 있음

- 구현자들 간의 커뮤니케이션 효율성을 높일 수 있음

 

MVC흐름

1. 사용자가 원하는 기능을 처리하기 위한 요청을 컨트롤러에게 보낸다.

2. 컨트롤러는 모델을 사용하고, 모델은 비즈니스 로직 수행한다.

3. 컨트롤러는 사용자에게 보여줄 뷰를 선택하고, 선택된 뷰는 사용자에게 결과화면을 출력한다.

 

　[1] Model        　값과 기능을 갖는 객체, 비즈니스 로직 수행(상태변화 처리, 상태정보 반환)

　[2] View   　　    데이터의 시각화, 모델이 처리한 데이터를 컨트롤러를 통해 전달 받아서 사용,  비즈니스 로직X

　[3] Controller　사용자의 요청을 해석해서 처리하고 결과를 반환, 데이터의 흐름 제어하며 모델과 뷰를 느슨하게 연결

 

자주하는 실수

1. Model 에서 View에 접근

2. Model 에서 View의 역할을 수행

3. View 에서 값 검증과 예외처리를 과도하게 처리함

4. View에서 비즈니스 로직을 수행

export const getArrayFromLocalStorage = (key) => {
  try {
    return JSON.parse(localStorage.getItem(key)) || [];
  } catch (e) {
    return [];
  }
};

참고영상  [10분 테코톡] 범블비의 MVC Pattern, [10분 테코톡] 해리&션의 MVC패턴

 

JSON 에러 해결

값이 없을 때 JSON.parse를 시도하면 에러 발생

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)

 

try/catch 구문으로 해결 => 무서운 빨간 에러로부터 벗어날 수 있음

export const getArrayFromLocalStorage = (key) => {
  try {
    return JSON.parse(localStorage.getItem(key)) || [];
  } catch (e) {
    return [];
  }
};

참고링크 

[스택오버플로우] Uncaught SyntaxError: Unexpected token u in JSON at position 0

[스택오버플로우] LocalStorage & JSON.parse: If no value, JS stops working?