오늘도 삽질

JavaScript

Vue.js 인스턴스 & 컴포넌트

뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 - 뷰 인스턴스 1234new Vue({...}) cs 뷰 인스턴스의 사용은 위 형식으로 뷰 인스턴스를 생성한다. 123456789101112131415161718192021 Vue {{ message }} new Vue({ el: '#app', data: { message: 'Vue.js!' } }); Colored by Color Scriptercs vue.js 텍스트를 화면에 표시하기 위해 new Vue 뷰 인스턴스를 생성하고 인스턴스 안에 el 속성으로 뷰 인스턴스가 나올 지정후data 속성에 message 값을 넣어 화면의 {{message}}에 연결했다.new Vue()로 인스턴스를 생성할 떄 Vue를 생성자라고 하는데. Vue 생..

JavaScript/Es6

[ES6] For of 문 이터러블 규약

For of for.. of문은 기존에 배열이나 함수의 arguments 객체와 같은 컬렉션을 순회하는 for..in 문이나 forEach()함수 같은 역활을 한다.문자열을 한 글자씩 잘라 순회하는 것도 가능해졌다. 이터러블 규약을 따라야만 하고 for..of 문으로 순회하려면 @@iterator 메서드를내장한 객체이거나, 직접 @@iterator 메서드를 구현해야 한다. @@iterator : Sybol.irerator() 줄임말. 12for(variables of iterable){}csfor..of 문의 작성법for of는 for in 문의 단점을 보안했다. 배열을 for .. in 문으로 순회하고 원소의 index를 얻어 index + 1 과 같은 연산처리를 하였을 떄1 + 1 = 2 가 아닌 '..

JavaScript

Ajax 와 JSON 서버와 통신하기

Ajax 자바스크립트를 사용해 비동기적으로 서버로부터 데이터를 받을 수 있는 기술.서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있도록 하는 것.페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 효과를 기대할 수 있다. 개발자들이 사용할 수 있도록 각 브라우저들에서 제공하는 XMLHttpRequest 라는 함수가 있다. 이 함수를 사용해 아래와 같은코드를 작성해 서버로부터 데이터를 받아 올 수 있다. 아래 주소를 GET으로 요청하여 결과를 콘솔에 찍어 준다. 123456789 var xhr = new XMLHttpRequest(); xhr.onreadystatechande ..

JavaScript

[javaScript] 승부차기 게임 만들기 - 3

전에 스크립트 에서 jQuery 이용해서 코드를 조금 더 간결하게 만들수 있을 것 같아 jQuery 이용하고 새로운 기능을 추가했다.아무래도 기본 자바스크립트에서 문법인 documet.getElementById() , innerHtml 같이 길어질수 밖에 없다.jQuery의 '$' 의 핵심 기능은 원하는 DOM 엘리먼트를 셀렉트 하는 기능 이다. 아이디 같은 경우에도$('#kkr') 이렇게 짧게 표현 할 수 있는데 사용하지 않을 이유가 없다. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787..