웹 개발

# click 이벤트 * vue에서는 이벤트 속성앞에 on이 아니라 @ 를 붙이면 됨. Add 1 {{ counter }} # change 이벤트 * 이벤트 앞에 @이 안 붙이고 v-on:change 이렇게 붙여도 됨. * 2번째 셀렉트를 change 이벤트를 다루는 함수 없이 1번째 셀렉트 태그에서 도시값이 지정이 되면 태그내에서 그냥 그 지정된 값으로 바로 filter 함수를 통해 해당하는 도시의 동에 해당하는 option 태그를 그려낼 수 있다. 3번째 셀렉트가 바로 이 내용. ( 그렇지만 가독성을 위해서는 그냥 change 이벤트를 이용해서 표현해주는게 좋다. 그래야 내 코드를 다른 개발자가 봤을 때 이해하기 더 좋다 ) * vue에서 이벤트를 다루는 함수에 event 전달하는 법 - vue 에서..

# user Snippet 등록 * view component 파일 생성시 자주 쓰는 템플릿 구문을 따로 user snippet 에 등록해서 이후에 간단하게 만들 수 있다 아래 사진은 뷰 수업 중 유저스니핏 등록할 구문 "Generate Basic Vue Code":{ "prefix":"vue-start", "body": [ "\n\t\n\n" ], "description": "Generate Basic Vue Code" } User Snippets 클릭 후 나오는 검색창에 vue 검색 ->vue 클릭 (vue.json) 이후 컴포넌트 파일 생성후 위에서 prefix를 vue-start 로 지정해준걸 치면 아래와 같이 구문 생성완료 * 자꾸 이상하게 오류떠서 기본구문 메모 -----------------..

* 우리가 생성하는 컴포넌트들은 위에서 보이는거처럼 components , views 폴더에 생성이 됨. * views 폴더 - views (.vue 파일) 에는 화면전체에 해당하는 하나하나의 컴포넌트들이 들어오게됨. - 전페 페이지에 해당하는 컴포넌트에는 컴포넌트 네이밍 규칙이 있음. 네임에서 뒤에 꼭 View 를 붙이기로 함. * components 폴더 - 뷰는 재활용성이 뛰어난 장점을 갖고 있는데, 재사용이 가능한 컴포넌트, 화면에서의 특정 영역, 여러 페이지에서 쓰일만한 단위 ui는 이 컴포넌트 폴더에 만들게 됨. 이것도 .vue 파일 Hello {{userName}} {{message}} # 에는 html - 뷰에서는 root 태그 ,즉 내용 전체를 감싸주는 태그가 하나 있어야 함. # 에는 ..

* path는 url * 라우터에서 name 은 유일한 값을 가져야함 (중복이 있어서는 안됨). * component 실제 위에 패스로 들어왔을 때 연결시켜줄 컴포넌트에 대한 정보를 담아줌. # 라우터에 컴포넌트를 연결시켜줄 수 있는 방법 3가지 1. 1번의 방법 같은 경우에는 처음에 보여지는 페이지 라거나 반드시 보여지는 페이지같은경우 저렇게 처리함. 2. 사용자가 들어가는 빈도가 많지 않거나 페이지(자바스크립트 파일)가 사이즈가 작아서 로딩시 시간이 오래걸리지 않을거 같으면 이런 방식으로 만들어주면 됨. 3. 100% 페이지가 불려올 것 같은데 페이지의 크기가 너무 커서 로드시에 로딩시간이 오래걸릴거 같다 하는 페이지를 이 방식으로 만들어줌 위에 3가지 방식을 적절하게 잘 적용하여 라우터를 설정함으로..

---------------------------------------------------------------------------------------------------------------------------------------- #package.json (뷰 설정들이 모여있는 곳) *배포할 때 가져가야 하는 모듈들이 담기는 곳 "dependencies": { "core-js": "^3.8.3", "vue": "^3.2.13" }, *개발하는 순간에 우리가 필요한 모듈들 "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue..