[vue] watch / computed / watcheffect 위 키워드들은 데이터 값이 바뀔때마다 감시자 역할을 해주는 메소드들임 https://v3-docs.vuejs-korea.org/guide/essentials/watchers.html 감시자 | Vue.js v3-docs.vuejs-korea.org watch # watch 간단하게 사용하기 # 객체 감지하기 객체를 감지할때는 객체안의 요소만 감지할수는 없다. 첫번째 나열된 watch처럼 b 객체 전체를 감지해야한다. 이로 인해 특정한 데이터만 추출하여 감시하는 것이 아닌, 불필요한 데이터 전체를 감시하게 되어버리는데 이는 watch 문장을 조금 바꾸어주면 해결됨 # 기타 옵션들 ## deep deep은 배열이나 객체등 깊게 감시해주도록 나온것인데, 위에 나온대로 watch 문장을 바꾸어주니 해결됐음 v.. 2022. 1. 19. [vue] vue HTML 데이터 바인딩 (sanitize-html) v-html을 사용 div v-html="htmlString"> data() { return { htmlString: 'This is a red string.' } } 2023-01-14 v-html은 xss의 취약점이 있음 그래서 사용자로부터 입력받는 부분엔 사용하면 안됨. 만일 사용자가 라는 text값을 입력 후, 서버에 전송하여 데이터베이스에 저장하고 그걸 다른곳에서 v-html으로 호출할 시에, 실제로 스크립트가 실행됨 그런데 vue/cli@5.0.8 로 생성한 뷰 프로젝트에서는 v-html을 이용해 script태그를 넣어도 실행이 되지 않음 자체적으로 막아주게 패치됐나? 아무튼 다른 예시코드로 수정함 사용자가 click이벤트가 있는 div태그를 input으로 입력했다 가정할시, 실제로 이벤트가 .. 2022. 1. 19. [vue] vue 프로젝트 생성 # vue/cli 5.0.8 기준임 # npm init vite 명령어를 통해 vite 빌드도구를 선택할필요가 없다. ( vue/cli에서 기본적으로 vite를 선택하도록 바뀜 ) npm init vue를 입력시 아래 옵션이 제공된다. # project name # add typeScript # add jsx support : jsx 템플릿 기법을 사용할 것인지 => jsx란 리액트와 비슷하게 자바스크립형태로 템플릿을 작성함 # add Vue Router # add Pinia => 요새는 pinia로 가는것이 정배 # add vitest => 테스트 도구임 # add ESLint => 코드 검사도구 # add prettier => 코드 스타일 맞춰주는 도구 2022. 1. 18. js 배열함수 for in객체의 속성들을 반복하여 사용한다.for(const 작명 in object){}key에 대하여 반복 실행하며 value는 [object.작명] 과 같은 식으로 참조한다. for of배열 요소들을 반복하여 사용한다.for(const 작명 of array){}//기본적으로 value에 대하여 반복 실행하지만 문장을 바꿔 index참조변수도 같이 만들 수 있다.for(const [작명인덱스 , 작명값] of array.entries()){} forEach배열 요소들을 반복하여 사용한다.array.forEach(function(value, index, array) { console.log('인덱스 '+index+ ': ' +value+', 배열의 전체는: '+array);})array.for.. 2022. 1. 17. js node, npm, cli node- 자바스크립트를 서버에서도 사용할 수 있게 만든 프로그램- 서버사이드 스크립트 언어가 아닌 프로그램(환경)이다- 자바스크립트 위에서 동작하는 런타임이다런타임- 특정언어로 만든 프로그램을 실행할 수 있는 환경- 따라서 노드는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 하는 런타임이다npm(node package manager)- 자바스크립트 코드 패키지를 모아놓은 저장소cli- 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구 2022. 1. 15. js console 종류 console.assert(2 == 2, ' log ');>> 조건이 맞을때만 출력console.table(object)>> 객체를 테이블 형태로 출력console.time('start')console.timeEnd('end')>>time과 timeEnd사이의 실행시간을 측정 2022. 1. 15. 이전 1 ··· 10 11 12 13 14 15 다음
