Front-End
-
ํ์๋ฆฌํ์ ์ ์ด์ฟผ๋ฆฌ๋ฅผ ํจ๊ป ์ฌ์ฉํ ๋ ๋ฐ์ํ๋ ๋ฌธ์ ์ค ํ๋๋ ์ ์ด์ฟผ๋ฆฌ ์ฝ๋๊ฐ ๋น๋๊ธฐ๋ก ์ถ๊ฐ๋์ด DOM์ด ์์ ํ ๋ก๋๋๊ธฐ ์ ์ ์คํ๋ ์ ์๋ค๋ ๊ฒ์ ๋๋ค. ์ด๋ ์ ์ด์ฟผ๋ฆฌ ์ฝ๋๊ฐ ์คํ๋๋ ์์ ์ ํด๋นํ๋ HTML ์์๊ฐ ์์ง DOM์ ์์ ์ ์๊ธฐ ๋๋ฌธ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ฑ์ด ์ฐ๊ฒฐ๋์ง ์์ ๋ฐ์ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ ๊ทผ ๋ฐฉ๋ฒ์ ๊ณ ๋ คํ ์ ์์ต๋๋ค: ๋ฌธ์ ๋ก๋ ํ ์คํ: ์ ์ด์ฟผ๋ฆฌ ์ฝ๋๋ฅผ HTML ๋ฌธ์๊ฐ ์์ ํ ๋ก๋๋ ํ์ ์คํํ๋๋ก ๋ณด์ฅํด์ผ ํฉ๋๋ค. ์ด๋ฅผ ์ํด $(document).ready()๋ $(function() {...})์ ๊ฐ์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. $(document).ready(function() { // ์ฌ๊ธฐ์ ์ ์ด์ฟผ๋ฆฌ ์ฝ๋ ์์ฑ }); ๋น๋๊ธฐ ์ฒ๋ฆฌ ์ดํ์ ์คํ..
์ ์ด์ฟผ๋ฆฌ ๋น๋๊ธฐ ๋ฌธ์ ํด๊ฒฐํ์๋ฆฌํ์ ์ ์ด์ฟผ๋ฆฌ๋ฅผ ํจ๊ป ์ฌ์ฉํ ๋ ๋ฐ์ํ๋ ๋ฌธ์ ์ค ํ๋๋ ์ ์ด์ฟผ๋ฆฌ ์ฝ๋๊ฐ ๋น๋๊ธฐ๋ก ์ถ๊ฐ๋์ด DOM์ด ์์ ํ ๋ก๋๋๊ธฐ ์ ์ ์คํ๋ ์ ์๋ค๋ ๊ฒ์ ๋๋ค. ์ด๋ ์ ์ด์ฟผ๋ฆฌ ์ฝ๋๊ฐ ์คํ๋๋ ์์ ์ ํด๋นํ๋ HTML ์์๊ฐ ์์ง DOM์ ์์ ์ ์๊ธฐ ๋๋ฌธ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ฑ์ด ์ฐ๊ฒฐ๋์ง ์์ ๋ฐ์ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ ๊ทผ ๋ฐฉ๋ฒ์ ๊ณ ๋ คํ ์ ์์ต๋๋ค: ๋ฌธ์ ๋ก๋ ํ ์คํ: ์ ์ด์ฟผ๋ฆฌ ์ฝ๋๋ฅผ HTML ๋ฌธ์๊ฐ ์์ ํ ๋ก๋๋ ํ์ ์คํํ๋๋ก ๋ณด์ฅํด์ผ ํฉ๋๋ค. ์ด๋ฅผ ์ํด $(document).ready()๋ $(function() {...})์ ๊ฐ์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. $(document).ready(function() { // ์ฌ๊ธฐ์ ์ ์ด์ฟผ๋ฆฌ ์ฝ๋ ์์ฑ }); ๋น๋๊ธฐ ์ฒ๋ฆฌ ์ดํ์ ์คํ..
2024.02.21 -
๊ฐ์ธ ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ์ ์์ ํ๋ก์ ํธ ์ค์ ์์ ๋ฐ ์ธ์ด ์ ํ ๋ฑ ๋ค์ํ ์ ํ์ง์ ๋ฒ์ ๋ฑ ๋งค ์๊ฐ ์ ํ์ ์ฐ์์ด์์ต๋๋ค. ์คํ๋ง๋ถํธ ํ๋ก์ ํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก Gradle๊ณผ JPA๋ฅผ ํ์ฉํด์ ๋ฐฑ์๋(API)๋ฅผ ๋ง๋ค๊ณ , ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ Vue ๋๋ React๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ํฉ๋๋ค. ๋ฐฑ์๋๋ Java, SpringBoot๋ก ์ ํํ๊ณ ํ๋ก ํธ์ชฝ์ Vue๋ก ์ ํ์ ํ์ง๋ง ์๋ฒ์ ์ฌ๋ฆด ๋๋ ๊ฐ์์ ์๋ฒ ๊ตฌ๋ ๋ฐฉ์์ด ์๋ ํ๋์ ํ๋ก์ ํธ์์ SpringBoot์ ๋ด์ฅ ํฐ์บฃ์ ํฌํธ๋ง ์ฌ์ฉํ๊ณ ์ถ์์ต๋๋ค. ์ด๋ฌํ ๋ฐฉ์์ด ๊ฐ๋ฅํ์ง ๊ฐ๋ฅํ๋ค๋ฉด ์ค์ ์ ์ด๋ป๊ฒ ํ๋์ง ์๋ฆฌ๋ ๋ฌด์์ธ์ง ๊ถ๊ธ์ฆ์ด ์๊ฒจ์ ์ด์ฐธ์ ํ๋ฒ ์ฐพ์๋ณด๊ณ ํ๋ก์ ํธ ์ธํ ์ ํด๋ณด๊ฒ ์ต๋๋ค. (ํ๊ฒ ๋ค๋ ๊ฑด ๋ฐฉ๋ฒ์ด ์๋ค๋ ๊ฑฐ๊ฒ ์ฃ ? ๐) #1. SPA ? SSR ?! ..
[Vue.JS] SpringBoot + Gradle ํ๋ก์ ํธ ์ฐ๋๊ฐ์ธ ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ์ ์์ ํ๋ก์ ํธ ์ค์ ์์ ๋ฐ ์ธ์ด ์ ํ ๋ฑ ๋ค์ํ ์ ํ์ง์ ๋ฒ์ ๋ฑ ๋งค ์๊ฐ ์ ํ์ ์ฐ์์ด์์ต๋๋ค. ์คํ๋ง๋ถํธ ํ๋ก์ ํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก Gradle๊ณผ JPA๋ฅผ ํ์ฉํด์ ๋ฐฑ์๋(API)๋ฅผ ๋ง๋ค๊ณ , ํ๋ฐํธ์๋ ํ๋ ์์ํฌ๋ Vue ๋๋ React๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ํฉ๋๋ค. ๋ฐฑ์๋๋ Java, SpringBoot๋ก ์ ํํ๊ณ ํ๋ก ํธ์ชฝ์ Vue๋ก ์ ํ์ ํ์ง๋ง ์๋ฒ์ ์ฌ๋ฆด ๋๋ ๊ฐ์์ ์๋ฒ ๊ตฌ๋ ๋ฐฉ์์ด ์๋ ํ๋์ ํ๋ก์ ํธ์์ SpringBoot์ ๋ด์ฅ ํฐ์บฃ์ ํฌํธ๋ง ์ฌ์ฉํ๊ณ ์ถ์์ต๋๋ค. ์ด๋ฌํ ๋ฐฉ์์ด ๊ฐ๋ฅํ์ง ๊ฐ๋ฅํ๋ค๋ฉด ์ค์ ์ ์ด๋ป๊ฒ ํ๋์ง ์๋ฆฌ๋ ๋ฌด์์ธ์ง ๊ถ๊ธ์ฆ์ด ์๊ฒจ์ ์ด์ฐธ์ ํ๋ฒ ์ฐพ์๋ณด๊ณ ํ๋ก์ ํธ ์ธํ ์ ํด๋ณด๊ฒ ์ต๋๋ค. (ํ๊ฒ ๋ค๋ ๊ฑด ๋ฐฉ๋ฒ์ด ์๋ค๋ ๊ฑฐ๊ฒ ์ฃ ? ๐) #1. SPA ? SSR ?! ..
2023.02.06 -
์ ์ฒด์ ํ ๋ฐ ์ ํํด์ ์ ๋ํ ์ฝ๋๋ฅผ ์์ฑํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. ํ๋๋ผ๋ ์ฒดํฌํด์ ๋๋ฉด ์ ์ฒด์ ํ ์ฒดํฌ๋ ํด์ ๋๋ ๊ฒ๊น์ง ์์ฑ๋์์ต๋๋ค. function allCheckFunc( obj ) { $("[name=checkOne]").prop("checked", $(obj).prop("checked") ); } /* ์ฒดํฌ๋ฐ์ค ์ฒดํฌ์ ์ ์ฒด์ ํ ์ฒดํฌ ์ฌ๋ถ */ function oneCheckFunc( obj ) { var allObj = $("[name=checkAll]"); var objName = $(obj).attr("name"); if( $(obj).prop("checked") ) { checkBoxLength = $("[name="+ objName +"]").length; checkedLength = $("[..
[jQuery] ์ ์ฒด์ ํ/์ ํํด์ ๊ตฌํ์ ์ฒด์ ํ ๋ฐ ์ ํํด์ ์ ๋ํ ์ฝ๋๋ฅผ ์์ฑํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. ํ๋๋ผ๋ ์ฒดํฌํด์ ๋๋ฉด ์ ์ฒด์ ํ ์ฒดํฌ๋ ํด์ ๋๋ ๊ฒ๊น์ง ์์ฑ๋์์ต๋๋ค. function allCheckFunc( obj ) { $("[name=checkOne]").prop("checked", $(obj).prop("checked") ); } /* ์ฒดํฌ๋ฐ์ค ์ฒดํฌ์ ์ ์ฒด์ ํ ์ฒดํฌ ์ฌ๋ถ */ function oneCheckFunc( obj ) { var allObj = $("[name=checkAll]"); var objName = $(obj).attr("name"); if( $(obj).prop("checked") ) { checkBoxLength = $("[name="+ objName +"]").length; checkedLength = $("[..
2023.02.04