일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- typescript
- 티스토리꾸미기
- 타입스크립트
- click and drag
- 레이아웃쪼개기
- 타입선언
- 공통컴포넌트
- returnType
- NonNullable
- utilty type
- 2022
- React.js
- 폰트적용하기
- JS console
- reactjs
- const 단언문
- 커스텀
- Chart.js
- vue.js
- 누구나 자료구조와 알고리즘
- 제네릭
- 반복줄이기
- javascript
- 리액트
- CSS
- 개발콘텐츠
- react
- TSDoc
- 성능최적화
- 타입좁히기
- Today
- Total
목록Development/Vue.js (69)
몽땅뚝딱 개발자
출처 프론트엔드 개발자를 위한 웹팩 - 인프런 | 강의 1000명이 선택한 웹팩 강의. 새롭게 나온 웹팩 버전에 맞춰 리뉴얼된 강좌입니다. 실습 중심으로 더 쉽게 웹팩을 배워보세요 :), 약 1000명이 선택한 쉽게 배우는 웹팩의 리뉴얼 강좌입니다. 더 쉽 www.inflearn.com ◽ Node.js란? 자바스크립트 실행환경이다. ◽ NPM(Node Package Manager)이란? 자바스크립트 라이브러리를 관리해주는 도구이다. npm을 설치하면 node.js도 함께 설치된다. ◽ NPM의 장점 - 라이브러리 관리가 쉽다. package.json 파일로 관리할 수 있다. - CDN 방식의 경우, 태그를 가져오는 과정이 번거롭다. ◽ NPM 명령어 npm init // npm 설정 npm init -..
에러 tab을 눌러도 들여쓰기가 안되며, 편집기의 파일이나 메뉴의 포커스만 바뀌는 상태. 해결 Ctrl + M : Toggle Use of Tab Key for Setting Focus Tab 키의 들여쓰기 기능을 포커스 설정으로 전환하는 단축키이다. 다시 Ctrl + M을 사용하여 들여쓰기 기능으로 전환하면 된다. 참고 Visual Studio Code의 단축키 모음 문서이다. Visual Studio Code Key Bindings Here you will find the complete list of key bindings for Visual Studio Code and how to change them. code.visualstudio.com 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념..
Vue는 기본문법과 그 문법을 단축하여 표현할 수 있다. 아래는 공식 사이트에 존재하는 예제이다. ◽ 표현법 // 기본문법 // 단축표현 // 동적 argument의 단축표현 ◽ 이벤트 여러개 할당하기 // @click=[method1(), method2()] 이렇게 써준다. ◽ 이벤트 핸들링 .stop: 클릭 이벤트 전파를 멈춤 (버블링 제어) .prevent: 기본 이벤트가 자동실행되는 것을 중지 .capture .self: 발생 단계에서만 이벤트를 발생시킴 .once: 이벤트를 한번만 실행 .passive ◽ 체이닝(chaining) : 이벤트 핸들링의 메소드를 조합할 수 있다. @click.prevent.self: 클릭 이벤트 발생 시 모든 엘리먼트의 기본동작을 막는다. @click.self.pr..
터미널에서 아래의 명령어를 실행한다. 포트번호는 자유롭게 설정할 수 있다. npm run serve -- --port 3000 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
◽ Auto Close Tag 태그를 자동으로 닫아준다. ◽ ESLint ES(Ecma Script, 표준 자바스크립트)와 Lint를 합친 말이다. 문법 중에 에러가있다면 표시해준다. prettier와 함께 많이 사용한다고 한다. ◽ Korean Language Pack for Visual Studio Code 한국어 팩이다. ◽ Vetur VSCode에서 지원하는 유용한 Vue 플러그인이다. 문법 작성시의 하이라이팅이나 snippet 등을 지원한다. 거의 필수적으로 설치하는데 자세한 기능은 정리 후 아래 링크를 달 예정이다. ◽ prettier 개발자마다 indent 값이나 세미콜론을 찍는 위치 등 코딩스타일이 모두 다르다. prettier는 협업할 때 좋은 확장프로그램으로, 한 사람이 친 것 처럼 코..
◽ Packaged Manager 버전 확인 -- npm의 경우 npm -v -- yarn의 경우 yarn --version ◽ Vue-cli를 이용한 프로젝트 생성 vue init [프로젝트명] [파일위치] // CLI 2 vue create [프로젝트명] // CLI 3 ◽ vue 모듈 설치 및 삭제 -- npm으로 설치하기 npm i [Module Name] npm install [Module Name] ex) npm i --save vue-router -- npm으로 전역으로 설치하기 npm install [Module Name] --global npm install [Module Name] --g ex) npm install gulp --global -- npm으로 삭제하기 npm uninsta..
◽ go()안에 인수가 없을 경우 새로고침 this.$router.go() ◽ 지정된 페이지로 이동 (라우터 name) this.$router.push('라우터이름') 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.
슬라이드를 구현하기 위해 찾은 라이브러리이다. 공식사이트에 예제가 너무 잘 나와있고 Git도 있어서 참고 가능하다. ◽ 설치(npm) npm i vueperslides # Vue 2.x. npm i vueperslides@next # Vue 3. ◽ CDN 방식 ◽ 공식사이트 Vueper Slides - Documentation Vueper Slides is a Vue JS Slideshow / Carousel antoniandre.github.io ◽ Git antoniandre/vueper-slides A touch ready and responsive slideshow / carousel for Vue & Vue 3. - antoniandre/vueper-slides github.com 개인적으로..
◽ session 설치 npm install --save vue-session ◽ session 사용하기 this.$session.set('저장할 key', '저장할 value'); this.$session.get('저장했던 key'); 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.