React
1.[React] 개발환경 설정 / 프로젝트 생성
React 학습을 위한 개발환경과 프로젝트 생성하는 방법에 대해 알아보자.
2.[React] JSX
JavaScript의 확장 문법인 JSX와 React에서 JSX를 사용하는 방법에 대해 알아보자.
3.[React] Element Rendering
리액트 엘리먼트와 엘리먼트를 렌더링하는 방법에 대해 알아보자.
4.[React] Components와 Props
리액트의 컴포넌트와 props에 대해 알아보자.
5.[React] State와 생명주기
리액트의 state와 생명주기에 대해 알아보자.
6.[React] Hook(훅)
리액트의 훅에 대해 알아보고 대표적인 훅인 useState()와 useEffect()을 사용해보자.
7.[React] Event Handling
리액트에서 이벤트를 처리하는 다양한 방법에 대해 알아보자.
8.[React] Conditional Rendering
리액트에서 조건에 따른 렌더링을 하는 방법에 대해 알아보고, 간단한 툴바 컴포넌트를 구현해보자.
9.[React] List와 Key
리액트에서 리스트를 렌더링하는 방법과 키에 대해 알아보자.
10.[React] Form (폼)
리액트의 제어 컴포넌트와 이를 이용해서 사용자의 입력을 받는 방법에 대해 알아보자.
11.[React] Shared State
리액트의 여러 하위 컴포넌트에서 공통적으로 사용하는 state를 상위 컴포넌트의 state로 올려서 코드를 효율적으로 작성하는 방법에 대해 알아보자.
12.[React] 합성과 상속
리액트에서 재사용이 가능한 컴포넌트를 만들고 잘 조합하여 새로운 컴포넌트를 만드는 방법에 대해 알아보자.
13.[React] Context
리액트 컴포넌트 사이에 데이터 전달을 효율적으로 할 수 있게 해주는 컨텍스트에 대해 알아보자.
14.[React] Styled Components
가장 많이 사용하는 CSS 속성들과 styled-components에 대해 알아보자.
15.[React] React Router
리액트에서 페이지를 이동할 때 사용하는 리액트 라우터 적용법 및 기본 사용법에 대해 알아보자.
16.[React : mini-project] CRUD (1) - Create
Title과 Content를 작성할 수 있는 간단한 폼을 만들고 DB에 저장해보자.
17.[React : mini-project] CRUD(2) - Read List, Delete
DB에 있는 데이터를 불러와서 ListPage에 출력하는 방법과, 데이터를 삭제하는 방법에 대해 알아보자.
18.[React : mini-project] CRUD(3) - Read Detail
게시글 디테일페이지를 만들고 게시글 클릭시 디테일 페이지로 이동하도록 해보자. 디테일 페이지에 게시글 생성시간도 함께 출력하는 방법도 알아보자.
19.[React : mini-project] CRUD(4) - Update
이전에 작성한 Create Form을 활용하여 게시글을 수정하는 Edit Page를 만들어보자.
20.[React : mini-project] 게시글 공개/비공개 설정하기
게시글 작성/수정 시 게시글 공개 여부를 체크하고, 리스트페이지에서는 체크된 게시글만 보여주도록 수정해보자. 전체 글을 조회할 수 있는 Admin Page도 만들어보자.
21.[React : mini-project] Pagination (json-server)
게시글의 개수가 너무 많아졌을 때 페이징 처리를 하기 위한 Pagination을 구현해보자.
22.[React] 페이지 이동 시 데이터 전달하기 - useNavigate(), useLocation()
리액트에서 부모와 자식 관계가 아닌, 페이지 이동 시에 데이터를 전달하는 방법에 대해 알아보자.
23.[React] Zustand 라이브러리를 사용하여 상태 관리하기 (JS/TS)
리액트에서 zustand 라이브러리를 사용하여 쉽게 상태관리하는 법을 알아보자!
24.[React] React에서 Tailwind CSS 사용하기
React 프로젝트에서 Tailwind CSS를 사용하는 방법에 대해 알아보자.