๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ193

[์Šคํ”„๋ง๋ถ€ํŠธ ํ€ต์Šคํƒ€ํŠธ] ch.3 ํ…Œ์ŠคํŠธ, ๋กœ๊น…, ๋นŒ๋“œ @SpringBootTest logging.level.com.rebypaper=trace โ€‹โ–ถํ…Œ์ŠคํŠธ @SpringBootTest ์• ๋„ˆํ…Œ์ด์…˜์„ ๋ถ™์ด๋ฉด ๋ณต์žกํ•œ ํ…Œ์ŠคํŠธ ์„ค์ •๋“ค์„ ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ณ , ํ…Œ์ŠคํŠธ ๊ด€๋ จ ๊ฐ์ฒด๋“ค์„ ๋ฉ”๋ชจ๋ฆฌ์— ์˜ฌ๋ ค์คŒ ๊ด€๋ จ์†์„ฑ properties : ํ…Œ์ŠคํŠธ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ „์— ํ…Œ์ŠคํŠธ์—์„œ ์‚ฌ์šฉํ•  ์Šค๋กœํผํ‹ฐ๋“ค์„ k=yํ˜•ํƒœ๋กœ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ properties ํŒŒ์ผ์— ์„ค์ •๋œ ํ”„๋กœํผํ‹ฐ๋ฅผ ์žฌ์ •์˜ํ•จ classes : ํ…Œ์ŠคํŠธํ•  ํด๋ž˜์Šค๋“ค์„ ๋“ฑ๋กํ•จ. ์ƒ๋žต์‹œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์ •์˜๋œ ๋ชจ๋“  ๋นˆ์„ ์ƒ์„ฑํ•จ webEnvironment : ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์‹คํ–‰๋  ๋•Œ ์›น๊ณผ ๊ด€๋ จ๋œ ํ™˜๊ฒฝ์„ค์ • ๊ฐ€๋Šฅ โ€‹โ€‹ ๋ชจํ‚น : ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•ด ์‹ค์ œ ๊ฐ์ฒด์™€ ๋น„์Šทํ•œ ๋ชจ์˜ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ ๋ชฉ์—… : ๋ชจํ‚นํ•œ ๊ฐ์ฒด๋ฅผ ๋ฉ”๋ชจ๋ฆฌ์—์„œ ์–ป์–ด๋‚ด๋Š” ๊ณผ์ • ๋ชจํ‚นํ•˜๋ ค๋ฉด @WebMvcT.. 2023. 11. 23.
[์Šคํ”„๋ง๋ถ€ํŠธ ํ€ต์Šคํƒ€ํŠธ] ch.2 ์˜์กด์„ฑ๊ณผ ์ž๋™์„ค์ • ๊ธฐ๋ณธ์ ์ธ ์„ค์ •์€ ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌ, ํ•„์š”ํ•œ ๋งŒํผ์˜ ๊ธฐ๋Šฅ๋งŒ ์žฌ์ •์˜ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ธฐ โ–ท์Šคํ”„๋ง๋ถ€ํŠธ์˜ ํ•ต์‹ฌ์š”์†Œ โ‘ ์Šคํƒ€ํ„ฐ : ํŠน์ • ๋ชจ๋“ˆ ์‚ฌ์šฉ์‹œ ๊ด€๋ จ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ๋ฌถ์–ด์„œ ๋งˆ์น˜ ํŒจํ‚ค์ง€์ฒ˜๋Ÿผ ์ œ๊ณต. โ‘ก์ž๋™์„ค์ • : ๋นˆ ์„ค์ •์„ ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌํ•จ โ‘ข์•ก์ถ”์—์ดํ„ฐ : ์Šคํ”„๋ง๋ถ€ํŠธ๋กœ ๊ฐœ๋ฐœ๋œ ์‹œ์Šคํ…œ์„ ๋ชจ๋‹ˆํ„ฐ๋ง ํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•จ โ€‹ โ–ถ์˜์กด์„ฑ๊ด€๋ฆฌ ์Šคํƒ€ํ„ฐ์˜ ์›๋ฆฌ : (๋ฉ”์ด๋ธ)์Šคํƒ€ํ„ฐ์— ์žˆ๋Š” POMํŒŒ์ผ์˜ ์ƒ์† ๊ตฌ์กฐ. ์—˜๋ฆฌ๋จผํŠธ ์‚ฌ์šฉ. ํ”„๋กœํผํ‹ฐ ์žฌ์ •์˜ ๋ฉ”์ด๋ธ(pom.xml) org.springframework.boot spring-boot-starter-web 2.5.4 ๊ทธ๋ ˆ์ด๋“ค(build.gradle) dependencies { // ๋‹ค๋ฅธ ์˜์กด์„ฑ๋“ค implementation 'org.springframework.boot:spring-b.. 2023. 11. 23.
[๋ณด์•ˆ] ์ฟ ํ‚ค์™€ ์„ธ์…˜ ๊ทธ๋ฆฌ๊ณ  JWT ์„ธ์…˜, ์ฟ ํ‚ค, JWT๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ธ์ฆ ๋ฐ ์„ธ์…˜ ๊ด€๋ฆฌ์— ์‚ฌ์šฉ๋˜๋Š” ์ค‘์š”ํ•œ ๊ธฐ์ˆ  ์ฟ ํ‚ค (Cookies) ์ฟ ํ‚ค๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก(๋ธŒ๋ผ์šฐ์ €)์— ์ €์žฅ๋˜๋Š” ์ž‘์€ ๋ฐ์ดํ„ฐ ์กฐ๊ฐ๋“ค ์žฅ์ : ๊ฐ„๋‹จํ•œ ๋ฐ์ดํ„ฐ ์ €์žฅ ๋ฐ ์ถ”์ ์— ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค. ์„ธ์…˜ ๊ด€๋ฆฌ, ์‚ฌ์šฉ์ž ์ธ์ฆ, ์‚ฌ์šฉ์ž ์„ ํ˜ธ๋„ ๋“ฑ์„ ์œ ์ง€ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋‹จ์ : ์šฉ๋Ÿ‰ ์ œํ•œ(๋Œ€๋žต 4KB)์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋งค HTTP ์š”์ฒญ๋งˆ๋‹ค ์ฟ ํ‚ค ๋ฐ์ดํ„ฐ๊ฐ€ ์„œ๋ฒ„๋กœ ์ „์†ก๋˜๋ฏ€๋กœ, ๋„คํŠธ์›Œํฌ ํŠธ๋ž˜ํ”ฝ์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. XSS(Cross-Site Scripting)์™€ ๊ฐ™์€ ๋ณด์•ˆ ์ทจ์•ฝ์ ์— ๋…ธ์ถœ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ ๋ฐฉ๋ฒ•: ์ฟ ํ‚ค๋Š” Set-Cookie ํ—ค๋”๋ฅผ ํ†ตํ•ด ์ƒ์„ฑ๋˜๋ฉฐ, ๋ธŒ๋ผ์šฐ์ €๋Š” ์ดํ›„ ์š”์ฒญ์— Cookie ํ—ค๋”๋ฅผ ์ž๋™์œผ๋กœ ํฌํ•จ์‹œํ‚ต๋‹ˆ๋‹ค. HttpOnly, Secure, SameSite ๋“ฑ์˜ ์†์„ฑ.. 2023. 11. 23.
[๋ถ€ํŠธ์ŠคํŠธ๋žฉ] ์บ๋Ÿฌ์…€ ์ ์šฉ, ์Šคํƒ€์ผ ๋ฎ๊ธฐ, rem ๋‹จ์œ„, 100์ผ ์ฝ”๋”ฉ ์ฑŒ๋ฆฐ์ง€ - Web Development ๋ถ€ํŠธ์บ ํ”„ 331. ์‚ฌ์šฉ์ž ์ง€์ • ์ฝ”๋“œ์™€ ํƒ€์‚ฌ ํŒจํ‚ค์ง€ ๊ฒฐํ•ฉ [45์ผ์ฐจ] ์บ๋Ÿฌ์…€ ์ ์šฉ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์Šคํƒ€์ผ ๋ฎ๋Š” ๋ฐฉ๋ฒ• ์Šฌ๋ผ์ด๋“œ ์‡ผ ์ด๋ฏธ์ง€ ๋น„์œจ ๋งž์ถ”๋ฉฐ ๊ณ ์ •ํ•˜๊ธฐ rem ๋‹จ์œ„ rem์€ CSS์—์„œ ์‚ฌ์šฉ๋˜๋Š” ํฌ๊ธฐ ๋‹จ์œ„๋กœ, "Root EM"์˜ ์•ฝ์ž 1rem์˜ ํฌ๊ธฐ๋Š” ๋ฌธ์„œ์˜ ๋ฃจํŠธ ์š”์†Œ(HTML)์˜ ํฐํŠธ ํฌ๊ธฐ์— ๋Œ€ํ•œ ์ƒ๋Œ€์  ํฌ๊ธฐ๋ฅผ ๋‚˜ํƒ€๋ƒ„ ( ์˜ˆ๋ฅผ ๋“ค์–ด, HTML ์š”์†Œ์˜ ํฐํŠธ ํฌ๊ธฐ๊ฐ€ 16px๋ผ๋ฉด, 1rem์€ 16px๊ณผ ๋™์ผํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. rem ๋‹จ์œ„์˜ ์žฅ์  ์ผ๊ด€์„ฑ: ๋ชจ๋“  ์š”์†Œ์˜ ํฌ๊ธฐ๊ฐ€ ๋ฃจํŠธ ์š”์†Œ์˜ ํฐํŠธ ํฌ๊ธฐ์— ๊ธฐ๋ฐ˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ๋ฃจํŠธ ์š”์†Œ์˜ ํฐํŠธ ํฌ๊ธฐ๋งŒ ์กฐ์ •ํ•˜๋ฉด ์ „์ฒด ๋ฌธ์„œ์˜ ํฌ๊ธฐ ์กฐ์ •์ด ๊ฐ€๋Šฅ ์œ ์—ฐ์„ฑ๊ณผ ์ ‘๊ทผ์„ฑ: ์‚ฌ์šฉ์ž๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ธฐ๋ณธ ํฐํŠธ ํฌ๊ธฐ๋ฅผ ์กฐ์ •ํ–ˆ์„ ๋•Œ, rem ๋‹จ์œ„๋ฅผ .. 2023. 11. 22.
HTML5 ์˜๋ฏธ๋ก ์  ํƒœ๊ทธ HTML5์—์„œ ๋„์ž…๋œ ์˜๋ฏธ๋ก ์ (semantic) ํƒœ๊ทธ๋“ค์€ ์›น ํŽ˜์ด์ง€์˜ ๊ฐ ๋ถ€๋ถ„์ด ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€ ๋ช…ํ™•ํ•˜๊ฒŒ ์ •์˜ํ•˜๋ฉฐ, ์›น์‚ฌ์ดํŠธ์˜ ์ ‘๊ทผ์„ฑ์„ ๊ฐœ์„ ํ•˜๊ณ , ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”(SEO)์—๋„ ๋„์›€์„ ์คŒ. HTML5์—์„œ ํ”ํžˆ ์‚ฌ์šฉ๋˜๋Š” ์˜๋ฏธ๋ก ์  ํƒœ๊ทธ ์˜ˆ์‹œ : ํŽ˜์ด์ง€๋‚˜ ์„น์…˜์˜ ๋จธ๋ฆฌ๊ธ€์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๋ณดํ†ต ๋กœ๊ณ , ์ œ๋ชฉ, ๋„ค๋น„๊ฒŒ์ด์…˜ ๋งํฌ ๋“ฑ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. : ๋„ค๋น„๊ฒŒ์ด์…˜ ๋งํฌ๋ฅผ ์œ„ํ•œ ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. ์ฃผ ๋ฉ”๋‰ด, ๋ชฉ์ฐจ, ์ƒ‰์ธ ๋“ฑ์˜ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋งํฌ๋ฅผ ๊ฐ์‹ธ๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. : ๋…๋ฆฝ์ ์œผ๋กœ ๊ตฌ๋ถ„๋˜๊ฑฐ๋‚˜ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋‚ด์šฉ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ธ”๋กœ๊ทธ ๊ธ€์ด๋‚˜ ๋‰ด์Šค ๊ธฐ์‚ฌ, ํฌ๋Ÿผ ๊ฒŒ์‹œ๋ฌผ ๋“ฑ์ด ์ด์— ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค. : ๋ฌธ์„œ๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋…๋ฆฝ์ ์ธ ์„น์…˜์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๊ฐ ์„น์…˜์€ ์ฃผ๋กœ ํ•œ ์ฃผ์ œ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. : ๋ณธ๋ฌธ๊ณผ ๊ฐ„์ ‘์ ์œผ๋กœ ๊ด€๋ จ๋œ.. 2023. 11. 22.
<div> ํƒœ๊ทธ์™€ <section> ํƒœ๊ทธ ํƒœ๊ทธ ์˜๋ฏธ: (Division) ํƒœ๊ทธ๋Š” ์˜๋ฏธ์ ์ธ ๊ฐ€์น˜๊ฐ€ ์—†๋Š” ๋ฒ”์šฉ ์ปจํ…Œ์ด๋„ˆ. ์ฃผ๋กœ ์Šคํƒ€์ผ๋ง์ด๋‚˜ ๋ ˆ์ด์•„์›ƒ ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉ ์‚ฌ์šฉ ์‚ฌ๋ก€: CSS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๊ฑฐ๋‚˜ JavaScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋™์  ์š”์†Œ๋ฅผ ์กฐ์ž‘ํ•  ๋•Œ, ๊ด€๋ จ ์š”์†Œ๋“ค์„ ๊ทธ๋ฃนํ™”ํ•˜๋Š” ๋ฐ ์ฃผ๋กœ ์‚ฌ์šฉ ์ ‘๊ทผ์„ฑ: ์Šคํฌ๋ฆฐ ๋ฆฌ๋”์™€ ๊ฐ™์€ ๋ณด์กฐ ๊ธฐ์ˆ ์—๊ฒŒ ํŠน๋ณ„ํ•œ ์˜๋ฏธ๋ฅผ ์ œ๊ณตํ•˜์ง€ ์•Š์Œ ํƒœ๊ทธ ์˜๋ฏธ: ํƒœ๊ทธ๋Š” ๋ฌธ์„œ๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋…๋ฆฝ์ ์ธ ์„น์…˜์„ ๋‚˜ํƒ€๋ƒ„. ์ด ํƒœ๊ทธ๋Š” ์˜๋ฏธ๋ก ์ ์œผ๋กœ ์ค‘์š”ํ•˜๋ฉฐ, ๋ฌธ์„œ์˜ ๊ตฌ์กฐ๋ฅผ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ํ‘œํ˜„ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋จ ์‚ฌ์šฉ ์‚ฌ๋ก€: ์›น ํŽ˜์ด์ง€ ๋‚ด์—์„œ ๋…๋ฆฝ์ ์œผ๋กœ ๊ตฌ๋ถ„๋˜๋Š” ์„น์…˜(์˜ˆ: ์ฑ•ํ„ฐ, ํƒญ, ์ฃผ์ œ๋ณ„ ๊ทธ๋ฃน ๋“ฑ)์„ ๋‚˜ํƒ€๋‚ผ ๋•Œ ์‚ฌ์šฉ. ๊ฐ ์€ ๋ณดํ†ต ์ œ๋ชฉ(, , ๋“ฑ)์„ ํฌํ•จ ์ ‘๊ทผ์„ฑ: ์Šคํฌ๋ฆฐ ๋ฆฌ๋”์™€ ๊ฐ™์€ ๋ณด์กฐ ๊ธฐ์ˆ ์€ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌธ์„œ์˜ ๊ตฌ์กฐ๋ฅผ ์‚ฌ์šฉ์ž์—๊ฒŒ .. 2023. 11. 22.
[Figma] UXUI ๋””์ž์ธ ์œ ์šฉํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ ์•„์ด์ฝ˜ ํ”Œ๋Ÿฌ๊ทธ์ธ ํ”Œ๋กœ์šฐ ์›นํŽ˜์ด์ง€์˜ ํ๋ฆ„ ํ‘œํ˜„๊ณผ ๊ธฐ๋Šฅ๋ณ„ ์ด๋™์— ๋Œ€ํ•ด ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์Œ 2023. 11. 21.