ALOHA CLASS
/
Front-End
/
React
Search
Share
React
๋ฆฌ์กํธ ๊ธฐ์ด
React_TJE
ALOHA-CLASS
React ์๊ฐ #React #ํ๋ก ํธ์๋ #๊ฐ๋ฐ
React ์๊ฐ #React #Javascript #Node.js #Express
React
React
Meta(FaceBook)์์ ๊ฐ๋ฐํ JavaScript ๊ธฐ๋ฐ UI ๊ฐ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
React๋ ํ์ด์ค๋ถ์์ ๊ฐ๋ฐํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก, ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. React๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ๊ตฌ์ถ๊ณผ ๊ด๋ฆฌ๋ฅผ ๋์์ฃผ๋ ์ ์ธ์ ์ด๊ณ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. React๋ ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA) ๋ฐ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์์ ํนํ ๋ฐ์ด๋ ์ฑ๋ฅ์ ๋ณด์ด๋ฉฐ, ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์ํคํ ์ฒ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๊ณ ์์ต๋๋ค.
React๋ 2011๋ ์ ํ์ด์ค๋ถ์์ ์ฒ์์ผ๋ก ๋์ ๋์๊ณ , 2013๋ ์ ์คํ์์ค๋ก ๊ณต๊ฐ๋์์ต๋๋ค. ๊ทธ ์ดํ๋ก๋ React ์ปค๋ฎค๋ํฐ๋ ๊ณ์ ์ฑ์ฅํ๊ณ ๋ฐ์ ํ๋ฉฐ, ๋ง์ ๊ฐ๋ฐ์๋ค์ด ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ํ๋์ ์ด๊ณ ํจ์จ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ณ ์์ต๋๋ค.
React ์ฐฝ์์
React ํต์ฌ ๊ฐ๋
React ์๊ฐ
React ์์ํ๊ธฐ
React ํ๋ก์ ํธ๋ฅผ ์์ํ๋ ๋ฐฉ๋ฒ
1.
CDN ์ผ๋ก ์์ํ๊ธฐ
2.
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 ๊ฐ๋ฐ์ ๋ ํจ์จ์ ์ผ๋ก ํ๊ธฐ ์ํ ์ฝ๋ ์ค๋ํซ์ ์ ๊ณตํ๋ ํ์ฅ์ ๋๋ค. ์ด๋ฅผ ์ค์นํ๋ ค๋ฉด ๋ค์ ๋จ๊ณ๋ฅผ ๋ฐ๋ฅด์ธ์.
1.
Visual Studio Code ์ด๊ธฐ:
React Extension
Vite
Vite๋ ์ฃผ๋ก Vue.js ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ ๊ณตํ๋๋ฐ ์ค์ ์ ๋๊ณ ์์ผ๋, ๋ค๋ฅธ ํ๋ ์์ํฌ ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์๋ ์ ์ฉํ ์ ์์ต๋๋ค.
Vite
Vite, ์ฐจ์ธ๋ ํ๋ฐํธ์๋ ๊ฐ๋ฐ ํด
์ฅ์
1.
๋น ๋ฅธ ๊ฐ๋ฐ ์๋ฒ:
2.
ES ๋ชจ๋ ๊ธฐ๋ฐ ๊ฐ๋ฐ:
3.
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 ์ ํน์ง
1.
์ํ ์ด๊ธฐํ :
์ปดํฌ๋ํธ๊ฐ ์์ฑ๋ ๋
useState
ํ ์ด๋ ํด๋์ค ์ปดํฌ๋ํธ์
constructor
๋ฉ์๋์์ ์ด๊ธฐ ์ํ๋ฅผ ์ค์ ํฉ๋๋ค.
2.
์ํ ์ ๋ฐ์ดํธ :
setCount
๋
this.setState
๋ฅผ ์ฌ์ฉํ์ฌ ์ํ๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค. ์ด๋ ์ด์ ์ํ๋ฅผ ์ฐธ์กฐํ์ฌ ๋ณ๊ฒฝ์ ์งํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
3.
์ปดํฌ๋ํธ๋ณ๋ก ๊ณ ์ ํ ์ํ :
๊ฐ๊ฐ์ ์ธ์คํด์ค๋ ์์ฒด ์ํ๋ฅผ ์ ์งํ๋ฏ๋ก, ๋์ผํ ์ปดํฌ๋ํธ์ ์ฌ๋ฌ ์ธ์คํด์ค ๊ฐ์๋ ๊ฐ๊ฐ ๋ ๋ฆฝ์ ์ธ ์ํ๊ฐ ์กด์ฌํฉ๋๋ค.
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
Context
๋ชจ๋ ์ปดํฌ๋ํธ์์ ๊ณต์ ํ ์ ์๋ ์ํ๋ฅผ ์ ์ฅํ๋ ๋ฐฉ๋ฒ
Context ์ ํ์์ฑ
Context ๋ ๋ชจ๋ ์ปดํฌ๋ํธ์์ ์ํ๋ฅผ ๊ณต์ ํ๊ธฐ ์ํด ํ์ํฉ๋๋ค. - ์์ ์ปดํฌ๋ํธ์์ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ก ๋ฐ์ดํฐ ์ ๋ฌํด์ผํ๋ ๊ฒฝ์ฐ - ์ปดํฌ๋ํธ 2๊ณ์ธต ์ด์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํด์ผํ๋ ๊ฒฝ์ฐ
์ํ๋ฅผ ๊ด๋ฆฌํ๋ค ๋ณด๋ฉด ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ ๋จ๋ฐฉํฅ์ผ๋ก๋ง ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๊ฒฝ์ฐ ์ธ์๋
์์์์ ๋ถ๋ชจ๋ก, ๋๋ ์ปดํฌ๋ํธ ์ฌ๋ฌ ๊ณ์ธต์ ๋์ด ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํด์ผํ๋ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค.
์ด๋ฅผ ๊ตฌํํ๊ธฐ ์ํด์๋, Global State ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๊ทธ๋ฌ๋ ์ด๋ฌํ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ ๋จ์ ์ด ์์ต๋๋ค.
Context
React Style
React ์์ ์คํ์ผ๋งํ๋ ๋ฐฉ๋ฒ์ ์์๋ด ๋๋ค.
React ์์ ์คํ์ผ๋ง ํ๋ ๋ฐฉ๋ฒ
โข
โข
โข
โข
โข
BootStrap
โข
React-BootStrap
React Style
Redux
โข
Redux ๋?
โข
Redux ์ดํดํ๊ธฐ
โข
Redux ๊ธฐ๋ณธ ์๋ฆฌ
โข
Redux ๊ตฌ์ฑ ์์
โข
Redux ๋์ ๊ณผ์
โข
Redux ๊ด๋ จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
โข
์์ ์ฝ๋
Redux
๋ผ์ด๋ธ๋ฌ๋ฆฌ
React Bootstrap ๋ผ์ด๋ธ๋ฌ๋ฆฌ
React ํ๋ก์ ํธ์์ Bootstrap ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ 2 ๊ฐ์ง๊ฐ ์๋ค.
1.
bootstrap ๋ผ์ด๋ธ๋ฌ๋ฆฌ (๊ทธ๋ฅ Bootstrap)
2.
react-bootstrap ๋ผ์ด๋ธ๋ฌ๋ฆฌ (React ์ฉ Bootstrap)
bootstrap vs react-bootstrap
1.
Bootstrap
2.
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.
React Developer Tool
axios
axios
๋ JavaScript์ HTTP ํด๋ผ์ด์ธํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก, ๋ธ๋ผ์ฐ์ ์ Node.js ํ๊ฒฝ์์ ๋ชจ๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.
axios
๋ Promise๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ๊ณผ ๋ค์ํ ์ค์ ์ต์ ์ ์ ๊ณตํ์ฌ ๋คํธ์ํฌ ์์ฒญ์ ๋ณด๋ค ํธ๋ฆฌํ๊ฒ ๋ค๋ฃฐ ์ ์๋๋ก ๋์์ค๋๋ค.
Axios ๊ธฐ๋ณธ ๊ตฌ์กฐ
Axios์ ์ฃผ์ ๋ฉ์๋
axios
TodoList ํ๋ก์ ํธ
To Do List ํ๋ก์ ํธ
โTodo List - ํ ์ผ ๋ชฉ๋ก UI ๋ง๋ค๊ธฐโ
์คํ ์ข ๋๋ฌ์ฃผ์ธ์
github.com
๋ฐฑ์๋ (SpringBoot)
To Do List ํ๋ก์ ํธ (Back)
To Do List ํ๋ก์ ํธ
โTodo List - ํ ์ผ ๋ชฉ๋ก UI ๋ง๋ค๊ธฐโ
์คํ ์ข ๋๋ฌ์ฃผ์ธ์
github.com
ํ๋ก ํธ ์๋ (React)
To Do List ํ๋ก์ ํธ (Front)
๊ฒ์ํ ํ๋ก์ ํธ
๊ฒ์ํ - CRUD
Preview
๊ฒ์ํ - CRUD
React
SpringBoot
๊ฒ์ํ - STYLE
๋ฆฌ์กํธ์์๋ ์ปดํฌ๋ํธ์์๋ง ์ฌ์ฉํ css ๋ฅผ ๋ชจ๋๋ก ์ง์ ํด์ ์ฌ์ฉํ ์ ์๋ค.
์ปดํฌ๋ํธ.jsx
style.module.css
css ํ์ผ์ *.module.css ๋ก ํ์ผ์ ์์ฑํ๋ฉด, css ์์ ์๋ ์ ํ์ ๋ฐ ์คํ์ผ ์์ฑ์ ์ปดํฌ๋ํธ์์ ๊ฐ์ ธ์์ ๊ฐ์ฒด๋ก ์ ์ฉํ ์ ์๋ค.
style.module.css
์ปดํฌ๋ํธ.jsx
๊ฒ์ํ - STYLE
React
SpringBoot
๊ฒ์ํ - ํ์ผ ์ ๋ก๋
์คํ ์ข ๋๋ฌ์ฃผ์ธ์
github.com
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
Spring Security x React x JWT
JWT(JSON Web Token)
โ์ธ์ฆ ๋ฐ ๊ถํโ ๊ณผ ๊ด๋ จ๋ ์ ๋ณด๋ฅผ ์์ ํ๊ฒ ์ ๋ฌํ๊ธฐ ์ํ JSON ํ์์ ์ํธํ๋ ๋ฌธ์์ด
JWT.IO
JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.
์ธ์ฆ, ๊ถํ ๋ถ์ฌ, ์ ๋ณด ๊ตํ ๋ฑ์ ์ฌ์ฉ๋ฉ๋๋ค.
JWT ์์ฝ
JWT ๋ ํค๋, ํ์ด๋ก๋, ์๊ทธ๋์ฒ๋ก ๊ตฌ์ฑ๋์ด ์์ผ๋ฉฐ, ํค๋์ ํ ํฐ์ ์ข ๋ฅ์ ์ํธํ ์๊ณ ๋ฆฌ์ฆ์, ํ์ด๋ก๋์ ์ ์กํ ์ ๋ณด๋ฅผ, ์๊ทธ๋์ฒ์ ํค๋์ ํ์ด๋ก๋๋ฅผ ๊ฒ์ฆํ๊ธฐ ์ํ ์ ๋ณด๋ฅผ ์ ์ฅํ์ฌ
ํค๋
.
ํ์ด๋ก๋
.
์๊ทธ๋์ฒ
๊ณผ ๊ฐ์ ํํ๋ก ๋ง๋ค์ด์ง๋๋ค.
JWT
SpringBoot ๋ก JWT ํ ํฐ ์์ฑ ๋ฐ ํด์ํ๊ธฐ
JWT ๋ผ์ด๋ธ๋ฌ๋ฆฌ
โข
https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-api
โข
https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-impl
โข
https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-jackson/0.12.3
build.gradle
JWT x SpringBoot
JWT x SpringSecurity
MSA5_REACT/Login/server at main ยท ALOHA-CLASS/MSA5_REACT
๋์กฐ์์์นด๋ฐ๋ฏธ React ์ค์ต. Contribute to ALOHA-CLASS/MSA5_REACT development by creating an account on GitHub.
โข
build.gradle
โข
ํ์๊ฐ์ ๋ฐ ๋ก๊ทธ์ธ
โข
์ธ์ฆ
build.gradle
JWT x SpringSecurity
React x JWT x SpringSecurity
Client (React)
MSA5_REACT/Login/client at main ยท ALOHA-CLASS/MSA5_REACT
๋์กฐ์์์นด๋ฐ๋ฏธ React ์ค์ต. Contribute to ALOHA-CLASS/MSA5_REACT development by creating an account on GitHub.
Server (Spring Boot)
JWT x SpringSecurity
MSA5_REACT/Login/server at main ยท ALOHA-CLASS/MSA5_REACT
๋์กฐ์์์นด๋ฐ๋ฏธ React ์ค์ต. Contribute to ALOHA-CLASS/MSA5_REACT development by creating an account on GitHub.
React x JWT x SpringSecurity
VS CODE ์ค์น ๋ฐ ์ค์
VS CODE ์ค์น
PowerShell ๋ฐ๋ก ์ค์น ๋ช ๋ น์ด
CMD ์ฐฝ์ ์ด๊ณ ์์ ๋ช ๋ น์ด๋ฅผ ์ ๋ ฅํ๋ฉฐ VS CODE ์ต์ ๋ฒ์ ์ ๋ฐ๋ก ์ค์นํ ์ ์์ต๋๋ค!
๋ค์ด๋ก๋ ๋งํฌ
code.visualstudio.com
VS CODE ์ค์น
์๋ฐ ์ธํ
1.
JDK 17
2.
Java in VS CODE
3.
SPRING BOOT Extenstion
JDK 17
Java Archive Downloads - Java SE 17
VS CODE ์ธํ
VS CODE ์ญ์
VS CODE ์์ ์ญ์ ์๋ ํ๋ก๊ทธ๋จ
vscode_uninstall.zip
94.3KB
VS CODE ์ญ์
ECMAScript
ECMAScript
ECMAScript๋ ์คํฌ๋ฆฝํธ ์ธ์ด์ธ JavaScript์ ํ์ค ๊ท๊ฒฉ์ ์ ์ํ๋ ๊ท๊ฒฉ์ ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฒ์ ์ ๋ํ๋ด๋ ์ด๋ฆ์ด๋ผ๊ณ ์๊ฐํด๋ ์ข์ต๋๋ค. ์ค์ ๋ก, ECMAScript๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ๋ณธ์ ์ธ ๋์, ๋ฐ์ดํฐ ํ์ , ๊ฐ์ฒด, ๋ฌธ๋ฒ ๋ฑ์ ์ ์ํฉ๋๋ค.
์ฌ๋ฌ ๋ธ๋ผ์ฐ์ ์ JavaScript ์์ง์ ECMAScript ํ์ค์ ๋ฐ๋ฅด๋ฉฐ, ์๋ก์ด ECMAScript ๋ฒ์ ์ด ๋์ฌ ๋๋ง๋ค ์ด๋ฅผ ๊ตฌํํ์ฌ ๋ธ๋ผ์ฐ์ ์ ๋ฐํ์ ํ๊ฒฝ์์ ๊ฐ๋ฐ์๊ฐ ์ต์ ์ ์ธ์ด ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋๋ก ํฉ๋๋ค.
ECMAScript ํตํด JavaSscript ์ธ์ด์ ํ์ค์ ์ ์ํ๊ณ , ๋ธ๋ผ์ฐ์ (chrome, edge, firefox ๋ฑ) ๋ฐ JavaScript ์์ง์ด ์ด์ ๋ง์ถฐ ๊ฐ๊ฐ ๋ธ๋ผ์ฐ์ ์ ๋ฐํ์ ํ๊ฒฝ์์ ECMAScript ๋ผ๋ ํ์ค์ผ๋ก ๋์ํ ์ ์๋๋ก ๊ธฐ์ค์ ์ ์ํฉ๋๋ค. ์ด์ ๋ฐ๋ผ ๊ฐ๋ฐ์๋ค์ ๋ธ๋ผ์ฐ์ ๋ฐ ๋ฐํ์ ํ๊ฒฝ์ ํตํด, ECMAScript ํ์ค์ ๋ฐ๋ฅธ JavaScript ์ธ์ด์ ์ต์ ๊ธฐ์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋ฐํ์ ํ๊ฒฝ?
: ํ๋ก๊ทธ๋จ์ด ์คํ๋๋ ๋์์ ์ปดํจํฐ ํ๊ฒฝ์ ์๋ฏธํฉ๋๋ค. ์ด๋ ์ด๋ค ํ๋ก๊ทธ๋จ์ด๋ ์คํฌ๋ฆฝํธ๊ฐ ์คํ๋ ๋, ํด๋น ํ๋ก๊ทธ๋จ์ด ํ์๋ก ํ๋ ์ฌ๋ฌ๊ฐ์ง ๋ฆฌ์์ค์ ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ํ๊ฒฝ์ ๋งํฉ๋๋ค.
ECMAScript
