2025-03-24
1) 서비스 점검 모달 구현 테스트 (web)
- 기존 admin > ㅇㅇ 탭 확인
- PK값 변경하고, 점검 시간 안에 모달 잘 뜨는지 테스트
2) 카테고리 모달 - 카테고리 수정 API 연결
- 1. 수정하고자 하는 cell 더블 클릭 시, 해당 div가 input 필드로 변경되어 수정가능하도록 구현
기능 구현은 vue의 @dbclick을 사용함
- 2. 커스텀 post 요청 함수 가져다 쓰기
export async function admPost(url, params, headers = {}) { return await axios.post(url, params, {headers}); }
위와 같이 정의한 함수를 외부에서 가져다 쓸 때,
API 응답을 받아 후속처리를 해야 한다면 가져다 쓴 곳에서도 await 추가
await admPost(...); 에러처리 위해 try - catch도 써주는 게 좋음
- 3. 구현한 내용 컴포넌트화
아직 vue의 modelValue 사용이 익숙하지 않아서, 부모 자식 간 데이터 주고 받는 방법을 다시 한번 공부하면서 익혀봐야겠다.
vue에서 데이터를 주고 받는 방식 (양방향)
✅ 부모 ➡️ 자식 (props): 부모 값이 바뀌면, 자식도 자동 업데이트됨.
✅ 자식 ➡️ 부모 (emit)
- 자식 컴포넌트 내부에서 값이 바뀌면,
emit을 통해 부모에게 알림 - 부모는
v-model을 통해 자식으로부터 데이터를 받아서 값을 업데이트 v-model = "data. ko"➡️ 이와 같은 방식으로 data.ko 값을 자식에게 전달
조금 더 배워보기
watch( () => props.modelValue, (newValue) => { editValue.value = newValue; }, );
- Vue의 watch 함수를 사용하여
props.modelValue의 변화를 감지하고,editable.value를newValue로 업데이트하는 코드 - 부모에서 내려준
modelValue변경 시,editable값도 변경
🔥 어떤 상황에서 사용될까?
- v-model의 값이 변경될 때 내부 상태도 변경해야 하는 경우
- v-model이 부모 컴포넌트에서 변경되면, editable을 업데이트하여 동기화.
- props로 전달된 데이터를 로컬 상태로 유지하면서 변경 사항을 반영해야 할 때
- 부모 컴포넌트에서 modelValue를 변경하면, editable이 자동으로 변경됨.
const emit = defineEmits(["update:modelValue"]); ... emit("update: modelValue", editable.value);
👍 부모에게 데이터 전달하는 코드
부모에서 자식에게 props를 넘겨줄 때는
<EditableCell v-model="data.ko" />이런 식으로 전달해 주고, 자식은
const props = defineProps({ modelValue: String });
이렇게 props로 부모의 modelValue를 받아온다.
최종적으로 컴포넌트를 분리한 뒤, 현재 수정 중인지(더블클릭한 경우)를 체크하는 flag를 새로 만들어서, 그걸 이용해 입력 필드 노출여부까지 구현 완료.
➡️ 실제 API랑 연결해서 데이터 전송했을 때, 필드 데이터 전체 삭제되는 대참사😲 일어나서 일단 요청은 막아놓은 상태이다.
오른쪽 split 화면의 경우, API 요청이 2개가 가는데 구조가 어떻게 생긴 건지 모르겠다. 내일 선임분께 여쭤볼 예정.
3) 카테고리 모달 - input field 내부 데이터 길이에 따라 width 조절하기
➡️ 더블클릭해서 input으로 변경 시마다 테이블 너비 왔다갔다 함 -> 이건 내일 다시 수정해보기... 전반적인 html 구조를 바꿔야 할 것 같다.
➡️ input 클릭시 내부 텍스트 데이터 잘리는 문제
<input :size-"editValue.length + 10 || 1" />위와 같이 size prop을 사용해서 해결할 수 있었다. 다만 길이가 너무 긴 경우 아직도 잘리는 문제가 남아있어서, 완충용으로 10을 추가해줬다. editValue.length 값은 입력 데이터 글자 수이다.
4 ) 프로그래머스 lv1 두개 뽑아서 더하기 문제 품
function solution(numbers) { let sets = new Set(); var answer = []; for(let i = 0; i < numbers.length; i++){ for(let j = 0; j < numbers.length; j++){ if (i === j) continue; sets.add(numbers[i] + numbers[j]) } } return Array.from(sets).sort((a, b)=> a-b); }
https://school.programmers.co.kr/learn/courses/30/lessons/68644
5) 바킹독 알고리즘 강의 읽는 중
