WEB
-
생성자 (Constructor) function Info(name, age, birth) { this.name = name; this.age = age; this.birth = birth; } let prototype = { type: "human", }; Info.prototype = prototype; const james = new Info("james", 25, 11); console.log(james); // Info {name: "james", age: 25, birth: 11} 생성자는 함수이다. 다만, 구분을 위해 함수명 첫글자를 대문자로 약속한다. 생성자 함수는 this가 사용되며 "new 함수명" 으로 사용한다. Factory 형식과 유사하며 console에서 함수명이 결과 값 앞에 붙..
[JavaScript] 생성자(Constructor)에 관한 개념생성자 (Constructor) function Info(name, age, birth) { this.name = name; this.age = age; this.birth = birth; } let prototype = { type: "human", }; Info.prototype = prototype; const james = new Info("james", 25, 11); console.log(james); // Info {name: "james", age: 25, birth: 11} 생성자는 함수이다. 다만, 구분을 위해 함수명 첫글자를 대문자로 약속한다. 생성자 함수는 this가 사용되며 "new 함수명" 으로 사용한다. Factory 형식과 유사하며 console에서 함수명이 결과 값 앞에 붙..
2020.12.28 -
call by value란? const func = (param) => { param.a = 10; console.log(param); // 10 }; const obj = { a: 5 }; func(obj); console.log(obj); // 10 // 쉽게 말하자면, const obj = { a: 5 }; let param = obj // 이런 형식으로 객체에 객체가 대입되어 참조 관계가 된 것. 먼저 자바스크립트, 객체 사이의 참조 관계에 관한 이해가 우선이다. 위 코드에서 객체인 obj는 func 함수가 작동되어 매개변수 param의 값에 대입이 되어 obj와 param은 참조 관계가 되었다. func 가 작동하면서 param의 a값을 변경하면 참조 관계에 있는 obj의 a값도 바뀌게 되어 모..
[JavaScript] 값에 의한 전달 Call by valuecall by value란? const func = (param) => { param.a = 10; console.log(param); // 10 }; const obj = { a: 5 }; func(obj); console.log(obj); // 10 // 쉽게 말하자면, const obj = { a: 5 }; let param = obj // 이런 형식으로 객체에 객체가 대입되어 참조 관계가 된 것. 먼저 자바스크립트, 객체 사이의 참조 관계에 관한 이해가 우선이다. 위 코드에서 객체인 obj는 func 함수가 작동되어 매개변수 param의 값에 대입이 되어 obj와 param은 참조 관계가 되었다. func 가 작동하면서 param의 a값을 변경하면 참조 관계에 있는 obj의 a값도 바뀌게 되어 모..
2020.12.28 -
코드를 작성함에 있어서 중요한 것 중 하나는 불필요한 중복을 제어하는 일이다. 중복을 제어하는 방법에는 두 가지 방식이 있다. 코드의 중복 제어하기 (1) : Factory 형식 const factory = (name, age, birth) => { return { name: name, age: age, birth: birth, type: "human", }; }; const who = factory("james", 25, 11); console.log(who) // {name: "james", age: 25, birth: 11, type: "human"} 첫번째로 factory 형식의 함수를 만들어 중복을 해결하는 경우가 있다. 여러 사람의 정보에 관한 데이터를 만들어낼 때 위와 같이 factory 함..
[JavaScript] 코드의 중복을 제어하는 여러가지 방법코드를 작성함에 있어서 중요한 것 중 하나는 불필요한 중복을 제어하는 일이다. 중복을 제어하는 방법에는 두 가지 방식이 있다. 코드의 중복 제어하기 (1) : Factory 형식 const factory = (name, age, birth) => { return { name: name, age: age, birth: birth, type: "human", }; }; const who = factory("james", 25, 11); console.log(who) // {name: "james", age: 25, birth: 11, type: "human"} 첫번째로 factory 형식의 함수를 만들어 중복을 해결하는 경우가 있다. 여러 사람의 정보에 관한 데이터를 만들어낼 때 위와 같이 factory 함..
2020.12.27 -
자바스크립트에서 객체가 들어있는 어떤 변수에 객체를 대입하면 두 변수는 참조 관계가 이루어진다. let obj = { a: 1, b: 2, c: 3 } let obj2 = { a: 1, b: 2, c: 3 }; console.log(obj === obj2) // false 우선 기본적으로 obj 와 obj2 는 각각 들어있는 객체의 데이터가 같아도 두 배열을 비교 연산시 false 값을 출력한다. let obj2; let obj = { a: 1, b: 2, c: 3 }; let obj2 = obj // 참조 관계가 이루어짐. console.log(obj === obj2) // true obj2.a = 10; console.log(obj); // { a: 10, b: 2, c: 3 ) 그런데 obj2의 ..
[JavaScript] 객체 간 참조 관계 및 해제 방법자바스크립트에서 객체가 들어있는 어떤 변수에 객체를 대입하면 두 변수는 참조 관계가 이루어진다. let obj = { a: 1, b: 2, c: 3 } let obj2 = { a: 1, b: 2, c: 3 }; console.log(obj === obj2) // false 우선 기본적으로 obj 와 obj2 는 각각 들어있는 객체의 데이터가 같아도 두 배열을 비교 연산시 false 값을 출력한다. let obj2; let obj = { a: 1, b: 2, c: 3 }; let obj2 = obj // 참조 관계가 이루어짐. console.log(obj === obj2) // true obj2.a = 10; console.log(obj); // { a: 10, b: 2, c: 3 ) 그런데 obj2의 ..
2020.12.25 -
ES6 변수 선언과 데이터 전달 방식 ES6에서의 새로운 변수 선언. 위 코드는 ES6, 아래 코드는 이전 ECMAScript 방식으로 작성된 코드. 모두 같은 결과를 불러온다. 기존 방식으로 작성된 코드가 한눈에 잘 들어와 보일 수 있으나 query안에 있는 데이터를 추가적으로 불러올 경우 기존 방식으로는 중복 작성해야 하는 번거로움이 있지만 ES6로 작성할 경우 아래와 같이 불러올 데이터를 추가하기만 하면 된다.
[JavaScript] ES6 - 변수 선언 및 데이터 전달ES6 변수 선언과 데이터 전달 방식 ES6에서의 새로운 변수 선언. 위 코드는 ES6, 아래 코드는 이전 ECMAScript 방식으로 작성된 코드. 모두 같은 결과를 불러온다. 기존 방식으로 작성된 코드가 한눈에 잘 들어와 보일 수 있으나 query안에 있는 데이터를 추가적으로 불러올 경우 기존 방식으로는 중복 작성해야 하는 번거로움이 있지만 ES6로 작성할 경우 아래와 같이 불러올 데이터를 추가하기만 하면 된다.
2020.11.19 -
pug > html을 좀더 간편하고 멋지게 만들어주는 view engine. > 설치 : npm install pug > 설정 : app.set("view engine", "pug") :> view engine 설정의 default값은 undefined이며 pug 파일 형식으로 바꿔주는 과정임. :> "pug" 는 확장자를 의미. > 들여쓰기를 한 후 작성 시 해당 태그는 children을 의미. > block content : 해당 자리에 외부의 코드가 들어갈것임을 의미. > extends 폴더/파일명 : main.pug 파일(의 레이아웃)을 이 파일에 확장/적용한다는 의미. > block content 입력 후 밑에 내용을 작성 : main.pug의 block content 부분에 들어갈 것임. > ..
[pug] pug express template engine 기본 사용법pug > html을 좀더 간편하고 멋지게 만들어주는 view engine. > 설치 : npm install pug > 설정 : app.set("view engine", "pug") :> view engine 설정의 default값은 undefined이며 pug 파일 형식으로 바꿔주는 과정임. :> "pug" 는 확장자를 의미. > 들여쓰기를 한 후 작성 시 해당 태그는 children을 의미. > block content : 해당 자리에 외부의 코드가 들어갈것임을 의미. > extends 폴더/파일명 : main.pug 파일(의 레이아웃)을 이 파일에 확장/적용한다는 의미. > block content 입력 후 밑에 내용을 작성 : main.pug의 block content 부분에 들어갈 것임. > ..
2020.11.15