Web

자바스크립트의 this, 함수 this 바인딩

모던 JavaScript 튜토리얼(https://ko.javascript.info/)을 읽고 정리한 내용입니다. 자바스크립트의 this, 함수 this 바인딩 자바스크립트의 this는 다른 프로그래밍 언어의 this와는 동작 방식이 다르다. 자바스크립트에서는 모든 함수에 this를 사용 가능하다. this는 런타임에 의해 결정되고 컨텍스트에 따라 달라진다. 같은 함수라도 다른 객체에서 호출했다면 this가 참조하는 값이 달라진다. let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi() { alert( this.name ); } // 별개의 객체에서 동일한 함수를 사용함 user.f = sayHi; admin.f = sayH..

자바스크립트의 함수

서적 모던 자바스크립드 Deep Dive 을 읽고 정리한 글입니다. 12장 함수 일급 객체인 자바스크립트 함수 일급 객체란 ? 다음 조건을 만족하는 객체를 일급 객체라고 한다. 무명의 리터럴로 생성 가능 ( 런타임에 생성이 가능 ) 변수나 자료구조(객체,배열 등)에 저장할 수 있다. 함수의 매개 변수에 전달 가능. 함수의 반환값으로 사용 가능. 자바스크립트의 함수는 위 4개의 조건을 만족하므로 일급 객체이다. 함수가 일급 객체라는 말은 결국 함수 또한 객체라는 의미가 된다. 함수도 객체 처럼 값을 사용할 수 있는 곳( 변수 할당문, 객체 프로퍼트의 값, 배열 요소, 함수 호출의 인수, 반환문)이라면 어디서든지 리터럴로 정의 가능하며 런타임에 함수 객체로 평가 된다. 함수 리터럴 자바스크립트의 함수는 객체..

자바스크립트의 객체

서적 모던 자바스크립드 Deep Dive 을 읽고 정리한 글입니다. 10장 객체 리터럴 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어. 자바스크립트를 구성하는 거의 모든 것이 객체. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체 원시 타입 : 단 하나의 값, 변경 불가능 객체 타입: 다양한 타입의 값(원시값 또는 다른 객체)를 하나의 단위로구성한 복합적인 자료구조., 변겅 가능 0개 이상의 프로퍼티로 구성된 집합. 프로퍼티는 키/값으로 구성된다. 자바스크립트의 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트는 일급 객체 이므로 값을 취급 가능. 따라서 함수 프로퍼티도 값으로 사용 가능하다. 메서드 : 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 부르는 이름...

자바스크립트 변수 선언, 할당, 호이스팅

서적 모던 자바스크립드 Deep Dive 을 읽고 정리한 글입니다. 4장 변수 선언 변수 선언 : 변수를 생성하는 것 - 값을 저장하기 위해 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결 해서 값을 저장할 수 있게 준비하는 것. 변수를 사용하려면 반드시 변수 선언이 필요하다. 자바스크립트 변수 선언 키워드 : var,let,const es6 에서 let,const 키워드가 도입되기 이전까지 var 키워드는 유일한 변수 선언 키워드. var 키워드의 여러 단점을 보완하고자 let 과 const 키워드 도입. 변수 선언 변수를 선언하면 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보한다. var score; 변수를 선언하고 아직 변수에 값 할당은 하지 않은 상태이나 메모리 공간에..

[ SSAFY 7기 ] 1학기 파이널 프로젝트 Happy House

싸피 1학기의 파이널 프로젝트로 진행한 Happy House 프로젝트이다. 1학기 내내 Happy House를 완성하기 위한 관통 프로젝트를 진행하는데 마지막 파이널 프로젝트에선 새롭게 배운 Vue를 적용했기 때문에 프론트는 거의 새롭게 갈아 엎었다고 봐도 무방했다. 이 글은 Vue로 프론트를 제작하며 신경 썼던 부분을 회고하하는 글이다. UI vue 템플릿으로 검색해서 찾은 Vue Soft UI Dashboard를 사용해 전체 UI 틀을 제작 했다. https://demos.creative-tim.com/vue-soft-ui-dashboard/#/dashboard Vue Soft UI Dashboard by Creative Tim Start your Development with an Innovativ..

Vue에서 Chart.js로 데이터 시각화 하기

아파트 실거래 내역을 이용해 아파트 거래가 변경 추이를 한눈에 볼 수 있도록 차트를 넣기로 했다. 데이터만 준비 되어있다면 간편하게 시각화를 시켜주는 chart.js 라이브러리를 사용하였다. 프로젝트 Vue 버전 : 2.6.14 https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org 시작하기 npm 으로 설치해서 불러올 수도 있지만 간단하게 cdn방식으로 사용하였다..