1. Node.js
node.js 설치
🤔 LTS(Long Term Supported)
장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전으로, 유지/보수와 보안(서버 운영 등)에 초점을 맞춰 대부분 사용자에게 추천되는 버전이다.
NVM 설치
https://github.com/coreybutler/nvm-windows
nvm --version 명령어로 정상적으로 설치되었는지 확인한다.
다음 명령어를 통해 필요한 버전을 설치하고 사용할 버전을 변경, 삭제할 수 있다.
nvm install {버전명} // 설치
nvm use {버전명} // 변경
nvm uninstall {버전명} // 삭제NPM 시작하기
- NPM(Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리하는 것이다.
VSCode에서 터미널창에서 다음 명령어를 입력한다.
npm init -y
npm install parcel-bundler -D
npm install lodash생성되었던 패키지(node_modules 폴더)를 삭제하더라도 내역이 남아있으므로 npm i 명령어를 통해 재생성 할 수 있다.
다만, package.json과 package-lock.json 파일은 절대 삭제하지 않도록 주의해야 한다!
🤔
-D(--save-dev)
-D(개발용 의존성 패키지): 개발 시에만 사용하는 패키지, 웹 브라우저에서 동작 ❌- 일반 의존성 패키지: 실제 웹 브라우저에서 동작 ⭕
개발 서버 실행과 빌드
parcel
개발용 의존성 패키지로 parcel-bundler를 설치했으므로 이를 통해 개발 서버를 열어주는 기능을 동작시킬 수 있다.
우리 프로젝트에만 설치된 것이라 터미널에서는 'parcel' 명령어를 알 수 없다. 따라서 package.json의 scripts에 명령을 추가해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./main.js"></script>
</head>
<body>
</body>
</html>console.log('hello world');실행시키면 '1234'라는 포트번호에 현재 프로젝트가 실행된다.
npm run dev
> test@1.0.0 dev
> parcel index.html
Server running at http://localhost:1234
√ Built in 14.18s.👉 실행 결과
lodash
html 코드는 위(parcel)에서 사용된 코드와 동일하다.
import _ from 'lodash'
console.log('hello world');
console.log(_.camelCase('hello world'));👉 실행 결과
개발용 서버 열기
scripts에 명령을 추가한다.
build❌: 로컬 환경에서 개발용으로 서버를 연다.build⭕: 실제로 사용자들이 보는 용도의 결과물이 출력된다.
"scripts": {
"dev": "parcel index.html",
"bulid": "parcel build index.html"
}dist라는 폴더가 생성된 것을 확인할 수 있다.
npm run build
> test@1.0.0 build
> parcel build index.html
√ Built in 26.58s.
dist\main.99f1bc7e.js.map 715.73 KB 148ms
dist\main.99f1bc7e.js 92.81 KB 14.30s
dist\index.html 274 B 11.83s유의적 버전
- Semantic Versioning, SemVer
- Major: 기존 버전과 호환되지 않는 새로운 버전이다.
- Minor: 기존 버전과 호환되는 새로운 기능이 추가된 버전이다.
- Patch: 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전이다.
- ^: Major 버전 안에서 가장 최신 버전으로 업데이트가 가능하다는 의미이다.
- 12: Major, 14: Minor, 1: Patch
NPM 프로젝트의 버전 관리(.gitignore)
따로 버전 관리가 필요하지 않는 파일들은 GitHub에 업로드 할 필요가 없다.
특히 node_modules 같은 경우, 프로젝트에서 사용하는 parcel과 lodash 등 모든 패키지가 다 포함되어 있으므로 파일도 많고 용량이 크다. (시간도 오래 걸리고 효율이 떨어진다!!) node_modules는 npm i 명령어를 통해 똑같은 버전으로 재생성이 가능하므로 굳이 저장소에 업로드 하지 않아도 된다.
.gitignore 파일을 생성하여 Git에서 무시할 내용들을 파일에 명시한다.
2. JavaScript
데이터 타입 확인
typeof 이미 지원하는 키워드를 통해서 확인할 수도 있지만, 명확하게 알려주지는 않으므로 대신하여 사용할 수 있는 별개의 함수를 만들어서 동작시킬 수도 있다.
main.js
console.log(typeof 'hello world')
console.log(typeof 123)
console.log(typeof true)
console.log(typeof undefined)
console.log(typeof null)
console.log(typeof {})
console.log(typeof [])
function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1)
}
console.log(getType(123))
console.log(getType(false))
console.log(getType(null))
console.log(getType({}))
console.log(getType([]))❗ 이를 다른 프로젝트에서도 문제 없이 사용하려면?
getType.js
export default function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1)
}main.js
import getType from './getType'
console.log(typeof 'hello world')
console.log(typeof 123)
console.log(typeof true)
console.log(typeof undefined)
console.log(typeof null)
console.log(typeof {})
console.log(typeof [])
console.log(getType(123))
console.log(getType(false))
console.log(getType(null))
console.log(getType({}))
console.log(getType([]))main.js에 getType() 함수가 존재하지 않아도 import를 통해 다른 파일(getType.js)에서 가져와서 사용할 수 있다.
연산자
산술 연산자
+: 덧셈 연산자-: 뺄셈 연산자*: 곱셈 연산자/: 나눗셈 연산자%: 나머지 연산자
할당 연산자
=: 변수에 값을 할당한다.+=,-=등..
비교 연산자
Boolean 값을 반환한다.
- 일치 연산자
===- 왼쪽과 오른쪽의 데이터가 같은지 비교한다.
- 불일치 연산자
!==- 왼쪽과 오른쪽의 데이터가 다른지 비교한다.
>,<,>=,<=- '=' 기호는 꺽쇠 연산자보다 뒤쪽에 작성해야 한다! (
=<,=>❌)
- '=' 기호는 꺽쇠 연산자보다 뒤쪽에 작성해야 한다! (
논리 연산자
- AND 연산자
&&
- OR 연산자
||
- NOT 연산자
!
삼항 연산자
if (a) {
console.log('참')
} else {
console.log('거짓')
}
// 위의 코드를 한 줄로 줄여서 단순하게 표현할 수 있다.
console.log(a ? '참' : '거짓')조건문
If Else
if (a === 0) {
console.log('a is 0')
} else if (a === 2) {
console.log('a is 2')
} else if (a === 4) {
console.log('a is 4')
} else {
console.log('rest...')
}Switch
하나의 case가 끝나면 break문을 붙여주어 다른 case가 실행되지 않도록 종료해야 한다.
조건의 내용이 어떠한 변수가 특정한 값으로 딱 떨어질 때 사용하는 것이 적합하다.
switch (a) {
case 0:
console.log('a is 0')
break
case 2:
console.log('a is 0')
break
case 4:
console.log('a is 0')
break
default :
console.log('a is 0')
}반복문
For
for (시간조건; 종료조건; 변화조건) {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="./main.js"></script>
</head>
<body>
Hello World!
<ul> </ul>
</body>
</html>👉 실행 결과
변수 유효범위
let, const
let과 const는 블록 레벨의 유효범위를 가진다.
🤔 블록 레벨
변수가 선언된 중괄호 부분을 하나의 블록이라고 본다.
var
var는 함수 레벨의 유효범위를 가진다.
따라서 의도하지 않는 범위에서 변수가 사용될 수 있으며, 그만큼 메모리를 차지하게 되면 메모리 누수로 발전할 가능성이 있다.
형 변환
동등 연산자(==)를 사용하게 되면 형 변환이 일어난다. (따라서 동등 연산자는 되도록이면 사용하지 않는 것이 좋다.)
Truthy(참 같은 값)
- true
- {}
- []
- 1, 2 ...
- 'false'
- -12
- '3.14'
Falsy(거짓 같은 값)
- false
- ''
- null
- undefined
- 0
- -0
- NaN
함수
반복적으로 사용되는 함수는 변수에 담아서 사용하는 것이 좋고, 단일로만 사용되는 함수는 그대로 함수의 결과가 사용되는 곳에서 호출하는 것도 하나의 효과적인 사용 방법이다.
return 키워드 밑으로 있는 코드는 실행되지 않고 함수가 종료된다.
화살표 함수
축약형으로 객체 데이터를 반환할 시 소괄호로 감싸주어야 한다.
IIFE(즉시 실행 함수)
익명의 함수를 만들고 소괄호로 감싸면 즉시 실행 함수를 사용할 수 있다.
호이스팅
함수 선언부가 유효범위 최상단으로 끌어올려지는 현상이다.
함수의 '선언'이 호출하는 부분보다 더 밑에 작성되어 있어도 호이스팅이라는 현상에 의해 문제 없이 실행된다.
타이머 함수
setTimeout(함수, 시간): 일정 시간 후 함수 실행setInterval(함수, 시간): 시간 간격마다 함수 실행clearTimeout(): 설정된 Timeout 함수를 종료clearInterval(): 설정된 Interval 함수를 종료
const timer = setTimeout(() => {
console.log('Hello!')
}
, 3000)
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
clearTimeout(timer)
})👉 실행 결과
h1을 클릭하지 않으면 3초 뒤 콘솔창에 'Hello!'가 출력된다.
하지만 출력되기 전에 h1을 클릭하면 clearTimeout(timer)로 인해 출력되지 않는다.
콜백(Callback)
함수의 인수로 사용되는 함수를 뜻한다.
setTimeout(함수, 시간)에서 인수로 사용된 함수는 콜백 함수이다.
특정한 실행 위치를 보장하는 방법으로 콜백 함수를 활용할 수 있다.
