Search

κ²Œμ‹œνŒ ν”„λ‘œμ νŠΈ

κ²Œμ‹œνŒ - CRUD

Preview

κ²Œμ‹œνŒ - CRUD
React
SpringBoot

κ²Œμ‹œνŒ - STYLE

λ¦¬μ•‘νŠΈμ—μ„œλŠ” μ»΄ν¬λ„ŒνŠΈμ—μ„œλ§Œ μ‚¬μš©ν•  css λ₯Ό λͺ¨λ“ˆλ‘œ μ§€μ •ν•΄μ„œ μ‚¬μš©ν•  수 μžˆλ‹€.
μ»΄ν¬λ„ŒνŠΈ.jsx
style.module.css
css νŒŒμΌμ„ *.module.css 둜 νŒŒμΌμ„ μƒμ„±ν•˜λ©΄, css μ•ˆμ— μžˆλŠ” μ„ νƒμž 및 μŠ€νƒ€μΌ 속성을 μ»΄ν¬λ„ŒνŠΈμ—μ„œ κ°€μ Έμ™€μ„œ 객체둜 μ μš©ν•  수 μžˆλ‹€.

style.module.css

μ»΄ν¬λ„ŒνŠΈ.jsx

κ²Œμ‹œνŒ - STYLE
React
SpringBoot

κ²Œμ‹œνŒ - 파일 μ—…λ‘œλ“œ

μŠ€νƒ€ μ’€ λˆŒλŸ¬μ£Όμ„Έμš”

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