목록웹/Vue (4)
cyphen156
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/qqQzL/btstffomYx9/ZE0oc4UwynmcfbtfTby9BK/img.jpg)
Watch와 WatchEffect 데이터 변화를 감지하여 콜백함수(함수안의 함수호출)을 가능하게 해주는 기능 사용법 watch('감시 대상 변수', (콜백함수)) watch함수 속성 immediate: DOM객체가 렌더링 되는 즉시 상태 변경을 감지(초기화를 기록함) // defalut는 false deep: 감시 대상이 객체나 리스트 일때 그 안에 있는 내용까지 감시하기 위한 옵션(메모리 값을 감시하는것이기 때문에 객체나 리스트는 값이 변경되도 해당 변수의 위치 기록하고 있기 때문 ) // defalut는 false watchEffect함수 속성 flush: 콜백 함수의 호출 시점을 정할 수 있는 속성, pre(DOM업데이트 전 호출) / post(DOM업데이트 후 호출) 예시(WatchWatchEff..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bKzyRz/btss85Gxgo7/7GfKQys1DVuNS6HSkxqUx0/img.jpg)
Single File Component vue의 컴포넌트를 하나의 파일로 나타내는 것 독립된 하나의 틀을 만들어서 관리하는 것으로 컴포넌트 하나하나가 각각의 독립된 class파일(부품들)이라고 생각하면 편하다. 앞서 장에서 말했듯 컴포넌트 파일은 , VueBind.vue 줄임말과 원래말을 입력하세요. {{ abbr }} ※ 반응형 객체(Proxy Pattern Object) 생성을 위한 ref()함수 원래 변수를 const로 선언하면 상수 변수가 되어 할당된 값의 변경을 허용하지 않는다. 하지만 ref()함수를 통해 데이터에 간접적으로 접근하여 원본 데이터를 중간에서 참조를 통해 변경할 수 있도록 허용한다. 즉, C언어에서의 Pointer와 유사한 기능을 수행한다고 보면 적절하다. vue라이브러리 안에 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/lLQCM/btssDQRkVlM/NtIrdz0x9bkIsMy7kyPAl1/img.jpg)
Index.html 프로젝트명/public폴더 내부에 존재하는 index.html 파일이다. 일반적으로 웹 애플리케이션이 브라우저에 로드될 때 가장 먼저 만나게 되는 파일이다. Header라고 보면 될 것 같다. 중간에 body를 보면 라는 코드가 존재하는데 이 코드는 나중에 불러올 vue 컴포넌트 들이 어디에 포함되야 하는지 알수 있게 해주는 이정표와 같은 역할을 하기 때문에 특별한 일이 없다면 건드리지 말자. 처음 만들어 졌을때 프로젝트 사용 lang이 비어있기 때문에 en또는 kr을 선택해서 넣어주면 된다. main.js Index.html파일이 로드된 후 두번째로 불러와지는 파일이다. 여기에는 생성될 웹 애플리케이션에 대한 것들을 실제로 불러오는 파일이다. vue라이브러리에서 createApp함수..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/lKieG/btssDJqVoM0/udjSjQM2FzD7f8O2OYXlAk/img.jpg)
Vue는 리액트와 마찬가지로 프론트엔드 라이브러리 겸 프레임워크다. 세세한 문법적인 차이점을 제외하면 거의 같다고 보면 된다. 컴포넌트 기반의 모듈형 방식으로 웹을 구조화 하는것도 비슷하다. 하지만 리액트가 계층형 구조를 갖는 단방향성의 일방적인 상태(State)의 관리를 통해 이벤트를 제어했다면 뷰는 템플릿 기반의 구조에 추가되는 적응형 구조에 가깝고, 상태의 관리가 양방향이다. 뷰의 홈페이지다. Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org) Vue.js - The Progressive JavaScript Framework | Vue.js 접근성 HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서..