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

ECMAScript

ECMAScript는 스크립트 언어인 JavaScript의 표준 규격을 정의하는 규격입니다.

자바스크립트의 버전을 나타내는 이름이라고 생각해도 좋습니다. 실제로, ECMAScript는 자바스크립트의 기본적인 동작, 데이터 타입, 객체, 문법 등을 정의합니다.

여러 브라우저와 JavaScript 엔진은 ECMAScript 표준을 따르며, 새로운 ECMAScript 버전이 나올 때마다 이를 구현하여 브라우저와 런타임 환경에서 개발자가 최신의 언어 기능을 사용할 수 있도록 합니다.

ECMAScript 통해 JavaSscript 언어의 표준을 정의하고, 브라우저(chrome, edge, firefox 등) 및 JavaScript 엔진이 이에 맞춰 각각 브라우저와 런타임 환경에서 ECMAScript 라는 표준으로 동작할 수 있도록 기준을 제시합니다. 이에 따라 개발자들의 브라우저 및 런타임 환경을 통해, ECMAScript 표준에 따른 JavaScript 언어의 최신 기술을 사용할 수 있습니다.

 런타임 환경?
: 프로그램이 실행되는 동안의 컴퓨터 환경을 의미합니다. 이는 어떤 프로그램이나 스크립트가 실행될 때, 해당 프로그램이 필요로 하는 여러가지 리소스와 서비스를 제공하는 환경을 말합니다.

ECMAScript

React

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

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

React는 2011년에 페이스북에서 처음으로 도입되었고, 2013년에 오픈소스로 공개되었습니다. 그 이후로도 React 커뮤니티는 계속 성장하고 발전하며, 많은 개발자들이 이 라이브러리를 사용하여 현대적이고 효율적인 웹 애플리케이션을 구축하고 있습니다.

React 창시자

React 핵심 개념

React 소개

React 시작하기

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

CDN 으로 시작하기

Node.js 와 npm 으로 시작하기

CDN 으로 시작하기

•

개발용 CDN script

•

배포용 CDN script

React 시작하기

ES7+ React/Redux/React-Native snippets

"ES7+ React/Redux/React-Native snippets"는 Visual Studio Code에서 React 및 Redux 개발을 더 효율적으로 하기 위한 코드 스니펫을 제공하는 확장입니다. 이를 설치하려면 다음 단계를 따르세요.

Visual Studio Code 열기:

React Extension

Vite

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

Vite

Vite, 차세대 프런트엔드 개발 툴

https://ko.vitejs.dev/

장점

빠른 개발 서버:

ES 모듈 기반 개발:

Hot 모듈 교체 (HMR):

Vite & React

JSX

JavaScript + (XML/HTML)

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

동작

JSX 문법으로 작성하는 코드는 React 의 createElement 함수를 사용하는 JavaScript 코드로 변환됩니다.

JSX JavaScript 로 변환 React 엘리먼트를 생성 가상 DOM 실제 DOM

JSX

엘리먼트 (Element)

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

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

JSX에서는 모든 엘리먼트에 대해 종료 태그를 명시적으로 작성해야 합니다.

(HTML에서는 몇몇 태그에서 닫는 태그가 생략되어도 유효합니다.)

HTML 인 경우 OK

React 인 경우 ERROR

Element

Component

React 의 재사용 가능한 UI 요소

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

컴포넌트 이해하기

Component

State (상태)

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

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

State 의 특징

상태 초기화
: 컴포넌트가 생성될 때 useState 훅이나 클래스 컴포넌트의 constructor 메서드에서 초기 상태를 설정합니다.

상태 업데이트
: setCount나 this.setState를 사용하여 상태를 업데이트합니다. 이때 이전 상태를 참조하여 변경을 진행하는 것이 중요합니다.

컴포넌트별로 고유한 상태
: 각각의 인스턴스는 자체 상태를 유지하므로, 동일한 컴포넌트의 여러 인스턴스 간에는 각각 독립적인 상태가 존재합니다.

State

Props (속성)

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

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

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

React에서는 props를 통한 단방향 데이터 전달이 주요한 패턴입니다.

단, 상태 관리 라이브러리인 Redux, Context API 등을 사용하면 컴포넌트 간의 데이터 흐름을 조금 더 유연하게 관리할 수 있습니다.

자식 컴포넌트에서 부모 컴포넌트로 데이터를 넘기는 법 - 부모 컴포넌트에서 props 로 함수를 내려주고, 자식 컴포넌트에서 그 함수를 호출하면서 부모 컴포넌트로 데이터를 전달 할 수 있습니다.

Props

Hook

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

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

컴포넌트에서 상태와 라이프사이클 관리를 위한 함수형 프로그래밍 방식을 제공하는 API

리액트 16.8 버전부터 도입

hook 종류

•

상태 관리용 hook

•

라이프사이클 관리용 hook

Hook

Router

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

정의

React 라우터는 React 애플리케이션 내에서 페이지 간의 네비게이션을 관리하는 라이브러리입니다. 주로 싱글 페이지 애플리케이션(Single Page Application, SPA)에서 사용되며, URL을 기반으로 다양한 컴포넌트를 렌더링하여 사용자 경험을 향상시킵니다.

Router 를 사용하면 URL을 기반으로 애플리케이션의 렌더링을 제어할 수 있습니다.

Router

React Style

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

React 에서 스타일링 하는 방법

•

BootStrap

•

React-BootStrap

React Style

Context

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

Context 의 필요성

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

상태를 관리하다 보면 부모 컴포넌트에서 자식 컴포넌트 단방향으로만 데이터를 전달하는 경우 외에도 자식에서 부모로, 또는 컴포넌트 여러 계층을 넘어 데이터를 전달해야하는 경우가 있습니다.

이를 구현하기 위해서는, Global State 를 사용할 수 있습니다.

그러나 이러한 방법은 다음과 같은 단점이 있습니다.

Context

Redux

•

Redux 란?

•

Redux 이해하기

•

Redux 기본 원리

•

Redux 구성 요소

•

Redux 동작 과정

•

Redux 관련 라이브러리

•

예시 코드

Redux

라이브러리

React Bootstrap 라이브러리

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

bootstrap 라이브러리 
(그냥 Bootstrap)

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

bootstrap vs react-bootstrap

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의 주요 메서드

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/

•

특징:

•

장점:

사용하기

•

npm 설치

•

Material Design Icon

Material UI

TodoList 프로젝트

To Do List 프로젝트

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

스타 좀 눌러주세요

github.com

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

백엔드 (SpringBoot)

To Do List 프로젝트 (Back)

To Do List 프로젝트

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

스타 좀 눌러주세요

github.com

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

프론트 엔드 (React)

To Do List 프로젝트 (Front)

게시판 프로젝트 v2

Board App - 파일업로드

페이지네이션

•

페이지네이션 UI 작성

•

페이지 링크

•

데이터 없을 때

•

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

Board App - 페이지네이션

게시판 프로젝트

게시판 - CRUD

Preview

게시판 - CRUD

React

SpringBoot

게시판 - STYLE

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

컴포넌트.jsx

style.module.css

css 파일을 *.module.css 로 파일을 생성하면, css 안에 있는 선택자 및 스타일 속성을 컴포넌트에서 가져와서 객체로 적용할 수 있다.

style.module.css

컴포넌트.jsx

게시판 - STYLE

React

SpringBoot

게시판 - 파일 업로드

스타 좀 눌러주세요

github.com

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

Spring Boot (Back-End)

Spring Boot 로 파일 업로드, 조회, 삭제 기능을 구현합니다.

구현 기능

•

 파일 업로드

•

︎ 파일 조회

•

 파일 삭제

게시판 - 파일 업로드

React

SpringBoot

WYSIWYG 에디터 - CKEditor

•

위지윅 에디터란?

•

React 에 CKEditor 설치

•

샘플코드

위지윅 에디터란?

WYSIWYG (What You See Is What You Get) : 작성하는 내용을 그대로 보면서 편집할 수 있는 에디터

위지윅(What You See Is What You Get) 에디터는 사용자가 결과물을 보면서 콘텐츠를 편집할 수 있는 도구입니다. 사용자는 텍스트 형식, 이미지, 표 등을 직접 조작하여 웹 콘텐츠를 만들 수 있습니다. 이러한 에디터는 사용자가 HTML이나 CSS 같은 마크업 언어를 몰라도 웹 콘텐츠를 쉽게 만들 수 있게 해줍니다.

웹에서는 HTML 형식으로 컨텐츠가 보여지는데, 일반 텍스트를 작성하면, 제목, 문단, 이미지 등을 그대로 볼 수가 없다. 그런데 위지윅 에디터를 이용하면, 작성하는 컨텐츠를 그대로 HTML 로 변환하여 보여주기 때문에, 있는 그대로 작성하면서 볼 수 있다.

WYSIWYG 에디터 - CKEditor

React

SpringBoot

JWT with Spring Security

JWT x Spring Security 6

JWT x Spring Security 5

React 로그인

로그인 프로젝트 생성

프로젝트 생성

라이브러리 설치

프로젝트 생성

•

vite

•

npx

로그인 프로젝트 생성

회원가입 화면

회원가입 성공

회원가입

로그인 화면

로그인 성공

로그인 실패

로그인

로그아웃

로그아웃 성공

로그아웃

마이 페이지

회원 정보 수정 성공

회원정보 수정

마이 페이지

회원 탈퇴 성공

회원 탈퇴

자동 로그인

자동 로그인 프로세스

 쿠키에서 JWT 가져오기

사용자 정보 요청 

사용자 정보 응답

자동 로그인

로그인 여부 관리

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

localStroage vs sessionStorage

로그인 여부 관리 프로세스

최로 로그인

로그인 여부 관리

VS CODE 설치 및 설정

VS CODE 설치

PowerShell 바로 설치 명령어

CMD 창을 열고 위의 명령어를 입력하며 VS CODE 최신 버전을 바로 설치할 수 있습니다!

다운로드 링크

code.visualstudio.com

https://code.visualstudio.com/download

VS CODE 설치

자바 세팅

JDK 17

Java in VS CODE

SPRING BOOT Extenstion

JDK 17

Java Archive Downloads - Java SE 17

https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

VS CODE 세팅

VS CODE 삭제

VS CODE 완전 삭제 자동 프로그램

vscode_uninstall.zip

94.3KB

VS CODE 삭제