[Spring boot] thymeleaf / css ์ ์šฉ ์•ˆ๋จ ๐Ÿ˜ก
ยท
Framework
๐Ÿ’ฅ  CSS ๊ฒฝ๋กœ ๋ฌธ์ œ ํ•ด๊ฒฐ์–ด์ œ๊นŒ์ง€๋งŒ ํ•ด๋„ ์ ์šฉ์ด ์ž˜ ๋˜์—ˆ๋˜ css / js ํŒŒ์ผ์ด ์ ์šฉ์ด ์•ˆ๋˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.(์•„๋ž˜์™€ ๊ฐ™์ด ๋˜์–ด๋ฒ„๋ฆผ)  โ˜‘๏ธ  ์›์ธ ํŒŒ์•…ํ˜„์žฌ ์‹คํ–‰ ์ค‘์ธ ํ”„๋กœ์ ํŠธ๋งŒ ๋ฌธ์ œ์ธ์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ์กด์— ๋ฐฑ์—…ํ•ด ๋‘์—ˆ๋˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹คํ–‰์‹œ์ผœ ๋ดค์ง€๋งŒ๋˜‘๊ฐ™์€ ์ƒํ™ฉ์ด ๋ฐœ์ƒํ–ˆ๋‹ค. ์„ค์ •๋œ css ๊ฒฝ๋กœ ๋ฌธ์ œ๋ผ๊ณ  ํŒ๋‹จํ–ˆ๊ณ  ๊ตฌ๊ธ€๋ง์„ ์‹œ์ž‘ํ–ˆ๋‹ค 1. CND ๋งํฌ ํ™•์ธ2. Thymeleaf์˜ ์ •์  ๋ฆฌ์†Œ์Šค ์ ์šฉ ๋ฌธ์ œ3. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ JS ํŒŒ์ผ๊ณผ CSS ํŒŒ์ผ ์ถฉ๋Œ ๋ฌธ์ œ4. ์บ์‹œ ๋ฌธ์ œ ํ•ด๊ฒฐ ๋‚˜๋ณด๋‹ค ๋จผ์ € ์ด ๋ฌธ์ œ๋ฅผ ๊ฒช์€ ๋งŽ์€ ๋ถ„๋“ค์˜ ๋ฐฉ๋ฒ•์„ ์œ„์™€ ๊ฐ™์€ ์ˆœ์„œ๋กœ ์ด ๋™์›ํ•ด๋ดค์ง€๋งŒ ... ํ•ด๊ฒฐ์ด ๋˜์ง€ ์•Š์•˜๋‹ค โœ… ๋ฌธ์ œ ํ•ด๊ฒฐcss ํŒŒ์ผ์„ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์„œ ๊ฒฝ๋กœ ํŒŒ์ผ ๋ช…์„ ๋ณ€๊ฒฝํ•ด์ฃผ์—ˆ๋”๋‹ˆ ์ •์ƒ์ ์œผ๋กœ ๋Œ์•„์™”๋‹ค..^^  ๊ธฐ์กด styles.css ํŒŒ์ผ์„ ๊ทธ..
[JavaScript] Error : querySelector() ๊ณผ null ์˜ ๋งŒ๋‚จ
ยท
JavaScript
์—๋Ÿฌ ๋ฐœ์ƒ ๐Ÿ’ฅ TodoList ์˜ ๋ฆฌ์ŠคํŠธ๋ฅผ Remove(์ œ๊ฑฐ) ํ•˜๋Š” ๊ตฌํ˜„ ๊ณผ์ •์—์„œ remove๊ฐ€ ์ œ๋Œ€๋กœ ์ง„ํ–‰๋˜์ง€ ์•Š์Œ ๐Ÿ˜ก   ์›์ธ ํŒŒ์•… โœ… Remove ๋ฒ„ํŠผ์˜ ํด๋ฆญ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ํƒœ๊ทธ์˜ action์„ ์กฐ์ •ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ตฌ์„ฑํ•จํด๋ฆญ ์ด๋ฒคํŠธ ๋ฐœ์ƒ ์‹œ POST ๋ฐฉ์‹์œผ๋กœ remove() ๋ฉ”์„œ๋“œ๋ฅผ ์ง„ํ–‰ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฉ”์‹œ์ง€ ํ™•์ธ  ๐Ÿง ์„œ๋ฒ„ ๋กœ์ง์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฒ˜๋ฆฌ ๊ณผ์ •์—์„œ ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค๊ณ  ํŒ๋‹จ ์›์ธ ๋ฐœ๊ฒฌ ๐ŸŒŸ Modify ํŽ˜์ด์ง€์—์„œ POST ๋ฐฉ์‹์œผ๋กœ Controller ์—๊ฒŒ ์ „์†ก๋˜๋Š” ๊ณผ์ •์—์„œ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ querySelector() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ์•„๋ž˜ ์ฝ”๋“œ๋กœ ์ž‘์„ฑํ–ˆ์Œ๊ทธ๋Ÿฐ๋ฐ Modify ์ˆ˜์ • ์ž…๋ ฅ ํผ(form) ๋ง๊ณ  ๋‹ค๋ฅธ ํผ์ด ์•ž์— ์กด์žฌํ–ˆ์—ˆ๋‹ค.. ๐Ÿ˜…  Document.quer..
[MyBatis] : select : Spring๊ณผ ์—ฐ๋™ ๋งˆ์ด๋ฐ”ํ‹ฐ์Šค๋กœ DB ์กฐํšŒ
ยท
Framework
1. ์–ด๋…ธํ…Œ์ด์…˜์„ ํ™œ์šฉํ•œ select ๋ฌธMyBatis ์—๋Š” @Select ์–ด๋…ธํ…Œ์ด์…˜์„ ์ด์šฉํ•ด์„œ ์ฟผ๋ฆฌ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.* ์ฃผ์˜ : ๊ตฌ๋ฌธ ๋์— ' ; ' ์„ ์ด์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.2. XML์„ ํ™œ์šฉํ•œ select ๋ฌธMyBatis๋ฅผ ์ด์šฉํ•  ๋•Œ๋Š” SQL์„ ๋ณ„๋„์˜ ํŒŒ์ผ๋กœ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค.XML ํŒŒ์ผ์— SQL ์„ ์ž‘์„ฑํ•˜๋Š” ์ด์œ ๋Š” SQL์ด ๊ธธ์–ด์ง€๋ฉด ์ด๋ฅผ ์–ด๋…ธํ…Œ์ด์…˜์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ๊ฐ€ ๋ณต์žกํ•ด์ง€๊ณ  ์–ด๋…ธํ…Œ์ด์…˜์ด ๋ณ€๊ฒฝ๋˜๋ฉดํ”„๋กœ์ ํŠธ ์ „์ฒด๋ฅผ ๋‹ค์‹œ ๋นŒ๋“œํ•˜๋Š” ์ž‘์—…์ด ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‹จ์ˆœ ํŒŒ์ผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค. XML์„ ์ž‘์„ฑํ•  ๋•Œ๋Š” ํƒœ๊ทธ์˜ namespace ์†์„ฑ์„ ๋ฐ˜๋“œ์‹œ ๋งคํผ ์ธํ„ฐํŽ˜์ด์Šค ์ด๋ฆ„๊ณผ ๋™์ผํ•˜๊ฒŒ ์ง€์ •ํ•ด์•ผ ํ•œ๋‹ค. ํƒœ๊ทธ์—๋Š” ๊ตฌ๋ฌธ์˜ ์ด๋ฆ„(id)๊ณผ ๋ฉ”์„œ๋“œ ๋ช…์„ ์ผ์น˜์‹œํ‚ค๊ณ , ๋ฐ˜ํ™˜ํƒ€์ž…(resultType)์„ ๋งž์ถฐ์ค˜์•ผ ํ•œ๋‹ค 3. ..
[Java] Lombok ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ JDBC ํ”„๋กœ๊ทธ๋ž˜๋ฐ
ยท
Java
[ Lombok ์ด๋ž€? ]@์–ด๋…ธํ…Œ์ด์…˜ ๊ธฐ๋ฐ˜์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž๋™์™„์„ฑ ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. Lombok์„ ์ด์šฉํ•˜๋ฉด Model ํด๋ž˜์Šค์˜ getter,setter ๋“ฑ ๋‹ค์–‘ํ•œ๋ฉ”์„œ๋“œ๋“ค์„ ์ž‘์„ฑํ•˜์ง€ ์•Š์•„๋„ ์ž๋™์™„์„ฑ ์‹œ์ผœ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๊ฐ€ ๊ฐ„๊ฒฐํ•˜๊ณ  ๋‹จ์ˆœํ™”๋˜๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.  [ Lombok ์‚ฌ์šฉ ์˜ˆ์ œ ]Lombok ์‚ฌ์šฉ โŒ โ˜‘๏ธ Lombok์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด Getter, Setter ๋ฉ”์„œ๋“œ๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.(์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง„๋‹ค)public class TodoDTO { private Long tno; private String title; private LocalDate dueDate; private boolean finished; public Long getTno() { ..
[JSP] ์ž๋ฐ” ๋นˆ(Java Bean) ์„ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์•ก์…˜ํƒœ๊ทธ
ยท
JSP&Servlet
์ž๋ฐ” ๋นˆ์ด๋ž€?์˜ˆ๋ฅผ๋“ค์–ด ํšŒ์› ๊ฐ€์ž… ํŽ˜์ด์ง€๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ž.์ด๋ฆ„, ์•„์ด๋””, ๋น„๋ฐ€๋ฒˆํ˜ธ ๋“ฑ ์ž…๋ ฅ ๋ฐ›์€ ์ •๋ณด๋ฅผ ์„œ๋ฒ„๋กœ ์ „๋‹ฌ์„ ํ•ด์•ผ ํ•˜๋Š”๋ฐ, ์ด๋ฅผ ๊ฐœ๋ณ„์ ์œผ๋กœ ์ „์†กํ•  ๊ฒƒ์ธ๊ฐ€?ํ•˜๋‚˜๋กœ ๋ฌถ์–ด์„œ ์ „์†กํ•  ๊ฒƒ์ธ๊ฐ€? ์„ ํƒ์„ ํ•ด์•ผํ•œ๋‹ค. ํ•˜๋‚˜๋กœ ๋ฌถ์–ด์„œ ์ „์†กํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋ณด๋‹ค ํšจ์œจ์ ์ด์ง€ ์•Š์„๊นŒ?์ด๋ ‡๊ฒŒ ๊ด€๋ จ ์žˆ๋Š” ์ •๋ณด๋ฅผ ํ•˜๋‚˜๋กœ ๋ฌถ์–ด ๊ด€๋ฆฌ  ํ•˜๊ธฐ ์œ„ํ•ด ๋‚˜์˜จ ๋งค์ปค๋‹ˆ์ฆ˜์ด ๋ฐ”๋กœ ์ž๋ฐ” ๋นˆ(Java Bean)์ด๋‹ค. ์ž๋ฐ” ๋นˆ์˜ ๊ตฌ์กฐํšŒ์› ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ Member ํด๋ž˜์Šค ์ž๋ฐ” ๋นˆ ๊ตฌ์กฐ๋Š” ๋ฉค๋ฒ„ ๋ณ€์ˆ˜, getter/setter ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ๊ฒ ๋‹ค.( ๋ฌผ๋ก  ์ถ”๊ฐ€์ ์ธ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•˜๋ฉด ์ถ”๊ฐ€ ๋ฉ”์„œ๋“œ๋ฅผ ์„ ์–ธํ•˜๋ฉด ๋œ๋‹ค. )package exercise;public class MemberBean { private String name; private String..