VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 서로 주고 받는 양방향 바인딩(Two way binding) 방법에 대하여 알아봅니다.먼저 컴포넌트 사이의 데이터를 주고 받는 방법은 여러가지가 있습니다. 전역 데이터를 사용하거나, 이벤트버스(EventBus), Vuex 아니면 Props를 사용할 수도 있죠. 여기서 Props를 사용하는 방법이 많이 사용되는데요 ~! Props를 사용한 컴포넌트간의 데이터 전송방법부모, 자식 컴포넌트 사이에 Props를 사용하면 부모에서 자식으로 데이터를 전송할 수 있지만 반대로 자식에서 부모로 전달할 수 없는 문제가 생깁니다. 그럼 어떻게하면 해결할 수 있는지 아래에서 알아봅니다.(참고사항. Vue 2 이전에는 props를 사용하여 동일한 스코프 모델명을 사용하면 서로 양방향 데이터 전송이 가능했다고 합니다. 하지만 Deprecated 되어 현재는 불가능합니다.)# 부모 자식 컴포넌트 Props 사용시 양방향 바인드 구현하기그럼 예제를 하나 만들
2019-04-04 13:57:18css 프로퍼티인 pointer-events에 대하여 알아봅니다. 어떻게 사용하고 언제 사용할까요?# CSS Property pointer-eventscss를 사용하여 클릭이벤트를 제어할 수 있을까요? 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events입니다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다. 아래는 간단한 사용 방법입니다..prevent-click { pointer-events: none; }이 속성은 CSS3의 프로퍼티로 선택 가능한 옵션은 아래와 같이 세 가지가 있습니다.none // 클릭 이벤트를 적용하지 않음auto // 브라우저 자동으로 선택함inherit // 상속 되어짐참고로 만약 none의 값을 사용할 경우 클릭 이벤트가 동작하지 않으며 마우스 클릭과 관련된 효과 역시 동작하지 않습니다. 예를들어 :hover를 사용하는 경우에도 적용되지 않으니 참고하세요.그럼 아래에서는 예제를
2019-03-14 00:32:47다양한 언어를 제공하기 위한 방법으로 html에서 lang 어트리뷰트를 태그에 사용할 수 있습니다. 동시에 css의 lang 프로퍼티를 사용할 수 있죠. css의 프로퍼티와 html어트리뷰트를 같이 다룬 이유는 둘 다 함께 사용할 수 있기 때문입니다. 왜 그런지도 아래에서 함께 자세히 알아봅니다. # HTML lang attribute먼저 lang 어트리뷰트를 알아봅니다. 태그에 lang을 사용하면 웹에서 보여질 컨텐츠가 어떤 언어인지 알려주게됩니다. 이때 선택할 언어 코드를 값으로 사용합니다. 간단한 문법은 아래와 같습니다.<html lang="ko"> 매우 자주 볼 수 있는 코드로 여기서 ko는 korean인 한국어를 의미합니다. 위와같이 주로 태그의 제일 상위의 html 태그에 사용하였지만 어떤 태그에 사용하던 모두 가능합니다. 다만 페이지가 로딩될 때 가장 상위이면서 부모 객체인 html에 많이 사용됩니다. 몇 가지 예를들어보면 설정된 언어는 아래와 같습니다.한국어 : ko영
2019-02-27 09:25:10css를 사용하여 웹브라우저의 텍스트를 드래그하거나 더블 클릭하여 선택할 수 있습니다. 만약 텍스트 선택을 막거나 더블 클릭 등을 바꾸려면 어떻게 할 수 있는지 알아봅니다.# CSS user-select 프로퍼티 알아보기브라우저에서 드래그나 더블 클릭을 사용한 텍스트 선택 등을 막으려면 몇 가지 방법이 있습니다. 자바스크립트를 사용 할 수 있고 CSS에서도 제공하는 user-select를 사용할 수 있습니다. user-select 사용방법은 아래와 같습니다.user-select: auto | all | none | text;user-select는 이처럼 몇 가지 값을 선택할 수 있으며 기본값은 auto입니다. 각각의 옵션 기능을 알아보겠습니다.auto : Default값으로 브라우저 허용시 텍스트 선택 가능all : 더블클릭이 아닌 클릭 만으로도 선택이 가능none : 텍스트 선택 안됨text : 텍스트 선택이 가능그럼 어떻게 동작하는지 간단한 예제와 함께 아래에서 알아보세요.# C
2018-10-31 08:58:39VueJS에서 props로 콜론이 사용된 경우를 쉽게 볼 수 있습니다. 이때 콜론이 단독으로 사용된 경우도 볼 수 있는데 아래처럼 말이죠.여기서의 : 기호는 short-hand인 단축 키워드로 사용되었으며 이처럼 v-bind: 대신에 :을 사용할 수 있습니다. 아래의 예제코드를 보세요.<myComponent v-bind:do-something="..." /><myComponent :do-something="..." />위 두 컴포넌트에 사용된 prop 모두 동일합니다. 둘 다 do-something의 prop에 특정한 값을 전달하고 있습니다.: 콜론 기호를 사용하는 것과의 차이점은 문자열로 볼 것인지... 아니면 VueJS에서 사용되는 자바스크립트로 인식될 것인지의 차이입니다. 만약 :이 사용된 props 내부에서 문자열을 쓰려면 따옴표를 추가해야합니다.data: { name: "webisfree"}...<myComponent :do-something=" 'name' " />위에
2018-09-27 14:29:21react native에서 부모 컴포넌트의 값인 변수, 함수 또는 state를 자식 컴포넌트가 사용하는 방법에 대하여 알아봅니다.# react native 부모의 값 자식 컴포넌트 사용먼저 부모가 가진 값을 자식 컴포넌트가 사용하는 방법으로 props를 이용할 수 있습니다. props를 사용하여 변수나 함수를 전달할 수 있으며 이때 사용 방법은 아래와 같습니다.// app.jsimport Test from './test.js'export default Main extends React.component { render() { return ( <View> <Test sitename="'Webisfree'"></Test> </View> ) }}Main 컴포넌트는 부모 요소로 자식 컴포넌트에 props를 사용하여 "Webisfree" 값을 전달합니다. 자식 컴포넌트는 이를 받아 아래처럼 사용할 수 있습니다.var sitename = this.p
2018-08-21 12:25:01제이쿼리를 사용하여 태그 이름을 가져오는 방법을 알아봅니다. 어떻게하면 태그명을 쉽게 가져올 수 있을까요? 아래에서 알아보세요!# 제이쿼리 태그명 가져오기현재 제이쿼리에서 태그명만 가져오는 메소드는 없습니다. 다만 prop() 메소드를 사용하면 태그명을 알 수 있는 방법이 있죠. 아래 예제를 봐주세요.@ prop_tag.html<strong id="ele">Tag name</string>ele 아이디를 가진 요소가 어떤 태그를 가졌는지 아래와 같이 스크립트를 동작하여 알 수 있습니다.@ prop_tag.jsname = $('#ele').prop('tagName');console.log(name);출력된 결과는 다음과 같이 반환합니다.STRONG이처럼 현재 태그명 strong을 반환합니다. 그럼 또 다른 방법은 없을까요? 아래는 순수 자바스크립트를 사용한 방법입니다.# 순수 자바스크립트를 사용하는 방법그렇다면 순수 자바스크립트에서는 태그명을 어떻게 알 수 있을까요? 아래와 같이 tag
2017-12-31 14:43:33객체의 프로퍼티 값을 if문을 사용하여 비교하는 방법에 대하여 알아보겠습니다.먼저 객체는 프로퍼티와 메소드를 가지고 있습니다. 프로퍼티의 값에 if문을 사용하여 비교하거나 검증할 때 주의할 점이 있는데 그것은 객체가 존재하는지를 미리 확인할 필요가 있다는 점입니다.어떤 상황에서는 빈 객체가 아닌 선언되지 않은 객체가 비교대상일수도 있고 이런 경우 undefined 에러가 나타납니다. 이런 에러를 발생하지 않는 방법이 추가로 필요합니다.# 객체 프로퍼티에 if문을 사용하여 비교하는 예제보기먼저 아래와같은 예제가 있습니다. site라는 객체가 없는 경우 아래 코드를 실행하면 없는 객체 name의 프로퍼티에 if문을 적용하므로 에러가 나타납니다. if (site.name === 'webisfree') { console.log('Good!');}이런 에러를 피하기 위하여 우리는 다음과 같이 먼저 객체의 존재 여부를 확인한 후 프로퍼티를 비교하게됩니다.if (site) { if (site
2017-07-19 16:34:30자바스크립트에서 객체의 프로퍼티 값을 비교할때 가장 효과적인 방법은 무엇일까요?# 자바스크립트 객체의 프로퍼티 값 비교 방법자바스크립트에서 객체의 프로퍼티 값을 비교할때 주의할 부분이 있습니다. 객체의 존재 여부와 프로퍼티 또는 메소드가 존재하느냐 .. 그리고 타입은 일치하느냐입니다. 다시 말하면 아래를 확인해야합니다. 객체의 존재여부 체크비교 할 프로퍼티 및 메소드 체크타입의 일치 여부이때 객체 및 프로퍼티, 메소드 등이 존재하지 않는 undefined라면 코드의 실행과정에서 에러가 발생할 수 있습니다. 이에 대한 예외처리를 할 수 있으나 에러가 End 유저에게 발생하지 않도록 하려면 이를 확인 비교하는 검증과정이 필요합니다.아래는 타입 에러를 고려하지 않을 경우의 코드값입니다. 넘겨줄 파라미터의 값이 항상 정확하다면 에러는 발생하지 않을지도 모릅니다. 하지만 어떤 값이 넘어갈지는 항상 보장할 수 없으므로 여러가지를 체크 확인하기 위한 방법이 필요합니다. 만약 myObj라는 객체의
2017-06-16 15:09:15자바스크립트 event.stopPropagation() 사용하는 방법은?# event.stopPropagation() 사용하기자바스크립트에서 stopPropagation() 메서드는 event 객체의 버블링을 제거해줍니다. event.defaultPrevent()와 함께 매우 자주 사용되는 중요한 메서드입니다.여기서 event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미합니다. 이벤트는 이벤트캡쳐링과 이벤트버블링으로 나타나는데 클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상을 의미합니다.이 경우 의도하지 않은 두 번째 이벤트가 추가로 발생하여 오류가 발생할 수 있습니다. 이를 피하기 위한 방법으로 event.stopPropagation()을 사용하며 이 경우 이벤트 버블링은 Firing 하지 않아 이벤트가 발생되지 않습니다.# event.stopPropagati
2017-05-19 19:57:38자바스크립트 객체가 가진 값, 프로퍼티 및 메소드를 제거하는 방법입니다.객체의 프로퍼티, 메소드를 제거하는 방법으로 delete 키워드를 사용합니다. delete를 사용하면 선택한 프로퍼티 또는 메소드를 쉽게 제거할 수 있습니다. 그럼 아래 예제를 봐주세요.# 객체 프로퍼티, 메소드 삭제하는 방법아래의 obj라는 객체가 존재하는 경우 속성값 no를 제거하려합니다.obj = { no: 1, name: 'webisfree'}만약 no를 제거할 경우 아래와 같이 수행합니다.delete obj[no];delete obj.no;위 두 가지 모두 객체의 프로퍼티중에서 no를 제거합니다.! 객체가 상속받은 경우만약 해당 객체가 상속받은 경우라면 원래의 객체의 프로퍼티, 메소드는 그대로 존재하게 됩니다. 이를 함께 제거하려면 어떻게 할까요? 만약 객체 B가 A로부터 상속받았다면..delete Object.getPrototypeOf(B).a이제 상속한 A의 속성이 삭제됩니다. A가 삭제되면서 상
2017-05-11 19:25:17자바스크립트를 사용하여 이벤트를 구현할 때 발생가능한 문제점 중 하나로 이벤트 버블링 현상을 빼놓을 수 없을 것이다. 아래는 이벤트 버블링(Event Bubbling)이 무엇이고 왜 이런 문제가 발생하는지 알아볼 것이며 이를 해결하기 위한 방법에 대하여 예제를 통해 자세히 알아보고자 한다. 먼저 이벤트 버블링이 무엇인지 알아보자.이벤트 버블링이란이벤트 버블링은 보통 선택한 엘리먼트가 속해있는 부모요소에 의하여 발생한다. 예를들어 어떤 버튼을 클릭하려고 할때 그 버튼을 가지고 있는 부모 요소에 이미 클릭 이벤트가 존재하는 경우를 말할 수 있다. 이 경우 선택한 요소와 더불어 의도하지 않았던 부모 요소의 이벤트도 함께 실행되는 문제점을 발생시킬 수 있을 것이다. 그렇다면 이를 해결하기 위한 방법으로 어떤 방법이 있을까?그림) html 코드는 이처럼 계층형 구조를 가지므로 부모요소 간섭의 이벤트 버블링이 발생 가능함 우선 이벤트가 발생할 경우 동시에 실행된 이벤트 중에서 자식 요소를 우선
2016-06-15 15:58:17오늘 알아볼 내용은 입력폼 중 하나인 input 태그가 체크박스 또는 라디오 타입으로 어떤 값을 가지고 있을때 이를 체크하였는지 확인할 수 있는 다양한 방법에 대하여 알아보고자 한다. 방문자가 이를 클릭했을경우 이를 불러오기 위한 방법은 어떤 것이 있을까?우선 순수 자바스크립트의 방법을 알아보고 제이쿼리를 활용했을때의 방법도 알아볼 것이다. 먼저 자바스크립트를 사용한 방법을 예제와 함께 자세하게 알아보자.빨간 라인이 방문자가 클릭가능한 라디오 버튼이다.아래 방법은 순수 자바스크립트 방법을 사용한 방법이다. 사실 최근에는 제이쿼리나 기타 라이브러리를 활용하기 때문에 이 코드는 많이 사용되지 않을 수 있다. 하지만 가장 기본이 되는 방법으로 알아야 할 필요가 있을 것이다.그럼 아래 예제를 통해 자세히 알아보자... 아래 예제는 먹고 싶은 과일을 체크하는 예제이다. # input 태그체크 확인하는 예제보기이 예제는 방문자에게 먹고 싶거나 좋아하는 과일을 선택하도록 하는 설문조사 페이지의
2016-05-14 09:20:31
