루이의 개발 블로그

Object.entries(state.incarInputs).forEach(([key, value]) => { validData.incar[key] = {}; if ("value" in value) { validData.incar[key].value = value.value; } if ("file" in value) { validData.incar[key].file = value.file; } });해당 코드를 보면 forEach를 통해 value를 받아오고. 그 안에서 얻은 값을 가지고 value.value 와 같이 접근한다. 처음에 이 부분이 좀 마음에 들지 않았지만 달리 방법이 없다 생각하여 이대로 진행했다. 하지만 그런 생..

({ incar }) => (workDir) => { // 필터링된 파일 리스트를 가져오는 함수 정의 const copyFiles = Object.values(incar.inputs) .filter((input) => input.file?.value?.length > 0)해당 로직을 보면 incar로 불러온 다음 incar.inputs를 사용하는것을 볼 수 있다. 나는 이렇게 사용해야만 하는 줄 알았다. 문득 그 안에있는 자식을 바로 구조분해할당으로 바로 얻을수는 없을까? 하고 알아본 결과 다음과 같은 방법으로 가능하다는 것을 알게 되었다.{incar:{inputs}} 그냥 오브젝트 구조를 그리고 어떤 속성을 가져올지 적으면 되는것이였다.({ incar:..

화살표 함수는 정의에 따라 this가 가리키는게 달라진다. 그러니 다음과 같은 상황을 예시로 보자data(){ userInfo:{ name:"It's me Mario" }}computed:{ test:()=>()=>this.userInfo}우리는 this.userInfo를 출력했으니 값은 name:"It's me Mario" 이 나올거라고 예상하지만 실은 틀렸다. 실제로 이 상황에서는 에러를 발생 시킨다. 이유는 화살표 함수의 this는 undefined이기 때문이다.왜 이렇게 되는 걸까?일단 화살표 함수는 자체 this가 존재하지 않기 때문에 상위에 있는 this를 사용한다고 한다.이런 상황에서 this.userInfo 를 호출하면 this 또한 존재하지 않기에 undefined을 출력하게되고, un..

상황 vuetify 컴포넌트의 디자인을 수정하려고 하는데 수정이 안 될 때가 간혹 있다. 아니 엄청 많다. 왜 그런 문제가 있고 어떻게 해결해야하는지에 대한 내용이 기술. vuetify 와 같이 번들링된 라이브러리 소스 코드를 수정하는 것은 쉽지 않은 일이다. 이것을 수정하기 위해선 보통 전역 스타일 변경을 통해 변경이 가능하다. 하지만 이렇게 되면 모든 스타일시트에 영향이 가므로 scoped 를 사용하여 선언 한다. scoped를 사용한 CSS scoped 를 사용하여 배경색을 변경한 모습 해당 코드는 현재 파일에만 영향이가고 나머지 파일의 a태그에는 영향을 주지않는다. 그렇다면 이 상황에서 vuetify 의 컴포넌트의 디자인을 수정하게 되면 어떻게 될까? 놀랍게도 적용이 안 되는 경우가 많다. 그렇다..

속성 inline block inline-block inline 속성은 텍스트 속성과 유사하다. 텍스트 속성과 유사한 태그 리스트 span a img strong 기타 등등 ... 여기서 말하는 텍스트 속성이란, 텍스트 길이 만큼 공간을 차지하는 것을 의미한다. div 같은 태그 경우. 텍스트 길이 만큼 공간을 차지 하는게 아닌 한 라인 모든 공간을 차지하는 반면 텍스트 속성은 텍스트 길이, 크기 만큼 공간을 차지한다. inline 속성은 텍스트로 보기 때문에. font-size 를 사용하여 크기를 조절 할 수 있다. 단, width, height와 같은 속성은 사용 할 수 없다. 텍스트 속성에다가 width, height 속성을 사용한 것을 본 적이 있는가?! block 속성은 쌓이는 상자 와 유사하..