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

강의 수강

1) 일주일 간 학습한 내용

dom testing library

• dom 노드를 테스트하기 위한 솔루션

react testing library

• react 컴포넌트를 테스트하기 위한 솔루션

• enzyme : 구현 주도 테스트(태그 하나하나의 의미가 중요하고 의도와 맞지않으면 오류로 판단)

• react testing : 행위 주도 테스트(사용자 입장에서 구현만 제대로 되면 되기때문에 태그의 의도가 중요하지 않음.)

Jest

• 단위 테스트를 위해 만들어진 테스팅 프레임워크 파일명.test.js / 파일명.spec.js 로 파일명 쓰면 테스트를 위한 파일이다라고 생각함

• describe : 관련 테스트의 묶음

• test(=it) : 개별의 테스트

• expect와 matcher는 항상 함께 쓰임

• 쿼리함수 : 페이지에서 테스트할 요소를 찾기위한 함수 - get: 테스트 실패시 에러반환 - query : 요소가 없으면 null반환 - find: 주어진 요소가 일치하면 요소반환 - wait: 일정시간 동안 대기할때 사용 get + wait = find

배포

• IAM(Identity and Access Management) AWS 리소스에 대한 액세스를 루트 사용자가 권한을 부여해 안전하게 제어할수 있는 웹서비스
  

<NextJS>

• csr을 하면 빈 html을 가져와 js파일을 해석해 화면을 구성하기 때문에 검색에 노출 될 일이 없음. next.js는 ssr로 pre-rendering(js로 처리하기전 HTML생성)을 통해 완성된 html을 가져오기 때문에 검색엔진 크롤러에게 바로 렌더링된 페이지를 전달하여 검색엔진 최적화를 할 수 있음.

폴더구조

• _app.tsx 공통되는 레이아웃을 작성하는 파일로 url로 특정 페이지에 진입하기 전 통과하는 인터셉터 페이지

• next.config.js Next.js 는 웹팩을 기본 번들러로 사용하므로 웹팩에 관한 설정들을 이 파일에서 사용함.

데이터를 가져오는 방법

• getStaticProps Static Generation으로 빌드할때 데이터를 불러옴.

• getStaticPaths 동적 라운팅 구현 (pages/post/[id].js)

• getServerSideProps Server Side Rendering으로 요청이 있을때 데이터 불러옴. 데이터를 가져와야하는 페이지를 미리 렌더링해야할 때 사용함.

<Next.js> TypeScript Type

• Primitive Types : number / boolean/ string/ symbol / void / null / undefined

• Object Types : functions / arrays/ classes / objects

• 그 외

• Tuple : 타입이 고정된 배열

• Enum : 집합에서 어떤 값을 친숙한 이름으로 사용하기 위해 활용, 객체와 차이점은 선언한 이후 변경불가하다는 점

• Any : 잘 알지 못하는 타입

• Void : 함수가 값을 반환하지 않을때 사용

• Never : 무한루프, 오류를 리턴할때 사용 → Void에 반해 어떤값도 가질수없음.

• Union : 둘 이상의 데이터 유형 사용

Type annotation, Type inference

• Type annotation : 개발자가 타입을 직접 지정함.

• Type inference : ts가 알아서 타입을 추론함.

Type assertion

• 프로그래머가 컴파일러에게 내가 너보다 타입에 대해 잘알고있다 즉, 타입을 바꿀수 있는것을 말함.

REACT Version18

• Automatic batching 업데이트 대상의 상태값들을 하나의 그룹으로 묶어 한번에 리렌더링 업데이트 될수있도록 해줌.

• Suspence on the server 리액트 ssr의 경우, 빨리 생성된 컴포넌트가 다른 컴포넌트를 위해 기다려야하기때문에 비효율적임. → suspense를 사용해 더 작은 독립단위로 나눠 해결가능

• transition

• 상태 전환 중에 어떤 업데이트가 더 긴급한지 알려줘서 우선순위를 주게됨. 사용자 상호 작용을 개선 가능함.

• 18버전 이전에는 어떻게 했는지? debounce이용 / setTimeout 이용 / state를 두개로 나눠서 따로 처리

리덕스

• store를 활용해서 state 상태를 보관하거나 업데이트해주는 상태 관리 라이브러리

• 데이터 흐름 aciton → (call the reducer) → reducer → (Update Store) → redux store → (Render new View) → react component → (Dispatch Synchronous Action) → action

• action 작업의 유형인 type속성과 선택적으로 redux 저장소에 데이터를 보내는 payload 속성을 가진 JS 객체

• reducer

• 애플리케이션 상태의 업데이트 상태를 반환하는 함수

• (previousState, action) ⇒ nextState // 이전 state와 action object를 받아 nextState를 return함.

• redux store

• 애플리케이션 전체 상태 트리를 보유하는 객체

• 내부 상태를 변경하는 것은 action을 전달하는 것.

• subscribe() getState()를 호출하여 작업이 전달될때마다 콜백 내부의 현재 상태 트리를 읽을 수 있음.

• combineReducers() 여러개의 리듀서를 만들어주는 것 루트 리듀서를 만들어서 그 아래 서브 리듀서를 넣어주면 됨.

• 리액트 hook 처럼 리덕스 Hooks가 있음. 아래 두개를 이용해 provider로 둘러싼 컴포넌트에서 store에 접근 가능함.

• useSelector : 스토어의 값을 가져올 때 사용.

• useDispatch : dispatch 함수에 접근할 때 사용.

• 리덕스 미들웨어 action을 dispatch 전달하고 reducer에 도달하는 순간 사전에 지정된 작업을 실행할 수 있게 해주는 중간자. ex) 비동기 api 통신, 라우팅 등에 사용

도커

어떤 프로그램을 다운 받는 과정을 간단하게 만들기 위함.

• 컨테이너를 사용해 응용프로그램을 더 쉽게 만들고 배포할수 있는 오픈소스 가상화 플랫폼.

• 컨테이너 : 컨테이너에 물건을 넣고 쉽게 옮길 수 있듯이 컨테이너 안에 다양한 프로그램을 추상화하여 배포를 단순하게 해줌. aws, azure등 어디에서든 실행 가능함.
  

2) 미션 / 학습 내용에 대한 회고

일주일 만에 Next.js, TypeScript, Redux 를 익히고 프로젝트에 적용하기에는 무리가 있었다. 아직 리액트로 프로젝트를 개발하면서 심도있는 내용은 이해해나가는 과정인 것 같다. 비록 스터디 기한은 끝났지만 3주간의 흐름을 이어받아 React+TypeScript + Redux 조합의 프로젝트와 Next.js+TypeScript 조합의 프로젝트를 각 1개 이상씩 개발하고 싶다.

미션 저장소
: https://github.com/kathy0917/inflearn-warming-up-fe-1/tree/main