유의적 버전
유의적 버전 (Semantic Versioning, SemVer)
- 특정한 프로그램의 버전을 명시할 때 ‘유의적 버전’이라는 개념을 사용한다.
- .로 구분하여 총 3개의 숫자가 사용된다.
- 유의적 : 의미가 있다.
e.g. 12.14.1 : major.minor.patch
major : 기존 버전과 호환되지 않는 새로운 버전
minor : 기존 버전과 호환되는 새로운 기능이 추가된 버전
patch : 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전
e.g. ^12.14.1
^(캐럿 기호) : major 버전 안에서 minor, patch버전이 가장 최신 버전으로 업데이트 가능
→ node.js를 업데이트 하면 major버전은 바뀌지 않고 minor, patch버전이 가장 최신 버전으로 바뀔 수 있다.
한 가지 주의해야 할 점은,
package.json에서 버전이 명시되어있더라도 실제로 설치된 버전은 명시된 버전과 다를 수 있다.
그 내용은 node_modules 폴더 - lodash 폴더 - package.json 파일 내에서
version 옵션에 설치된 버전을 확인 할 수 있다.
[GIT] NPM 프로젝트의 버전 관리
npm으로 버전 관리할 때 몇 가지 주의할 점
터미널에서 npm install 이나 npm run build 명령어를 통해 자동으로 만들어진
node_modules, .cache, dist 폴더들은 버전 관리가 필요 없다.
즉, git 저장소에 따로 push 하지 않아도 된다는 말이기도 하다.
node_modules 폴더는 내용이 굉장히 많기 때문에 용량이 크기도 하다.
버전 관리가 필요 없고 용량이 큰 파일을 git저장소에 올리면 비효율적이다.
node_modules, .cache, dist 폴더들을 따로 버전 관리 하지 않겠다고 선언해주면 좋다.
프로젝트 루트 경로에서 .gitignore 파일을 수동으로 생성한다.
.gitignore 파일에 무시할 파일, 폴더를 한 줄에 하나씩 명시해 준다.
git을 통해 버전 관리를 할 때 .gitignore 파일을 확인해서 관리하지 않을 파일들을 확인한다.
.gitignore 파일을 생성한 후
터미널에서 git init 명령어를 실행 해 프로젝트를 git으로 버전 관리를 시작한다.
git status 명령어를 입력하면 프로젝트의 버전 관리 내용을 볼 수 있는데
또 오류가 나타났다.
refer ↓
해당 경로의 폴더에서 의심스러운 소유권을 발견했다.. 는 내용인 것 같다.
그리고 해결 방법도 친절히 안내 되었다.
해당 경로에 대해 예외를 추가하려면 다음 명령어를 호출하라고 해서
git config --global --add safe.directory 'D:/패캠_리액트리덕스/test'
위 명령어를 실행했더니 해결되었다.
그리고 git으로 관리 하는 파일 중 .gitignore에 명시한 파일은 없는 것도 확인할 수 있다.
refer ↓
git add . 명령어로 모든 파일을 추적 상태로 만들어 commit할 수 있는 상태로 바꾼다.
git commit -m '프로젝트 생성' 메세지를 입력하여 버전을 생성 한다.
git log 명령어로 버전이 잘 생성되었는지 확인한다.
commit 내역에서 빠져나올 때는 q 키를 입력한다.
프로젝트를 git 저장소에 업로드 하기 위해, git 저장소를 생성 해야 한다.
git 저장소는 여러가지가 있다. 실무에서는 gitlab을 사용했는데
이 강의에서는 github 저장소를 이용했다.
github 페이지에서 로그인 후, git repository(저장소) 목록에서 새로운 저장소를 생성한다.
생성된 저장소의 주소를 복사한다.
터미널에서 git remote add origin 깃저장소주소 명령어를 입력해 원격 저장소에 연결한다.
원격 저장소를 추가 할 것이고
원격 저장소의 별칭은 통상적으로 origin으로 하고
추가 할 원격 저장소의 주소를 입력한다.
정상적으로 원격 연결이 되었으면
git push origin master 명령어를 입력해 프로젝트 내용을 업로드 한다.
origin 이라는 원격 주소의 master branch에 업로드해라.
JS 1. ECMA Script
: 자바스크립트 문법을 표준화 해주는 국제 표준화 기구.
자주 접하게 될 ES6(ES2015)는 2015년도에 나온 자바스크립트의 버전이다.
프로젝트 생성 및 npm으로 관리하기
자바스크립트 공부를 위해 새로운 폴더를 하나 생성하고 에디터에서 열어준다.
터미널에서 npm init -y 명령어를 실행 해 이 프로젝트 폴더를 ‘npm으로 관리하기’를 시작한다.
4 주차의 학습 내용을 바로 복습할 수 있어서 좋았다.
JS 2. BASICS & DATA TYPES
하나의 실행 문은 마지막에 ; 로 구분한다.
code convention : 관습 적인 코딩 규칙
명시적으로 한 줄에는 한 개의 실행 문만 작성하도록 한다.
// typeof 키워드
console.log(typeof 'hi'); // string
console.log(typeof 123) // number
console.log(typeof true) //boolean
console.log(typeof undefined) //undefined
console.log(typeof null) //object
console.log(typeof {}) //object
console.log(typeof []) //object
// 데이터타입 상세히 구분해주는 함수
function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1)
}
console.log(getType(123)) //Number
console.log(getType(false)) //Boolean
console.log(getType(null)) //Null
console.log(getType({})) //Object
console.log(getType([])) //Array자주 쓰이는 함수를 여러 파일에서 사용하기
keyword [ export, import ~ from ]
// * getType.js
// 함수를 여러 파일에서 사용하는 방법
// # 함수 앞에 export default 키워드를 붙여준다.
// ## 함수를 자바스크립트 파일 밖으로 내보낼 수 있고,
// ## default 키워드가 있기 때문에 이 파일에서 기본적으로 내보내지는 함수 데이터로 지정이 된다.
export default function getType(data) {
return Object.prototype.toString.call(data).slice(8, -1)
}// * main.js
// getType이라는 함수 데이터를 getType.js파일에서 가지고 온다. (경로에서 파일 확장자 생략가능)
import getType from './getType'주의해야 할 점이 있다. 4 주차에서 npm 에서 lodash 모듈을 설치했을 때,
import와 from 키워드를 이용해서 node_modules에서 가지고 왔었다.
경로를 설정하지 않고 import getType from ‘getType’ 이라고 작성하면
node_modules폴더에서 getType을 찾게 되고 에러가 발생한다.
꼭 from 키워드 다음에 js파일 경로를 명시해준다.
JS 4. 조건문 (statement)
/* 랜덤으로 1자릿수의 정수 반환하기 */
// Math : 자바스크립트의 수학 객체
// Math.random() : Math객체의 random 메소드 실행 가능 -> 0이상 1미만의 무작위의 숫자인 난수를 반환
// Math.random() * 10 -> 1자릿수의 정수와 소수점을 반환
// Math.floor(숫자) : 내림처리(소수점 이하는 버림) 해주는 메소드
export default function random() {
return Math.floor(Math.random() * 10)
}JS 4-1. If statement
import random from './getRandom'
const a = random()
if(a === 0) {
console.log('a is 0') // (랜덤으로 0이 반환되었을 때) a is 0
} else if (a === 5) {
console.log('a is 5') // (랜덤으로 0이 아니고 5가 반환되었을 때) a is 5
} else {
console.log('rest...') // (0도 5도 아니면) rest...
}if 나 else if 의 조건이 true 이면 해당 조건의 {실행 문}만 실행하고 그 다음은 해석하지 않음
조건이 false이면 다음 조건이나 {실행 문} 으로 넘어간다.
JS 4-2. switch statement
import random from './getRandom'
const a = random()
switch (a) {
case 0: // a가 0인 경우
console.log('a is 0')
break
case 2: // a가 2인 경우
console.log('a is 2')
break
case 4: // a가 4인 경우
console.log('a is 4')
break
default: console.log('rest...')
}break문이 없으면 break문이 나올 때 까지 모두 해석한다.
조건이 단순할 때에는 if..else 조건문보다 switch 조건문이 훨씬 직관적일 수 있다.
JS 5. 반복문 (for statement)
for (시작 조건; 종료 조건; 변화 조건) { 종료 조건이 true일 때 실행 문 }
for 문의 실행 순서
시작 조건 → ( 종료 조건 true → {} 문 실행 → 변화 조건 실행 ) → ( 종료 조건 true → {} 문 실행
→ 변화 조건 실행 ) → … → 종료 조건 false → for문 종료
<ul></ul>const ulEl = document.querySelector('ul');
// textContent : element의 내용을 지정할 수도 있고, 내용을 반환할 수도 있다.
for (let i=0; i<3; i+=1) {
const li = document.createElement('li')
li.textContent = `list-${i + 1}`
if((i + 1) % 2 === 0) {
li.addEventListener('click', function () {
console.log(li.textContent)
})
}
ulEl.appendChild(li)
}result ↓
JS 6. 변수의 유효 범위 (Variable Scope)
변수 선언을 위한 키워드 var let const
유효 범위 : 변수가 유효하게 동작할 수 있는 범위
block-level-scope : 함수, if 문, for 문, while 문, try/catch 문 등 모든 코드 블록, { } 내부 범위
function-level-scope : 함수 내부의 범위
let, const 는 block-level의 범위를 가진다. { } 안에서만 참조할 수 있고, 밖에서는 참조할 수 없다.
전역 변수는 { } 안에서도 참조할 수 있다.
const b = 234
function scope() {
if (true) {
console.log(b) // 234
console.log(a) // undefined
const a = 123
}
}
scope()function scope() {
console.log(a) // Uncaught ReferenceError: a is not defined
if (true) {
const a = 123
}
}
scope()JS 6-1. var 사용을 권장하지 않는 이유
var는 function-level의 유효 범위를 가진다.
block-level의 범위 밖에서도 참조가 가능하며 함수 내에서는 어디에서 나 참조 가능하다.
의도치 않은 실수를 하게 될 수도 있기 때문에, 오류가 정확히 나타나는 let, const 사용을 권장한다.
JS 7. 형 변환 (Type conversion)
JS 7-1. 자바스크립트에서 == 연산자 사용 지양
자바스크립트에서는 실수를 막아주기 위해? 형 변환을 자동으로 적용 시키기도 한다.
== 연산자 나 != 연산자에서 확인 할 수 있다.
이 점은 의도치 않은 결과를 나타낼 수 있기 때문에 사용을 권장하지 않는다.
자바스크립트에서는 === 연산자 나 !== 연산자 사용을 권장한다.
JS 7-2. Truthy, Falsy
자바스크립트에서는 형 변환에 의해서 거짓 값이 될 수도 있고, 참 값이 될 수도 있다.
Falsy (false 같은 값) : false, ‘’, null, undefined, 0, -0, NaN
Truthy (true 같은 값, Falsy가 아닌 값들) : true, {}, [], 1, 2, ‘false’, -12, ‘3.14’, …
NaN (Not a Number)
: 숫자 데이터이지만 숫자와 숫자가 아닌 데이터가 연산 되는 경우 반환 되는 값
→ 의도치 않은 결과를 낼 수 있기 때문에 NaN값이 반환 되지 않도록 유의
#패스트캠퍼스 #내일배움카드 #국비지원 #K디지털기초역량훈련 #바이트디그리 #react강의 #React&Redux로시작하는웹프로그래밍
