React
1.React Essentials | 컴포넌트, JSX, 속성(Prop), 상태(State)
리액트 핵심 - 컴포넌트, JSX, 속성(Prop), 상태 (State)
2.React Essentials - Deep Dive | Fragment, 컴포넌트 분리, 속성 더 쉽게 전달하기
Fragment와 컴포넌트 분리하는 방법 그리고 속성을 더 쉽게 전달하는 방법에 대해서 알아보았습니다. 또한 여러 JSX 슬롯을 사용하는 방법, 컴포넌트의 타입을 동적으로 설정하는 방법에 대해서도 알아보았습니다!
3.React Essentials - Deep Dive2 | 예제 프로그램을 통해 더 자세히 알아보기
Tic-Tac-Toe(빙고) 게임을 통해서 리액트에 대해서 더 깊게 다뤄보았습니다! - State 끌어올리기, 다차원 리스트 렌더링, 양방향 바인딩, 옛 State 기반으로 상태 업데이트하기
4.리액트 연습 프로젝트
리액트 연습 프로젝트를 진행했습니다! 직접 작성한 코드와 강사가 작성한 코드를 비교 분석하였고, 그동안 배운 리액트에 대한 전반적인 지식을 복습하는 차원에서 진행되었습니다!😄
5.Styling React Apps -1 | 바닐라 CSS, Styled Components
바닐라 CSS, Styled Component를 이용해서 리액트 앱 스타일링하기
6.Styling React Apps -2 | Tailwind CSS
리액트 앱 스타일링 두번째 내용입니다. Tailwind CSS에 대한 간단한 내용을 작성했습니다.
7.Debugging React Apps
리액트 앱 디버깅 방법에 대해서 다뤘습니다.
8.React | Refs(참조) & Portals(포탈) 활용하기
리액트의 Refs(참조)와 Portals에 대해서 다뤘습니다.
9.React Practice | 프로젝트 관리 앱
프로젝트 관리 앱을 진행하였습니다. 우선 먼저 스스로 만들어 본 뒤, 강사의 코드를 보고 그동안 배운 리액트 지식을 복습하는 방식으로 진행되었습니다. 가장 마지막에는 해당 프로젝트를 진행하면서 얻은 인사이트를 간략하게 정리했습니다.
10.Advanced State Management | 리액트의 컨텍스트 API & useReducer
리액트의 Prop Drilling에 대해 간단히 알아본 뒤, Prop Drilling(속성 내려꽂기)대신 사용할 수 있는 Context API에 대해 알아보았고 useReducer에 대해서도 공부했습니다.
11.Dealing with Side Effect | 부수 효과 다루기, `useEffect, useCallback` 훅 사용하기
Side Effect를 다루고 이를 통해 useEffect, useCallback 훅에 대해서 배웠습니다. 또한 progressBar를 추가하는 방법에 대해서 알아보았습니다.
12.React Practice with Effects | 퀴즈 프로젝트
퀴즈 프로젝트를 만들어보면서 Effect를 적용하는 연습을 했고, key를 이용해서 컴포넌트 업데이트(재실행)를 하는 방법에 대해서 알 수 있었습니다. 해당 프로젝트는 복잡한 상태를 갖는 프로젝트로 많은 복습이 필요합니다!
13.BTS : 리액트와 최적화 테크닉
리액트를 최적화하기 위한 테크닉에 대해서 다뤘습니다. | memo, useCallback, useMemo, key 이용하기, MillionJS
14.Class-based Components
클래스 기반 컴포넌트에 대해서 알아봤습니다. 최근의 리액트 앱은 주로 함수형 컴포넌트를 사용하지만 클래스 기반의 컴포넌트도 참고로 알아봤으며 Error Boundary에 대해서도 알아보았습니다!
15.Data Fetching & HTTP Requests
리액트 앱과 HTTP 요청 방법에 대해서 알아봤습니다!
16.Custom Hooks
커스텀 훅에 대해서 공부했습니당!
17.Form 및 사용자 입력
form과 사용자 입력 검증에 대해서 알아보았습니다.
18.연습 프로젝트 : 음식 주문 앱에 Http 및 Form 적용하기 | 강사
리액트 연습 프로젝트로 음식 주문 앱을 구현하였습니다. fetch API를 사용하고 Reducer를 이용해서 상태를 업데이트 하는 등의 연습을 하였습니다.
19.Redux 알아보기
컨텍스트 API를 대체하기 위한 리덕스에 대해서 알아보았습니다!
20.고급 Redux
리덕스에서 fetch API를 사용하는 방법에 대해서 예시 프로젝트를 통해 알아보았습니다. (useEffect, 액션 생성자 이용)
21.리액트 라우터가 있는 SPA 다중 페이지 구축하기 | Single-Page Application Routing
리액트의 라우터에 대해서 다뤘습니다.
22.연습 프로젝트 : 리액트 라우터 | 데이터 가져오기
리액트 라우터에 대한 내용입니다. 우선 loader()를 이용하여 데이터를 가져오는(fetch) 방식을 다뤘습니다. action()을 이용해 데이터를 제출하는 방식은 다음 포스팅에서 진행될 예정입니다!
23.연습 프로젝트 : 리액트 라우터 | 데이터 제출하기
action을 이용해서 데이터를 제출하는 방법에 대해서 다뤘습니다. 또한 useFetcher를 이용해서 transition없이 폼을 제출하는 방법과 defer를 이용해서 약간의 delay를 주는 방법도 다뤘습니다.
24.리액트 앱 인증(Authentication)
리액트 앱에서의 인증(Authentication) 방법에 대해서 알아봤고 토큰을 이용해서 UI를 반영하고, 토큰 만료시간을 관리하는 등의 방법을 배웠습니다.
25.리액트 앱 배포하기
리액트 앱을 배포하는 방법에 대해서 다루었고 Firebase를 이용하였습니다. 지연 로딩 로직도 다뤘습니다.
26.리액트 쿼리 | Data Fetching with Tanstack Query
Tanstack 쿼리(리액트 쿼리)에 대해서 다뤘습니다. 리액트 쿼리를 이용해서 데이터 가져오기/보내기 동작을 배웠고 쿼리 활성화/비활성화, 쿼리 무효화 등에 대해서 다뤘습니다.
27.리액트 쿼리 -2 | 실습 및 앱 개선
리액트 쿼리의 두번째 내용으로 간단한 실습 진행을 하였습니다. 또한 데모 앱을 개선하면서 추가적으로 리액트쿼리에 대해 공부하였습니다.
28.리액트 앱에 애니메이션 넣기
리액트 앱에 애니메이션을 추가했습니다. CSS를 통해서 애니메이션을 다루는 방법도 간단히 살펴보았고 프레이머 모션을 이용하여 애니메이션을 추가하는 방법을 공부했습니다.
29.리액트 앱 테스트(유닛테스트)
리액트 어플리케이션을 테스트하는 방법에 대해 다뤘고 주로 Unit Test에 대해서 다뤘습니다!