고양이손으로 개발

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

# 이슈 리액트 환경에서 커스텀 훅, 또는 공통 함수가 필요한 경우가 더러 있다. 커스텀 훅이란 리액트에서 사용하는 훅들 (use~ 이름의 함수들)을 제외한 사용자 정의 함수인데, 개인적으로는 쉽게 공통함수와 비슷한 결로 이해하고 있었다. 그리고 이렇게 이해한 게 문제였다,, 문제 해결 부분만 보고 싶으신 분들은 아래 #방안 부터 읽으시면 됩니다. 문제가 발생한 순서는 이렇다. 일부 페이지에서 id값을 받아 특정 텍스트로 변환하는 함수가 필요함 공통 함수만 만들면 되겠다! 커스텀 훅이 공통 함수인가? 이걸로 해보자 물론 커스텀 훅은 공통함수가 맞지만, 반대의 경우는 성립되지 않는다. 문제의 코드이다. export default function useFuction() { // 공통 함수 내용 return ..

기본적인 import import ... from '...'; import {...} from '...'; ... Dynamic (동적) import let module = await import('...'); 동적 import는 기본적으로 원하는 시기에 import가 가능하기 때문에 효율적인 초기 로딩에 도움을 준다 # 이슈 수십 개의 스크립트 데이터 테이블을 import + 페이지 진입 시 id값을 받아 해당하는 데이터를 동적으로 보여줘야 하는 상황,, dynamic import에 대해 어느 정도 알고는 있었지만 문제는 데이터가 데이터 별로 각각 파일이 있는 게 아니라 한 파일에 모두 있던 것.. // dataList.js export const data1 = { ... } export const d..