본문 바로가기

js25

[자바스크립트] 프로토타입체인 [목표]- 헷갈리는 자바스크립트 프로토타입기반 객체지향 안헷갈리게 하기 [자바스크립트 객체 그리고 프로토타입체인](1) 객체리터럴 : 숏컷 방식(간단하게)1var obj1 = { } cs (2) 생성자 : 위의 객체와 동일한 객체를 만들어냄, function Object()의 인스턴스 객체1var obj2 = new Object()cs - Object 타입은 모든 객체의 최상위타입- 자바스크립트는 프로토타입(객체의 원형을 가진 객체, 함수의 공통된 프로퍼티, 메소드 저장)을 이용한 상속을 지원함- 그래서 Object 타입 생성자의 프로토타입 객체를 상속받은 인스턴스 객체가 생성되어 obj2에 저장되었다고 표현- 프로토타입을 이용하여 객체와 객체끼리 연결하고 한쪽 방향으로 상속받는 형태를 만들 수 있음- .. 2017. 4. 16.
[node.js] nodejs에 대하여 [목표]- nodejs가 무엇인지 알아보고 이해하기- 기존 자바스크립트와 nodejs는 어떤 관계인지 알아보기- nodejs 특징을 살펴보고 프로그래밍 시 활용하도록 해보기 [nodejs란]- 서버사이드에서 사용할 수 있도록 자바스크립트로 짜여진 서버사이드 런타임 환경 자바스크립트- 서버로 사용할 컴퓨터에서 서버를 구축할 때 언어로 자바스크립트를 사용할 수 있게 됐다는 말- 자바스크립트가 웹브라우저를 벗어나 서버에서도 사용 가능하게 됨- 탈브라우저 자바스크립트인 nodejs가 어떤 기능을 가지고 있는지에 대해 앞으로 살펴보게될 것 [nodejs 선택한 이유 - 특징](1) 개발 생산성이 좋음- 앞선 포스팅에서 봤듯이 서버 구축할 때 굉장히 빠르게 할 수 있음(이건 해보니깐 굉장히 빠르고 좋음 그래서 더 .. 2017. 4. 11.
[node.js] 예제로 간단하게 웹서버 구축 [목표]- node.js로 웹서버 간단하게 구축해보기- 브라우저 - 웹서버 HTTP 통신 기본개념 익히기- node.js로 간편하게 웹서버 구축하는 방법 알기(다음 포스팅) [서버구축](1) node.js 공식 웹사이트 about 탭 가기 : https://nodejs.org/ko/about/(2) 예시 코드 긁어오기12345678910const http = require('http');const hostname = '127.0.0.1'; //클라우드 서버컴퓨터(원격 접속 후 웹서버 구축)라면 아래 (5)번 항목 참고const port = 3000;const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Co.. 2017. 4. 11.
[자바스크립트] this 바인딩 [this란]- 자바에서의 this는 객체 자신을 가리킴, 매개변수명과 객체가 가진 멤버변수명이 같을 때 구분하기위한 용도로 사용됨1234567public class Person{ private String name; Person(String name){ this.name = name; //전자는 클래스의 name이고, 후자는 매개변수의 name }}Colored by Color Scriptercs - 자바스크립트의 this는 함수 호출 패턴에 따라 this가 어떤 객체의 this가 될지 정해짐(어디에 바인딩될지 정해짐) [함수호출과 this]1) 함수가 객체의 속성이고, 객체를 통해 함수를 호출할 때 : 객체 각각의 속성을 가리키게됨123456789101112131415var obj1 = { name:.. 2017. 3. 31.
[자바스크립트] scope [scope란]- 변수의 범위를 말함- 전역변수 / 지역변수로 구분됨 [자바스크립트 scope 특징]- 자바스크립트 만의 변수 범위가 있음- 자바스크립트는 c-family 언어(block-level scope : 코드블럭( { .... } )내에서 유효함)와 다른 스코프를 가지고 있음12345678int getSum(int a, int b) { int sum = a + b; /* sum은 해당 코드 블럭 내에서만 유효함 (굳이 sum은 필요없지만 보여주기위해) */ return sum;}Colored by Color Scriptercs - 자바스크립트는 function-level scope임 => 코드 블럭과는 상관없이, function(함수) 내 정의된 변수는 함수 내에서만 사용가능함 1234567va.. 2017. 3. 21.
[자바스크립트] 프로토타입 [프로토타입]- 자바스크립트 객체지향 방식- 자바스크립트의 모든객체는 부모역할을 하는 객체와 연결되어있음 => 클래스 기반 객체지향처럼 부모 역할 객체의 프로퍼티, 메서드를 상속개념(프로토타입체인)과 같이 받아올 수 있음 => 이러한 부모역할 객체를 프로토타입(Prototype)이라함 => 부모역할 객체가 function이라면 prototype 속성이 있는데 이 프로퍼티에 공통 프로퍼티, 메서드를 정의함 => 부모역할 객체가 객체리터럴로 생성된 객체라면 리터럴에 공통프로퍼티, 메서드를 정의함 [prototype과 __proto__ 속성 차이](콘솔이미지 : function을 가지고 객체 생성하고 __proto__속성 리뷰)1) function 객체에서 new를 통해 객체를 생성하였음2) new를 통해 생.. 2017. 3. 18.
[자바스크립트] 함수는 무엇이다 [함수란]1) 일반적 기능- 특정 작업에 필요한 일련의 구문들을 그룹화하기위한 개념- 동일 작업을 필요할 때마다 불러오기위해 필요한 개념 : 코드 재사용 2) 자바스크립트 기능- 객체생성 : 생성자함수(http://jinbroing.tistory.com/54 : 생성자함수 검색)=> 정보은닉(데이터), 함수 생성, 모듈화- 함수도 객체(first-class object, 일급객체)이기때문에 변수나 객체, 배열에 저장될 수 있고, 다른 함수의 파라미터, 반환값으로 사용될 수 있음 [함수정의]1) 함수선언식 : function 키워드로 선언함- 함수명 : 함수명 생략 불가, 함수명으로 재귀적 호출(자신 호출), 디버거가 해당함수를 구분할 수 있는 식별자 역할- 파라미터(매개변수) : 함수가 호출될 시 필요한.. 2017. 3. 15.
[자바스크립트] 객체 #2 [객체지향]- 공통의 속성, 동작을 지니고 있지만 각기 존재마다 본인만의 특징이 있음, 이를 구현하기위한 방법- 인간의 표현방법과 똑같이 만듬 : 주어(S)가 (무엇을) 한다(V) - 객체.메소드 : 객체가 동작한다(메소드) - 이를 지향하는 프로그래밍 언어를 지칭하여 객체지향 프로그래밍 언어라 함- 객체지향에는 두가지 방법이 있음 : 객체를 지향하는 것은 맞지만 각기 다른 방법에 의해 객체를 구현함 [두 객체지향의 차이]1) 클래스 기반 객체지향 : 주로 c-family 언어(c++, java 등)- 객체 설계도인 클래스를 만듬 : 공통 속성, 동작(메소드), 공통 속성에 대한 값을 초기화하기위한 생성자 메서드를 가지고 있음- 클래스(설계도)에 맞춰 객체(new)를 생성함- 생성자 메서드에서 각 공통의.. 2017. 3. 14.
[자바스크립트] 객체 [객체란]- 데이터와 데이터와 관련된 동작(기능)을 모두 포함할 수 있는 개념적 존재- 데이터 : 이름과 값을 가지는 속성(property)- 동작 : 일련의 관련된 동작을 정의한 함수(function)- 이름과 값의 쌍인 속성들을 포함하는 컨테이너 : 여러 데이터(속성)을 가지고, 함수를 가짐- 자바스크립트는 대부분이 객체 기반, 기본 자료형(primitive type) 데이터를 제외하고 객체로 이뤄짐 [객체 생성방법]- 들어가기 전에, 자바스크립트는 프로토타입 기반 객체지향언어임. 클래스 기반(c-family)에 익숙하다면 헷갈리기 일 쑤.... 그래서 ECMAScript6부터 클래스를 지원...! 하지만 클래스도 결국 함수, 프로토타입 패턴에 클래스 문법을 입혀놓은.... 아직 배워 보지는 않았지만.. 2017. 3. 11.
[자바스크립트] 제어문(control-flow) [제어문] : 코드 진행이 위->아래로 가기보다 상황에 따라 다른 결과를 얻도록 할 때 사용, 가장 원시적인 인공지능 [블럭구문] : 구문들의 집합, 구문들을 하나의 동작으로 묶는 역할을 함, 중괄호( {....} )로 묶음, 제어문의 범위를 나타낼 때도 사용됨1234567891011121314151617181920function myFunction(){ var x=10, y=2; console.log(x*y);} var person = { eye: 2, nose: 1, walk: function(){ console.log("walking....!"); }} var x = 10;while(x>0){ console.log(x); x--;}cs [조건문] : 일정 조건에 따라 다음 특정 진행 흐름으로 유도하.. 2017. 3. 10.