React (Front-End)
React ๋ก ํ์ผ ์
๋ก๋, ์กฐํ, ์ญ์ UI ๋ฐ API ๋ฅผ ๊ตฌํํฉ๋๋ค.
โข
ํ์ผ ์
๋ก๋โฆ
ํ์ผ ๋ฑ๋ก UI ์ถ๊ฐ
โฆ
ํ์ผ ์
๋ก๋ ์์ฒญ API
โข
๏ธ ํ์ผ ์กฐํโฆ
ํ์ผ ๋ชฉ๋ก ์กฐํ UI ๋ฐ API ์ถ๊ฐ
โฆ
๋ค์ด๋ก๋ UI ๋ฐ API ์ถ๊ฐ
โฆ
์ธ๋ค์ผ ์ด๋ฏธ์ง UI ์ถ๊ฐ
โข
ํ์ผ ์ญ์ โฆ
๊ฐ๋ณ ์ญ์
โฆ
์ ํ ์ญ์
โข
ํ์ผ ์์ ์ ์
๋ก๋โฆ
ํ์ผ ๋ฑ๋ก UI ์ถ๊ฐ
โฆ
ํ์ผ ์
๋ก๋ ์์ฒญ API
ํ์ผ ์
๋ก๋
โข
ํ์ผ ๋ฑ๋ก UI ์ถ๊ฐ
โข
ํ์ผ ์
๋ก๋ ์์ฒญ API
ํ์ผ ๋ฑ๋ก UI ์ถ๊ฐ
โข
<input type=โfileโ /> ์์ ์ถ๊ฐ
โข
ํ์ผ ๋ณ๊ฒฝ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฐ๊ฒฐ
ํ์ผ ์ ๋ก๋ ์์ฒญ API
โข
Content-Type ๋ณ๊ฒฝ : application/json multipart/form-data
multipart/form-dataโข
FormData ๊ฐ์ฒด๋ฅผ ์์ฑ
โฆ
๊ฒ์๊ธ ์ ๋ณด ์ธํ
โฆ
ํ์ผ ๋ฐ์ดํฐ ์ธํ
โข
API ์์ฒญ ์, JSON ๋์ FormData ๋ก ์ง์
๏ธ ํ์ผ ์กฐํ
โข
ํ์ผ ๋ชฉ๋ก ์กฐํ UI ๋ฐ API ์ถ๊ฐ
โข
๋ค์ด๋ก๋ UI ๋ฐ API ์ถ๊ฐ
โข
์ธ๋ค์ผ ์ด๋ฏธ์ง UI ์ถ๊ฐ
ํ์ผ ๋ชฉ๋ก ์กฐํ UI ๋ฐ API ์ถ๊ฐ
โข
๊ฒ์๊ธ ์กฐํ&์์ ํ๋ฉด
โฆ
ํ์ผ ๋ชฉ๋ก UI ์์ฑ
โฆ
๊ฒ์๊ธ ์กฐํ ์์ฒญ ์ฒ๋ฆฌ ๊ตฌ์กฐ ๋ณ๊ฒฝ
โช
URL : /boards/{id}โช
data โข
โboardโ : { }
โข
โfileListโ : [ {}, {}, {} ]
โฆ
๊ฒ์๊ธ ์กฐํ ์ปจํ
์ด๋์์ state & props ์ธํ
โช
fileList state ๋ฑ๋ก
โช
props ์กฐํํ๋ฉด ์ปดํฌ๋ํธ๋ก ์ ๋ฌ
๋ค์ด๋ก๋ UI ๋ฐ API ์ถ๊ฐ
โข
ํ์ผ ๋ชฉ๋ก
โฆ
๋ค์ด๋ก๋ ๋ฒํผ UI ์์ฑ
โข
๋ค์ด๋ก๋ ํด๋ฆญ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ ์
โข
/files/download/{id} ์์ฒญ API ์ฐ๊ฒฐโฆ
์๋ต๋ฐ์ ํ์ผ ๋ฐ์ดํธ ์ฝ๋ ์ฒ๋ฆฌ
โฆ
Blob ๊ฐ์ฒด ์์ฑ
โฆ
Javascript ์์ ๋ธ๋ผ์ฐ์ ๋ก ๋ค์ด๋ก๋ ๋๋๋ก ์ฒ๋ฆฌ
โช
<a href=โURLโ download=โํ์ผ๋ช
โ /> ๋ค์ด๋ก๋ ๋งํฌ ์์ฑ
โช
ํด๋ฆญ ํธ๋ฆฌ๊ฑฐ ์คํ
์ธ๋ค์ผ ์ด๋ฏธ์ง UI ์ถ๊ฐ
โข
ํ์ผ ๋ชฉ๋ก
โฆ
์ด๋ฏธ์ง UI ์ถ๊ฐ
โช
/files/img/{id}โช
<img src=โ/files/img/{id}โ />
โข
MAIN (๋ํ์ด๋ฏธ์ง), SUB(์ฒจ๋ถ์ด๋ฏธ์ง) ๊ตฌ๋ณํ์ฌ ์์ฒญ - (type ๋ณ ํ์ผ ์กฐํ ๊ธฐ๋ฅ ๊ตฌํ ํ์)
โฆ
๊ฒ์๊ธ ๋ชฉ๋ก
โช
์ธ๋ค์ผ ์ด๋ฏธ์ง๋ก ๋ํ ์ด๋ฏธ์ง ์ถ๋ ฅ
โฆ
๊ฒ์๊ธ ์กฐํ
โช
์ธ๋ค์ผ ๊ตฌ๋ณํ์ฌ ์ถ๋ ฅ
โข
๋ฉ์ธ ์ด๋ฏธ์ง
โข
์ฒจ๋ถ ์ด๋ฏธ์ง
ํ์ผ ์ญ์
โข
๊ฐ๋ณ ์ญ์
โข
์ ํ ์ญ์
๊ฐ๋ณ ์ญ์
โข
์์ ํ๋ฉด
โฆ
ํ์ผ ๋ชฉ๋ก UI ์ถ๊ฐ
โฆ
ํ์ผ ๋ชฉ๋ก ๊ฐ ํญ๋ชฉ์ ์ญ์ ๋ฒํผ ๋๋ ์์ด์ฝ() ์ถ๊ฐ
) ์ถ๊ฐโฆ
์ญ์ ํด๋ฆญ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฐ๊ฒฐ
โฆ
์ญ์ ์์ฒญ API ์ฐ๊ฒฐ
์ ํ ์ญ์
โข
์์ ํ๋ฉด
โฆ
ํ์ผ ๋ชฉ๋ก ๊ฐ ํญ๋ชฉ ์ฒดํฌ๋ฐ์ค UI ์ถ๊ฐ
โฆ
์ ํ ์ญ์ ๋ฒํผ UI ์ถ๊ฐ
โฆ
์ฒดํฌ ๋ฐ์ค ํด๋ฆญ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฐ๊ฒฐ
โช
ํด๋น ํ์ผ์ id ๋ฅผ ์ญ์ ๋ฆฌ์คํธ์ ์ถ๊ฐ
โฆ
์ ํ ์ญ์ ์์ฒญ API ๋ฉ์๋ ์ ์
โช
[DELETE] /filesโข
param โฆ
noList : 1,2,3
โฆ
idList : id1, id2, id3
โฆ
์ ํ ์ญ์ ๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฐ๊ฒฐ
โช
์ ํ ์ญ์ ํด๋ฆญ ์
โข
์ ํ ์ญ์ API ์์ฒญ ์ฐ๊ฒฐ
ํ์ผ ์์ ์ ์
๋ก๋
โข
ํ์ผ ๋ฑ๋ก UI ์ถ๊ฐ
โข
ํ์ผ ์
๋ก๋ ์์ฒญ API
ํ์ผ ๋ฑ๋ก UI ์ถ๊ฐ
โข
<input type=โfileโ /> ์์ ์ถ๊ฐ
โข
ํ์ผ ๋ณ๊ฒฝ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฐ๊ฒฐ
ํ์ผ ์ ๋ก๋ ์์ฒญ API
โข
Content-Type ๋ณ๊ฒฝ : application/json multipart/form-data
multipart/form-dataโข
FormData ๊ฐ์ฒด๋ฅผ ์์ฑ
โฆ
๊ฒ์๊ธ ์ ๋ณด ์ธํ
โฆ
ํ์ผ ๋ฐ์ดํฐ ์ธํ
โข
API ์์ฒญ ์, JSON ๋์ FormData ๋ก ์ง์