개발 이야기 94

this

자바스크립트를 사용하다 보면 this를 이용하는 경우가 많이 있습니다. 이번 시간에는 실행 문맥 내에서 this 바인딩이 어떻게 이루어지는지 알아보겠습니다. this란 무엇인가. 일반적으로 함수 내에서 사용되는 특정 키워드 변수입니다. 자바스크립트는 함수를 실행할 때 몇 가지 단계 거치며 동작하는데요, 그중 한 가지 단계가 this 변수를 만드는 일입니다. 그런데 자바스크립트가 this라는 키워드에 어떠한 값을 할당할지는 경우에 따라 조금 다릅니다. 당연히 헷갈리겠죠. 이러한 this를 예측 가능하도록 사용하고, 이에 더해 원하는 값을 this 키워드에 할당할 수 있습니다. 먼저 우리가 좋아하는 검정 화면입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var test = { x:..

클래스와 객체 그리고 상속.

자바스크립트를 제대로 알기 위해서는 객체에 대한 이해가 필요합니다. JS의 모든 것이 객체로 이루어져 있기 때문입니다. 자 같이 공부해 봅시다. 자바스크립트에는 클래스가 있는가? 객체지향 개발이 가능한가? 이 질문에 대답하기위해 우리는 클래스와 객체를 구분해야 합니다. 클래스는 틀입니다. 사람이라는 틀이 있고 그 틀로 찍어내듯 만든 "이석규"라는 인간이 있죠. 만들어진 "이석규"라는 인간은 객체입니다. 사람이라는 클래스의 인스턴스죠. "자 그럼 자바스크립트에는 클래스가 있는가?" 그렇습니다. 본래 자바스크립트에는 클래스 문법이 없었습니다. ES6에 들어와서 제공되기 시작한 거죠. 두 번째 질문인 "객체지향 개발이 가능한가?" 매우 그렇습니다. 그렇다면 ES6에서 클래스가 제공되고 난 후에야 JS로 객체지..

호이스팅

자바스크립트에는 호이스팅이라는 특성이 있습니다. 처음 JS를 사용할 때 놀래키는 녀석 중 하나죠. 호이스팅이란 자바스크립트에서 실행 문맥을 동작할 때 함수와 변수의 선언을 해당 컨텍스트의 최상위로 끌어올리는 것을 의미합니다. 실제로 끌여올려지는 것은 아니며, 실행문맥과 활성 객체에 대한 이해가 있어야지만 호이스팅을 정확하게 이해할 수 있습니다. 이게 뭔 소리야? 우리는 검정 화면을 좋아하는 개발자니 코드로 보면서 확인해 봅시다. 1 2 3 4 5 6 7 printAge(17); function printAge(age){ console.log("내 나이가 벌써" + age + "라니?"); } Colored by Color Scripter cs 아무 문제없이 실행됩니다. 이제는 익숙해서 당연하게 느껴지네요..

2. VueJS 와 기본 구성.

1. VueJS는 무엇인가? VueJS는 프레임워크다. 프레임워크는 라이브러리와 다르다. 개발구조의 껍대기, 뼈대, 밑바닥 원한다면 전체 구성을 담당한다. 쉽게 말해서 개발의 틀을 마련해준다. (필요에 의한 탄생이 해당 프레임워크의 방법론이다.) 틀이기에 강제하기도 하고 답답하게 느껴지기도 한다. 그렇다면 어떤 틀인가? 컴포넌트라는 틀이다. 우리는 VueJS를 이용해 재사용 가능한 컴포넌트를 설계하고, 조립해 나가면서 개발해 나갈 것이다. 2. VueJS의 장점은 무엇인가? 1. View 는 Vue에게 돔 생성과 업데이트에 관한 업무는 해당 분야의 프로인 Vue에게 맡기자. 우리는 비지니스 로직에 집중하면 된다. React처럼 특정 랜더 시점에 개입하지 않아도 된다. 전적으로 믿어주자. Vue는 가볍고 ..

1. Vue 시작.

VueJS 에 관심이 가는 개발자들은 다음 부류중 하나의 사람일 것이다.1. 컴포넌트 방식의 개발 패러다임이 필요한 프론트엔드 개발자.2. 컴파일과 빌드 시스템이 필요한 SPA 개발자.3. 일단 핫한걸 좋아하는 사람. 프론트엔드 개발자라면 모두가 생각은 했지만 만들지는 못(않)했던 VueJS를 같이 탐험해보려 한다.일단 https://kr.vuejs.org/ 에 기본적인 Vue의 개념이나 사용법이 자세히 나와 있지만 개인적으로 프로젝트를 하면서 얻고 체험한 내용과 함께 써보려 한다.그럼 다같이 고고싱 ; )

Mac SSH 연결과 간단한 리눅스 명령어.

1. $ chmod 400 ~/Desktop/key.pem r 퍼미션 설정을 해주자. 2. ssh -i ~/Desktop/key.pem ubuntu@ip 키 파일과 id@ip 입력하면 끝이다. i는 identity 옵션. =========================================================================================================== 1. 현재 실행 되고 있는 모든 프로세스 보기ps -ax ex) ps -ax | grep node (node에서 실행하는 모든 프로세스를 볼 수 있다.) 2. 백그라운드 실행nohupex) nohup node server.js & 3. 프로세스 죽이기kill -9 (id) 4. 포트 찾기 lsof..

아파치 서버 설치 하기

1. 아파치 다운 로드https://www.apachelounge.com/download/ 2. /conf/httpd.conf 파일 수정 - ServerRoot 경로 설정.- Listen 포트 설정- DocumentRoot 설정- ServerName 변경 3. 환경변수에 /bin 경로 추가 4. cmd에서 아파치 서버 인스톨 - httpd -k install 5. 아파치 명령 시작- httpd -k start (시작)- httpd -k stop (종료)- httpd.exe -k restart- httpd.exe -k uninstall (서비스 제거)- httpd.exe -k uninstall -n APM_Apache2 (특정 서비스 제거)

자바스크립트의 상속

- 자바스크립트는 프로토타입 기반의 언어다.- 프로토타입은 다른 오브젝트를 가르키는 내부 링크다.- 모든 오브젝트는 프로토타입을 가지고 있고 이러한 프로토타입 역시 프로토타입을 가지고 있다. 결국 이것은 반복된다. null 오브젝트를 프로토 타입으로 가지는 오브젝트에서 끝이난다.- 이를 프로토타입 체인이라 부른다. 프로토타입은 고전적인 상속 모델보다 더 강력한 방법이다. 프로토타입으로 고전적인 방식은 쉽게 구현할 수 있지만, 그 반대는 어렵다. // apply, call, bind // 팝업의 전처리의 경우 apply를 쓰는 경우 // 데이터를 apply로 넘겨 주는 경우 // 함수 상속에서의 this var x = { a : 10, b : function(){ console.log(this.a) } }..