dev_0hoon

- 객체의 속성명과 값 명이 동일할 때 아래와 같이 축약 가능var figures = 10;var dictionary = { //figures: figures, figures}

setup(){ const todoItems = ref([]); //methods //외부에 영향을 주지 않고 독립적인 일을 해야한다. //그러므로 바로 todoItems에 넣지않고 독립적인 array를 반환한다. function fetchTodos(){ const result = []; for(let i = 0; i setup을 사용한다고 해도 사실 methods를 사용할 수 있다. 여기에서 function을 치지 않아도 되서 훨씬 깔끔하다.. 그리고 ref로 정의한 setup의 data도 this로 접근이 가능하다는 사실..! 그래서 더 편하게 작성할 수도 있는 부분이 된다. 어느정도 methods 옵션을 사용하다가 너무 복잡해..

기존 vue2 emit에 관한 문서자료이다. compostion API에서는 어떻게 될까? 위와 같다..  이렇게 setup의 context.emit으로 올려서 기존과 같이 @하위호출메소드="현재메소드"로 연결할 수 있다.

export default { setup(){ //data const items =ref([]); //methods function fetchTodos(){ for(let i = 0; i  메소드에서 ref 변수를 접근하기 위해서는 .value로 접근할 수 있다. 다만 ref의 속성에 따라 변화가 있을 것도 같다. fetchTodos는 해당 컴포넌트가 생성될 때에 발생하도록 만드렁 뒀다.

컴포지션 api는 이렇게 옵션API를 변수와 메소드로 만들어 return을 해주면서 사용하는 것이다. return을 안주면 사용할 수가 없다.

vb 라고 입력하면 vbase로 한번에 템플릿을 만들 수 있다. 기존 vue2에서 vue를 치면 나온다고 했는데 안됐던 이유가 현재 내 버전은 vue3 였던 것!! 참고하자. 참고로 vue3는 컴포지션api를 사용하는데 모듈화로 해서 사용하면 store와 용도는 다르지만 비슷한 느낌인것 같다. 쓰임새는 각각 다르다고 한다.컴포지션 API:컴포지션 API는 Vue 3에서 새롭게 추가된 기능으로, 코드를 보다 모듈화하고 재사용 가능하게 만들어줍니다.컴포지션 API를 사용하면 로직을 관련된 부분끼리 묶어서 사용할 수 있습니다. 이는 더 작은 단위로 컴포넌트를 분리하고, 각 부분을 조합하여 필요한 로직을 만들어낼 수 있게 해줍니다.기존의 옵션 기반 API보다 유연하고 가독성이 좋습니다. 특히 대규모 애플리케이션..

먼저 prettier을 깐다. visualcode 익스텐션으로 인스톨 하면됌 .prittierrc 파일 만들기{ "singleQuote": true, "semi": true, "tabWidth": 2, "trailingComma": "all", "printWidth": 80, "bracketSpacing": true, "arrowParens": "avoid"} 가장 상단에 설정 파일 만들면 됌 그럼 이제 저장할 때 세미콜론이 자동으로 붙는다. 팀에 맞게 설정해서 사용하면 됌 npm run lint 로 lint 잘 되는지 확인하고 package.json의 scripts : format 에 맞게 prettier가 파일을 이쁘게 적용 해준다.npm run format 을 입력하면 됌  폴더 구조 ..