React

리액트 기초

MSA9_React

ALOHA-CLASS

React_TJE

ALOHA-CLASS

💙 React

💙 React @2024-12-18 #React #Meta #javascript 🐮 woopy https://wwwaloha.oopy.io/8dc513bf-3d4a-4e10-8ab2-c2f348b4dccb 🎞 PlayList 코딩, 프로그래밍, 웹디자인, 웹개발, IT 자격증 강의 🌴ALOHA CLASS👩‍🏫 🎞 TIMELINE 00:00 💙 React 00:20 🚀Start 20:00 🚩End~! 🚀═════2️⃣0️⃣2️⃣4️⃣ LIST═════💻 https://youtube.com/playlist?list=PL4C2AmBC9jOaQx101tfsOzzxFX6uyYmpF&si=GTEc5dkZY7ymu69N https://youtube.com/playlist?list=PL4C2AmBC9jOZVROMCbWCnWQUzSToFz5k7&si=yW8sTU9grN3GQR8k https://youtube.com/playlist?list=PL4C2AmBC9jOa1EzYrjwdcfsRkiC9_PrTg&si=j93pzzOfe0xvMIPH https://youtube.com/playlist?list=PL4C2AmBC9jOZQeI95ugXg-jvMshkFREkm&si=7moJ_3StWnDocUvz https://youtube.com/playlist?list=PL4C2AmBC9jObM7xy-ET5O1NO_3DpWeO2F&si=3ymToRsbkPlI28F8 https://youtube.com/playlist?list=PL4C2AmBC9jOZSDU5D2kNWNaMv6IW3U4ll&si=gET1bGbANPta6siE 🌴════🌴 ║ 알클💚║ 👩‍💻════🌍

https://youtu.be/UtxytIUEwcA?list=PL4C2AmBC9jOar-qKH7ifbSoc-a-ZvXLCC

React 소개 #React #프론트엔드 #개발

React 소개 #React #Javascript #Node.js #Express

https://www.youtube.com/watch?v=Z17ZD55VqLI&list=PL4C2AmBC9jObM7xy-ET5O1NO_3DpWeO2F

React

Meta(FaceBook)에서 개발한 JavaScript 기반 UI 개발 라이브러리

React는 페이스북에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위한 라이브러리입니다. React는 사용자 인터페이스의 구축과 관리를 도와주는 선언적이고 효율적인 방법을 제공합니다. React는 단일 페이지 애플리케이션(SPA) 및 모바일 애플리케이션에서 특히 뛰어난 성능을 보이며, 컴포넌트 기반 아키텍처를 기반으로 하고 있습니다.

React 소개

Node.js 설치하기 (Windows)

1. winget으로 Node.js 설치

React 개발환경 설치

React 시작하기

React 프로젝트를 시작하는 방법

CDN 으로 시작하기

Node.js 와 npm 으로 시작하기

React 시작하기

React 프로젝트 생성

vite 로 프로젝트

npx 로 프로젝트

모듈 설치

React 프로젝트

node_modules 빠른 삭제

•

rimraf 모듈 전역 설치

•

node_modules 삭제 명령

node_modules 삭제

ES7+ React/Redux/React-Native snippets

React Extension

Vite

Vite는 주로 Vue.js 애플리케이션을 위한 개발 환경을 제공하는데 중점을 두고 있으나, 다른 프레임워크 및 라이브러리에도 적용할 수 있습니다.

Vite & React

JSX

JavaScript + (XML/HTML)

React에서 사용되는 자바스크립트의 확장 문법으로, XML 또는 HTML과 유사한 구조를 가지고 있습니다. JSX를 사용하면 React 요소를 좀 더 간편하게 작성할 수 있습니다. 이는 React에서 UI를 표현하는 데에 주로 사용되며, 자바스크립트 코드 내에 마크업을 작성할 수 있게 해줍니다.

JSX

엘리먼트 (Element)

브라우저에 컨텐츠를 표현하는 하나의 단위

엘리먼트는 React에서 컴포넌트가 실제로 브라우저에 나타내는 내용을 표현하는 단위입니다. React에서 엘리먼트는 사용자 인터페이스를 나타내기 위해 사용되며, 각 엘리먼트는 가상 DOM (Virtual DOM)에서 컴포넌트의 인스턴스에 대응합니다.

Element

Component

React 의 재사용 가능한 UI 요소

컴포넌트는 재사용 가능한 UI 조각으로, 독립적이며 특정 기능을 수행하는 데 사용됩니다. React 애플리케이션은 컴포넌트의 조합으로 구성되며, 각 컴포넌트는 자체적으로 상태를 가질 수 있습니다. 이러한 모듈화된 구조는 애플리케이션을 보다 효율적으로 관리하고 유지보수하기 쉽게 만듭니다.

Component

State (상태)

컴포넌트가 관리하는 로컬(내부) 데이터

React 컴포넌트의 상태(State)는 컴포넌트가 관리하는 로컬 데이터입니다. 상태를 사용하면 컴포넌트가 동적인 데이터를 저장하고 표시할 수 있으며, 상태가 변경될 때마다 React는 자동으로 화면을 다시 렌더링합니다.

State 의 특징

State

Props (속성)

부모 컴포넌트에서 자식 컴포넌트로 전달하기 위한 데이터 properties 의 줄임말

외부에서 전달되는 매개변수. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.

이것이 React 컴포넌트 간에 정보를 주고받는 주요 메커니즘 중 하나입니다. 부모 컴포넌트는 자식 컴포넌트에게 props를 통해 데이터를 전달하고, 자식 컴포넌트는 이를 활용하여 화면에 정보를 표시하거나 특정 동작을 수행할 수 있습니다.

Props

Lifecycle Methods (생명주기 메서드)

컴포넌트의 생명주기 동안 특정 시점에 실행되는 메서드

Mounting

Updating

Lifecycle

Hook

Hook ( 갈고리 ) : 뾰족하고 구부러진 날로 다른 물체에 걸어 연결하는 도구

갈고리는 물건을 잡거나 걸기 위해 사용하는 도구입니다. hook은 리액트 컴포넌트에서 상태나 라이프사이클을 잡거나 걸어서 사용할 수 있는 도구라는 의미에서 유래되었습니다.

Hook

Router

React 애플리케이션의 URL을 관리하는 라이브러리

정의

Router

React Style

React 에서 스타일링하는 방법을 알아봅니다.

React 에서 스타일링 하는 방법

•

React Style

Context

모든 컴포넌트에서 공유할 수 있는 상태를 저장하는 방법

Context 의 필요성

Context 는 모든 컴포넌트에서 상태를 공유하기 위해 필요합니다. - 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달해야하는 경우 - 컴포넌트 2계층 이상으로 데이터를 전달해야하는 경우

Context

Redux

•

Redux 란?

•

Redux 이해하기

•

Redux 기본 원리

Redux

Throttle (쓰로틀)

이벤트가 아무리 많이 발생해도 지정한 delay 간격마다 딱 한 번만 실행됩니다.

비유

Throttle

React Custom Hook (커스텀 훅)

1. 커스텀 훅이란?

핵심 규칙

Custom Hook

Vite 프록시(Proxy) 설정 가이드

1. 프록시(Proxy)란?

프록시는 클라이언트와 서버 사이에서 요청을 중계하는 중간 서버입니다.

Proxy

CSS

React CSS 모듈 완전 가이드

React + Vite + Tailwind CSS 세팅 가이드

최신 버전 기준 (Vite 6.x / Tailwind CSS v4.x)

1단계. React + Vite 프로젝트 생성

Tailwind

MUI

라이브러리

React Bootstrap 라이브러리

React 프로젝트에서 Bootstrap 라이브러리를 사용하는 방법은 2 가지가 있다.

bootstrap 라이브러리 
(그냥 Bootstrap)

react-bootstrap 라이브러리 
(React 용 Bootstrap)

React x Bootstrap

React Developer Tool

React JavaScript 라이브러리를 위한 Chrome DevTools 확장

React 개발자 도구는 오픈 소스 React JavaScript 라이브러리를 위한 Chrome DevTools 확장입니다. 이를 통해 Chrome 개발자 도구에서 React 구성 요소 계층 구조를 검사할 수 있습니다.

React Developer Tools

Adds React debugging tools to the Chrome Developer Tools. Created from revision ef8a840bd on 10/25/2023.

https://chromewebstore.google.com/detail/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

React Developer Tool

axios

axios는 JavaScript의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. axios는 Promise를 기반으로 한 강력한 기능과 다양한 설정 옵션을 제공하여 네트워크 요청을 보다 편리하게 다룰 수 있도록 도와줍니다.

Axios 기본 구조

axios

Material UI

MUI_hqOverview - Material UI

Overview - Material UI

Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.

https://mui.com/material-ui/getting-started/

Material UI

React에서 UUID 및 Nanoid 사용 예시

1. 패키지 설치

uuid

React Query (TanStack Query)

To Do List REST API 서버 구현

To Do List 테이블 정의

Spring Boot REST API 구현

API 명세서 자동 생성 - OpenAPI(Swagger)

API 테스트

To Do List - BackEnd (SpringBoot)

To Do List - Front (React)

“Todo List - 할 일 목록 UI 만들기”

To Do List - FrontEnd (React)

TodoList 프로젝트

To Do List 프로젝트

“Todo List - 할 일 목록 UI 만들기”

To Do List 프로젝트 (Back)

To Do List 프로젝트

“Todo List - 할 일 목록 UI 만들기”

스타 좀 눌러주세요

github.com

https://github.com/ALOHA-CLASS/React_TJE/tree/main/TodoList

To Do List 프로젝트 (Front)

게시판 프로젝트 v2

Board App - 파일업로드

페이지네이션

•

페이지네이션 UI 작성

•

페이지 링크

•

데이터 없을 때

•

첫 페이지, 마지막 페이지 일 때, 

Board App - 페이지네이션

게시판 프로젝트

게시판 - CRUD

Preview

게시판 - CRUD

React

SpringBoot

게시판 - STYLE

리액트에서는 컴포넌트에서만 사용할 css 를 모듈로 지정해서 사용할 수 있다.

컴포넌트.jsx

style.module.css

게시판 - STYLE

React

SpringBoot

게시판 - 파일 업로드

스타 좀 눌러주세요

github.com

https://github.com/ALOHA-CLASS/React_TJE/tree/main/board-file

Spring Boot (Back-End)

게시판 - 파일 업로드

React

SpringBoot

WYSIWYG 에디터 - CKEditor

•

위지윅 에디터란?

•

React 에 CKEditor 설치

•

샘플코드

WYSIWYG 에디터 - CKEditor

React

SpringBoot

게시판 프로젝트 x Tailwind

JWT with Spring Security

JWT x Spring Security 6

JWT x Spring Security 5

React 로그인

로그인 프로젝트 생성

프로젝트 생성

라이브러리 설치

로그인 프로젝트 생성

회원가입 화면

회원가입

로그인 화면

로그인

로그아웃

로그아웃 성공

로그아웃

마이 페이지

회원 정보 수정 성공

회원정보 수정

마이 페이지

회원 탈퇴 성공

회원 탈퇴

자동 로그인

자동 로그인 프로세스

 쿠키에서 JWT 가져오기

자동 로그인

로그인 여부 관리

로그인 후, JWT 로 사용자 정보를 매번 요청할 필요없이, 클라이언트에서 바로 정보를 가져오도록 하여 서버 측의 로드을 줄일 수 있다.

로그인 여부 관리

VS CODE 설치 및 설정

VS CODE 설치

자바 세팅

JDK 17

Java in VS CODE

SPRING BOOT Extenstion

VS CODE 세팅

VS CODE 삭제

React

React

Node.js 설치하기 (Windows)

1. winget으로 Node.js 설치

React 시작하기

React 프로젝트를 시작하는 방법

React 프로젝트 생성

node_modules 빠른 삭제

ES7+ React/Redux/React-Native snippets

Vite

JSX

엘리먼트 (Element)

Component

State (상태)

State 의 특징

Props (속성)

Lifecycle Methods (생명주기 메서드)

Mounting

Updating

Hook

Router

정의

React Style

React 에서 스타일링 하는 방법

Context

Context 의 필요성

Redux

Throttle (쓰로틀)

비유

React Custom Hook (커스텀 훅)

1. 커스텀 훅이란?

핵심 규칙

Vite 프록시(Proxy) 설정 가이드

1. 프록시(Proxy)란?

React CSS 모듈 완전 가이드

목차

React + Vite + Tailwind CSS 세팅 가이드

1단계. React + Vite 프로젝트 생성

React Bootstrap 라이브러리

React Developer Tool

axios

Axios 기본 구조

Material UI

React에서 UUID 및 Nanoid 사용 예시

1. 패키지 설치

React Query (TanStack Query)

목차

To Do List REST API 서버 구현

To Do List - Front (React)

“Todo List - 할 일 목록 UI 만들기”

To Do List 프로젝트

“Todo List - 할 일 목록 UI 만들기”

To Do List 프로젝트

“Todo List - 할 일 목록 UI 만들기”

Board App - 파일업로드

페이지네이션

게시판 - CRUD

Preview

게시판 - STYLE

게시판 - 파일 업로드

Spring Boot (Back-End)

WYSIWYG 에디터 - CKEditor

로그인 프로젝트 생성

회원가입 화면

로그인 화면

로그아웃

로그아웃 성공

마이 페이지

회원 정보 수정 성공

마이 페이지

회원 탈퇴 성공

자동 로그인

자동 로그인 프로세스

로그인 여부 관리

VS CODE 설치

자바 세팅

VS CODE 삭제