전체 글 31

[Vue.js로 게시판 만들기] 1. 프로젝트 구축하기

새로운 IT책을 읽었으면 미니 프로젝트를 해보는게 가장 좋다. 직접 만들어 보지 않으면 나중에 까먹기도 하고 이해를 장담할 수 없더라. ㅜㅡㅜ Vue.js는 자바스크립트 프레임워크이다. 데이터 바인딩 형태의 프레임워크이며 컴포넌트 단위로 페이지를 구성한다. *데이터 바인딩 : 데이터가 변경되면 자동으로 DOM을 업데이트 하는 형태 프로젝트를 빌드하기 위해서는 npm을 설치해야 한다. npm은 node.js를 설치하면 함께 설치된다. 1. vue 설치하기 가장 먼저 아래와 같이 vue를 설치해야 한다. --version을 입력했을 때 버전값이 나오면 설치된 것이다. $ npm install vue $ vue --version 2. 뷰 CLI를 이용한 프로젝트 생성하기 프로젝트를 생성하고 싶은 폴더에 가서 ..

프로젝트 2019.10.27

자바스크립트 prototype(프로토타입)

자바스크립트는 객체지향 언어입니다. 그러나 클래스가 없는 프로토타입 기반의 객체지향 언어입니다. 클래스가 없는 대신 자바스크립트 객체(array, object, 함수)의 특정 속성은 부모 클래스 역할을 하는 객체를 참조하는데, 그 객체가 프로토타입입니다. 프로토타입 객체를 사용해 상속의 개념인 부모 객체의 속성 접근이나 메서드 호출이 가능합니다. 프로토타입의 원리와 특징을 함수 객체위주로 살펴보도록 하겠습니다. 프로토타입 객체가 생성되면 프로토타입 객체도 함께 생성됩니다. 함수 객체의 경우 함수의 prototype 속성이 함수와 함께 생성된 프로토타입 객체를 참조합니다. 반면에 생성자 함수로 정의된 객체는 __proto__ 속성을 갖습니다. __proto__ 속성도 프로토타입 객체를 참조합니다. 자세한 ..

JavaScript 클로저

해당 포스팅은 책 내용을 공부하며 정리한 것입니다. 1. 클로저 이해 2. 클로저 활용 3. 클로저 주의사항 1. 클로저 이해 클로저는 함수 안에 있는 함수이다. 함수 안에 있어서 외부 함수, 내부 함수(클로저)라고 구분해서 부른다. 클로저의 특징은 외부 함수의 변수를 참조한다는 점이다. 예제를 한 번 살펴보자. function outerFunc(){ var x = 10; var innerFunc = function() {console.log(x);} return innerFunc; var inner = outerFunc(); inner() //result //10 예제에서 innerFunc() 함수가 클로저이다. inner 변수 객체를 생성한 뒤, inner()를 실행하면 outerFunc()이 끝나고..

[JavaScript]실행 컨텍스트

*해당 포스팅은 책 내용을 공부하며 정리한 것입니다. 1. 실행 컨텍스트 특정 프로그램(크롬,엑셀...)을 실행하면 프로세스도 같이 실행되듯이 코드를 실행하면 실행 컨텍스트도 같이 실행된다. 코드 진행과 컨텍스트는 불가분의 관계이며, 컨텍스트에는드 실행 순서 등 실행에 필요한 메타 정보를 담고 있다. 컨텍스트 단위는 전역 코드에 대한 컨텍스트, 함수에 대한 컨텍스트, eval() 함수로 실행되는 코드로 나뉜다. 여기서는 전역 코드에 대한 컨텍스트, 함수에 대한 컨텍스트로 살펴 보겠다. console.log("This is global context"); function ExContext1(){ console.log("This is ExContext1"); } fucntion ExContext2(){ Ex..

Javascript 객체 지향[2] - class 상속/super/object 상속/__proto__ vs prototype

2019/06/29 - [공부/JS] - Javascript 객체 지향[1] - this/constructor/prototype Javascript 객체 지향[1] - this/constructor/prototype 자바스크립트는 객체지향 스크립트 언어이다. 객체지향을 내 기준에서 간단하게 설명하면 자주 사용하는 걸 구조화해놓는 것이다. 그러면 필요할 때마다 만들지 않아도 되고 이미 만들어진 걸 가져다 쓰기만 하면.. myphiloprogramming.tistory.com 1. class 상속 클래스를 생성할 때 다른 클래스를 상속 받을 수 있는데, 새로 만들어지는 클래스가 자식 클래스, 상속하는 클래스가 부모 클래스가 된다. 자바스크립트에서 상속은 extends를 쓴다. class Person{ con..

Javascript 객체 지향[1] - this/constructor/prototype

자바스크립트는 객체지향 스크립트 언어이다. 객체지향을 내 기준에서 간단하게 설명하면 자주 사용하는 걸 구조화해놓는 것이다. 그러면 필요할 때마다 만들지 않아도 되고 이미 만들어진 걸 가져다 쓰기만 하면 된다. 여기서 미리 만들어 놓는다는 개념이 자바스크립트에서는 함수,클래스가 된다. 자바스크립트가 객체지향 언어인 만큼 객체 관련 기능들을 제공한다. 이번에는 this, constructor, prototype을 알아본다. *생활 코딩 javascript 객체지향 내용을 공부하며 정리한 것입니다. 1.this - 자신을 가리키는 특수한 키워드로 오브젝트, 클래스 안에서 선언한 변수 및 함수를 자기 안에서 호출할 때 사용한다. var fisrt = 5; var second = 10; var kim = { na..

JavaScript immutability

변수는 자유롭게 선언 가능하고 값도 변경할 수 있기 때문에 활용도가 높다. 하지만 변하면 안 되는 값이 변경 가능한 상태라면 신뢰성 문제가 생길 수 있다. 이런 때에는 변경 불가능한, 불변(immutability)의 변수를 만들어 볼 수 있다. 여기서는 변수를 불변하도록 변경하는 것과 그 특징을 알아본다. *생활 코딩 javascript immutability 내용을 공부하며 정리한 것입니다. 1. var vs const - var로 변수 선언 시 변수 값 변경이 가능하지만 const로 변수 선언 시, 값 변경이 불가능하다. var a=1; a=2; console.log(a); //2 위 코드처럼 a의 값을 1로 주고나서 2로 변경하면 a의 값은 최종적으로 2라는 것을 확인할 수 있다. 즉, 변수의 값 ..

[git] git branch 업데이트 하기

최초로 git clone과 git remote add origin을 하면 origin에 있던 브랜치도 자연스럽게 따라온다. 하지만 작업 과정 중에 origin에 브랜치가 새로 생길 수 있다. master만 있던 test repository에 develop 브랜치를 만들어 봤을 때 로컬에서는 이 변화가 잡히지 않는다 이럴 때는 remote 업데이트를 해주면 된다. $git remote update 그리고 다시 확인 해보면 레파지토리 업데이트를 통해 최신 상태를 반영해 주는 것을 확인할 수 있다

[3] 맥 키보드 바밀로 VA87MAC 갈축 사용 후기

기존에 쓰던 키보드가 사망해서 새로 바꾼 바밀로 VA87MAC 갈축...! 결론부터 말하면 굉장히 맘에 듭니다...^_^ VARMILO VA87MAC 밀키화이트 PBT 염료승화 영문 갈축(135,000) 맥용 키보드를 사려고 했는데 생각보다 종류가 많이 없었던 것 같다. 매직 키보드는 쓰기 싫고 인터넷 주문이라 저렴한 걸 사기엔 도박 같아서 인지도도 있고 가격도 아주 비싸지는 않은 바밀로 VA87MAC으로 결정했다. 타건감에 대해서 리뷰해보면, 일단 평소에 타자를 좀 쎄게 치고 오타가 많아서 적축은 비선호하는 타입.. 기존 키보드도 갈축이여서 똑같이 갈축으로 구매했다. 그런데 기존꺼보다 소리가 작고 좀 더 가벼운 느낌이다. 사무실에서 사용하는 데 소리가 그렇게 크지않아서 부담이 덜하고 누르는 맛이 있어서..

리뷰 2019.04.07

[2]ssh를 사용하여 서버 접속하기

ssh는 내 컴퓨터에서 다른 서버로 접속하거나 파일 전송 등을 가능하게 하는 프로토콜이다. 예를 들어, 내 pc에서 aws 인스턴스 접속할 때 ssh를 통해 접속한다. ssh 명령어는 아래와 같다. $ssh ec2-user@ * ec2-user는 username으로, aws에서 Amazon Linux AMI를 사용하면 ec2-user가 된다. 그런데 접속하고 싶은 서버에 다 접속할 수 있는 것은 아니다. 내가 아무 서버에 막 들어갈 수 있으면 다른 사람도 막 들어올 수 있다는 거니까 당연히 막아뒀을 것이다. 이처럼 서버에 아무나 들어올 수 없도록 하는, 권한이 있는 사람만 접근할 수 있도록 하는 장치가 바로 키인증이다. 다시 말해, 내가 이 서버에 들어갈 권한이 있다는 것을 키인증을 통해 증명이 되어야만..

개발계발 2019.04.01