React
/
/

Frontend

Search
따라서 getXXX함수에서 데이터를 패칭하는 것은 노드 환경에서 페칭되므로 브라우저 개발자도구 콘솔에 찍히는 것이 아니라 터미널에 콘솔이 출력되는 것을 확인할 수 있다.
Next.js는 Pre-render 방식 SSG와 SSR이 있다. getXX를 사용해서 미리 빌드하는 페이지에 어떤 데이터를 같이 넣어줄지 결정한다.
2022/03/24
icoa
icoa
2022/05/05 12:48
2022/03/23 20:11
React useRef guide
2022/03/21
icoa
icoa
2022/05/05 12:48
2022/03/21 19:46
Jotai는 React를 위한 비교적 새로운 상태 관리 라이브러리입니다. 간단하지만 실수하지 마십시오. 강력한 라이브러리입니다.
Jotai는 Facebook의 새로운 Recoil 패턴 및 라이브러리를 기반으로 합니다. 50여 년 전 Facebook은 Flux 라는 React의 상태 관리를 위한 패턴과 라이브러리를 만들었습니다 .
이 패턴에서 Facebook이 아닌 일부 개발자는 더 강력하고 사용하기 쉬운 자체 라이브러리를 새로 만들었으며 React 세계를 폭풍으로 몰아넣었습니다. 
이 라이브러리는 Redux입니다. 이제 Facebook에는 Flux와 다른 이데올로기를 가진 Recoil이 있습니다.
Jotai와 Redux도 마찬가지입니다. 이 중 몇 가지를 살펴보겠습니다.

왜 Jotai?

•
최소한의 API
•
작은 번들 크기
•
Loaded to the brim
- Jotai는 많은 걸 갖고 있다.
•
Performant - Jotai
•
TYPESCRIPT!! 

Redux와 이념적 차이

jotai state management
2022/03/19
icoa
icoa
2022/04/29 21:18
2022/03/19 18:56

많은 이유가 있다.

•
일단 Redux와 React-query는 비교 대상은 아니다. 만약 로컬 상태와 전역 상태, 클라이언트의 상태와 서버의 상태를 제대로 분리하지 않고 다루고 있었다면 Redux에서 다루는 상태를 React-query에서 하도록 이동시킬 수 있다.
•
Redux는 전역 상태를 관리하고 클라이언트의 전역 상태를 관리하는 것이지 서버의 상태를 제대로 관리할 수 없다.
•
React-query를 사용하면 보일러플레이트가 많이 줄어든다.
•
React-query는 React에 종속적인 라이브러리이므로 React가 버전업될 때 지원하는 기능이나 변화에 맞춰 발빠르게 대응해줄 수 있다.
•
Redux에서 서버 데이터를 다룰 때 항상 post/put/patch 메소드를 사용하게 되면 데이터를 수정하고 다시 get 메소드 요청을 통해 서버와의 동기화가 필요해진다는 점이다. 그래서 변경된 data를 post 이후 응답으로 받아서 변경된 item을 업데이트하는 식으로 할수야 있겠지만 이것은 쉬운 일은 아니다. 그래서 보통은 get 메소드를 쌍으로 호출시서 간단하게 처리한다. 문제는 get 메소드 때문에 2배의 서버 리소스를 사용한다는 점이다. 리액트 쿼리를 사용하면 개발 비용을 낮추고 유지보수가 쉬워질 수 있다. 만약 todos라는 키로 서버 데이터를 구분한다고 하면 post 등 데이터를 변경했을 때 리액트 쿼리의 invalidateQueries 메소드에 ‘todos’ 키값을 넣어주면 된다. 그러면 유효하지 않은 데이터로 인식해서 refetching하게 된다. 이 방식은 마치 리액트의 state를 다루는 것 같다. get으로 받은 데이터를 state처럼 가지고 있고 setState(post, put, patch)하면 invalidateQueries를 호출해서 새로운 데이터로 리페칭하는 것이다.
•
추가적으로 리액트 쿼리는 데이터 수정 요청이 들어오자마자 더 빠른 UI 반응을 위한 Optimistic UI를 제공할 수 있다.(Redux보다 덜 복잡하고 다른 라이브러리 없이) 캐시된 데이터를 get, set하는 방식인데, 자세한 내용은 따로 다룬다.
Redux에 추가로 React-query를 사용하는 이유
2022/03/18
icoa
icoa
2022/05/05 12:48
2022/03/17 19:57
글을 읽고 정리해본다.
리액트 쿼리는 캐시된 데이터에 Stale이라는 상태가 있는데, 최신화가 필요하다는 의미다. 즉, 리페칭이 일어난다.
•
새로운 쿼리 인스턴스가 마운트될 때(페이지 이동)
•
화면 이탈 후 다시 포커스
•
네트워크 재연결
•
설정한 refetchInterval에 따라
refetchOnWindowFocus로 기본 refetch는 막을 수 있다.
staleTime 옵션은 stale(→refetch)되지 않게 막는 시간이다.
query에 액션이 없다면 캐시에서 5분 뒤에 사라진다. cacheTime으로 조절할 수 있는 값이다.

리액트 쿼리는 설정 없이 캐싱되지 않는다.

React query 기본 정리
2022/03/18
icoa
icoa
2022/05/05 12:46
2022/03/17 20:09

Implement Optimistic UI for insert/update/delete mutations with React Query

리액트 쿼리로 삽입/갱신/삭제 상태 변경을 위한 Optimistic UI(OUI) 구현
I assume that you’re familiar with React Query. If not, you can check my other article Fetch, Cache, and Update Data Effortlessly with React Query. It is really easy to use. I love React Query! Not only you can control every detail of how you fetch, cache, and use the data you get from the server but also you can implement optimistic updates easily with React Query. You can check out the docs on optimistic updates here.
리액트 쿼리는 잘 알 것이다. 만약 아니라면 이 글을 읽어보라.정말 사용하기 편하다...
모든 세부 사항을 제어할 수 있을 뿐만 아니라 optimistic updates를 쉽게 구현할 수 있다.
Generally, an optimistic update comes with a mutation. A mutation is typically used to insert/update/delete data or perform server side-effects. You’re likely going to have something like this:
일반적으로 OUI은 mutation을 수반한다. mutation은 일반적으로 삽입/갱신/삭제하거나 서버의 side-effects를 수행하기 위해 사용한다.

Like Button

I showed you how to implement a like button in the previous article. Let’s see how we can achieve this with React Query.
Twitter Like Button
Suppose you have a component that renders the list of tweets using React Query:
Optimistic UI With React Query 정리
2022/03/17
icoa
icoa
2022/05/05 12:46
2022/03/17 18:18
글을 읽고 정리했다.
리액트 리렌더링은 매우 빈번하다. state의 변경을 파악하기 위해서다.
(총 3가지 이유로 리렌더링된다. 부모 요소가 리렌더링되거나, Props가 변경되거나, State가 변경되거나)
자식이 많은 부모 요소는 리렌더링 시 많은 연산을 하게 된다.(실제 DOM이 아닌 Virtual DOM을 생성하기 위한 리렌더링이다.)
이 경우 React.memo를 쓸 수 있다. 내려줄 props 값들을 메모리에 저장해서 이 값이 변경된 경우에만 자식 컴포넌트를 렌더링시킨다.
메모리 저장과 비교 연산의 비용과 리렌더링 비용을 비교해서 판단해야 한다.
리렌더링 시마다 JSX 위쪽 함수들도 재생성된다.
동일한 기능의 함수라 해도 js는 다른 것으로 판단하기 때문에(func !== func)
props에 함수를 넣을 경우 memo로도 리렌더링을 막지 못한다!
React memo, useCallback 올바로 사용하기 정리
2022/03/17
icoa
icoa
2022/05/05 12:47
2022/03/17 19:47
220314 efficient data fetching with react-query
2022/03/14
icoa
icoa
2022/03/16 03:19
2022/03/13 20:15
React는 Virtual DOM, functional componnets, State Management, HOC와 같은 용어와 등장했다. 이 중 상태 관리는 중요한 역할을 한다.
React 시작 전에 고려할 핵심 요소 중 하나다.
개발자들은 Flux, Redux, Mobx와 같은 패턴 및 라이브러리를 사용해서 상태를 관리한다. 그러나 앱에 복잡성과 상용구 코드를 추가한다.

리액트 쿼리란?

Flux, Rudux와 다른 접근 방식을 취하는 상태 관리 도구 중 하나다. 클라이언트 상태 및 서버 상태의 주요 개념을 소개한다. 다른 모든 상태 관리 패턴은 클라이언트 상태만 처리하공 가져오거나, 수신하거나, 구독해야 하는 서버 상태를 처리하기가 어렵기 때문에 React-query는 상태 관리 최고의 라이브러리다.
서버 상태를 처리하는 것 외에도 config 없이 잘 작동하며 사용자 지정할 수 있다.
GraphQL과 마찬가지로 React Query는 다음과 같은 유사한 핵심 개념을 기반으로 합니다.
•
쿼리
•
돌연변이
•
쿼리 무효화
220314 React Query — An Underrated State Management Tool 읽기
2022/03/14
icoa
icoa
2022/05/05 12:46
2022/03/13 16:45

Introduction

Using React subcomponents is a practice of using multiple components in a component to break down a complex hierarchy into small, independent, and reusable components. These subcomponents can be configured to handle events and data via props. “Props” stands for properties, and are a React feature that passes data between components as an immutable key-value pair object.
리액트 하위 컴포넌트 사용은 작고, 독립적이고, 재사용가능한 컴포넌트들로 복잡한 계층을 세분화하기 위해서 컴포넌트에서 여러 컴포넌트를 사용하는 방법이다.
하위컴포넌트는 props 를 통해 이벤트와 데이터를 처리하도록 구성할 수 있다. Props는 Properties를 의미하며, 불변 키-값 쌍 객체로써 컴포넌트 사이에 데이터를 전달하는 리액트의 기능이다.
Implementing subcomponents is quite easy, but sometimes it can be tricky to retain the context with the use of anonymous functions or React classes. This guide covers the implementation of subcomponents with anonymous and ES6 features in React.
하위컴포넌트 구현은 꽤 쉽지만, 때때로 익명 함수나 리액트 클래스를 사용하여 컨텍스트를 유지하는 것은 까다로울 수 있다.

리액트 컴포넌트에서 이벤트 구현

리액트 클래스 컴포넌트는 Component 클래스를 확장해서 만들 수 있고, 클릭을 처리하는 함수로 onClick 이벤트를 구현할 수 있다.
위의 스니펫에서, handleClick 함수는 버튼이 클릭될 때마다 트리거된다. 거기에 this로 handleClick을 바인드하는 것은 필요하지 않다. 왜냐하면 handleClick은 어떤 것도 접근하지 않는다. 그 컨테이너인 App component로부터
다시 말해서, 거기에 에러가 있을 수 있다. 왜냐하면 this는 런타임에 window 객체를 가리키기 때문이다. App이 아니라.

하위컴포넌트로 이벤트 핸들러 전달

하위컴포넌트는 class나 functional 컴포넌트 둘중 하나로 구현할 수 있다. 이 구현은 fc로 최적화될 수 있다. Address 하위컴포넌트는 props를 통해 details를 받을 것이다. .container 컴포넌트로부터
220313 How to Set an Event Handler in a React Sub-component 읽기
2022/03/13
icoa
icoa
2022/03/15 13:37
2022/03/13 15:12
input의 자동 포커싱은 이렇게 autoFocus 속성을 줘도 간단히 가능하다. 하지만 hooks로 구현해보려고 했다.
Implementing useAutofocus custom hooks that does the same thing as the autoFocus property
<컴포넌트 제대로 만들기> 읽기
icoa
icoa
2022/03/13 15:51
2021/12/26 10:48
Nextjs 버전별 업데이트 사항(~ing)
NextJS
2021/10/09
icoa
icoa
2022/03/15 13:33
2021/12/26 10:48

# 시작

Nextjs에 익숙해지기 위해서 유튜브에서 Nextjs Tutorial 영상을 따라 공부하면서 알게 되는 것들을 적을 것이다.
따라한 유튜브 영상은 아래 링크이다.

# 정리

# 4

화면 왼쪽에 유저의 프로필이 보여지고 오른쪽에 그 유저가 가지고 있는 차들의 목록을 가져올 수 있다. 이것을 구현하기 위해서 API를 만들어볼 것이다. API를 만들어보기 전에 API에 대해서 알아보았다. API endpoint나 GET, POST 메소드들을 정확히 알고 있지 않아서 다시 조사해보았다.
아래 링크를 참고하여 이해하였다.
•
API란?
API (Application Programming Interface, 응용 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. - 위키백과
Next.js Tutorial, 유튜브 보면서 넥스트 공부하기 3 Studying next while watching YouTube 3
NextJS
2021/04/11
icoa
icoa
2022/03/13 15:56
2021/12/26 10:48

# 시작

Nextjs에 익숙해지기 위해서 유튜브에서 Nextjs Tutorial 영상을 따라 공부하면서 알게 되는 것들을 적을 것이다.

따라한 유튜브 영상은 아래 링크이다.

Next.js Tutorial, 유튜브 보면서 넥스트 공부하기 1 Studying next while watching YouTube 1

# 시작

Nextjs에 익숙해지기 위해서 유튜브에서 Nextjs Tutorial 영상을 따라 공부하면서 알게 되는 것들을 적을 것이다.

따라한 유튜브 영상은 아래 링크이다.

# 정리

# 3

타입 스크립트 마이그레이션

의존성 트리? 순환 참조에서 순서가 중요하다.
npm install --save-dev typescript @types/react 로 타입스크립트 패키지를 적용시킨다.
다시 npm run dev를 하게 되면 tsconfig.json 파일이 생성된다.
Next.js Tutorial, 유튜브 보면서 넥스트 공부하기 2 Studying next while watching YouTube 2
NextJS
2021/04/09
icoa
icoa
2022/03/13 15:56
2021/12/26 10:48

# 시작

Nextjs에서 Redux와 Redux wrapper를 사용하기 위해서 타 블로그를 참고하여 Redux(리덕스)에 대해 정리해보려고 한다.

# Redux를 사용하는 이유

리액트는 컴포넌트들에 공통적으로 쓰이는 데이터가 흩어져 있기 때문에 부모 컴포넌트에서 데이터를 받아 자식 컴포넌트로 전달해주어야 한다. 컴포넌트끼리 데이터를 전달하는 과정도 매우 복잡하고 오류가 발생하기 쉽다.

그래서 규모가 있는 서비스는 중앙 데이터 저장소 Store를 최소한 한 개 만들어 중앙에서 모든 데이터를 관리하며 전달해주는 것이 좋다. 이 Store는 Redux, Context API, Mobx, Apolo 등이 있다.

Redux(Redux wrapper) 사용 이유, 방식, 원리 이해하기 Understanding why, how, and how Redux (Redux wrapper) is used
Redux
2021/04/06
icoa
icoa
2022/03/13 15:57
2021/12/26 10:48
Next.js에서 redux devtools를 사용하면 크롬 개발자도구를 이용해 리덕스의 값이 변화하는 것을 콘솔로 볼 수 있다. Nextjs에서 redux를 이용하여 authentication 기능을 구현하는 과정에서 redux devtools를 적용한 코드를 보았는데 리덕스 미들웨어를 어떻게 세팅해야 하는지 공부하기 위해서 다시 정리해보았다.
아래는 2020년 1월 자료로 더 간결하다고 한다.
https://likejirak.tistory.com/130
https://likejirak.tistory.com/130
위의 블로그 내용을 보면 applyMiddleware를 통해 미들웨어들을 적용한다음 이를 composeWithDevTools로 redux devtools를 합성한다. 이렇게 만든 enhancer를 createStore의 인자로 넣어준다.
그리고 withRedux(()=> {}) ( Root ) 로 첫번째 괄호에 initStore하는 함수를 넣어주는 방식으로 withRedux를 사용하였다.
내가 공부한 자료의 코드는 20년도 이전의 자료로 클래스형 컴포넌트로 작성되어 있었고 store는 코드가 나뉘어 작성하고 _app.js(위 코드에서는 Root)에서 리덕스를 연결해주었다.
enhancer가 들어갈 세번째 인자 부분에 composeWithDevTools(~~)가 들어가 바로 createStore를 한 것을 볼 수 있다. applyMiddleware의 인자는 thunkMiddleware(보통의 액션생성자는 그냥 하나의 액션객체를 생성할 뿐이지만 redux-thunk를 통해 만들게 되면 그 내부에서 여러가지 작업을 할 수도 있습니다.)와 logger(redux의 상태를 로그로 보여주는 모듈)를 미들웨어로 전달하였다.
또한, reducers로 여러 개의 리듀서가 만들어질 것을 대비하여 combineReducers에 {auth: authReducer}를 넣어 Reducers를 createStore의 첫번째 인자에 전달했다.
이 코드에서는 initStore라는 함수만 만들어 export해준다음 _app.js에서 import하여 "export default withRedux(initStore)(MyApp);"과 같이 첫번째 괄호에 initStore하는 함수가 들어가는 것을 볼 수 있다.
redux devtools, redux middleware
Redux
2021/04/02
icoa
icoa
2022/03/13 15:57
2021/12/26 10:48

# 시작

리덕스를 이용해서 authentication 기능을 만들기 위해서 리덕스가 작용하는 원리를 글로 정리해본다.

Action 파일에서는 액션을 생성시키는 액션 함수를 정의한다.

액션 타입은 따로 상수로 정의하여 사용하기도 하지만 여기서는 직접 작성했다. 아래는 ActionCreator.js 파일로 다른 프로젝트의 코드이다. 액션 생성자 함수와 액션 함수를 같이 작성했다.

이것은 액션 생성자 함수이다. authenticateAction에 user 파라미터를 넣어 호출하면 AUTHENTICATE 액션 타입이 반환될 것이다.

액션 생성자 함수는 액션을 생성하여 받은 값을 payload에 실어서 reducer에서 그 액션 타입을 읽을 수 있게 한다.

아래는 dispatch를 받아 위 액션 생성자 함수 실행시키는 함수이다.

이처럼 dispatch를 받아 dispatch(deAuthenticateAction());이 실행된다면 result가 user 파라미터로 들어와 AUTHENTICATE 액션 타입이 반환될 것이다.

redux 리덕스 구조 이해 understand redux redux structure
Redux
2021/04/01
icoa
icoa
2022/03/13 15:57
2021/12/26 10:48

# 시작

자바스크립트로 리덕스를 사용하면서 액션 -> 미들웨어 -> 리듀서 -> 스토어 -> 뷰 ->(반복) 의 순환을 이해해보았다.

# 과정

친구 목록 업데이트와 타임라인 페이지를 넘기는 것을 리덕스를 통해 처리했다.
코드를 입력한다음 아래와 같이 액션을 생성했다.
1. 타임라인에 코딩은 즐거워에 대한 객체가 추가된다.
2. 타임라인에 리덕스 좋아에 대한 객체가 추가된다.
3. 타임라인 끝에 도달하면 서버에 요청할 페이지 번호를 증가시킨다.
4. id: 2(리덕스 좋아) 라는 객체의  desc를 리덕스 너무 좋아로 변경한다.
5. id: 1(코딩은 즐거워)라는 객체를 삭제한다.
1. id: 1의 "아이유" 객체 추가
2. id: 2의 "손나은" 객체 추가
3. id: 2의 "아이유" 객체를 "수지"로 변경
4. id: 1의 객체를 삭제
자바스크립트 리덕스 사용해보기(페이스북 관련 기능) Try JavaScript Redux (Facebook related features)
JavaScript
Redux
2021/02/28
icoa
icoa
2022/03/13 15:57
2021/12/26 10:48

# 시작

<실전 리액트 프로그래밍> 리덕스에서 타입스크립트를 사용하는 실습을 따라해본다.

# 실습

폴더 구조

src
> App.tsx
> common
> redux.ts
> store.ts
> useTypedSelector.ts
> index.ts
> person
> component
> Person.tsx
타입스크립트 리액트 리덕스 사용해보기 Try TypeScript React Redux
Redux
TypeScript
2021/02/04
icoa
icoa
2022/03/13 15:58
2021/12/26 10:48

# 시작

리액트를 사용해 프로젝트를 해오다가 앞으로 사이트를 개발하는 데 서버사이드렌더링이 필요한 경우가 많을 것으로 생각되어 리액트에서 서버사이드렌더링을 설정하는 것보다 넥스트로 시작하는 것이 상대적으로 편하다는 말을 듣고 넥스트를 공부하기 시작했다.
getStaticProps 같은 새로운 요소들이 보여서 조금 어렵게 느껴졌는데 폴더 구조만 봤을 때는 리액트를 기반으로 개선해서 만든 라이브러리인만큼 static, styles, pages, src, components등 폴더식으로 잘 구분해서 파일을 관리하는 방식이 마음에 들었다. 넥스트 사용 경험이 부족해서 유튜브를 찾다 보니 world ranks라는 세계 각국의 이름과 순위를 데이터로 fetch해와서 그 데이터를 보여주는 사이트를 만드는 토이 프로젝트 영상을 찾게 되어 아래와 같이 정리하면서 공부해본다. 리액트를 조금은 겪어보고 시작하는 사람이라는 가정 하에 글을 썼다.
아래는 참고한 유튜브 영상이다.
넥스트(Next.js)를 이용해 간단한 프로젝트해보기, 초보자를 위한 연습용 프로젝트 world ranks Try a simple project using Next.js, a practice project for beginners world ranks

HOC 패턴

Hooks가 생긴 이후로는 Hooks로 로직을 분리시키는 방식이 선호되고 있다.

Hooks 패턴

두 패턴 모두 사용되어야 할 모듈은 다음과 같다.

Modules(리덕스 모듈과 RootReducers)

React-redux HOC 패턴으로 props 전달 or Hooks로 사용하기 Passing props with React-redux HOC pattern or using them as Hooks
Redux
2020/12/30
icoa
icoa
2022/03/13 15:52
2021/12/26 10:48

# 시작

Nextjs로 Redux를 사용하면서 Redux-saga를 처음 적용해보게 되었다. yield와 Generator를 사용해서 비동기 작업을 처리하는 것이 익숙하지 않았는데 Redux-saga와 관련된 자료들을 찾아 공부하다 보니 function*의 키워드로 시작하는 saga 함수들을 작동시키는 원리와 이 함수를 보조하는 watch- 함수들에 사용되는 delay, call, takeEvery 등의 함수들이 정확히 이해되지 않았다.

특히 watch- 함수가 왜 필요한지 여기에 쓰이는 takeEvery와 takeLatest가 어떤 차이가 있는지가 제일 헷갈렸기 때문에 여기에 리덕스 사가의 함수들에 대해 정리하기로 하였다.

takeEvery와 takeLatest를 키워드로 검색했을 때 가장 이해가 잘 되게 정리되어 있어서 아래 블로그에서 참고하면서 정리하였다.

# Redux-saga의 주요 함수

delay

설정된 시간 이후에 resolve하는 Promise 객체를 리턴한다.

ex.

redux-saga method(delay, call, put, fork, all, takeEvery, takeLatest)
Redux
Redux-saga
icoa
icoa
2022/03/13 15:58
2021/12/26 10:48
Load more
왜 hooks를 사용하는가?
React 톺아보기 읽기 https://goidle.github.io/react/in-depth-react-preview/
<컴포넌트 제대로 만들기> 읽기
Nextjs 버전별 업데이트 사항(~ing)
Next.js Tutorial, 유튜브 보면서 넥스트 공부하기 3 Studying next while watching YouTube 3
Next.js Tutorial, 유튜브 보면서 넥스트 공부하기 2 Studying next while watching YouTube 2
Next.js Tutorial, 유튜브 보면서 넥스트 공부하기 1 Studying next while watching YouTube 1
Redux(Redux wrapper) 사용 이유, 방식, 원리 이해하기 Understanding why, how, and how Redux (Redux wrapper) is used
redux devtools, redux middleware
redux 리덕스 구조 이해 understanding redux structure
자바스크립트 리덕스 사용해보기(페이스북 관련 기능) Try JavaScript Redux (Facebook related features)
타입스크립트 리액트 리덕스 사용해보기 Try TypeScript React Redux
넥스트(Next.js)를 이용해 간단한 프로젝트해보기, 초보자를 위한 연습용 프로젝트 world ranks Try a simple project using Next.js, a practice project for beginners world ranks
React-redux HOC 패턴으로 props 전달 or Hooks로 사용하기 Passing props with React-redux HOC pattern or using them as Hooks
redux-saga method(delay, call, put, fork, all, takeEvery, takeLatest)
Made with