node js란?
javascript엔진으로 javascript 런타임(프로그램 언어가 동작하는 환경)을 만들어 주는 프로그램이다
---nvm 사용법 ----
nvm이란?:node.js의 버전을 관리해주는 프로그램이다
1터미널에서 nvm을 이용해 여러개의 node version을 보존 할 수 있다
2터미널에서 <nvm install 사용하고 싶은 node version>을 입력하면 해당 version의 node.js를 설치한다
3터미널에서 <nvm uninstall 삭제하고 싶은 node version>을 입력하면 해당 version의 node.js를 삭제한다
4터미널에서 사용하고 싶은 node.js version은 <nvm use 사용하고싶은 version> 을 입력하면 된다
5터미널에서 nvm ls를 입력하면 현재 설치된 node.js에 version을 확인 할 수있다.
6터미널에서 node --version이라 입력하면 현재 사용중인 node.js version을 확인 할 수있다.
---npm ---
npm이란?: 전 세계의 개발자들이 만든 다양한 패키지 or 모듈을 관리해주는 프로그램이다
1모듈(module)이란?: 본체를 구성하는 것으로써 독립적으로 어떠한 기능을 가진 개체
ex)
1-1자동차가있다
1-2자동차를 분리하면 타이어, 라이트, 엔진 등등이있는데 이때 자동차를 구성하는 기능을가진 타이어, 라이트, 엔진이 모듈이다
2패키지(package)란?: 모듈을 하나의 폴더에 모아둔 것을 의미한다 즉 모듈의 집합체라 볼 수 있다.
3npm 사용법
3-1터미널에서 npm init -y를 입력하면 package.json과 package-locks.json이 생성된다
3-2
package.json은 설치한 package에 내역을 남기고 사용자가 직접관리하지만
package-locks.json은 설치한 package의 정보를 자동으로 저장한다
3-3터미널에서 npm install <설치하고자하는 package이름>을 입력하면 해당 package를 나의 프로젝트에 설치 할 수있다
이때 install 뒤에 -D(--save-dev의 약어) 를 붙일 수 있고 안붙일 수 있는데
-D를 붙이게 되면 package.json에 내역이 devDependencies에, -D를 붙이지않는다면 dependencies에 남는다
devDependencies에 남는 package 내역은 개발용 의존성 패키지로써 브라우저에서는 동작하지않는 package를 담고
dependencies에 남는 package내역은 일반 의존성 패키지로써 실제 브라우저에서 동작하는 package를 담는 용도로 사용된다
즉 개발할때 npm으로 package를 설치할때 이 package가 브라우저에서 동작할지 안 할지에 따라 install에 -D를 붙일지 안붙일지를
판단하여 구분 해 줘야 좀 더 개발할때 효율을 올릴 수 있다.
3-4터미널에서 npm을 이용해 pakage를 설치하면 package.json 설치한 package에 내역이 기록된다
3-5 package.json에 남은 package내역을 이용하여 package를 지우더라도 터미널에서 npm install을 입력하면 package.json에
남은 package내역을 다시 설치 할 수있다. 이때 npm install대신 install에 약어인 i를이용해 npm i라고 작성해도 상관없다
번들(bundle)이란?
project 개발에 사용되는 여러 module 또는 package를 하나로 묶어내는 작업을 의미한다
유의적 버전이란?
의미가 있는 version을 뜻한다
.을 기준으로 3개로 구분 한다
ex)
major.minor.patch
2.1.3
메이저(major)version :기존 버전과 호환되지 않는 버전이다.
마이너(minor)version :기존 버전과 호환되고 기존 버전에 새로운 기능이 추가된 버전이다.
패치(patch)version : 기존 버전과 호환되고 기존 버전에 버그 및 오타가 수정된 버전이다.
메이저version앞에 ^이 붙어있다면 해당 메이저version에서 마이너,패치 version을 최신 version으로 업데이트 하는것을 허용한다는 것을 의미한다
즉 메이저version앞에 ^이 붙어있지않다면 마이너,패치 version을 최신 version으로 업데이트 할 수 없다.
--JS 파일 수입 수출 하는법--
1 js의 내용이 많아지면 기능별로 파일을 따로 구분해서 module화 하여 관리하면 유지 보수가 용이하다
2 module화 한 js파일의 기능을 내보낼때 첫줄에 <export default 파일이름> 을 명시한다
3 module화 한 js파일의 기능을 불러올때 첫줄에 <inport 파일이름 from "파일 경로">을 명시한다
ex)파일을 내보내는 case
export default getType
function getType(data){
return console.log(typeof data)
}
ex)파일을 불러오는 case
import getType from "./getType.js"
getType(123)
getType(true)
--JS 연산자 --
1산술연산자
: 사칙연산을 하는 기능을 가지고 있다
ex)
console.log(1+2) // 더하기 결과값 =3
console.log(2-1) // 빼기 결과값 =1
console.log(3*2) // 곱하기 결과값 =6
console.log(4/2) // 나누기 결과값 = 2
console.log(5%2) // 나누기 이후 나머지를 출력하는 연산자 결과값 = 1
2할당 연산자
: 산술연산자를 기반으로 변수의값을 재할당하는 기능을 가지고 있다.
ex)
let a = 2
console.log(a += 1) // a = a+1과 동일 a의값이3으로 재할당
console.log(a -= 1) // a = a-1과 동일 a의값이 2로 재할당
console.log(a *= 2) // a = a*2과 동일 a의값이 4로 재할당
console.log(a /= 2) // a = a/1과 동일 a의값이 2로 재할당
console.log(a %= 1) // a = a%1과 동일 a의 값이 0으로 재할당
3 일치 연산자
ex)
const a = 1
const b = 1
console.log(a === b)
// === : 변수 a와 b의 값이 같은지 true와 false로 옮고 그름을 판단한다
// 이때 데이터타입 까지 비교하여 일치여부를 판단한다
ex2)
const c = 2
const d = "2"
console.log(a==b)
// == : ===과 동일하게 변수 c와 d의 값이 같은지 true 와 false로 옮고 그름을 판단한다
// 이때 데이터 타입은 비교하지않아 d의 데이터 타입이 string임에도 true를 출력한다
4 불일치 연산자
ex)
const a = 1
const b = 1
console.log(a !== b)
// !== : 변수 a와 b의 값의 다른지 true와 false로 판단한다
// 이때 데이터타입 까지 비교하여 일치여부를 판단한다
ex2)
const c = 2
const d = "2"
console.log(a != b)
// != : !==과 동일하게 변수 c와 d의 값이 다른지 true 와 false로 판단한다
// 이때 데이터 타입은 비교하지않아 d의 데이터 타입이 string임에도 false를 출력한다
5 비교연산자
ex)
const a = 2
const b = 1
console.log(a>b)
console.log(a<b)
// >, < : 어떠한 값이 크고 작은지 true와 false로판단한다 수학에서 초과 미만의 개념과 같다
ex2)
const c = 1
const d = 1
console.log(c<=d)
console.log(c>=d)
// >=, <= : 어떠한 값이 크고 작은지 true와 false로판단한다 수학에서 이상 이하의 개념과 같다
// >=, <= 를 사용할때 항상 꺽쇠괄호가 = 보다 선행해서 사용된다는 점을 주의하자
6논리 연산자
ex1 &&를 사용한 예시)
const a = 3
const b = 3
const c = 3
if (a === b && b === c) {
alert("a와 b와 c는 모두 같습니다")
}
// &&: 앰퍼서드 2 개를 이용하여 and와 같은역할을 한다
// && 를 기준으로 앞에 조건과 뒤에 조건이 모두 만족해야 true 라고 인식한다
ex2 | |을 사용한 예시)
const a = 3
const b = 3
const c = 5
if (a === b || b === c) {
alert("a와 b는 같지만 c는 다릅니다")
}
// ||: 버티컬 바(shift+ 백슬레시)2 개를 이용하여 or과 같은역할을 한다
// || 를 기준으로 앞에 조건과 뒤에 조건중 하나라도 만족하면 true 라고 인식한다
7부정 연산자
const a = false
const b = !a
console.log(a)
console.log(b)
// ! :위 코드에서 a에 false라는 값을 할당했지만 b에 !를 붙임으로써 true가 출력되는것을 확인 할 수있다
// 즉 부정연산자 !는 특정값에 반대 값을 출력한다
--조건문 --
1if문,else if문,else문:조건에 따라 해당 문장을 작성할 수 있다.
1-1 if문: ()안에 조건이 true라면 {}안에 내용을 실행한다
1-2 else문: if문의 조건이 false라면 {}안에 내용을 실행한다
1-3 else if문 : if문의 조건이 false일때 else문으로 가기전에 한번더 조건을 추가한다 만약 else if문이 false라면 다음 else if문의 조건을 판단하고 다음 else if문이 없다면 else문을 실행한다
ex)
if (a > b) {
alert("a가 b보다 큽니다")
} else if (b > c) {
alert("b가 c보다 큽니다")
} else if (c > d) {
alert("c가 d보다 큽니다")
} else {
alert("정답이 없습니다!")
}
위 코드에서 주의사항은 else if문을 작성할땐 새로운 조건을 제시하지만 else문에선 새로운 조건을 제시하지 않는다는 점을 인지해야한다
2삼항 연산자: 조건문을 간단하게 작성 할 수 있다
삼항연산자 사용법 : 조건 ? true일때 출력할 내용 : false일때 출력할 내용
ex)
const a = 2
const b = 1
// if (a > b) {
// alert("a가 b 보다 큽니다 ")
// } else {
// alert("a가 b보다 작습니다")
// }
a > b ? alert("a가 b보다 큽니다"):alert("a가 b보다 작습니다")
3 switch문 : switch와, case, break, defalut를 사용하여 switch문에 ()안에 조건에 해당하는 case를 추적한다
3-1 switch(): ()안에 case와 비교할 조건을 넣는다
3-2 case : switch에 ()안에 조건과 대응되는 경우의수 이다, switch문에 ()에 조건과 case가 일치하면 출력할 내용을 실행한다
3-3 break: 해당 case문을 빠져나올때 사용한다 break를 작성하지 않으면 다른 case의 값도 출력 될 수 있기때문에 꼭 작성해야 한다.
3-4 defalut: switch에()안에 값과 일치하는 case가 없는경우 출력할 내용을 설정한다
ex)
const myPhone = "갤럭시 노트10"
switch (myPhone) {
case "아이폰3":
console.log("아이폰3 입니다!")
break
case "lg v50":
console.log("lg v50 입니다!")
break
case "갤럭시 Z플립":
console.log("갤럭시 Z플립 입니다!")
break
case "갤럭시 노트10":
console.log("갤럭시 노트10 입니다!")
break
default:
console.log("일치하는 값이 없습니다")
}
-- 반복문 --
1 for문: for문의 ()안에 조건이 true라면 해당 코드블록을 반복하여 사용한다
2 for문의 ()안에 1번인자로는 초기값을 설정해주고 ;로 구분한다 2번째인자에는 조건을 넣어준다 3번째는 증감식 초기값을 증가하거나 감소시켜준다
ex)
for (let i = 0; i <= 10; i++) {
console.log("i가10보다 작습니다!")
}
for문에 구조를 잠시 살펴보자면 1번인자인 i의 초기값은 0이다 2번째인자로 넘어가서 조건을 살펴보면 i가 10보다 작으면 i가 10보다 작습니다! 라는 내용을 console창에 출력하게된다
그후 3번째 인자인 i++가 동작한다 3번인자가 동작함에따라 i에 1을 더해주기 때문에 i === 1 이된다 해당for문은 i가10보다 커지기 전까지 반복하며 i가11이 되었을때 2번째인자인 i가 10보다 작아야한다는
조건을 만족시키지 못하게 되어 반복문이 실행되지않고 종료된다
-- 함수 --
함수에서 return 키워드가 사용된 코드라인이 실행되면 해당함수를 빠져나온다.
화살표 함수란?
함수작성을 좀 더 효율적으로 작성 할 수 있는 방법이다
사용법
ex)
function multiple(x, y) {
return console.log(x * y)
}
// 일반적인 함수 선언식
const sum = (x, y) => {
return console.log(x + y)
}
// arrow함수를 이용한 함수표현식
minor = (x, y) => {
return console.log(x - y)
}
// arrow함수를 이용한 함수선언식
sum(2, 2)
minor(2, 2)
multiple(2, 2)
IIFE 즉시 실행함수
함수선언과 동시에 함수를 실행하는 기능을 가진다
사용법 : 함수를 ()로 랩핑 해준후 함수 밖에서 한번도 ()를 써준다
주의사항 : 코드 convention에 따라서 ;붙이는 사람도있고 안붙이는 사람도 있지만 즉시실행함수는 마지막에 ;을 작성하지 않으면 에러가 난다
ex)IIFE 즉시 실행 함수 예시
const a = 7;
(function(){
console.log(a*2)
})()
호이스팅 이란?
함수 호출을 먼저 작성하고 함수선언식을 작성했음에도 함수선언식이 최상단으로 올려지는 현상을 말한다
ex 호이스팅 예시)
sum(2,1)
function sum(x,y){
return console.log(x+y)
}
위 코드에서 sum(2,1)은 함수 호출로써 아직 js는 sum함수가 어떻게 작성했는지 모르는 상태이기에 error를 출력해야하는것이 당연함에도 출력값 3을 나타낸다
이유는 호이스팅현상 때문이다 즉 함수선언식이 함수 호출보다 더 위에 위치하게 되기 때문이다
반대로 함수 표현식에서는 호이스팅 현상이 나타나지 않아 error message를 출력한다
ex)
sum(2,1)
const sum = function(x,y){
return console.log(x+y)
}
타이머함수
setTimeout(함수,시간ms) : 일정 시간 후 함수를 실행한다
setInterval(함수,시간ms) : 일정 간격으로 함수를 반복해서 실행
clearTimeout() : 설치된 timeout 함수를 종료
clearInterval(): 설치된 interval 함수를 종료
ex setTimeout을 사용한 예시)
const timer = setTimeout(function() {
console.log("Hellow")
}, 3000);
// 3초후에 console창에 Hellow를 출력한다
const h1El = document.querySelector('h1')
h1El.addEventListener("click",function(){
clearTimeout(timer)
})
// html에 h1요소를 클릭했을때 setTimeout함수를 종료
setInterval의 사용법은 setTimeout과 동일하다
