React
-
0 1227 React - 만들고 비교하며 학습하는 리액트 - 1- 준비편, 순수JS , 2-리액트 소개편
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용…
-
0 1165 만들면서 배우는 리액트 (진유림) - 1- 고양이 짦방앱 만들기 : 리액트 앱 바닥부터 만들기, 컴포넌트
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
0 1124 만들면서 배우는 리액트 (진유림) - 2- 고양이 짦방앱 만들기 : 리액트 앱
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
0 1043 React github 를 서버로 사용, github pages 이용방법
1. react-router-dom 라이브러리가 설치 되어 있지 않다면 설치 한다. npm install react-router-dom 설치하는 이유는 깃허브 서버 주소를 …
-
0 1033 React -처음 만난 리액트 - 2 Handling Events,Conditional Rendering,List and Keys,Forms,Lifting State Up,Composition vs Inheritance,Context
수강하기 ---> 처음 만난 리액트(React) 강의를 책으로도 볼 수 있도록강의 내용을 고스란히 책에 담았습니다.동영상…
-
0 620 React(Nextjs) 따라하며 배우는 리액트 A-Z - 11- 1 도커를 이용한 리액트 실행 , EC2 에서 도커 설치 및 실행
따라하며 배우는 리액트 A-Z [프론트엔드, 웹 개발] 강의입니다.이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념…
-
0 557 React(Nextjs) 따라하며 배우는 리액트 A-Z - 10-2 리덕스, 리덕스 미들웨어 ,Redux Thunk , Redux Toolkit
따라하며 배우는 리액트 A-Z [프론트엔드, 웹 개발] 강의입니다.이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의…
-
0 545 React(Nextjs) 따라하며 배우는 리액트 A-Z - 10. 리덕스 -1
따라하며 배우는 리액트 A-Z [프론트엔드, 웹 개발] 강의입니다.이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념…
-
0 521 React(Nextjs) 따라하며 배우는 리액트 A-Z - 9. 리액트 Version 18
따라하며 배우는 리액트 A-Z [프론트엔드, 웹 개발] 강의입니다.이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념…
-
0 482 React(Nextjs) 따라하며 배우는 리액트 A-Z - 7-2 Next.js와 TypeScript - Type annotation, Type inference
따라하며 배우는 리액트 A-Z [프론트엔드, 웹 개발] 강의입니다.이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념…
-
4 만들면서 배우는 리액트 (진유림) - 1- 고양이 짦방앱 만들기 : 리액트 앱 바닥부터 만들기, 컴포넌트
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
4 만들면서 배우는 리액트 (진유림) - 2- 고양이 짦방앱 만들기 : 리액트 앱
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 …
-
4 React github 를 서버로 사용, github pages 이용방법
1. react-router-dom 라이브러리가 설치 되어 있지 않다면 설치 한다. npm install react-router-dom 설치하는 이유는 깃허브 서버 주소를 …
-
4 React - 만들고 비교하며 학습하는 리액트 - 1- 준비편, 순수JS , 2-리액트 소개편
초급자를 위해 준비한[웹 개발, 프론트엔드] 강의입니다.리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용…
-
4 react 기본문법
vscode 확장 패키지 추가1. - Auto Import - ES6, TS, JSX, TSX2. - Reactjs code snippets3. - ESLint4. - Prettier - Code formatter App.css.hello{ color: red; } .box-sty…
-
4 react redux 적용
1. redux 설치& yarn add redux react-redux 2. createStore deprecate 로 인하여 React Redux Toolkit 설치$ yarn…
-
4 react 목록 불러오기
home.jsimport React, { useEffect, useState } from 'react'; import { Container } from "react-bootstrap"; import BookItem from './../../components/BookItem'; c…
-
4 react 글쓰기
saveForm.jsimport { useState } from 'react'; import { Container, Form, Button } from "react-bootstrap"; import { useNavigate } from 'react-router-dom'; const SaveF…
-
4 react 상세보기
Detail.js import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; import { Container } from "react-bootstrap"; const…
-
4 react 수정삭제하기
Detail.jsimport React, { useEffect, useState } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { Button, Container } from "react-bootstrap&…
-
★4.리액트쿼리 tanstack 와 리액트 라우터 이용한 CRUD
소스 :https://github.com/braverokmc79/macaronics-react-udemy-ex24/tree/complex App.jsx { path: "/events/:id", element: <EventDetails />, c…
-
★3.리액트 Tanstack 이용한 CRUD ★ 24: 리액트 쿼리/Tanstack 쿼리: 간단하게 HTTP 요청 처리-udemy
1.Tanstack 쿼리란 무엇이며 왜 사용합니까?Tanstack 쿼리는 데이터 페칭을 위한 라이브러리입니다1. 이를 이용하면 서버 상태의 관리 및 자동 재시…
-
23. 리액트 앱 배포하기 - 지연로딩 으로 테스트, firebase 배포 (Udemy)
지연로딩을 통한 테스트 진행하기 React.lazy와 Suspense 사용하기React.lazy는 코드를 분할하게 해주며, 앱 사용자들에게 획기적인 성능 향상을 …
-
★2.리액트 라우터 를 이용한 CRUD ★22. ★ 리액트 라우터 리액트앱 인증 추가하기 ★(Udemy)
1. 프로젝트 및 라우터 설정
-
★2.리액트 라우터 를 이용한 CRUD ★-21. ★ 리액트 라우터 , 페이지 레이아웃 구성 및 메뉴 구성 , ★ 초기 리액트 레이아웃 및 메뉴 설정시 필수 설정 ★(udemy),
https://macaronics-react-udemy-ex21-2.netlify.app/ 1.App동적라우트 설정- 1)객체 배열 방식import { createBrowserRouter , RouterProvider} fro…
-
★1.리액트 리덕스 툴킷+Thunk 이용한 CRUD ★-★20.고급 리덕스 (udemy), 리덕스 툴킷과+ useEffect + fetch 를 이용한 데이터 가져오기, 리액트 Thunk 사용하기
소스:https://github.com/braverokmc79/macaronics-reduxcart20 https://macaronics-reduxcart20.netlify.app/ 1.리덕스 툴킷 설치: 리…
-
19.리액트 리덕스를 리덕스 툴킷으로 변경하기 ★★( redux ==> redux-toolkit) (udemy)
리덕스 설정 1. 리덕스 설치: 먼저 리덕스를 설치해야 합니다. 아래의 명령어를 사용하여 설치할 수 있습니다. npm install redux react-re…
-
19.리덕스에 뛰어들기 (컨텍스트API 대안) - udemy
샘플1.redux-demo.js// redux 라이브러리를 가져옵니다. const redux = require('redux'); // 초기 상태를 설정합니다. 카운터는 0으로 시작합니다. co…
-
React에서 모달(dialog) 컴포넌트를 생성
// React와 ReactDOM 라이브러리에서 필요한 함수들을 가져옵니다. import { useEffect, useRef } from "react"; import { createPortal } from "react-dom"; /…
-
리액트 완벽가이드 18- 273.Cart 컨텍스트와 Reducer 활용 , useReducer 훅 (udemy)
리액트에서 컨텍스트(Context)와 리듀서(Reducer)를 사용하는 방법 import React, { createContext, useReducer } from 'react'; // 카운터 컨텍스트를 …
