고양이손으로 개발

Vue 3에서는 컴포지션 API(Composition API)를 도입하여 더 유연하고 기능적인 코드 작성을 가능하게 했다.이 API는 주로 두 가지 방법으로 사용될 수 있는데,setup() 함수와 script setup이다 두 방법은 유사하지만, 사용 방식에 있어 약간의 차이를 보인다.setup()?setup 함수는 script 블록 내부에서 정의되며, vue 컴포넌트 인스턴스가 완전히 생성되기 전에 호출된다. {{ message }} 특징은 다음과 같다.컴포넌트의 최상위에 정의되며, props와 context를 인자로 받을 수 있다템플릿에서 변수 또는 함수를 사용하려면 setup()에서 객체를 반환해야 한다.setup() 내에서 정의된 변수와 함수는 기본적으로 컴포넌트의 인스턴스와 연결되지 않는다. ..

# 이슈 아코디언이나 드롭다운 메뉴 처럼 active시 인터렉션을 적용하는 경우간단하게 transiton을 사용 할 때가 많은데,height가 auto인 요소의 경우 transition이 적용되지 않는다. # 방안 스크립트 사용이 부담되어 css만으로 처리하고 싶은 경우 max-height를 활용하는 방법이 있다. .element { overflow: hidden; height: auto; max-height: 0; /* 초기 상태 */ transition: 0.2s; } .element.active { max-height: 500px; /* (예상 최대 높이) */ } transition은 시작과 끝이 명확한 속성에 대해서 작동한다. height: auto인 경우 브라우져가 값을 가늠 할 수 없기 때문..

# 이슈 라디오 박스나 체크박스를 컴포넌트로 만드는 경우 혹은 기타 폼 요소를 컴포넌트로 만든 경우 제목과 같은 이슈를 겪을 때가 종종 있다. 현재 프로젝트에서 작업한 라디오박스가 해당 이슈를 뿜었을 때의 코드이다. {{ label }} 다음과 같이 id, for를 지정하는 경우 같은 value를 갖는 컴포넌트가 여러 개 있을 때, 모든 라디오박스가 하나의 input에만 반응하는 문제가 생긴다. # 방안 간단한 이슈이며 해결 방법도 여러가지이다. 사실 퍼블리싱만 생각하면 이슈라고 하기도 그렇지만, 이제는 개발도 같이 하는 입장이 되다 보니 나름 재밌는? 이슈라고 생각한다. 1. value를 다르게? 아무것도 모르던 시절 퍼블리싱만을 위해 이런 식으로 작업한 경우가 있었다. 폼 요소의 경우 보통 개발 데이..