[3주차 발자국] 인프런 워밍업 클럽 스터디 0기 FE

회고

벌써 마지막 발자국이다.

3주를 달려오면서 느낀 것은, 시간 분배를 제대로 해야 한다는 것이다.

초반에 자바스크립트에 시간을 쓰느라 리액트 파트를 느긋하게 하지 못하고 빠르게 돌았다.

우선은 앞에서 풀리지 않은 문제가 있더라도 제때 진행해야 하는 진도를 끝내놓고 일요일쯤에 다시 돌아오는 편이 나았을 것이라는 생각이 들었다. 스터디가 끝나도 이 점은 기억하여 그날 해야하는 일은 마치고 나서 모르는 점을 보충하는 시간을 주말이나 저녁에 따로 가지는 것이 좋겠다.

사실 자바스크립트부터 모두 이해하고 미션도 다 하고 싶었지만, 아무래도 기간 안에 전부 끝내지는 못할 것 같다.

특히나 적어도 수료를 하려면 리액트 과제를 4개는 해야 하는데, 아직 1개 완료, 1개 진행중이다.

내일까지 과제를 3개 완료할 수 있을지 모르겠다. 그래도 최대한 해볼 생각이다.

지금 디즈니 플러스 앱의 github 로그인 버튼 기능을 구현하는것에서 막혀 머리를 싸매고 있다. 깃허브 계정 로그인까지는 되는데 자꾸 페이지 이동이 안된다.

기본 개념부터 하나하나 느긋하게 보고 이해하기에는 시간이 부족하다고 느껴 쉽게 설명한 문서가 있는지 찾아다니는데에 시간을 꽤나 쓴 것 같다. 공식 문서부터 다시 보고 내일까지 성공하길 바라고 있다.

스터디가 끝나면 강의에서 어려웠던 부분 혹은 시간을 들여 보지 못했던 부분을 다시 해보면서 역량을 쌓아야겠다.

강의 요약

이번주 강의 범위: 섹션6~7(React TDD), 섹션8(Next.js, TypeScript), 섹션9~10(Redux)

React TDD
Next.js
TypeScript
Redux

React TDD

: 테스트 주도 개발(TDD, Test Driven Development): 테스트 코드를 작성한 후 그것을 Pass할 수 있는 실제 코드를 작성하는 개발 방식

장점: 소스코드 안정감 부여, 디버깅 및 개발 시간 감소, 클린 코드 가능성 높음
React Testing Library
- React 컴포넌트를 테스트하는 가벼운 솔루션.
- 행위 주도 테스트(태그보다는 이벤트 발생 시 화면 변화 등의 테스트)
Jest
- React Testing Library와 함께 React 테스트에 쓰이는 테스팅 프레임워크.
- test Case를 만들어 확인.
- 단위 테스트를 위함
- Jest 파일 구조
  - describe: 여러 관련 테스트를 그룹화하는 블록을 만듦.
    - it: ==test. 개별 테스트를 수행하는 곳.
      - expect: 값을 테스트할때마다 사용됨. matcher와 함께 사용.
      - matcher: 다른 방법으로 값을 테스트하도록 함.
쿼리함수
- get: 요소가 없으면 오류 발생
- find: 요소가 없으면 null 반환
- query: 요소가 없으면 거부. 요소가 있으면 Promise 반환.
테스팅 검사 관련 모듈
- ESLint: 문법오류 잡기
- Prettier: 코드 형식 맞추기

Next.js

: React의 SSR(Server Side Rendering) 구현을 도와주는 프레임워크. (React는 라이브러리)

(리액트에서도 SSR을 지원하지만 구현하기에 굉장히 복잡. 따라서 NextJS 사용.)

React는 CSR(Client Side Rendering) 이용
- CSR: JS가 다운로드된 후에야 화면 표시 및 기능 활성화됨
  - 첫페이지에서 빈 html을 가져와 JS파일을 해석하여 화면을 구성하기에 포털 검색에 거의 노출될 일이 없음. => 검색엔진 최적화(SEO) 불리
- SSR: 서버에서 Pre-Rendering된 HTML 제공
  - 사용자와 검색엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 됨.
  - Pre-Rendering: initial Load(html보임) -> JS로드 -> Hydration(컴포넌트 활성화)
Data Fetching
- React에서 데이터를 가져오는 방법
  - useEffect 내부에서 가져옴
- Nextjs에서 데이터를 가져오는 방법
  - getStaticProps
  - getStaticPaths
  - getServerSideProps

TypeScript

: JavaScript에 타입을 부여한 언어. 오픈소스.

사용하는 이유
- 단순화. 쉽게 읽고 디버그 가능
- 코드 유형 검사를 통해 JavaScript에서의 일반적인 버그 피하는데에 도움

Compile
- 브라우저에서 실행하기 위해 파일을 변환해주는 것
- TypeScript에서 하는것. JavaScript에서는 안함.
TypeScript Type
- value가 가진 프로퍼티나 함수를 추론할 수 있는 방법
- TypeScript 유형
  - Primitive types: string, number, boolean, null, undefined, symbol
  - Object types: function, array, class, object
  - 추가 제공 타입: Tuple, Enum, Any, Void, Never, Union
- type annotation: 개발자가 타입스크립트에게 타입을 알려줌
- type inference: 타입스크립트가 타입을 추론하는 것
- type assertion: 타입스크립트의 추론을 막는다. 나의 주장에 대해 의심하지 마라.

Redux

: JavaScript Application을 위한 상태관리 라이브러리.

Redux Data Flow
- Dispatch Action -> Call Reducer -> Update Store -> Render
  - Action: 자바스크립트 객체. 작업유형 지정하는 정보 들어있음.
  - Reducer: 이전 state와 action을 받은 후 next state를 반환하여 store를 업데이트.
  - Redux Store: 앱의 전체 상태 트리를 갖는 저장소. 몇 가지 Methods가 있는 객체.
Provider
- 컴포넌트들에서 Redux Store에 접근할 수 있도록 해줌.
- 컴포넌트들을 둘러싸고 최상위 수준에서 렌더링.
- useSelector: useSelector Hooks를 사용해 스토어의 값을 가져옴.
- useDispatch: dispatch함수에 접근하는 Hooks. (Action을 보냄)
미들웨어
- Action을 Dispatch하고 Reducer에 도달하는 순간 사전에 지정된 작업 실행 도와주는 중간자
- Reducer에 도달하기 전에 API와 통신을 하고 그것을 전달.
Redux Thunk
- 리덕스 미들웨어. 비동기 작업할 때 많이 쓰임.
- Thunk: 일부 지연된 작업을 수행하는 코드 조각
Redux Toolkit
- 로직을 작성하기 위한 공식 권장 접근 방식.
- 모범 사례를 이용해 작업 단순화 및 실수 방지.

미션 해결 과정

[1. 자바스크립트 미션 보강]

미션4(Day5) 책 리스트 나열 앱의 보강이 필요했던 부분

스타일 보강
알림때문에 화면이 아래로 밀리는 문제 고치기

스타일 보강

포인트 1. input의 넓이 키우기: 가로는 화면의 대부분을 가로지르도록, 세로는 h1정도로 크게

포인트 2. 제출 버튼을 책 저자 input란 아래에 두어 보기 좋게 만들기(가로도 길게)

포인트 3. hr로 입력Form과 책 리스트 Form 구분하기

포인트 4. 책 리스트 Form 좀 더 보기 좋게 만들기

(보강 전)

(보강 후)

input의 font size 조정을 이용해 포인트1 해결
display: flex; flex-direction: column을 이용해 포인트2 해결
<hr>을 삽입해 포인트3 해결
위치 및 폰트 미세 조정하여 포인트4 해결

알림때문에 화면이 아래로 밀리는 문제 고치기

책이 추가되었습니다, 아이디가 입력되지 않았습니다 등의 알림을 뜨게 하면 아래 화면이 움직이는 것 때문에 불편함이 있었다. 예제 동영상을 다시 보니 이 부분은 나와 똑같이 구현되어있기는 했지만, 편의성을 위해 바꿔보았다.

알림이 아래로 추가되도록 하지 않고, display: none을 지정했다 풀었다 하는 방식으로 겹쳐 표시
setTimeout에 clearTimeout을 이용해 알림을 매번 새로 3초 지속시간 부여
float: right 속성을 이용해 '책' title의 오른쪽에 배치

미션5(Day5) Github Finder 만들기의 보강이 필요했던 부분

API 통신
스타일

API 통신

github의 사용자들을 검색하려면 github에서 제공하는 api를 fetch하면 된다고 한다.

기본적인 형태는 이런 식이다.

async function logJSONData() {
  const response = await fetch("https://api.github.com/users");
  const jsonData = await response.json();
  console.log(jsonData);
}

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

내가 이해한 부분은, fetch 안에 api url을 넣고, fetch가 반환하는 response에 .json()을 해주면 데이터를 가져올 수 있다는 것이다.

github에서 사용자를 검색하는 데에는 특별한 인증 키가 필요 없다고 한다.

https://www.daleseo.com/github-rest-api/

진도가 밀리고 있기에 여기까지 이해하고 잠시 멈추고 리액트 공부를 시작했다.

[2. React 미션 해결 과정]

미션8(Day9) 예산 계산기 앱 만들기

이 미션은 React 섹션 1~3을 차근차근 복습할 겸 따라하며 필요한 부분을 알맞게 바꿔 만들었다.

첫 번째 커밋에서는 class component 방식으로, this.state와 this.setState를 사용해 App.js에 몽땅 코딩했다.

총 지출을 출력하는 부분에서 계속 금액이 문자열로 지정되어 합쳐지는 것을 막기 위해 일일이 Number()처리를 했다.

그리고 두 번째 커밋에서는 function component를 이용하는 React Hooks(class component 없이 state를 사용할 수 있도록 하는 기능)를 이용했다.

즉 React Hooks에서는 component 분리(App.js, Input.js, Lists.js, List.js), useState 사용.

항목에 마우스 올릴 시 크기가 커지는 효과: scale과 transition 조정(아래 블로그를 참고했다.)

https://record-than-remember.tistory.com/entry/CSS-%EC%9D%B4%EB%AF%B8%EC%A7%80-hover-transformscale-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%98%A4%EB%B2%84%EC%8B%9C-%ED%99%95%EB%8C%80

수정 버튼을 구현하는 것이 가장 어려웠다.

Input component에서 수정 기능을 구현하고 싶었지만 자꾸 에러가 떠서 list component에서 그냥 state를 만들고 구현했다. 이 부분은 다음에 시간 여유가 있을 때 보강해야겠다.

미션9(Day10) 디즈니 플러스 앱 만들기

미션을 하면서 떠올린 단어는 다음과 같다. '막막하다'...

물론 거의 대부분이 강의에서 다루었던 넷플릭스 클론 코딩과 같은 형태였지만,

제대로 체화하지 못했을 뿐더러 CSS를 적용하고 왔다갔다하면서 수정하는 것은 내 노트북에게는 상당히 힘든 일이었다.(저장할때마다 체감상 기본 10초는 멈췄던 것 같다. 노트북을 당장 바꿔야겠다.)

기간안에 전부 이해하고 처음부터 만들기는 힘들 것 같으므로, 넷플릭스 클론을 할 때 사용했던 코드를 수정하는 쪽으로 미션을 수행했다.

해야하는 일은 다음과 같다.

넷플릭스 흔적 지우고 로고, bgcolor, nav color 디즈니 비슷하게 바꾸기 (완료)
LoginPage 구현하기 (완료)
깃허브 로그인 버튼 구현하기 (진행중)
Category 컴포넌트 만들기
(완료)

현재 깃허브 OAuth 토큰을 이용해 로그인해서 code를 받는것까지는 진행된 것 같은데, 로그인 후에 페이지 전환하는 것에서 막혔다. useState를 사용해 로그인이 되었을 경우와 안되었을 경우를 나누어 다른 컴포넌트를 라우팅하도록은 해놓았는데, 깃허브 액세스 토큰을 어떻게 사용하고 데이터를 어떻게 가져오는지 등을 아직 이해하지 못했다. 그리고 그 기능끼리 연결을 어떻게 시키는지 아직 모르겠다. 그래도 내일까지는 완성하고싶다.