inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

학생
1

회고

벌써 마지막 발자국이다.

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

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

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

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

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

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

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

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

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

강의 요약

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

 

React TDD

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

Next.js

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

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

TypeScript

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

Redux

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

 

미션 해결 과정

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

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

스타일 보강

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

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

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

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

(보강 전)

image(보강 후)

image

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

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

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

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초는 멈췄던 것 같다. 노트북을 당장 바꿔야겠다.)

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

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

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

프론트엔드 인프런 워밍업 클럽 스터디 FE 0기

답변 0