React 완벽 가이드

본 포스트는 Udemy 리액트 완벽가이드 2024 를 듣고 정리한 내용입니다. 사실 section1-2도 정리했지만 날려먹음 이슈로 Section3부터 진짜 착실하게 다시 정리합니다 Component (컴포넌트)란코드 조각인데 이제, "HTMl + CSS + 자바스크립

JSX 근데 JSX 없이 UI를 만들 수 있을까? -> 네! JSX는 브라우저에서 지원되지 않기 때문에, 추가적으로 빌드 과정을 통해 변환 절차를 거쳐 우리의 화면에 보여지게 된다. 그렇다면? JSX 없이도 UI를 그릴 수 없을까? > 있다! 그치만 조금 코드라인

이미지 저장소 어디에 저장해야 하나? (public vs assets ) 둘이 뭐가 다른데? 📁 public public/ 에 저장하고 있는 이미지의 경우, 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공된다. 따라서, 이 파일들은 브라우저 내에서 직접 방문이 가능하고, 파일에 의해 요청될 수 있음. localhost:5173/im...

본 포스트는 Udemy 리액트 완벽가이드 2024 를 듣고 정리한 내용입니다.실습 code 📁 목차 🌳1️⃣ Vinilla CSS 로 스타일링2️⃣ CSS Modules를 통한 스코핑 3️⃣ Styled Components 사용하기 4️⃣ Tailwind CSS 로

목차 🌳 1️⃣ 리액트 오류 메시지 이해하기2️⃣ 브라우저를 통한 에러 발견 (DevTools & Debugger)3️⃣ Strict Mode 4️⃣ DevTools 사용방법<강의내용 요약>지난 practice 1 에서, Duration에 0을 넣으면 위와 같

본 포스트는 Udemy 리액트 완벽가이드 2024 를 듣고 정리한 내용입니다. Ref랑 Portal 궁금한 사롬 ~

Section 9 - 실습 / Section 10 - props Drilling + useContext & useReducer

목차 🌳1️⃣ Side Effects를 이해하고, 왜 제어해야 하는지 이해 💬2️⃣ useEffect 와 Dependencies 3️⃣ useEffect를 사용하면 안 되는 상황!🙅🏻‍♀️ 주된 효과 외에 부가적으로 발생하는 효과 (부수효과)이때 리액트의 주된

Section 12 practice Section 13: 리액트와 최적화 테크닉 useMemo/ memo / useCallback/ key의 중요성 / state 스케줄링, 배칭

목차 🌳 1️⃣ 리액트 앱을 백엔드/ DB와 연결하기 2️⃣ 데이터 fetch 방법 3️⃣ 데이터 send 방법 리액트 앱을 백엔드/ DB와 연결하기 > HTTP 요청을 보내고 응답을 받음으로써, 프론트와 서버(DB)는 연결됨 보안 이슈로 인해, 리액트 앱에서

목차 🌳 1️⃣ 클래스 컴포넌트란? 그리고 왜 쓰는데요? 2️⃣ 어떻게 사용하는데요? 3️⃣ Error Boundaries Class-based Components 클래스 컴포넌트란? 그리고 왜 쓰는데요? > 클래스 기반 컴포넌트란?👀 ES6 클래스 구문을

목차 🌳1️⃣ 복습 Hook 만드는 규칙2️⃣ Custom Hook 만드는 이유3️⃣ Custom Hook 만드는 방법 + 사용해보기1️⃣ 리액트 Component function 안이나, 혹은 다른 hook 안에서 사용 가능!!2️⃣ Component functio

목차 🌳1️⃣ 폼을 다루는 어려움? 2️⃣ Form 제출을 다루는 방법 & 유효성 검사 3️⃣ Form 관련 내장 기능4️⃣ Custom Hook으로 처리하기

목차 🌳 1️⃣ Redux 가 뭔가요? 👀 2️⃣ Redux 그거 어떻게 쓰는건데요? 🥸 3️⃣ 적용해보자! Redux Redux가 뭔데요 👀 > “app-level state” management! Redux는 여러 컴포넌트, 혹은 앱 전체에서 공유되는

목차 🌳1️⃣ redux로 비동기 작업2️⃣ 🛒 컴포넌트 안에서 비동기 다루기3️⃣ 🛒 action creators(액션 생성자) 안 에서 비동기 다루기 이전 강의에서 배운 리덕스에서 리듀서함수는 무조건 순수 함수여야만 하며, side-effect 을 다룰 수 없

목차 🌳1️⃣ Route와 SPA 🤨 2️⃣ react-Router 사용하기 📁3️⃣ data Fetching과 submiteRouting 은 네트워크에서 경로를 선택하는 프로세스를 의미즉, 주소에 대한 요청이 들어왔을때 상응하는 content 로 이동시켜주는 작

목차 🌳 1️⃣ 리액트 앱에서 유저의 권한을 부여하는 방법 2️⃣ 로그인 후, 백엔드로부터 받은 res에서 토큰 찾아 유저의 권한저장 및 유지 🔍 3️⃣ 유저의 권한 부여 이후, 백엔드에 req 보내기 📤 4️⃣ 유저의 권한 회수 및 로그아웃 방법 📭 리액트

React Query 뭐고 왜 쓰지 > 서버 상태를 패칭, 캐싱, 동기화, 업데이트 작업을 하주 쉽게 해줍니다 React Query 공식문서 react query가 tanstack query로 이름이 바뀐 만큼 (사유 : 범용적인(vue나 svelte 에도 적용)