LATEST POSTs 최근 등록된 포스팅 목록 최신순

---

인기순

• vuejs [VueJS] scoped css를 이해하기 및 예제보기 VueJS에 CSS를 스타일을 적용하는 방법 중 편리한 Scoped CSS 기능에 대하여 알아보고 관련된 예제를 만들어 봅니다.! VueJS에서 Scoped CSS는?Vue를 사용하는 프로젝트는 다수의 컴포넌트를 사용하여 하나의 앱을 구현하게 됩니다. 이 경우 각각의 컴포넌트에 선언된 스타일이 의도하지 않거나 실수에 의하여 다른 컴포넌트에 영향을 줄 수 있겠죠. 이

  View : 781 / 2021-10-19
• vuejs [VueJS] v-slot을 사용하여 컴포넌트에 템플릿 추가하는 방법과 slot exist 확인하기 VueJS에서 하위 컴포넌트로 데이터를 전달하는 방법도 있지만 원하는 템플릿, 태그 등을 추가하는 것도 가능합니다. 이 경우 잘 알려진 방법으로 slot을 사용하는 방법이 있습니다. 아래는 VueJS에서 slot을 사용하는 방법에 대하여 알아보려고 합니다.# VueJS에서 하

  View : 1780 / 2021-07-27
  
• vuejs [VueJS] provide, inject 사용하는 방법 알아보기 VueJS에서 컴포넌트 사이의 데이터를 전달하는 방법중 하나인 Provide / Inject 방법에 대하여 알아봅니다.# VueJS Provide와 Inject 사용하기VueJS에는 다양한 성격의 데이터들이 존재하는데요 ~ 이 데이터들을 각각의 컴포넌트 사이에 주고 받기 위한 방법으로 props를 사용하는 방법이 대표적입니다. 예를들어 name prop에 "abc" 값을 전달하기 위해서 아래처럼 사용합니다.<div clas

  View : 802 / 2021-05-07
• vuejs [VueJS] 드래그앤드랍 구현 라이브러리, vuedraggable VueJS를 사용하는 프로젝트에서 드래그앤 드랍 구현이 필요한 경우 많이 사용되는 라이브러리, 패키지인 vuedraggable에 대하여 알아봅니다.! vuedraggable을 사용하는 이유는?

  View : 1937 / 2021-05-07
  
• vuejs VueJS CSS 스타일의 모듈화 사용하기 VueJS에서 style을 선언하는 방법 중 아래처럼 컴포넌트에 css style을 모듈화하여 사용하는 방법이 가능합니다. 이와 같은 방법은 앱 전체보다는 특정 기능의 컴포넌트 작성시 디펜던시를 최소화하는 장점이 있습니다. 그럼 아래의 코드를 먼저 봐주세요.# vueJS 스타일 모듈화 적용하기아래 코드는 vue 컴포넌트에 사용된 style 요소로 <s

  View : 914 / 2020-11-26
• vuejs vue-cli-service 에러 - 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다 VueJS를 사용하는 앱에서 vue-cli-service를 사용하여 앱을 구동할 때 다음과 같은 에러가 발생했습니다.'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.문제의 원인은 무엇이고 어떻게 해결할 수 있는지 알아봅니다.! 어떤 상황에서 에러가 발생했을까?우선

  View : 11019 / 2020-05-18
• vuejs VueJS transition 컴포넌트 배우기, 애니메이션 VueJS를 사용하여 CSS 트랜지션(CSS Transition) 효과를 사용할 수 있는 transition 컴포넌트에 대하여 알아보려고합니다.# Vue transition 컴포넌트란?프론트 화면을 개발할 때 애니메이션 효과를 많이 사용합니다. 이 경우 가장 많이 사용되는 방법이 바로 CSS를 사

  View : 3146 / 2020-05-15
• vuejs [VueJS] 태그에 백그라운드 이미지 추가하는 방법 VueJS에서 태그 및 컴포넌트 요소에 backgroundImage 인라인 스타일을 사용하여 백그라운드 이미지를 추가하는 방법입니다.# VueJS 요소 및 컴포넌트에 백그라운드 이미지 적용하기만약

  View : 7389 / 2020-02-21
  
• vuejs [VueJS] 부모 자식 컴포넌트간의 데이터 전달하는 방법, sync modifier 수식어 사용 VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 전달하는 방법중 sync modifider(수식어)를 사용하는 방법에 대하여 알아봅니다.# sync 수식어를 사용하여 컴포넌트 데이터 전달먼저 sync 수식어는 부모와 자식 컴포넌트 사이의 양방향 데이

  View : 3958 / 2019-11-26
  
• vuejs [VueJS] 태그 이름 무시, vue 컴포넌트 제외하는 방법 VueJS에서 컴포넌트가 아닌 태그를 사용할 경우 에러가 발생합니다. 어떻게 하면 에러가 나타나지 않을까요?예를들어 <myTag></myTag>라는 태그를 웹페이지에 코드에 추가한다고 가정해봅니다.<div id="vueApp">  <myTag>Hi</myTag></div>VueJS에서는 myTag가 Vue에 등록된 태그라고 인식하고 찾기 시작할텐데

  View : 1324 / 2019-07-21
• vuejs VueJS 부모 자식 컴포넌트에 props 사용하여 양방향 바인드 방법 VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 서로 주고 받는 양방향 바인딩(Two way binding) 방법에 대하여 알아봅니다.먼저 컴포넌트 사이의 데이터를 주고 받는 방법은 여러가지가 있습니다. 전역 데이터를 사용하거나, 이벤트버스(EventBus), <span dat

  View : 13899 / 2019-04-04
  
• vuejs [VueJS] vue-router 사용하는 방법, 라우트 설정 VueJS에서 라우터(router)를 설정하고 사용하는 방법에 대하여 알아봅니다.! 라우터(Router) 설정이란?다른 프레임워크처럼 vuejs 역시 라우터를 제공합니다. 이때 VueJS에서는 Vue Router를 사용하게되는데요 라우터를 설정하게되면 특정 주소와 접근할 페이지 정보를 설정할 수 있습니다. 즉, /sample/ 이라는 주

  View : 32356 / 2019-03-25
  
• vuejs [VueJS] v-cloak 사용하는 방법, 감추기 VueJS의  v-cloak 디렉티브에 대하여 알아봅니다.VueJS에 사용되는 v-clock은 내장 디렉티브로 VueJS에서 렌더딩 되기 이 전에 브라우저에서 감추는 역할을 합니다. 여기서 감춘다는 뜻은 감추고 보여주는 역할의 v-if 또는 v-show와는 다릅니다. 어떻게 다른지 알아보기 위해 먼저 v-cloak의 동작 방식을 알아

  View : 10399 / 2019-02-10
  
• vuejs VueJS에서 스타일 적용하는 방법 알아보기  VueJS에서 웹어플리케이션에 스타일(style)을 적용하는 방법에 대하여 알아보고 어떻게 사용하고 활용할 수 있는 방안은 무엇인지 알아보려고합니다.# VueJS에 스타일(Style) 적용하기시작에 앞서 스타일(Style)음 무엇이고 왜 중요한지 알아야겠죠? 간략

  View : 14244 / 2019-02-07
  
• vuejs [VueJS] VueJS를 사용하여 앱 만들기 기초 요즘 대세인 가장 인기있는 프렘워크 중 하나... 바로 프론트엔드 프레임워크인 VueJS !!! 아래는 VueJS를 사용하여 앱을 만드는 과정을 함께 배워봅니다. 천천히 알아보시기 바랍니다.! Why Vu

  View : 2185 / 2019-01-22
  
• vuejs [VueJS] 폼 입력값의 v-model에 수식어 사용 방법, modifier VueJS의 입력폼엔 사용되는 v-model에는 modifier(수식어)가 사용될 수 있습니다. 사용 가능한 수식어는 아래와 같습니다.v-model.lazyv-model.numberv-model.trim위 수식어를 v-model 프로퍼티와 함께 사용하면 좀 더

  View : 4647 / 2019-01-22
  
• vuejs [VueJS] watch 사용 방법, 값이 달라질 때 이벤트 동작 방법 및 예제 보기 VueJS에서 설정된 변수의 값을 지속적으로 관찰하다가 만약 값이 새롭게 바뀌는 경우 특정 함수를 호출할 수 있는 방법이 있습니다. 이 방법은 watch를 등록하는 방법으로 watch는 다른 프론트엔드 프레임워크에서도 쉽게 찾을 수 있는 자주 사용되는 방법입니다.이처럼

  View : 6643 / 2019-01-17
  
• vuejs VueJS에서 setTimeout 사용하는 방법, 타이머 만들기 VueJS에서 setTimeout() 타이머 함수를 만드는 방법을 알아봅니다. 어떻게하면 될까요?# VueJS setTimeout() 함수 만드는 방법물론 VueJS에서도 setTimeout()을 사용할 수

  View : 14164 / 2019-01-17
  
• vuejs [VueJS] v-bind:class 사용방법 및 예제 vuejs에서 클래스 이름을 저장된 scope 값에 따라서 다이나믹(dynamic)하게 적용하는 방법을 알아보려고합니다. vuejs 역시 다른 프론트엔드 엔진처럼 클래스명을 값에 따라 그때그때 다르게 적용할 수 있습니다. 이때 v-bind:class를 사용합니다.<span data-cu

  View : 7988 / 2019-01-04
  
• vuejs [VueJS] 클릭 이벤트 버튼 만들기 및 예제 VueJS에서 클릭 이벤트를 동작하는 방법에 대하여 알아봅니다.클릭 이벤트는 가장 기본적인 이벤트 방법입니다. 여러가지 인터페이스에서 사용되어 빈도가 매우 높아 꼭 알아둬야 합니다. 그렇다면 클릭이벤트는 어떻게 사용할까요?# VueJS 클릭이벤트 만들기Vue

  View : 12268 / 2018-12-04
  
• vuejs [VueJS] EventBus를 사용, 컴포넌트 데이터 주고받는 통신 방법 VueJS에서 컴포넌트 상호간 데이터를 주고 받을 수 있는 이벤트버스(EventBus)를 알아봅니다. 이벤트버스는 무엇이고 언제 왜 사용할까요?# VueJS의 EventBus란VueJS의  eventBus는 앱 내부에서 컴포넌트 사이아 부모 자식 사이에 데이터를 주고 받을 수 있

  View : 7537 / 2018-12-03
• vuejs VueJS 커스텀 디렉티브 만들기  VueJS를 구성하는 컴포넌트, 필터, 스코프 등의 중요한 요소들 중 하나로 디렉티브(Directive)가 있습니다.내장된 디렉티브와는 별도이므로 커스텀 디렉티브라고 많이 부릅니다. 아래서는 VueJS에서 디렉티브는 무엇이고 어떤 역할을 할 수 있는지 알아보겠습니다.<br

  View : 1789 / 2018-10-24
  
• vuejs [VueJS] vue-for 반복문 알아보기 VueJS에서 반복문을 사용할 수 있는 v-for디렉티브를 알아보겠습니다.v-for는 템플릿에 사용하며 여러 개의 값을 가진 데이터를 루프를 사용하여 한 번에 출력할 수 있는 유용한 방법입니다. 이때 사용 방법은 아래와 같습니다.<span data-custom-style="

  View : 10915 / 2018-10-10
  
• vuejs [vuejs] v-if로 요소 보이거나 숨기는 방법 VueJS에서 컴포넌트 등의 요소를 숨기거나 보여주는 방법으로 v-if 디렉티브를 사용할 수 있습니다. 아래에서 자세히 알아봅니다.? VueJS에서 엘리먼트, 컴포넌트 등을 숨기는 방법은?일반적으로 가장 많이 사용되는 방법은 v-if 그리고 v-show

  View : 10967 / 2018-10-02
  
• vuejs vuejs에서 컴포넌트에 사용할 data 설정하는 방법 VueJS의 component에서 data를 설정, 사용하는 방법입니다.# VueJS에서 data를 설정하고 사용하는 방법만약 특정한 컴포넌트를 선언하고 내부에 data를 선언하는 경우 다음과 사용합니다.<script>  export default {    data: function() {      retu

  View : 1154 / 2018-10-02
• vuejs VueJS props를 사용할때 :을 사용하는데 콜론의 의미 VueJS에서 props로 콜론이 사용된 경우를 쉽게 볼 수 있습니다. 이때 콜론이 단독으로 사용된 경우도 볼 수 있는데 아래처럼 말이죠.여기서의 : 기호는 short-hand인 단축 키워드로 사용되었으며 이처럼 v-bind: 대신에 :을 사용할 수 있습니다. 아래의 예제코드를 보세요.<myComponent v-bind:do-something="..." /><myComponent

  View : 2526 / 2018-09-27
• vuejs VueJS에서 마우스오버 이벤트 구현, mouseover 만약 VueJS를 사용하여 마우스 오버 이벤트(MouseOver)를 구현하려면 어떻게하는지 아래에서 자세히 알아봅니다."마우스 오버는 마우스가 특정 요소의 위에 있을때 발생하는 이벤트입니다."아래는 VueJS에서 mouseover 이벤트의 구현방법으로 모두 동일하게 함수 doMouseOver를 호출합니다.@

  View : 13081 / 2018-09-19
• vuejs VueJS 라우팅 설정시 # 기호 제거하기, hashbang VueJS에서 url 주소 뒤에 붙는 # 기호를 삭제하는 방법입니다.SPA에서 해쉬뱅인 # 기호를 사용한 주소 형태가 사용됩니다. HTML5가 지원되면서 이를 제거하는 방법이 가능한데 VueJS에서는 어떻게 할까요?# VueJS 해쉬뱅 # 기호 url 제거하기아래와 같이 route 모듈이 설정된 곳에 mode값의 코드를 추가합니다

  View : 5729 / 2018-07-31
• vuejs 요즘 뜨는 VueJS 알아보기 스크린샷 출처) VueJS 공식 홈페이지VueJS의 강세가 무섭다고 할까요? 요즘은 VueJS를사용하는 프로젝트도 많고 찾는 이들도 많아진 것 같습니다. 예전에 AngularJS와 <span data-custom-style="ct0

  View : 2410 / 2018-07-28