2023/01/13- 2023/01/14

금요일이다!!! 오늘 일 끝나면 내일은 가족과 함께 교토여행을 가기로했다!! 후딱 일을 끝내고 가벼운 마음으로 여행을 가야겠다~

오늘의 일

새로 추가한 컬럼을 등록할 수 있게 화면에 추가와, 콤보박스 메뉴에 새로 추가한 컬럼이 나오도록 하는일이다.

(단 화면에만 보이고 실제 데이터베이스에는 기존값만 등록이 되도록한다.)

이번일은 백앤드 프론트앤드 두 곳을 다 만져야하기 때문에 재밌을거같다 ㅎㅎ 머리속에 로직이 생각났기 때문에 코딩부터 해보자!

1. vue에 화면 추가 v-row태그로 묶어 한줄에 나오게 하고 v-col의 크기를 4로 맞추어 준다. 글자 제한수는 255글자

2. data()에 이번에 추가할 5개의 목록을 변수로 추가해준뒤, 컨트롤러로 넘겨줄때 get과 put의 파라미터의 추가해준다.

3. 서버에서 request받은 새로운 파라미터를 추가하여야 하기 때문에 dto class에 파라미터 추가

4. 추가한 파라미터는 view로부터 받아 저장이 되고 받은 값을 sql에 집어넣기만하면된다. Update, Select, Insert각각 필요한 쿼리에 추가!

5. 등록 및 수정까지 되는걸 확인할 수 있다.

6. 다음은 표시 부분이다. 기존에는 밑에 빨간박스처럼 숫자만 표시 되었던걸 그 밑의 목록(이번에 새로 추가한 컬럼)이 표시되도록하자

방법은 2가지가 있다. 프론트에서 할지 백앤드에서 할지

프론트로 하면, 배열에 저장한뒤에 각각의 문자열을 합하여 새로운 배열로 저장해서 표시한다.

백앤드로 하면, key, value로 리스트를 만들어 "~~: ~~"의 완성된 형태를 보내주냐 또는 프론트 방법처럼 각각의 문자열을 합친 List를 보내줘도 된다.

나는 백앤드로 한번에 보내주는게 편할거같다. 그렇게 하면 프론트앤드 개발자가 편하지 않을까?

7. 먼저 sql로부터 데이터를 가져온 후 리스트 타입을 Key, value로 선언한다.

8. 추가한 리스트 타입에 sql로부터 받아온 데이터를 가져와 문자열을 합쳐 return하자

9. reutrn해준 리스트를 vue에 배열에 저장하여 text부분에 표시

10 구현완료

11. 수정이 필요하다. 이번 의뢰와는 관계없지만 기존 오류 해결

어려웠던 부분

백앤드에서 List형태로 넘기는 것 까지는 금방 하였지만, 넘겨 받은 값을 표시하는것이 조금 어려웠다. vue가 익숙하지 않은것도 있고, 둘다 아직 멀었지만 프론트가 백앤드에 비해 약한걸 느낀다….