7 주차 과제진행

[gringrape]

할 일

로그인

• [x] 강의보기
• [ ] 강의실습
• [ ] 셀프피드백 - 이전 코드 돌아보기
• [ ] 과제 수행 및 업로드

[gringrape]

강의 내용

• 세션 리소스 요청 -> httpie
• 로그인 페이지
• 로그인 폼 컨테이너
• 로그인 액션

  학습 주안점

• 어떻게 테스트를 만들어가는지 이유에 대해서 서술하는 느낌으로 작성하자.

  학습 체크리스트

• [ ] HTTP 요청
• [ ] 로그인 페이지
• [ ] 로그인 폼 컨테이너
• [ ] 로그인 컴포넌트 완성
• [ ] 리듀서
• [ ] 로그인 액션, api 완성

0:00 - /session 에 HTTP 요청 5:00 - 로그인 페이지 - (타이틀) 7:25 - 로그인 폼 컨테이너 - (input, button) 17:07 - 로그인 액션 (틀잡기) 19:21 - 로그인 폼 - (렌더링, submit button) 26:30 - 로그인 폼 - (input 내용 변경) 32:08 - 로그인 폼 컨테이너 -(input 내용 변경) 37:43 - 로그인 폼, 컨테이너 - (input 내용 표시) 44:00 - 리듀서 50:13 - 로그인 액션, api -> 액세스 토큰 보여주기 55:49 - 컴포넌트 테스트 추가 1:01:28 - 로그인 페이지 연결, 로그인 테스트 -> api 마저 완성 1:07:00 - 강의요약

[gringrape]

HTTP 요청

목표

• 어디에 무엇을 요청해서 결과는 무엇이어야 하는지 확인

  REST client 를 이용해서 요청

  

  해석

• 어디에: 목표 URL 의 session 리소스에
• 무엇을: 이메일과 암호를 요청하면
• 결과는: accessToken 을 얻게된다

[gringrape]

강의내용 주제별 정리

페이지 컴포넌트에서 하위 컴포넌트 내용을 검사하는 것이 적절한가?

• 내용은 검사할 수 있다.
• 하지만 하위 컴포넌트의 내용을 바꿀경우에 테스트가 여러군데에서 실패하게 된다. (단위테스트)
• 이럴 경우 들어가는 내용을 다른 곳으로 빼내서 변수로 검사하면 그런걱정이 사라지게 된다.
• 내용을 따라갈 수 있다고 생각하면 굳이 빼내지 않아도 괜찮다

[gringrape]

잘모르는 것

1. htmlFor

[gringrape]

연습 1. 방향설정

현재 상태

• input 내용 변경까지 스스로 만들어 보았다.

  해야할 일

• [x] 강의를 보고 비교해서 현재 상태의 개선점을 찾아본다
• [x] 개선점을 현재까지의 코드에 반영해본다.

개선점

관점 1. 각 단위테스트의 테스트 범위

같은 테스트를 계속 반복해야 할까? (예를들어, input 이 여러개일때)

• 상위컴포넌트(페이지, 컨테이너)에서는 적절하게 있는지 정도만 간략하게 확인하고 넘어간다
• 해당 컴포넌트에서는 구성을 확실하게 테스트한다.

관점 2. 하나의 테스트(it, test) 의 범위

여러개의 테스트를 한꺼번에? 아니면 분리?

• 개인의 스타일마다 다르다.
• 나는 아주 한참후에 테스트코드를 다시 읽는다는 생각으로, 맥락을 읽는 수고를 줄이고 싶으므로 하나씩 쪼개줄 것이다.

[gringrape]

작업 2.

작업목표

• [x] 액세스 토큰을 보여준다.
• [x] 액션 테스트를 개선한다.
• [x] 테스트명에 구체적인 구현이 들어가는 경우를 제거한다.
• [x] 이름을 수정한다.
• [x] 리듀서 테스트를 수정한다.

액세스 토큰

[gringrape]

작업 3. 에러 처리

작업 목표

• 로그인 시도를 실패하는 경우(api 요청 실패)에 대해 사용자에게 적절한 표시를 해준다.

  참고자료

  https://itnext.io/centralizing-api-error-handling-in-react-apps-810b2be1d39d

[gringrape]

작업 4. 리뷰 폼 만들기

작업 목표

• 리뷰를 작성할 수 있게 된다.

체크리스트

• [x] TextField 추상화
• [x] 리뷰폼 만들기
  • [x] 폼 렌더링
  • [x] 값 변화
  • [x] 제출(submit)
  • [x] 리듀서
  • [x] 액션
  • [x] api
• [x] 리뷰목록 만들기

  문제사항 정리

  이름 짓기

  상위 요소에서 언급한 정보는 하위정보에서 다시 언급하지 말자.

[gringrape]

텍스트필드 만들기

추상화 대상

파라메터

id label type name value onchange

[gringrape]

회고

• bad) 요구사항을 정확히 보고 구현 -> log out 버튼이 필요한것을 redirection 으로 구현했다가 시간을 소모.
• good) 한번에 하나의 목표에만 집중.

  체크리스트

• [x] 리다이렉션 기능 제거
• [x] 로그아웃 버튼 구현
• [x] 리뷰리스트 컴포넌트 추가
• [x] 로그아웃 구현
• [x] 로그인을 했으면 리뷰를 남길수 있다
• [x] 로그인을 안했으면 리뷰를 남길수 없다

리뷰목록

[gringrape]

스토리지 이용하기

목표

• 토큰을 스토리지에 저장하고 불러오고 삭제할 수 있다.
• 새로고침해도 토큰이 사라지지 않는다.

  체크리스트

• [x] App 에서 토큰 로드
• [x] action 에서 localstorage 처리
• [x] 로그아웃 처리