![[3주차] 인프런 워밍업 클럽 스터디 FE 1기 발자국](https://cdn.inflearn.com/public/files/blogs/a03d6e94-53ac-4d4e-87cc-1c636f69ead1/인프런 블로그.png)
[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
댓글을 작성해보세요.