Web/Vue5 Vue cli eslint+prettier 탭이나 간격 오류 발생시 위 사진 처럼 prettier + eslint 사용시 텝이 잡혀있지 않지만 오류가 굉장히 많이 발생하는데 설정으로 tabWidth 80이나 tabsize 2로 설정해도 오류가 발생됩니다. 이런상태에서 아래 코드를 eslint설정 파일에 rull 아래 객체로 넣어주면 오류가 해결됩니다. 굉장히 많은 사람들의 해결법을 봤지만 이처럼 해결되는것 못봐서 글 작성 해봅니다 ㅜㅜ.. "prettier/prettier": [ "error", { singleQuote: false, semi: true, tabWidth: 2, trailingComma: "all", printWidth: 80, bracketSpacing: true, arrowParens: "always", endOfLine: "auto", useTabs.. 2022. 5. 17. Vue computed속성 vs watch속성 Vue computed속성 vs watch속성 computed속성 특정 데이터의 변경사항을 실시간으로 처리 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환 setter와 getter를 직접 지정할 수 있음 작성은 method 형태로 작성하지만 Vue에서 proxy처리하여 property처럼 사용 Vue watch Vue Instance의 특정 property가 변경될 때 실행할 콜백 함수 설정 computed는 종속된 데이터가 변경되었을 경우 그 데이터를 다시 계산하여 캐싱한다. watch의 경우 data가 변경되었을 경우 다른 data를 변경하는 작업을 한다. 2022. 5. 16. Vue 디렉티브 Vue 디렉티브 디렉티브는 v-접두사가 있는 특수 속성 디렉티브 속성 값은 단일 javaScript표현식이 된다 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용 v-once 데이터 변경 시 업데이트 되지 않은 일회성 보간을 수행 ex) 다시는 변경되지 않음{{msg}} v-text innerText 속성에 연결 태그 문자열을 html 인코딩하여 나타내기 떄문에 화면에는 태그 문자열이 그대로 나타남 v-html 이중 중괄호는 html이 아닌 일반 텍스트로 데이터를 해석 실제 html 출력하려면 v-html 디렉티브를 사용 XSS 공격에 취약하여 꼭 필요한 경우가 아니라면 v-text를 사용 추천 ex 데이터안 html태그 자동으로 변환 v-model 양방향 바인딩 처리를.. 2022. 5. 16. Vue Life Cycle 간단정리 Vue Life Cycle 라이프 사이클은 크게 나누면 생성, 부착, 갱신, 소멸의 4단계로 이루어짐 life cycle 속성 1. beforeCreate Vue Instance가 생성되고 각 정보의 설정 전에 호출 DOM과 같은 화면요소에 접근 불가 2. Created Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출 Instance가 화면에 부착하기 전이기 때문에 template 속성에 정의된 DOM요소는 접근 불가. 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다(게시판 글목록 페이지 접근시 글정보) 3.beforeMount 마운트가 시작되기 전에 호출 4.mounted 지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출 template 속성에 정.. 2022. 5. 16. Vue instance 속성 간단정리 Vue instance 속성 el Vue가 적용될 요소 지정. data Vue에서 사용되는 정보 저장. 객체 또는 함수 형태 template 화면에 표시할 html,css등 마크업 요소를 정의하는 속성 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다. methods 화면 로직 제어와 관계된 method를 정의하는 속성 마우스 클릭이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가 created 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의 2022. 5. 16. 이전 1 다음
