분류 전체보기
-
코드를 작성함에 있어서 중요한 것 중 하나는 불필요한 중복을 제어하는 일이다. 중복을 제어하는 방법에는 두 가지 방식이 있다. 코드의 중복 제어하기 (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 -
Prettier 적용 방법 Visual Studio Code에서는 사용자 편의를 위해 코드의 줄 간격이나 행을 자동으로 깔끔하게 정리해주는 확장프로그램이 존재한다. 왼쪽 사이드바에서 EXTENSIONS 아이콘을 클릭한 후 prettier 를 검색하게 되면 가장 위에 뜨는 걸 선택. 이미 설치되어 있는 경우 위와 같이 표시되어 있지만 설치가 안된 경우 install 버튼이 활성화 된다. 설치하면 완료. 에디터 밑부분에 Prettier: ✔ 표시가 되어있다면 활성화된 것. 대부분의 프로그래밍 언어에서 사용 가능하고 pug 파일에는 적용 불가능하다. Prettier 적용 안될 경우 해결방법 1. Format on Save 확인 > vscode 설정에서 format on save를 입력하고 나오는 설정에 체크되..
[vscode] Prettier 적용방법, 적용 안되는 경우 해결방법Prettier 적용 방법 Visual Studio Code에서는 사용자 편의를 위해 코드의 줄 간격이나 행을 자동으로 깔끔하게 정리해주는 확장프로그램이 존재한다. 왼쪽 사이드바에서 EXTENSIONS 아이콘을 클릭한 후 prettier 를 검색하게 되면 가장 위에 뜨는 걸 선택. 이미 설치되어 있는 경우 위와 같이 표시되어 있지만 설치가 안된 경우 install 버튼이 활성화 된다. 설치하면 완료. 에디터 밑부분에 Prettier: ✔ 표시가 되어있다면 활성화된 것. 대부분의 프로그래밍 언어에서 사용 가능하고 pug 파일에는 적용 불가능하다. Prettier 적용 안될 경우 해결방법 1. Format on Save 확인 > vscode 설정에서 format on save를 입력하고 나오는 설정에 체크되..
2020.11.14 -
Arrow Function ECMAScript 6 버전에서는 함수의 정의을 기존과 다른 방식으로 작성해볼 수 있다. 위는 이전 버전에서의 입력 방식, 아래는 ES6의 입력 방식이다. 두 형식 모두 동일한 반환값을 가지며 아래와 같은 방식은 내재된 반환값(return)을 가지게 되는 것으로 입력된다. 상황에 따라 내재된 반환값으로 작성하면 안되는 경우도 존재. 이런 경우 위와 같이 중괄호를 넣어 작성한다.
[Javascript] ES6 - Arrow FunctionArrow Function ECMAScript 6 버전에서는 함수의 정의을 기존과 다른 방식으로 작성해볼 수 있다. 위는 이전 버전에서의 입력 방식, 아래는 ES6의 입력 방식이다. 두 형식 모두 동일한 반환값을 가지며 아래와 같은 방식은 내재된 반환값(return)을 가지게 되는 것으로 입력된다. 상황에 따라 내재된 반환값으로 작성하면 안되는 경우도 존재. 이런 경우 위와 같이 중괄호를 넣어 작성한다.
2020.11.09