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) 바킹독 알고리즘 강의 읽는 중