[FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ์‚ญ์ œ

2022. 3. 20. 19:58ใ†Programming Project ์ž‘์—…์‹ค/๋‚ด์šฉ ์ •๋ฆฌ

728x90
๋ฐ˜์‘ํ˜•

 

 

๐Ÿง‘๐Ÿป‍๐Ÿ’ป Git Hub ์ฃผ์†Œ

 

 

 

๐Ÿ—‚ ๋ชฉ์ฐจ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - Home / Main

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ๋ชฉ๋ก ์กฐํšŒ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ์ƒ์„ธ ์กฐํšŒ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ๋“ฑ๋ก / ์ˆ˜์ •

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ์‚ญ์ œ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ๋‹ต๋ณ€ ๋“ฑ๋ก / ์ˆ˜์ •

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ๋‹ต๋ณ€ ์‚ญ์ œ

 

๐Ÿ‘จ‍๐Ÿ‘ฉ‍๐Ÿ‘ง‍๐Ÿ‘ฆ ํšŒ์› ๊ด€๋ จ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ํšŒ์› ๊ด€๋ จ : ํšŒ์› ๊ฐ€์ž…



 

- ๋ถ€ ๋ก -

[Vue.js] axios ์„ค์น˜

[FrontEnd] html Tag ์ •๋ฆฌ

[CSS] CSS ์ •๋ฆฌ

[FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - Paging ์ฒ˜๋ฆฌ

[Vue.js] ๊ธฐ์ดˆ ๊ฐœ๋… ์ •๋ฆฌ - Vue Router

 

 

 

 

 

 

๐Ÿš€ ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ - ์‚ญ์ œ

    ๐Ÿ”ฝ  ํ™”๋ฉด



 

 

    ๐Ÿ”ฝ  Source Code

DevInquryDetailView.vue - 112 ~ 119

 

DevInquryDetailView.vue - 126 ~ 144

 

DevInquryDetailView.vue - 210 ~ 222

 

 

 

 

 

    ๐Ÿ”ฝ  Code ๋ถ„์„ - ์‚ญ์ œ

๊ฒŒ์‹œ๊ธ€ ์‚ญ์ œ๋Š” ํ™”๋ฉด์ด ๋”ฐ๋กœ ์กด์žฌํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— Component๊ฐ€ ํ•„์š” ์—†๋Š” ๊ฒƒ์ด์—์š”. ์ฆ‰, Component๋Š” ํ™”๋ฉด์„ ๊ธฐ์ค€์œผ๋กœ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋˜๋Š” ๊ฒƒ์ด์—์š”. ์˜ˆ๋ฅผ ๋“ค์–ด ๋ชฉ๋ก ์กฐํšŒ๋ผ๋Š” ํ™”๋ฉด์ด ํ•„์š”ํ•˜๊ณ , ์ƒ์„ธ ์กฐํšŒ๋ผ๋Š” ํ™”๋ฉด์ด ํ•„์š”ํ•˜๋‹ค๋ฉด ํ•ด๋‹น Component๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์–ด์•ผ ํ•˜๊ฒ ์ง€๋งŒ, ์‚ญ์ œ๋ผ๋Š” ๊ฒƒ์€ ์–ด๋–ค ํ™”๋ฉด์ด ์•„๋‹ˆ๋ผ ๊ธฐ๋Šฅ์ด๊ธฐ ๋•Œ๋ฌธ์— Component๊ฐ€ ๋”ฐ๋กœ ์—†๊ณ , ์ƒ์„ธ ์กฐํšŒ์—์„œ Button์„ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด ํ•ด๋‹น ๊ธฐ๋Šฅ์ด ๋™์ž‘ํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ์ ์„ ๊ธฐ์–ตํ•˜๊ณ , ๋ถ„์„์„ ํ•ด ๋ณผ ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - 112 ~ 119

 

๋งจ ์œ„ 'ํ™”๋ฉด'์—์„œ ๋ณด์•˜๋“ฏ์ด `์ƒ์„ธ ๋ณด๊ธฐ`์—์„œ `์‚ญ์ œ` Button์„ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด ์–ด๋–ค Event๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๊ณ , ์ •๋ง ์‚ญ์ œํ•  ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•œ Popup์ฐฝ์ด ๋œจ๋Š” ๊ฒƒ์ด์—์š”.

์œ„ ์ฝ”๋“œ `DevInquryDetailView.vue - 112 ~ 119`๋ฅผ ๋ณด๊ฒŒ ๋˜๋ฉด 119๋ฒˆ์งธ๊ฐ€`์‚ญ์ œ` Logic์˜ ์‹œ์ž‘์ ์ธ ๊ฒƒ์ด์—์š”.
์ด์šฉ์ž๊ฐ€ `์‚ญ์ œ`๋ผ๋Š” Button์„ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด 119๋ฒˆ์งธ ์ค„์— <a> Tag๋ฅผ ํด๋ฆญํ•˜๊ฒŒ ๋œ ๊ฒƒ์ด๊ณ , ์ด๋ฅผ ํ†ตํ•ด Click Event๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, ์ด ๋•Œ, deletePopup์ด๋ผ๋Š” ๋ณ€์ˆ˜๊ฐ€ true๋กœ ๋ณ€ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - 126 ~ 144

127๋ฒˆ์งธ ์ค„์„ ๋ณด๊ฒŒ ๋˜๋ฉด v-show๋ฅผ ํ†ตํ•ด deletePopup ๋ณ€์ˆ˜๊ฐ€ `true`๋ผ๋ฉด Pop up ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๊ฒŒ ์ฒ˜๋ฆฌ๊ฐ€ ๋œ ๊ฒƒ์ด์—์š”.
์ด์šฉ์ž๊ฐ€ `์‚ญ์ œ` Button์„ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด P Tag๋ฅผ ํ†ตํ•ด 'ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€์„ ์‚ญ์ œ ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?' ๋ผ๊ณ  ๋ฌป๋Š” Popup์ด ๋œจ๊ฒŒ ๋˜๊ณ , ํ•ด๋‹น Popup ๋ฐ‘์—๋Š” ํ™•์ธ, ์ทจ์†Œ Button์ด ์กด์žฌํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

139๋ฒˆ์งธ `ํ™•์ธ` Button์„ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด Click Event๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ `doDelete()`๋ผ๋Š” Method๊ฐ€ ํ˜ธ์ถœ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - 210 ~ 222

 

์ตœ์ดˆ ์ด ์นœ๊ตฌ๊ฐ€ ํ˜ธ์ถœ๋˜๋ฉด Axois๋ฅผ ์ด์šฉํ•ด์„œ ํ•ด๋‹น ๊ฒŒ์‹œ๋ฌผ์„ DB์—์„œ ์ง€์šฐ๊ธฐ ์œ„ํ•ด Back End์™€ ํ†ต์‹ ์ด ํ•„์š”ํ•œ ๊ฒƒ์ด์—์š”.
๊ทธ๋ž˜์„œ 211๋ฒˆ์งธ ์ค„๊ณผ ๊ฐ™์ด devInquryDelete๋ฅผ ํ˜ธ์ถœํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, ์ด ๋•Œ ํ•˜๋‚˜์˜ ํŠน์ • ๊ฒŒ์‹œ๊ธ€๋งŒ ์‚ญ์ œ๋ฅผ ํ•ด์•ผ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€์˜ ์ผ๋ จ๋ฒˆํ˜ธ(inqrySn)์„ ์ „๋‹ฌ ํ•ด ์ฃผ๋ฉด์„œ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

devInquryApi.js

 

devInquryDelete๊ฐ€ ํ˜ธ์ถœ์ด ๋˜๋ฉด ์ด ๊ณณ์— ์˜ค๊ฒŒ ๋˜๋Š”๋ฐ, Back End Controller์— ์ง€์ •๋œ URI์— HTTP Method `delete`๋ฅผ ํ†ตํ•ด ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ๋“ค์–ด์˜จ ๊ฒŒ์‹œ๊ธ€ ์ผ๋ จ๋ฒˆํ˜ธ(inqurySn)์„ ๊ฐ™์ด ์ „๋‹ฌ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

 

   @ResponseBody @DeleteMapping("/devInqury")
    public Object devInquryDelete(@RequestBody DevInquryVO devInquryVO) throws Exception {

        log.info("DevInquryController์˜ devInquryDelete(@RequestBody DevInquryVO devInquryVO)๊ฐ€ ํ˜ธ์ถœ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!");
        log.info("Client์—์„œ ๋„˜์–ด์˜จ Data Value๋ฅผ ๋จผ์ € ํ™•์ธ ํ•˜๊ธฐ ์œ„ํ•ด ๋ฐฐ์—ด ๋ณ€์ˆ˜์— ๊ฐ’์„ ๋„ฃ๊ฒ ์Šต๋‹ˆ๋‹ค!");

        Field[] fields = devInquryVO.getClass().getDeclaredFields();

        for (Field field : fields) {

            /** ์ฐธ๊ณ  ์ž๋ฃŒ
             * @see "https://tyboss.tistory.com/entry/Java-%EC%9E%90%EB%B0%94-%EB%A6%AC%ED%94%8C%EB%A0%89%EC%85%98-reflection-setAccessible"
             */

            log.info("Java ๋ฆฌํ”Œ๋ ‰์…˜ ๊ธฐ๋ฒ• ์ค‘ setAccessible(true) ํ†ตํ•ด Field ๊ฐ์ฒด ์ž๋ฃŒํ˜• Type field์˜ ์ ‘๊ทผ์ œ์–ด ์ง€์‹œ์ž์— ์˜ํ•œ ์ œ์–ด๋ฅผ ๋ณ€๊ฒฝ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!");
            field.setAccessible(true);

            System.err.println(field.getName() + " : " + field.get(devInquryVO));

        } // for (Field field : fields) ๋

        Map<String, Object> result = new HashMap<>();

        try {

            log.info("Q&A ๊ฒŒ์‹œ๊ธ€ ์‚ญ์ œ๊ฐ€ ์‹œ์ž‘ ๋ฉ๋‹ˆ๋‹ค!");
            log.info("devInquryService.devInquryDelete(devInquryVO)๋ฅผ ํ˜ธ์ถœ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!");

            devInquryService.devInquryDelete(devInquryVO);

            log.info("๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์ด ์ •์ƒ ์ฒ˜๋ฆฌ ๋˜์—ˆ์œผ๋ฏ€๋กœ, Map result์— 200 Code๋ฅผ ๋‹ด๊ฒ ์Šต๋‹ˆ๋‹ค!");

            result.put("code", 200);

        } catch (Exception e) {

            log.info("๊ฒŒ์‹œ๊ธ€ ์‚ญ์ œ ์ค‘ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ catch๋ฌธ์ด ์‹คํ–‰ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค!");

            e.printStackTrace();

            log.warn(e.getMessage());

            log.info("Logic์ด Error๋กœ 401 Code๋ฅผ Map result์— ๋„ฃ๊ฒ ์Šต๋‹ˆ๋‹ค!");
            result.put("code", 401);

            return result;
        } // try - catch ๋

        return result;

    } // devInquryDelete(@RequestBody DevInquryVO devInquryVO) ๋

 

๊ทธ๋Ÿผ BackEnd์˜ ์œ„์˜ Controller์˜ Method๊ฐ€ ๋™์ž‘ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๊ณ , Back End์—์„œ Logic์„ ์ฒ˜๋ฆฌํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

 

DevInquryDetailView.vue - 210 ~ 222

๊ทธ๋Ÿผ ๋‹ค์‹œ ์œ„์— Code๋กœ ๋Œ์•„์™€์„œ Back End๊ฐ€ ์š”์ฒญ์„ ๋ฐ›๊ณ , ํ•ด๋‹น ๊ฒŒ์‹œ๋ฌผ์„ ์‚ญ์ œํ•˜๊ณ  ๋‚˜์„œ ์–ด๋–ค ์‘๋‹ต๊ฐ’์„ Client์—๊ฒŒ ์ „๋‹ฌ์„ ํ•ด์ฃผ์—ˆ์„ ๊ฒƒ์ธ๋ฐ, ๊ทธ ๊ฐ’์ด response์— ๋‹ด๊ธฐ๋Š” ๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿผ ์–ด๋–ค ๊ฐ’์„ Back End๋Š” ์ „๋‹ฌ์„ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ผ๊นŒ์š”?

 

Back End Response Value

 

๋ฐ”๋กœ ์ด๋ ‡๊ฒŒ `HTTP Status Code 200`๋งŒ ์ „๋‹ฌ์„ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”. ์‚ญ์ œ๊ฐ€ ์™„๋ฃŒ๊ฐ€ ๋˜์—ˆ๋‹ค๋ฉด ์ƒ์„ธ ์กฐํšŒ์— ๋ณด์—ฌ์ค„ ๊ฐ’์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋””๋ก ๊ฐ€ ์ด๋™์„ ์‹œ์ผœ์ค˜์•ผ ํ•˜๋Š”๋ฐ, ํ•ด๋‹น ๊ฒŒ์‹œํŒ์„ ์ด์šฉ์ž๊ฐ€ ๋‘˜์–ด๋ณด๊ณ  ์žˆ์—ˆ์œผ๋‹ˆ ๊ฒŒ์‹œํŒ ๋ชฉ๋ก ์กฐํšŒ๋กœ ๋‹ค์‹œ ๋ณด๋‚ด์ฃผ๋Š”๊ฒŒ ์ข‹์„ ๊ฑฐ ๊ฐ™์€ ๊ฒƒ์ด์—์š”.

๊ทธ๋ž˜์„œ 216๋ฒˆ์งธ์—์„œ goList()๋ฅผ ํ˜ธ์ถœํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

DevInquryDetailView.vue - goList()

ํ•ด๋‹น Method๊ฐ€ ํ˜ธ์ถœ๋˜๋ฉด router๋ฅผ ํ†ตํ•ด /support/devInquryList์— ์œ„์น˜ํ•œ DevInquryList Component๋ฅผ Re Renderingํ•˜๊ฒŒ ๋˜๊ณ , ๊ฒฐ๊ตญ ์ด์šฉ์ž๋Š” ๋ชฉ๋ก ์กฐํšŒ Page๋กœ ์ด๋™ํ•œ ๊ฒƒ๊ณผ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ๋ณด๊ฒŒ ๋  ๊ฒƒ์ด์—์š”.

 

๋งŒ์•ฝ ์‚ญ์ œ๊ฐ€ ์‹คํŒจ ํ–ˆ๋‹ค๋ฉด ์–ด๋–ค ์ผ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋ ๊นŒ์š”? ๐Ÿค”

DevInquryDetailView.vue - doDelete() : 217 ~ 222

์‹คํŒจ๊ฐ€ ๋œ๋‹ค๋ฉด catch๋ฌธ์— ๋“ค์–ด์˜ค๊ฒŒ ๋  ๊ฒƒ์ด๊ณ , console์— ํ•ด๋‹น error ๋‚ด์šฉ์„ ์ถœ๋ ฅํ•˜๊ฒŒ ๋  ๊ฒƒ์ด์—์š”.
๊ทธ๋ฆฌ๊ณ , ๊ฒฝ๊ณ ์ฐฝ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜๊ณ , ์–ด๋–ค ๋™์ž‘๋„ ํ•˜์ง€ ์•Š์„ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๋Œ€๋กœ ํ•ด๋‹น ๊ฒŒ์‹œ๊ธ€ ์ƒ์„ธ ์กฐํšŒ Page์— ๋‚จ๊ฒŒ ๋  ๊ฒƒ์ด์—์š”.

 

 

 

 

 

ํ•ด๋‹น Project์—์„œ ๊ฒŒ์‹œ๊ธ€์— ๋Œ€ํ•œ CRUD์— ๋Œ€ํ•œ ์ฝ”๋“œ ๋ถ„์„ ๋“ฑ์„ ๋ชจ๋‘ ๋งˆ์ณค์Šต๋‹ˆ๋‹ค!
์ด์ œ ํšŒ์› ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๊ฒŒ ๋  ๊ฒƒ์ด๊ณ , ๋‹ค๋ฅธ ๊ฒŒ์‹œํŒ์€ ์œ„ ๊ฒŒ์‹œํŒ๊ณผ ๋™์ผํ•˜๊ฒŒ ๊ตฌ์„ฑ์ด ๋  ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋”ฐ๋กœ ์ •๋ฆฌํ•˜์ง€๋Š” ์•Š์„ ๊ฒƒ์ด์—์š”.

 

 

 

 

 


 

 

 

728x90
๋ฐ˜์‘ํ˜•