1. Node.js
Node.js 설치
node의 버전은 짝수버전이 안정성이 높은것임!
버전이 계속 달라지기에, 노드버젼매니저 인 NVM을 다운받아야함
➡️ https://github.com/nvm-sh/nvm
터미널에 위의 코드 curl ~~ 복붙!
nvm ls (list의 약어임!)
⬇️
nvm install 12.14.1
⬇️
nvm ls
⬇️
nvm use 12.14.1
⬇️
nvm uninstall 12.21.0
⬇️
12.21.0버전 삭제!
작업할 폴더 들어가서, Vscode 터미널에서 npm init -y 하면 package.json 파일 생성
{
"name": "JS_Essentials", /*프로젝트 이름*/
"version": "1.0.0", /*프로젝트 버전*/
"description": "", /*프로젝트 설명*/
"main": "index.js", /*현재 프로젝트를 패키지화 해서 npm에 업로드 할 때 필요한 옵션(지워도됨)*/
"scripts": { /*현재프로젝트 내부에서 사용할 수 있는 여러가지 스크립트 명령들을 명시해 놓으면 프로젝트와 관련된 명령들을 사용할 수 있음*/
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], /*프로젝트 관련 키워드*/
"author": "", /*프로젝트 소유주*/
"license": "ISC"
}다시 터미널로!
npm install parcel-bundler -D
parcel-bundler ?
번들(bundle) : 우리가 프로젝트 개발에 사용한 여러 모듈(패키지)을 하나로 묶어내는 작업
-D ?
parcel-bundler하나만 설치했는데 node_modules 가 모두 설치되었다.
?? 왜 ??
node_modules 폴더에서, parcele-bundler 폴더 찾고, package.json 들어가보면
위와같이 dependencies 들이 많이있기에 parcel-bundler를 실행하기위해 필요한 다른 패키지들!!
이제 다시 package.json으로 가보면 devDependencies 가 생성되어있다.
npm install lodash
-D ? 뭐지 ??
개발할때만 도움을 받는 용도냐 vs 실제로 웹에서 동작하는용도이냐!
개발용 서버 켜기! 💡
- index.html 파일 생성
<head>태그 내에<title>태그 아래<script src="./main.js"></script>작성- main.js 파일 생성 (확인을 위해 console.log(”Hello world”)작성)
package.json파일 내 “srcipts”:{”dev” : parcel index.html}- terminal 에서 npm run dev 하면
lodash 💡
- main.js 에서 import _ from "lodash";
import _ from "lodash";
console.log("Hello world");
console.log(_.camelCase("hello world"));- 콘솔창 확인!
build 💡
- package.json 에서 scripts 부분 작성 !
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
}- 터미널
npm run build
-
dist 폴더 자동 생성!
-
웹이 읽기 좋게 파일이 바뀌어 생성됨!
2. JS 시작하기
데이터 타입 확인
type of
console.log(typeof undefined)/*의도하지 않은 비어있는값*/
console.log(typeof null)/*의도해서 비워놓은 값*/getType.js 함수 만들기
export default function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1);
}산술, 할당 연산자
// 산술 연산자
console.log(1 + 2);
console.log(5 - 7);
console.log(3 * 4);
console.log(10 / 2);
// 할당 연산자
let a = 2;
// a = a + 1;
a += 1;
console.log(a);비교, 논리 연산자
// 비교 연산자
const a = 1;
const b = 3;
console.log(a !== b);
console.log(a === b);
function isEqual(x, y) {
return x === y;
}
console.log(isEqual(1, 1));
console.log(isEqual(2, "2"));
const c = 1;
const d = 7;
console.log(c < d);
// 논리 연산자
const a = 1 === 1;
const b = "AB" === "AB";
const c = true;
console.log(a);
console.log(b);
console.log(c);
console.log('&&: ',a && b && c); /*그리고 and*/
console.log('||: ',a || b && c); /*또는 or*/
console.log('!: ', !a); /*부정 not*/삼항 연산자
// 삼항 연산자
const a = 1 < 2
if(a){
console.log('참')
}else{
console.log('거짓')
}
console.log(a ? '참': '거짓')조건문 If Else
const a = random();
if (a === 0) {
console.log("a is 0");
} else if (a == 2) {
console.log("a is 2");
} else {
console.log("rest...");
}조건문 Switch
switch (a) {
case 0:
console.log("a is 0");
break;
case 2:
console.log("a is 2");
break;
case 4:
console.log("rest...");
break;
default:
console.log("rest...");
}
*경우가 확실하게 나뉘어질 때에는 switch문을 사용하는것이 좋다. 다만, break를 꼭 써줄것!반복문
//반복문
//for (시작조건; 종료조건; 변화조건){}
const ulEl = document.querySelector("ul");
for (let i = 0; i < 3; i += 1) {
const li = document.createElement("li");
li.textContent = `list -${i + 1}`;
li.addEventListener("click", function () {
console.log(li.textContent);
});
ulEl.appendChild(li);
}
형변환
//형 변환
const a = 1;
const b = "1";
console.log(a == b);
//Truthy(참 같은 값)
// true, {}, [], 1, 2, 'false', -12, '3.14', ...
//Falsy(거짓 같은 값)
// false, '', null, undefined, 0, -0, NaN
if ('false') {
console.log(123);
}
함수
함수선언방식
function sum(x, y) {
return x + y;
}함수표현방식
const sum = function (x, y) {
return x + y;
};화살표 함수
//화살표 함수
// () =>{} vs function(){}
const double = function (x) {
return x * 2;
};
console.log("double: ", double(7));
const doubleArrow = (x) => {
return x * 2;
};
const doubleArrow2 = (x) => x * 2;
;
console.log("doubleArrow", doubleArrow(7));
console.log("doubleArrow2", doubleArrow2(7));
즉시실행함수
//즉시실행함수
//IIFE, Immediately-Invoked Function Expression
const a = 7;
// function double() {
// console.log(a * 2);
// }
// double();
(function () {
console.log(a * 2);
})();
익명함수 + () 를 전체 ()로 감싸주기!!!
(익명함수()) or (익명함수)()호이스팅
const a = 7;
double();
const double = function () {
console.log(a * 2);
};
함수표현방식으로 작성하면, 호이스팅이 일어나지않아 에러를 나타낸다.
함수선언방식으로 작성하면 호이스팅이 일어남!
//호이스팅
//함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
const a = 7;
double();
function double() {
console.log(a * 2);
}타이머 함수
//타이머 함수
// setTimeout(함수, 시간): 일정 시간 후 함수 실행
// setInterval(함수, 시간): 시간 간격마다 함수 실행
// clearTimeout(): 설정된 Timeout 함수를 종료
// clearInterval(): 설정된 Interval 함수를 종료
// setTimeout(function () {
// console.log("sseul!");
// }, 3000);
const timer = setTimeout(() => {
console.log("Sseul!");
}, 3000);
const h1El = document.querySelector("h1");
h1El.addEventListener("click", () => {
clearTimeout(timer);
});콜백 함수
// 콜백
// 함수의 인수로 사용되는 함수
// 실행 위치를 보장하는 함수
// setTimeout(함수, 시간)
function timeout(callback) {
setTimeout(() => {
console.log("Sseul");
callback()
}, 3000);
}
timeout(()=>{
console.log("Done");
});
//timeout함수가 arrow function이기에 익명함수로 들어가기에 callback()에 콜백함수로 사용할 수 있음!!생성자함수 (prototype)
const heropy = {
firstName: "Heropy",
lastName: "Park",
getFullName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(heropy);{} 중괄호로 시작해서 중괄호로 끝나는 객체데이터를 할당!
function User(first, last) {
this.firstName = first;
this.lastName = last;
}
const sseul = new User("sseul", "kim");
console.log(sseul);new키워드로 생성자함수를 생성!!
this 라는 것은 여기선 생성자함수를 통해서는 그것이 할당되어져있는 앞에 객체 부분의 내용을 지칭함 여기서는 sseul을 지칭함!
new라는 키워드를 생성자함수로 실행한 결과를 반환해서 할당된 변수를 생성자 함수의 인스턴스(sseul)라 부름 !
자바스크립트는 프로토타입 기반의 프로그래밍 언어
new라는 키워드와 같이쓰는 생성자 함수는 파스칼케이스로 첫문자를 대문자로 써줌!!
this
일반(Normal)함수는 호출 위치에 따라 this 정의!
화살표(Arrow)함수는 자신이 선언된 함수 범위에서 this 정의!
const sseul = {
name: 'Sseul',
normal: function(){
console.log(this.name)
},
arrow: ()=>{
console.log(this.name)
}
}
sseul.normal()
sseul.arrow()normal이라는 매소드는 sseul 이라는 객체데이터 내부에서 실행이 되고 즉 sseul.normal()에서 호출이되고 앞에있는 객체데이터인 sseul이 곧 this이고, this의 name부분을 꺼내서 사용하기에 ‘Sseul’이 콘솔에 잘 출력이 됨!
arrow는 화살표함수가 자신이 선언된 어떤 범위가 존재하고, this가 다양한 부분들을 지칭할 수 있다.
결국 화살표함수 내부에서의 this는 현재 코드에서는 무엇인지 알 수가 없고 그렇기에 undefined 가 출력됨!
그럼 언제 쓰지 ?
const timer = {
name: "Sseul!!",
timeout: function () {
setTimeout( () =>{
console.log(this.name);
}, 2000);
},
};
timer.timeout();위의 예제에서 화살표함수는 아래 부분이고,
() =>{
console.log(this.name);
}, 2000);
}, 이 화살표함수를 감싸고있는 또다른함수는??
timeout 이라는 매소드를 정의할때 사용한 함수!!
즉, 하나의 화살표함수를 감싸고있는 추가적인 함수범위가 이부분이고
function () {
setTimeout( () =>{
console.log(this.name);
}, 2000);
},
};이 함수 범위에서 this가 정의되는 것이고, 함수부분의 this는 일반함수가 정의된 timer라는 객체데이터를 가리키기 때문에, 화살표함수 내의 this는 timer가 되는것임!!
💡 setTimeout 혹은 setInterval이라는 타이머함수를 사용할 때에는 콜백으로 일반함수보다는 화살표함수를 사용하는것이 활용도가 더 높다!
💡 왜 ? this라는 것이 setTimeout이라는 자바스크립트에서 이미 정의되어있는 함수 어딘가에서 정의되는 것이 아니고 명확하게 작성한 특정한 범위에서 정의될 수 있도록 만들어주기에!
ES6 Classes
class User {
constructor(first, last){
this.firstName = first
this.lastName = last
}
}class 부분에서는 constructor라는 내부함수를 사용해야함
constructor라는 내부함수에서 매개변수를 받아서 사용할 수 있다.
class User {
constructor:function (first, last){
this.firstName = first
this.lastName = last
}
}
*class에서 :function은 지원하지않지만,
constructor가 기본 함수 형과 동일하지만 :function이 생략되었다 봐도 무방함!
// function User(first, last) {
// this.firstName = first;
// this.lastName = last;
// }
// User.prototype.getFullName = function(){
// return `${this.firstName} ${this.lastName}`
// }
class User {
constructor(first, last) {
this.firstName = first;
this.lastName = last;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
}
const sseul = new User("Sseul", "Kim");
console.log(sseul);
console.log(sseul.getFullName());상속(확장)
