# Book: The Art of React

23개의 포스트
post-thumbnail

'리액트를 다루는 기술' 23장, JWT를 통한 회원 인증 시스템 구현하기(1/2, Login/Logout)

# 😄 JWT # 😎 실제 코드 # ⭐️ 팁 - openssl rand -hex 64: 랜덤 키를 만들어준다.

2020년 9월 20일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 22장, mongoose를 이용한 MongoDB 연동 실습(2/2)

# 😄 Database API # 😎 요청 검증 # 😘 페이지네이션

2020년 9월 12일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 22장, mongoose를 이용한 MongoDB 연동 실습(1/2)

# 😁 관계형 데이터베이스의 한계 # 🤪 MongoDB 준비(MacOS) # 🧐 스키마와 모델 # 😘 실습 코드

2020년 9월 12일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 21장, 백엔드 프로그래밍: Node.js의 Koa 프레임워크

# 😄 Koa # 😎 Middleware # 😜 Nodemon # 😍 Koa-router # 😱 Route 모듈화 # 🤓 REST API # 🧐 Koa-bodyparser # 🥶 REST API2

2020년 9월 12일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 18장, 리덕스 미들웨어를 통한 비동기 작업 관리(2/2)

# 😎 비동기 작업을 처리하는 Redux-Saga # 😁 Redux-Saga가 필요한 상황 # 🤩 제너레이터 함수 이해하기 # 🥳 실전 코드 연습

2020년 9월 9일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 18장, 리덕스 미들웨어를 통한 비동기 작업 관리(1/2)

# 🙄 미들웨어란? ## 미들웨어 코드의 기본 구조 ## 로그 남기는 미들웨어 코드 # 😎 비동기 작업을 처리하는 미들웨어 ## Redux-Thunk ### Exercise ## Redux-Saga

2020년 9월 9일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 17장, 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기

# 😁 UI 준비하기 # 😂 리덕스 코드 작성하기 # 😍 Hooks를 사용하여 컨테이너 컴포넌트 만들기 ## lib/useActions.js ## immer ## react-redux ## react-scripts ## redux ## redux-actions

2020년 8월 27일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 16장, 리덕스 라이브러리 이해하기

# 😎 개념 미리 정리하기 ## 액션 ## 액션 생성 함수 ## 리듀서 ## 스토어 ## 디스패치 ## 구독 # 😋 리액트 없이 쓰는 리덕스 # 😂 리덕스의 세 가지 규칙 ## 단일 스토어 ## 읽기 전용 상태 ## 리듀서는 순수한 함수 ## 주의사항

2020년 8월 26일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 15장, Context API

# 😎 Context API를 사용한 전역 상태 관리 흐름 이해하기 # 😋 Context API 사용법 익히기 ## createContext ## Provider # 😁 동적 Context 사용하기 ## useContext Hook

2020년 8월 25일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 14장, 외부 API를 연동하여 뉴스 뷰어 만들기

# 😁 비동기 작업의 이해 ## 콜백 함수 ## Promise Then ## Async Await # 😎 Axios로 API 호출해서 데이터 받아 오기 # 😋 Newsapi API 키 발급받기 # 🤩 usePromise 커스텀 Hook 만들기

2020년 8월 24일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 13장, 리액트 라우터로 SPA 개발하기

# 😁 SPA란? # 😭 SPA의 단점 ## Link # 😍 URL 파라미터와 쿼리 ## URL Query ## qs # 🙄 서브 라우트 # 😐 리액트 라우터 부가 기능 ## history ## withRouter ## Switch ## NavLink

2020년 8월 24일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 12장, immer를 사용하여 더 쉽게 불변성 유지하기

# 😎 immer를 설치하고 사용법 알아보기 # 😂 useState의 함수형 업데이트와 immer 함께 쓰기

2020년 8월 24일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 11장, 컴포넌트 성능 최적화

# 🤪 크롬 개발자 도구를 통한 성능 모니터링 # 😰 React.memo를 사용하여 컴포넌트 성능 최적화 ## useState의 함수형 업데이트 ## useReducer를 사용 # 😍 불변성의 중요성 # 🥰 react-virtualized를 사용한 렌더링 최적화

2020년 8월 24일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 10장, 일정 관리 웹 애플리케이션 만들기

# 😇 프로젝트 준비하기 # 😎 UI 구성하기 ## Flexbox Froggy # 😱 기능 구현하기 ## App ## TodoTemplate ## TodoInsert ## TodoList ## TodoListItem

2020년 8월 23일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 9장, 컴포넌트 스타일링

# 😀 가장 흔한 방식, 일반 CSS ## 이름 짓는 규칙 ## CSS Selector # 😁 Sass 사용하기 # 😂 CSS Module # 😃 styled-components

2020년 8월 23일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 8장, Hooks

# 😁 useState # 😃 useEffect # 🙄 useReducer # 😏 useMemo # 😙 useCallback # 😋 useRef # 😜 Custom Hooks

2020년 8월 21일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 7장, 컴포넌트의 라이프사이클 메서드

# 😀 라이프사이클 메서드의 이해 ## 마운트 ## 업데이트 ## 언마운트 ## componentDidCatch # 🙄 라이프사이클 메서드 사용하기

2020년 8월 20일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 6장, 컴포넌트 반복

# 😁 자바스크립트 배열의 map() 함수 ## arr.map(callback, [thisArg] ### calback 함수의 세 가지 파라미터 ### thisArg # 😋 데이터 배열을 컴포넌트 배열로 변환하기 ## 특정 컴포넌트를 추가하고 삭제하기

2020년 8월 20일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 5장, ref: DOM에 이름 달기

# 🤣 ref란? # 😁 ref는 어떤 상황에서 사용해야 할까? ### 콜백 함수를 통한 ref 설정 ### createRef를 통한 ref 설정 # 😄 컴포넌트에 ref 달기 # 🎁 scrollTop, scrollHeight, clientHeight의 차이

2020년 8월 20일
·
0개의 댓글
post-thumbnail

'리액트를 다루는 기술' 4장, 이벤트 핸들링

# 😁 리액트의 이벤트 시스템 ## 이벤트를 사용할 때 주의 사항 # 🤣 예제로 이벤트 핸들링 익히기 ## 여러 인풋을 State로 다루는 방법 # 😍 함수형 컴포넌트로 구현해 보기 ## input 요소가 여러 개일 때 state를 객체로 다루는 법

2020년 8월 19일
·
0개의 댓글