본문 바로가기

분류 전체보기76

처음 시작하는 Vue.js(3), 뷰 HTTP 통신과 데이터 바인딩 HTTP : 브라우저와 서버간에 데이터를 주고받는 통신 프로트콜 뷰에서는 이를 지원하기 위해 axios를 리소스를 지원한다. 뷰 리소스 방식 프레임워크 목록 가져오기 뷰 리소스가 1.5.2 버전인 현재는 위와 같이 하면 에러가 발생한다. ES6문법에 맞춰 다음과 같이 사용하자. 더 직관적인가? 잘 모르겠다. 프레임워크 목록 가져오기 엑시오스 방식 프레임워크 목록 가져오기 Data 속성이 일반 문자열이 아닌 객체 형식이기 때문에 별도로 JSON.parse()를 사용할 필요가 없다. 데이터 바인딩 데이터 바인딩 : html 화면 요소를 뷰 인스턴스와 데이터에 연결하는 것을 의미한다. v-once : 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않을 때 사용함 v-bind : 아이디, 스타일, 클래스 등의 htm.. 2019. 9. 14.
처음 시작하는 Vue.js(2) 뷰 라우터 중첩 라우터부터 네임드 뷰까지 라우팅 라우팅이란 웹 페이지간의 이동 방법을 말한다. 라우팅은 현대 웹앱 형태 중 하나인 싱글 페이지 에플리케이션에서 주로 사용된다. 싱글 페이지 에플리케이션이란 서버에 웹 페이지를 요청하지 않고, 미리 해당 페이지를 받아 놓고 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션을 말한다. 뷰 뿐만 아니라 리엑트, 엥귤러는 모두 라우팅을 이용한 화면 전환을 지원하고 있으며 Fouc 현상이 일어나지 않아 화면을 더 빠르고 매끄럽게 전환할 수 있다. Route 예제 : 페이지 이동 태그, 화면에서는 태그로 치환된다. 페이지 표시 태그, 변경되는 url에 대한 해당 컴포넌트를 뿌려준다. $mount() : el 속성과 같이 인스턴스를 화면에 붙이는 역할을 한다. 생성하고 나서 $.. 2019. 9. 7.
[javascript] ES6 rest 파라미터와 Spread Syntax(전개 구문) REST 파라미터 Rest 파라미터는 매개변수 이름 앞에 세개의 점을 붙여 정의한 매개변수를 의미한다. Rest 파라미터의 특징은 특정 인수의 갯수를 지정할 필요가 없이 들어온 인수를 배열로 바꿔 전달받을 수 있다는 점이다. function example(...rest){ console.log(rest); } example(1,2,3,4,5,6); 함수에 전달된 인수들은 순서대로 파라미터와 rest 파라미터에 할당된다. function example(param1, param2, ...rest){ console.log(param1); console.log(param2); console.log(rest); } example(1,2,3,4,5,6); 또한 ES6 문법 중 하나인 화살표 함수에는 함수 객체의 a.. 2019. 9. 6.
[javascript] StopWatch를 통해 보는 시간지연함수 clearInterval(), setInterval() 타이머 함수라도고 불리는 setInterval()은 지정된 시간 간격으로 작업을 수행하기 위해 만들어진 함수이다. clearInterval은 실행중인 작업을 중지하는 게 아니라 주어진 작업을 모두 끝낸 후 다음 작업을 중지시키는 함수이다. HTML Stopwatch Vanilla JavaScript Stopwatch 00:00 Start Lap Stop Reset Javascript 초기세팅 var seconds = 00; var tens = 00; var appendTens = document.getElementById("tens") var appendSeconds = document.getElementById("seconds") var butto.. 2019. 9. 4.
처음 시작하는 Vue.js (1) Vue의 정의와 뷰 컴포넌트 Vue.js의 특징 MVVM 패턴을 사용(비즈니스 로직이나 백엔드 로직으로 분리 사용) Vue.js는 컴포넌트 기반 프레임 워크이다. 코드를 재사용하기 쉽고 코드를 직관적으로 파악할 수 있다. 양방향 데이터 바인딩 (화면에 표시되는 값과 프레임 워크의 모델 데이터 값이 동기화 됨) 데이터 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로만 전달함. Vue.js의 기본적인 구조 new Vue()인스턴스를 생성할 때 Vue를 생성자라고 한다. 생성자란 객체를 새로 생성할 때 자주 사용하는 옵션과 기능을 미리 특정 객체에 저장해 기능 확장을 도와준다. {{ message }} 뷰 인스턴스의 라이프 사이클 beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 da.. 2019. 8. 31.
자바스크립트 AJAX (2/2) ResponseHeader, readyState, CORS XMLHttpRequest.setRequestHeader XMLHttpRequest.setRequestHeader는 HTTP Request Header의 값을 설정한다. HTTP Request Header는 요청을 보낼 때 필요한 정보(client, cache, 요청 헤더 등)들을 담는다. 때문에 setRequestHeader()는 open()과 send()사이에 반드시 붙여 주어야 한다. // json으로 전송하는 경우 xhr.open('POST', '/users'); // 클라이언트가 서버로 전송할 데이터의 MIME-type 지정 xhr.setRequestHeader('Content-type', 'application/json'); const data = { id: 3, title: 'test', a.. 2019. 8. 30.
자바스크립트 AJAX (1/2) , XMLHttpRequest 그리고 HTTP METHOD AJAX 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 갱신이 발생한다. 보통 서버로부터 데이터를 받을 때 css 및 js까지 불러오게 되어 필연적으로 속도 저하가 된다. 페이지 일부만 변화 할 때 그 부분만을 로드하여 효율적으로 웹을 관리하는 것이 ajax 비동기 방식이다. JSON JSON은 클라이언트와 서버간 데이터 통신을 할 때 사용 되는 가장 흔한 데이터 포맷이다. 일반 텍스트보다 구조적이며 xml보다 가볍다. JSON은 다음과 같이 key와 value 값을 가진다. { "name": "amber", "gender": "female", "height" : 160, } 여기서 JSON파일이 브라우저 상에서 조작되기 위해서는 javascript의 string 형태로 변환해 주어야 하며, 이.. 2019. 8. 28.
[javascript] Web Storage 웹 스토리지와 쿠키의 개념과 사용법 웹 스토리지 & 쿠키 웹 스토리지란 클라이언트 측에서 데이터를 저장할 수 있도록 지원하는 html5의 새로운 기능으로 쿠키와 비슷한 기능을 한다. 다만 쿠기보다 웹 스토리지가 큰 용량을 가지며 전송 갯수의 제한이 없고 서버로 정보를 보내는 것이 아니라 클라이언트 측에 저장하는 것이기 때문에 트래픽을 낮출 수 있다는 장점이 있다. 웹 스토리지에는 Session Storage와 Local Storage가 있으며 서로 다른 특성을 가지고 있다. 둘의 공통점은 하나의 도메인마다 스토리지가 생성된다는 점이다. Local Storage 로컬 스토리지는 브라우저에 데이터를 반영구적으로 저장한다. 즉, 브라우저를 닫았다 다시 열거나 새 탭에서 정보를 저장해도 그 정보가 남아있기 때문에 쿠키를 대신하기에 적합하다. 로컬.. 2019. 8. 24.
Javascript 동기와 비동기 callback부터 async&await javascript 동기와 비동기 자바스크립트는 싱글 스레드 언어이기 때문에 효율적인 작업 처리를 위해 비동기 처리를 사용한다. 동기 : 요청 처리가 완료 된 후 다음 요청을 처리 하는 방식으로 이전 요청을 처리하는 시간이 다음 요청에 영향을 준다. (요청과 응답이 같은 시간대에 있다. 일반적으로 작성한 코드는 보통 동기 방식으로 처리된다. console.log("1"); console.log("2"); console.log("3"); 비동기 : 하나의 요청 처리가 완료되기 전에 다음 요청을 처리 하는 방식. 요청과 응답이 다른 시간대에 일어날 수 있다. 자바스크립트의 비동기 처리의 대표적 방식은 setTimeOut, callback, promise 등이 있다. 각각 일장일단이 있지만 최근 ES8에서 a.. 2019. 8. 23.