자몽아이스티맛의 기술 블로그 자몽아이스티맛의 기술 블로그

[CSS 플러그인] VS Color-picker개발을 하다보면 CSS 속성으로 color 속성을 정의해야할 때가 있다.그럴 때 웹으로 RGB 색상표를 열어서 보곤 하는데 그게 엄청 귀찮은 일이다... Atom도 그랬지만 VSCode도 색상표를 직접 호출할 수 있는 플러그인이 있다. 이제 색상 정의하기 편해지겠지..?

[Vue 플러그인] Vetur뷰 프레임워크에 대해서 다양한 기능들을 제공하는 플러그인이다..vue 파일에 대한 코드들을 만들어주는 기능을 비롯해 디버깅, 자동 완성 등등을 지원한다. .vue 파일에서 scaffold를 입력하면 template 태그, script 태그, style 태그를 기본적으로 만들어준다. [Vue 플러그인] Vue 2 SnippetsVetur만 사용했을 때 모든 기능들에 Snippet이 적용되진 않더라.EX) 뷰 인스턴스에서 components 속성을 정의하기 위해서 자동 완성이 표현되지 않는다던가... 그래서 그런 부분들을 해소 시켜주는 플러그인으로 이것을 사용한다. 속성들에 대한 snippet 이나 인스턴스 생성 기능을 제공해준다.

[HTML 플러그인] Auto Rename TagHTML을 짜다보면 태그를 잘못 작성하거나 다른 태그로 변경하고 싶을 때가 있다.그럴 때 마다 열고 닫는 태그를 지우고 새로 작성하는게 여간 귀찮은게 아니다. 그럴 때 Auto Rename Tag 플러그인을 사용하면 매우 도움이 된다. 이미 작성한 태그여도 열거나 닫은 태그를 수정하면 반대쪽이 함께 수정된다!

Spring Boot와 Vue.js 연동하기지금까지 Vue.js를 배웠으니 Spring Boot 프레임워크 프로젝트와 연동하여 사용해보자. Vue.js Webpack 템플릿 만들기Spring boot 프로젝트 루트 폴더에 뷰 템플릿을 구성할 폴더 하나를 생성한다. 터미널에서 해당 폴더로 접근한 뒤 vue init webpack 으로 webpack 템플릿을 구성한다. 작업이 완료되면 아래와 같이 웹팩 템플릿 구조가 만들어진다. 웹팩 번들링 output 설정하기뷰로 작성한 코드들을 번들링하고 번들링된 결과를 어느 위치에 뽑아낼 것인지를 정해야한다. Spring Boot는 자동 설정에 의해 src/main/resources에서 static에 index.html과 정적 파일들(js, css, image)을 인식..

[인프런] 캡틴판교(장기효) - 쉽게 배우는 Webpack회사에서 장기효님의 '누구나 다루기 쉬운 Vue.js 입문 - 3시간 안에 배우기' 강좌를 듣기 전에 웹팩 강좌를 먼저 듣게 되었다. 이거 사실 진짜 학습 순서가 잘못되었다. 만약 웹팩에 대한 강의를 듣고 싶다면 우선 프론트엔드 프레임워크 강좌를 먼저 들어라.프론트엔드 프레임워크로 만든 애플리케이션을 빌드하기 위해서 필요한 것이 웹팩인데, 웹팩을 먼저 배우니 이게 어디에 쓰이는지 바로 알 수가 없어서 난해한 문제가 발생한다. 그러니 만약 웹팩을 배우려는 생각을 하고 있다면, 먼저 프론트엔드 프레임워크 강좌를 듣길 바란다. 어쨌든, 이 강좌는 웹팩에 대한 기본적인 설명, 사용 방법, 웹팩 설정 파일에 대한 구조 설명 등을 알려준다. 충분한 시간으로(..

캡틴 판교 (장기효) - Do it! Vue.js 입문2월 27일인 수요일에 읽기 시작해서 3월 3일인 일요일 오늘 모든 내용을 읽었다. 회사에서 향후 Vue 프레임워크를 통해 프로젝트를 개발하는 것을 목표로 하고 있어서 Vue를 알게되고 배우는 기회가 되었다. 기존에 프론트엔드 프레임워크에 관심이 있었으나 리액트를 배워야 할지 뷰를 배워야할지 앵귤러를 배워야할지 고민은 하고 있었다.그러다 회사에서 뷰를 알게되고, 뷰의 진입장벽이 낮다는 점, 뷰가 앵귤러와 리액트 프레임워크들의 장점들을 모아다 만들어놓은 프레임워크라는 점을 알게되었고 '그럼 나도 할 수 있지 않을까?' 라는 생각으로 학습을 시도하게 되었다. 뷰에 대한 입문 책을 알게되고, 인프런 사이트에도 장기효님이 책을 기준으로 다양한 강의를 게시해놓..

[테마 추천] Material Syntax - dark기존 VSCode의 테마를 디폴트 (Dark +)를 쓰고 있었는데 어쩌다보니 캡틴 판교님으로부터 테마를 두개 추천받게 되었다. (너무 감사합니다!) VSCode 확장팩 검색에서 Material Syntax - dark로 검색하면 다음과 같은 테마가 검색된다. (왼쪽 = Default Dark + | 오른쪽 = Material Syntax) 백그라운드 색상은 비슷하게 검은색으로 표현되고, 전체적으로 색은 알록달록하되, 파스텔 느낌의 색상으로 표현해준다.주석의 경우 짙은 회색에 가깝게 표현되고, 문자열을 표현하는 따옴표( ' )와 백틱 ( ` )이 색상 구분이 되어 코드 읽기가 수월해졌다. [테마 추천] Night OwlVSCode 확장팩 검색에서 Nig..

뷰 프로젝트 구성 방법 HTML 파일에서 뷰 코드 작성 시의 한계점 이전까지 '뷰 애플리케이션은 여러 개의 컴포넌트로 화면을 구성하고, 페이지 사이를 이동할 때에는 라우터를 이용해야 한다.'라고 설명해왔다. 그러나 실제로 애플리케이션을 제작하다보면 다음과 같은 상황에서 파일 구조에 한계를 느끼게 된다. 다음의 예제를 보자.1234567891011121314151617181920212223242526 Vue.component('my-component', { template : ` complex markup can you figure this syntax out? this is the second list item ` }); Vue.component('your-component', { template : `..