tree-list๋ ๋ณดํต ํํ์ด์ง์ ๊ด๋ฆฌ์ ๋ชจ๋์์ ์์ฃผ๋ณด์ด์ฃ .์ฌ์ฉ์๊ฐ ์ฝ๊ฒ ์ปจํธ๋กคํ ์ ์๊ณ DOM์ ๋น ๋ฅด๊ฒ ํ์ ํ๊ธฐ ์ํด ์ด์ฉํฉ๋๋ค.๋ณธ ํผ๋๋ ๋ชจ๋ ์์ค์ฝ๋๋ฅผ ์ ๊ณตํ์ง ์์ต๋๋ค.โ๋ฐ๋ก๊ฐ๊ธฐnpm i vue-tree-list์ด๋ฒ์ ์ฌ์ฉํ npm์ vue-tree-li
๋ค์๊ณผ ๊ฐ์ด .push()๋ฅผ ํ๊ฒ๋๋ฉด ํด๋น array๋ก ์ ๋ค์ด๊ฐ์ผ ํ๋ค.๋ค์ ์ฝ๋์ ๊ฒฐ๊ณผ๋ฌผ๋ ์์ ๊ฒฐ๊ณผ๋ฌผ์ฒ๋ผ ์ ์ ์ฉ๋์ด ๋์จ๋ค๊ณ ์๊ฐํ๋ค.ํ์ง๋ง,???..๋ถ๋ช '๋ง๊ณ '๋ก ์ฝ์ ํ๋๋ฐ '๋ธ๊ธฐ'๊ฐ ๋ ๊ฐ ๋ค์ด๊ฐ๋ค.์ด ๋ถ๋ถ์ ๋ํด์ ๊ณ ๋ฏผํ ๋์ ํ ๊ฐ์ง ์์ฌ์ ๋ฐ๊ฒฌํ๋ค.์ฐธ
์ ๋ ํธ๋ ๋ผ๋์ค, ์ฒดํฌ๋ฐ์ค์ ๊ฐ์ด ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฌธ์์ด ๋๋ ๋ถ๋ฆฌ์ธ ํ์ ๊ฐ์ ๊ฐ์ง์ง๋ง v-bind ๋๋ ํฐ๋ธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ํ ์๋ฃํ์ ๊ฐ์ ๋ฐ์ธ๋ฉ ํ ์ ์์ต๋๋ค.
radio๋ฒํผ์ ๋ฐ๋์ ํ๋์ ์์๋ง ๋ด๊ธฐ ๋๋ฌธ์ v-model๋ก ์ฐ๊ฒฐ์ํจ ๋ฐ์ดํฐ๋ value ๊ฐ์ ๊ฐ์ง๊ฒ ๋ฉ๋๋ค.
์ฌ๋ฌ ๊ฐ์ ์ฒดํฌ๋ฐ์ค์ ๊ฒฝ์ฐ ๋จ์ํ "์ ํ ๋์๋ค"๊ฐ ์๋๋ผ ์ฌ๋ฌ ๊ฐ๊ฐ ์ ํ๋์๋ค๋ ์งํฉ์ ์ฑ๊ฒฉ์ ๋ํ๋ธ๋ค.v-model๋ก ๋ฐ์ธ๋ฉ ํ๊ฒ ๋๋ฉด ๋ค์๊ณผ ๊ฐ์ด checkedValues์ ๋ฐ์ดํฐ ๊ฐ์ ๋ฐฐ์ด(Array)๊ฐ ๋๋ค.๋ชจ๋ ๋ฒํผ๋ค์ด ์ผ์ ํ ์ ํ๋๋ฉฐ ๋ถ๋ฆฌ์ธ(boolean)
Carbon (ํด๋ฆญ!)ํด๋น ์ฌ์ดํธ๋ ์ฝ๋๋ฅผ ์ด์๊ฒ ์บก์ณํ ์ ์๊ฒ ๋์์ฃผ๋ ์ฌ์ดํธ์ด๋ค. ๋ฐํ์๋ฃ๋ ๊ธ ์์ฑ์ ์ฝ๋๋ฅผ ์ด๋ฏธ์งํ ์ํค๊ณ ์ถ๋ค๋ฉด ์ถ์ฒํ๋ค.Netlify (ํด๋ฆญ!)ํด๋น ์ฌ์ดํธ๋ ์นํ์ด์ง๋ฅผ ๋ฌด๋ฃ๋ก ํธ์คํ ํด์ฃผ์ด ๊ฐ๋จํ ๋ฐฐํฌ ๋ฐ ๊ณต์ ๋ฅผ ํ ์ ์๊ฒ url์ ์์ฑ์์ผ
์ฌ์ดํธGithub : ์์ค์ฝ๋ ํ์ธWeb : Netlify๋ฅผ ํ์ฉํ ๊ฒฐ๊ณผ WebSiteNetlify : ๋ฌด๋ฃ ์ ์ ํธ์คํ ์๋น์ค์์ ๋๊ตฌVSCodeVueJscore-js : ^3.6.5vue : ^2.6.11vue-router : ^3.2.0vuex : ^3.4.0๊ตฌ์ฑ1
computed๋ vue ๊ณต์ ํํ์ด์ง์์ ์ ์ค๋ช ์ด ๋์ด์๋ค.์ ๊ฐ computed๋ฅผ ์ฌ์ฉํด์ผํ ์ด์๋ก๋ ์ด 3๊ฐ์ ์ปดํฌ๋ํธ๊ฐ ์กด์ฌํ์ต๋๋ค.1\. ๋ฉ๋ด ์ถ๊ฐ ์ปดํฌ๋ํธ์์ ๋ฉ๋ด๋ฅผ ์ถ๊ฐ์ํจ๋ค.2\. ํด๋น ๋ฉ๋ด๋ ๋ฉ๋ด ์ปดํฌ๋ํธ์ ๋ฉ๋ด์์ ์ปดํฌ๋ํธ์ ๋ฐ์๋์ด์ผ ํ๋ค.๊ธฐ์กด์ v
๊ธฐ์กด์ Mapper.xml์ ๋ํด์๋ ๋ค์๊ณผ ๊ฐ์ด ํจํค์ง๋ช ์ผ๋ก resultType์ด๋ pramterType์ ๋ฐ์์์ด์ผ ํ์ต๋๋ค.Mapper.xmlresultType์ ์กฐ๊ธ ๋ ๊ฐํธํ๊ฒ ์์ฑํ๊ณ ์ ์ ๋ typeAlies๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด mybatis-config.xml
MyBatis๋ฅผ ์งํํ๋ค >์ฐธ๊ณ : ์์ธํ๊ฒ ๋์์์ต๋๋ค!seq๊ฐ intํ์ธ ๊ฒฝ์ฐ?SELECT \*FROM tableWHERE seq = ${seq}
DB๋ฅผ ์ฌ์ฉํ ๋ ๋ก๊ทธ๋ฅผ ๋ ์์ธํ๊ฒ ๋ณด์ฌ์ฃผ๊ฒ ํด์ค๋ค.์๋์ ์ฌ์ง์ ์ญ์ ๋ก๊ทธ์ธ๋ฐ ์ฟผ๋ฆฌ๋ฌธ๊ณผ ๋ฐํ๊ฐ์ ์์ธํ๊ฒ ๋ํ๋ด์ค๋ค.์ถ์ฒ : ์ฐธ๊ณ ๋งํฌ์ ๋๋ค!์์ฑ ๊ฒฝ๋ก : resources ํด๋ ๋ฐ์ฝ๋log4jdbc๋ฅผ ์ถ๊ฐํด์ค ๊ฒ์ ํ์ ํ ์ ์์ต๋๋ค.3๋ฒ๊น์ง ์ํํ๋ค๋ฉด ๊ฒฐ๊ณผ๊ฐ ๋งค
Mybatis๋ฅผ ์ฝ๊ฒMybatis๋ฅผ ์ฐ๋ํ๊ณ ์ ํ๋ฉด EgovFramework์์ ์ค์ ํ๋ ค๊ณ ํ๋ฉด ๋ณต์กํ๋ค. ๊ทธ๊ฑธ ์ํด์ ๋์จ ๊ฒ์ Spring boot์ธ๋ฐ ๋ณต์กํ ์ค์ ์ ์๋ตํ๊ณ Mybatis๋ฅผ ๋ณด๋ค ์ฝ๊ฒ ์ค์ ํ ์ ์๊ฒ ํด์ค๋ค. ๋จ Spring vs Spring-bo
Spring์ ์ ํต์ ์ธ ํ๋ ์ ์ํฌ์ด๋ฏ๋ก Spring ๋ถ์ผ์์ ๋ง์ ๋ฐ์ ์ ๋ณด์์ต๋๋ค. ๋ฐ๋ผ์ Java๋ Java EE ํ๊ฒฝ์ ํฌ๊ฒ ๊ธฐ์ฌํ ๊ฒ์ผ๋ก ์ฌ๊ฒจ์ง๋๋ค. ๊ฐ๋ฐ์๋ฅผ ์ํด ๊ฐ๋จํ๊ณ ์์ฉ ์ ์ด๋ฉฐ ์์์ ์ ์งํ๊ธฐ ์ํด Spring์ ์ฅ๊ธฐ์ ์ธ ์ด์ ์ ํญ์ ์ ์ธ๊ณ ๊ฐ๋ฐ์
Vue-CRUD ์์ ํ๊ฒฝ front-end : vsCode, @vue/cli 4.5.8 back-end : @egovFramework 3.9.0, JavaSDK 1.8 PostgreSQL ํ๋ฉด๊ตฌ์ฑ 1. ๋ก๊ทธ์ธ
vue ๊ฐ๋ฐ์๋ค์ ์ํ ๋ค์ํ UI ์ปดํฌ๋ํธ์ API๋ฅผ ์ ๊ณตํด์ฃผ๋ ํ๋ฌ๊ทธ์ธ์ด๋ค.๋ค๋น๊ฒ์ด์ UI ์ปดํฌ๋ํธ ์ค ํ๋์ด๋ฉฐ, ์๋จ ์ด๋ฏธ์ง ์ฒ๋ผ ๋ณด๋ผ์ ์นดํ ๊ณ ๋ฆฌ ๋ถ๋ถ์ ๋ํ๋ธ๋ค.vuetify ์์ค์ฝ๋ ํด๋ฆญ!
ํ๋ก๊ทธ๋๋จธ์ค ๋ฌธ์ ํ์ด level3 1> ์์ด์ง ๊ธฐ๋ก ์ฐพ๊ธฐ > > [ ๋ฌธ์ ] ์ฒ์ฌ์ง๋ณ์ผ๋ก ์ธํด ์ผ๋ถ ๋ฐ์ดํฐ๊ฐ ์ ์ค๋์์ต๋๋ค. ์ ์์ ๊ฐ ๊ธฐ๋ก์ ์๋๋ฐ, ๋ณดํธ์์ ๋ค์ด์จ ๊ธฐ๋ก์ด ์๋ ๋๋ฌผ์ ID์ ์ด๋ฆ์ ID ์์ผ๋ก ์กฐํํ๋ SQL๋ฌธ์ ์์ฑํด์ฃผ์ธ์. > [ ์ด๋ ๊ฒ
Graph API๋ Facebook ํ๋ซํผ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ๋๊ฐ๋ ๊ธฐ๋ณธ ๋ฐฉ๋ฒ์ ๋๋ค. ์ฑ์์ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ฟผ๋ฆฌํ๊ณ , ์ ์คํ ๋ฆฌ๋ฅผ ๊ฒ์ํ๊ณ , ๊ด๊ณ ๋ฅผ ๊ด๋ฆฌํ๊ณ , ์ฌ์ง์ ์ ๋ก๋ํ๊ณ , ๋ค์ํ ๊ธฐํ ์์ ์ ์ํํ๋ ๋ฐ ์ฌ์ฉํ ์์๋ HTTP ๊ธฐ๋ฐ API์ ๋๋ค
vue.config.jsํด๋น ํ๊ฒ์ด ๋์ด์ง๋ ๊ฒ์ eGovFramework์ธ sfc ํ๋ก์ ํธ๋ก ์ฐ๊ฒฐํ์์ต๋๋ค.sfc ํ๋ก์ ํธ๋ ์ฌ๋ด ํ๋ก์ ํธ์ด๋ฉฐ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ ์์ฑ์ ํ์ง ์๊ฒ ์ต๋๋ค.ํ๊ฒ์ด ๋ :8080 PORT๋ฅผ ๊ฐ์ง url์ ๋ค์๊ณผ ๊ฐ์ด ๋ณ๊ฒฝํ์ฌ ์ฌ์์ฒญ๋์ด์ง๋๋ค.
PostgreSQL์ TO_CHAR ๊ธฐ๋ฅ์ ์ด์ฉํ๋ฉด์ ์๊ฒ๋ ๊ธฐ๋ฅ์ ๋๋ค.1000์ ๋จ์๋ก ,(์ฝค๋ง)๋ฅผ ์๊ฒจ์ฃผ๊ณ ์ถ์ผ๋ฉด ๊ธฐ์กด์๋ ๋ค์๊ณผ ๊ฐ์ด ์ฌ์ฉํ์ต๋๋ค.๊ฒฐ๊ณผ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.ํด๋น ๊ฒฐ๊ณผ์์๋ ์ฝค๋ง๋ ์ ๋๋ก ์๋ํ์ง๋ง ์ ๋ถ๋ถ์ ๊ณต๋ฐฑ์ด ๋ค์ด๊ฐ๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
ํ๋ก๊ทธ๋๋จธ์ค level1 ๋ฌธ์ ์ธ ๋ ๊ฐ ๋ฝ์์ ๋ํ๊ธฐ ๋ฌธ์ ์ ๋๋ค.๋ฌธ์ ๋ฅผ ๊ฐ๋จํ ์๊ฐํ์๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.๋ง๊ทธ๋๋ก ๋ ๊ฐ๋ฅผ ๋ฝ์์ ๋ํ๊ณ ์ค๋ณต์ ๊ฑฐ์ ์ค๋ฆ์ฐจ์ ์ ๋ ฌ์ ์์ผ์ฃผ์ด์ผ ํ์ต๋๋ค.๊ฒฐ๊ณผ์ ๋ํ ์๊ฐ๋น์จ๋ง ์ ๋๋ก ํ๊ฒ ์ต๋๋ค.contains( )๋ ์์๊ฐ ์์ผ๋ฉด tru