오늘 컴포넌트간의 데이터 전달을 위한 props를 공부하고 있는데 갑자기 컴포넌트의 data함수 안에 있는 data 값에 어떻게 접근해야 하지 라는 궁금증이 생겨 크롬 관리자 도구에서 한시간 30분 동안 이것저것 입력해보다가 기록하고자 한다. 우선 props를 연습하기 전에 단순히 화면에 result값을 표출하는 컴포넌트를 생성하였다. 내가 원한 것은 해당 child1 컴포넌트 -> data함수 -> result2 의 데이터값을 꺼내는 것이었다. 위 소스를 통해 성공적으로 result2의 데이터를 꺼낼 수 있었다. 여기서 extendOptions를 이용하면 해당 컴포넌트의 상세 데이터를 확인 할 수 있다는 것을 알 수 있다. 해당 컴포넌트의 data함수, 컴포넌트명, 템플릿 등 다양한 정보가 여기 들어있..

javascript의 자료형 javascript에서의 변수는 언제든지 자료형(data type)이 변할 수 있다. 숫자형이었다가, 문자형이 되기도 한다. 이렇게 변수에 담겨져 있는 데이터 타입을 언제든지 바꿀 수 있는 언어를 '동적언어' 라고 한다. 1. 숫자형 숫자형은 정수 및 부동소수점 숫자를 나타낸다. 연산을 실행할 수 있다. 일반적인 숫자외에 Infinity, -Infinity, NaN과 같은 특수 숫자값이 포함된다. ＊ Infinity는 무한대를 의미한다. 어떤 값이든 0으로 나누면 Infinity값이 된다. * NaN은 연산 중 에러가 발생했을 때 뜨는 특수 숫자값이다. 예를 들면 아래와 같이 숫자가 아닌 값을 나눌때와 같은 에러 발생시 나타난다. javascript에서의 수학연산은 대체로 안..

문 문이란 어떤 작업을 수행하는 문법구조와 명령어를 의미한다. 보통 문은 세미콜론으로 구분 짓는다. 와 같이 각 문을 구분지어 실행된다. 하지만 javascript에서는 줄바꿈을 하면 세미콜론을 작성하지 않아도 정상적으로 실행이 된다. 이를 '암시적' 세미콜론 이라고 하며, 이런 동작방식을 세미콜론 자동삽입 이라고 한다. ( 연산 등의 특정문은 제외 ) 하지만 몇몇 예외 조건들이 있고 줄바꿈을 하더라도 기본적으로 세미콜론을 붙이는 것이 좋다. ----------------------------------------------------------------------------------------------------------------------------------- 엄격모드('use strict..

ECMAScript(javaScript) 메모 엔진 동작원리 1. 엔진(브라우저라면 내장엔진)이 스크립트을 읽음 = 파싱 2. 스크립트를 기계어로 변환 = 컴파일 3. 기계어로 전환 된 코드를 실행 내장엔진 종류 1. V8 : Chrome, Opera 2. spiderMonkey : Firefox 3. Trident or Chakra : IE javaScript의 강점 1. HTML과 CSS를 완전히 통합할 수 있음. 2. 간단한 일은 간단하게 처리 할 수 있게 해줌. 3. 모든 주요 브라우저에서 지원하고, 기본언어로 사용됨 1. 태그 안에 javascript 코드를 입력하면 안에 있는 코드는 엔진에 의해 자동으로 실행됨(엔진 동작원리 참조) 2. 태그 안에 type="text/javascript"와 같..

vue를 이용하여 게시판을 만들 때 아래의 [글 작성] 버튼을 누르면 글작성 View가 표출되도록 하고자 한다. 현재 'v-if 디렉티브' 대신 'v-show 디렉티브'를 사용하여 이미 글 작성 View는 랜더링이 되어있지만 스타일의 display가 none인 상태로 화면상에만 보이지 않는 상태이다. 그렇다면 [글 작성] 버튼을 누르면 v-show에 있는 data값을 false에서 true로 변경해주면 글 작성 View가 표출될 것이다. 위와 같이 data 객체 안에 showRegi라는 data를 기본값으로 false로 선언해주면 우선 랜더링이 되었을때는 화면에 글작성 화면이 보이지 않는다. 하지만 글 작성 버튼을 눌렀을 때 regiWindow라는 메서드가 호출 되면서 showRegi의 값을 true로 ..

Vue와 배열만을 이용하여 간단히 게시판을 만들면서 Vue를 공부하고 있던 중 Vue의 디렉티브 중 하나인 v-model을 이용하여 입력한 내용을 배열에 추가하는 작업을 하고 있었다.. 그런데 내용이 잘 추가 되지 않아 한번 정리하고자 한다. v-model은 v-bind와 같이 데이터를 바인드 해주는 역할을 하는 디렉티브이지만 v-bind와 다른점은 v-bind는 단방향이지만 v-model은 양방향 이라는 점이다. [간단한 차이] v-bind : 데이터가 변경되면 화면상 데이터 값만 변경 v-model : 데이터가 변경되면 화면상 데이터 값 변경 + 화면상 데이터값 변경시 실제 데이터 값 변경 [v-model] " testarea 에 내용 입력 전후 데이터의 값이 변경 된 걸 확인 할 수 있다. ----..