profile
Developer

redux toolkit test

api request는 msw를 이용하여 모킹 하였다.

2022년 8월 4일
·
0개의 댓글
·
post-thumbnail

msw (Mock Service Worker)

Service Worker API를 사용하여 실제 요청을 가로채는 API 모킹 라이브러리 이다.FrontEnd 개발 단계에서 백엔드 API가 준비되지 않더라도 실제 API 요청을 구현할 수 있고 테스트를 할 경우에도 유용하게 사용할 수 있다.지정된 endpoint로 요

2022년 8월 2일
·
0개의 댓글
·

Suspense, lazy

lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링할 수 있다.React는 SPA이기 때문에 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있다.하지만 React.lazy를 통해 컴포넌트를 동적으로 import 할 수 있고 이를 통해 초

2022년 7월 28일
·
0개의 댓글
·

Code Spliting

대부분 React 앱들은 Webpack, Rollup과 같은 툴을 사용해 번들링 한다. 번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 페이지를 설정하는 데 필요한 호출 수가 적은 링크 태그 하나만 필요하게 된다.과거에는 JavaScript 코드가 최소한을

2022년 7월 28일
·
0개의 댓글
·

Custom Hook 저장

useFetch useInputs

2022년 7월 27일
·
0개의 댓글
·

useCallback

useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook이다.useMemo는 값의 재사용을 위해 사용하는 Hook 이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook 이다.컴포넌트 안의 add 함수는 props로 넘어

2022년 7월 27일
·
0개의 댓글
·

useMemo

useMemo는 특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다.위의 컴포넌트는 props로 넘어온 value 값을 calculate 라는 함수에 인자로 넘겨서 result 값을 구한 후, div 엘리먼트로 출력을 하고 있다.만약 여기서 calculat

2022년 7월 27일
·
0개의 댓글
·
post-thumbnail

React Diffing Algorithm

React가 기존 가상 DOM과 변경된 새로운 가상 DOM을 비교할 때, React 입장에서는 변경된 새로운 가상 DOM 트리에 부합하도록 기존의 UI를 효율적으로 갱신하는 방법을 알아낼 필요가 있었다. 즉 하나의 트리를 다른 트리로 변형을 시키는 가장 작은 조작 방식

2022년 7월 27일
·
0개의 댓글
·
post-thumbnail

Virtual DOM

React에는 Virtual DOM이라고 하는 가상의 DOM 객체가 있다. 이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 바교하고 바뀐 부분을 적용한다.DOM은 D

2022년 7월 27일
·
0개의 댓글
·

Testing

2022년 7월 26일
·
0개의 댓글
·

redux-toolkit typescript initial setting

Install Define Root State, Dispatch Types Define useDispatch, useSelector Types Define createSlice reducer Type

2022년 7월 23일
·
0개의 댓글
·

NavLink 사용법

React Router 에서 지원하는 기능 중 하나이다.navigation menu, tab menu 등을 개발할 때 유용하게 사용할 수 있다.기존의 <Link> 와 가장 큰 차이점은 클릭 시 다른 페이지로 이동시킬 뿐만 아니라 isActive 속성을 전달받아 현

2022년 7월 11일
·
0개의 댓글
·
post-thumbnail

Redux

JavaScript 기반의 상태관리 라이브러리 이다.동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미이다.Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음을 의미한다.상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변

2022년 7월 5일
·
0개의 댓글
·
post-thumbnail

상태 관리 라이브러리

상태(state)란 동적으로 표현되는 데이터를 의미한다.보통 리액트에서는 컴포넌트 안에서 useState 훅을 이용하여 상태를 관리하는데컴포넌트 안에서 상태를 관리 할 경우 아래와 같은 문제가 있다.자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능하다.자식 컴포넌트들

2022년 7월 5일
·
0개의 댓글
·

[React Hooks] useEffect

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 hook이다.함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 의미한다.useEffect의 첫번째 인자는 함수를, 두번째 인자에는 의존성 배열을 전달한다.컴포넌트 생성 후 처음 화

2022년 6월 13일
·
0개의 댓글
·

Loading Spinner

Loading Spinner

2022년 6월 4일
·
0개의 댓글
·
post-thumbnail

firebase 검색기능 구현하기

보통 검색 기능을 구현할 때 filter 메서드를 사용한다.firebase의 내장 기능을 이용하면 쉽게 검색기능을 구현할 수 있다.fetch API 엔드 포인트 뒤에 전달해줄 query를 작성한다.?orderBy="...DB에 찾고자 하는 키 값"&equalTo="${

2022년 6월 4일
·
0개의 댓글
·

React Event handling

React에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용한다.JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.input, textarea, select 와 같은 form 엘리먼트는 사용자의 입력값을 제어하는 데 사용된다.아래와 같이 o

2022년 6월 3일
·
0개의 댓글
·
post-thumbnail

State

일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 의미한다.props 는 읽기전용(변경할 수 없는) 값 이지만, state 는 값을 변경할 수 있다.state 가 변하게 되면 렌더링이 일어난다. (해당 state와 연관된 컴포넌트 모두가 리렌더링)state 를 다루는

2022년 6월 3일
·
0개의 댓글
·
post-thumbnail

Props

상위 컴포넌트로부터 전달받은 값으로 상위 컴포넌트의 속성(property)를 의미한다.함수의 전달인자(arguments)처럼 전달받는다.객체 형태이다.읽기 전용이다. (외부로부터 전달받는 값이기 때문에 변경될 수 없다)Parent 컴포넌트와 Child 컴포넌트를 선언하

2022년 6월 3일
·
0개의 댓글
·