VueJS에서 웹어플리케이션에 스타일(style)을 적용하는 방법에 대하여 알아보고 어떻게 사용하고 활용할 수 있는 방안은 무엇인지 알아보려고합니다.# VueJS에 스타일(Style) 적용하기시작에 앞서 스타일(Style)음 무엇이고 왜 중요한지 알아야겠죠? 간략하게 알아봅니다.! 웹페이지에서 스타일 Style이란?스타일(Style)은 웹페이지를 더 이쁘게, 보기 좋게 그리고 더 편리하게 사용할 수 있도록 UI 디자인을 웹 어플리케이션에 맞게 입히는 과정이라 할 수 있습니다. 이때 css의 다양한 속성을 사용하여 적용이 가능합니다.VueJS에서는 이런 스타일은 아래와 같이 2가지 방식으로 적용할 수 있습니다.1. style 태그 내부에 선언하기vue 파일 안에 style코드를 선언하여 사용하는 방법으로 외
Last Modified : 2019-08-07 20:38:13구버전의 제이쿼리를 사용하여 작성된 코드에서는 이벤트 메소드로 live(), delegate(), bind()등을 볼 수 있습니다. 최근의 제이쿼리에는 통합 메소드 .on()이 사용되므로 이들 메소드 대신 통합 메소드를 사용하는 것이 맞겠습니다. 대부분의 이벤트 바인딩에 on() 메소드가 적용됩니다. 그렇다면 기존의 live() 메소드와 on() 메소드는 차이가 무엇인지 알아보고 여기에 대하여 알아보도록 하겠습니다.# jQuery live() 메소드는 무엇인가먼저 live() 메소드는 무엇일까요? live() 메소드는 웹문서에 존재하는 노드 요소가 현재는 존재하지 않으나 추후 이벤트 또는 비동기 방식으로 인하여 새롭게 생성되는(발생하는) 경우에 대비하여 사용됩니다. 쉽게 얘기하자면 클릭 등의 특정 이벤트를
Last Modified : 2018-07-25 23:30:35vuejs에서 클래스 이름을 저장된 scope 값에 따라서 다이나믹(dynamic)하게 적용하는 방법을 알아보려고합니다. vuejs 역시 다른 프론트엔드 엔진처럼 클래스명을 값에 따라 그때그때 다르게 적용할 수 있습니다. 이때 v-bind:class를 사용합니다.v-bind:class="{ condition }"위와 같이 조건식을 사용하여 원하는 클래스명을 추가하거나 제거할 수 있습니다. 예를들어 vuejs에서 사용되는 변수 hide의 값이 true인 경우에만 hidden이라는 클래스를 보여줄 수도 있고 아니면 status='active'인 경우에만 active 클래스명을 적용하는 것도 가능하게 됩니다. 여기서 조건식은 아주 간단하게 동작합니다.- 조건식을 사용하여 boolean값이 true인 경우에만 해당
Last Modified : 2019-01-04 00:36:06AngularJS에서 html 코드를 html 파일에서 출력하는 방법을 알아봅니다.! HTML출력시 sanitize를 사용하는 이유는?AngularJS에서 html을 출력하려면 sanitize를 거쳐야 가능합니다. 그렇지 않으면 html 태그가 적용되지 않고 그대로 화면에 출력만 될 수 있습니다. 이를 위해서 아래와 같이 $sce 서비스와 trustAsHtml() 메소드를 사용하여야합니다. 아래 예제는 이를 사용하여 html을 ng-bind-html을 사용하여 출력하는 예제입니다.# AngularJS의 $sce 그리고 ng-bind-html 예제보기div 태그내의 span 태그는 html 코드를 출력하여 보여주려는 간단한 예제입니다. 변수 trustedHtml에 보여줄 html 코드를 추가하여 이를 ng-b
Last Modified : 2017-12-16 09:42:49자바스크립트의 함수 메소드 중 하나인 bind()에 대하여 알아봅니다.# 자바스크립트 함수 호출하기, bind()자바스크립트에서 함수를 호출 할 경우 bind() 메소드를 사용할 수 있습니다. 만약 어떤 함수가 있을 때 이 함수를 실행하기 위해서 bind()를 사용하면 어떻게 될까요? 이 경우 bind()는 새로운 함수를 반환하게 됩니다. 이는 함수를 실행하기 위해 () 소괄호를 사용하는 것과는 차이점, 다른 특징을 가질 수 있습니다. 즉, call(), apply()처럼 this를 지정할 수도 있고 또한 원하는 인자를 전달할 수도 있습니다. 이런 이유로 bind()가 사용됩니다. 그럼 간단한 사용 문법은 아래와 같습니다.Function.bind(thisArg, [arg1, arg2, ...])- thisA
Last Modified : 2021-04-25 11:31:15AngularJS의 가장 큰 장점은 손쉽게 Two-way binding(양방향 바인딩)을 사용할 수 있다는 점이다. 데이터, 즉 모델값을 뷰에 바인딩하기 위하여 단방향, 양방향 바인딩을 사용하는데 이 둘의 차이점은 다음과 같다.# 단방향과 양방향 바인딩의 차이점i. 단방향 바인딩(one-way binding); 단방향 바인딩은 처음 모델이 가진 값을 뷰에 표현하고 나중에 모델이 변경되더라도 업데이트 되지 않는다.ii. 양방향 바인딩(two-way binding); 양방향 바인딩은 모델을 뷰에 바인딩함과 동시에 이후 모델이 변경되는 경우를 감지하여 지속적으로 뷰를 업데이트 해준다.이 둘의 가장 큰 차이점은 모델값이 변경에 따라 뷰 콘텐츠를 계속해서 업데이트 할 것인가이다. 사실 모두 양방향으로 설정해둔다 해도
Last Modified : 2017-01-25 17:05:43