github 사용방법을 배우고 이제 다시 넓고 깊은 Javascript 로 돌아왔다...

nodejs와 npm, nvm

node js 설치는 복잡하고 삭제는 더 더 더 복잡하구나...
nodejs 설치 가보자고~!

다음은 nvm-windows 에 들어가 nvm setup 다운받기!

nvm이란?

: NPM(Node Version Manager). 노드의 버전을 관리하는 도구.

nvm 사용하기
nvm --version
nvm install 설치버전
nvm use 사용버전
nvm ls : 노드버전 사용하기
nvm uninstall : 지울 버전
node __version

npm이란?

: NPM(Node Package Manager). 전 세계 개발자들이 만든 다양한 기능(패키지,모듈)들을 관리

npm 사용하기
npm init -y
npm install 패키지이름 -D ->dev Dependencis
npm install 패키지이름 -> dependencis

다운로드하는 방법 잘 알아두기!


classes

class 선언

class 클래스명{
constructor(매개변수,매개변수){
this.속성 = 매개변수;
this.속성 = 매개변수;
}
매서드명( ){
실행문
}
}
오브젝트명 = [
new 클래스명(인수,인수,인수),
new 클래스명(인수,인수,인수)
]

class 의 정의 읽고 바로 코딩해보았다.
구조랑 새로운 생성자 이름만 익히면 어렵지 않을 것 같다.
(아직은)


Book 으로 class 열어 consructor 매개변수에 type, title 을 넣고
list 라는 매서드로 받아 console.log에 배틱을 넣어 매개변수를 입력한다.
const my 라는 오브젝트를 만들어 new Book() 안에 인수를 넣어 배열을 만든다.
my.매서드명인 list 를 열어 콘솔 창에서 값을 확인한다.

같은 식을 함수를 사용해 만들어보자

다시 class 를 사용해 인스턴스를 사용해 화면에 보이도록 코딩해보았다.

extends를 통한 클래스 상속(sub classing)

extends 키워드는 클래스 선언이나 클래스 표현식에서 다른 클래스의 자식 클래스를 생성하기 위해 사용된다.

class 자식클래스명 extends 부모클래스명{
constructor(매개변수,매개변수){
super()
this.속성 = 매개변수
}
매서드명( ){
실행문
}
}


class Book{
constructor 를 넣어 만들고

class Graphic(자식) expends Book(부모) 형식을 만들어
constructor 안에 level 이라는 새로운 매개변수를 추가한다.
이때 super 키워드가 등장한다.

super 란?

: super 키워드는 객체의 부모가 가지고 있는 메서드를 호출하기 위해 사용된다.

super를 사용해 부모였던 Book 클래스명의 매서드 list 로 가져온다.
const myGraphic =[] 배열을 사용해 new Graphic 으로 작성한다.


class 지만 let 으로 변수를 선언할 수도 있다.
그럴 경우 class 이름이 아닌 let 이름을 사용해 작업을 한다.

let Rect = class Num{}
으로 만들었다면 Rect 을 사용한다!


파일 만들어 다시 한 번 해보기

배열

const all = {} 이라는 함수를 만든다.
console.log(all.type) 의 value 는 it이다.
console.log(all['type']); 의 value 또한 it 이다. []를 사용할 수 있다.
특수한 경우도 있다.
key 값이 따옴표가 들어간 경우, 여기서는 'num-level' :3 이라고 코딩해보겠다.
이런 경우에는 console.log(all['num-level']); 로 []를 사용해 감싸준다.


한 번 더~!


구조분해할당 (Destructuring)

구조분해할당 이란?

: 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식.


(1) 객체 할당 기본 시스템
const {a1,a2,a3} ={} 함수를 만들어 키값과 value 를 지정한다.
console.log(a1) 을 하면 당연히 a1 은 10으로 나온다.

(2)
const book = {} 함수를 만들어 키값과 value 를 지정한다.
type,title,price 세 가지만 넣고
const {type,title,price 를 넣고 여기에 level=0} = book 으로 만든다.
console.log(type) 을 하면 type 의 value 인 it 가 나온다.

console.log(level)을 하면 type 의 value 인 0이 나오는데, 이 때
const book 안에 level:3 이라는 값을 넣는다.
그러면 console.log(level) 값은 3이 된다.
우선순위는 객체이다.

(3)
const welcome = type; 으로 type의 value 'it' 는 type 이 아닌 welcome 이라는 이름에 담기게 된다.
console.log(welcome) 으로 확인해보면 welcome 의 value 값이 it 가 되어있는 것을 알 수 있다.

(4)
const graphic ={}을 만들어
some : 'paint',
bookname: 'painter' 로 값을 정한다.

const {some:subtitle,bookname} = graphic;
console.log(subtitle); 로 콘솔창을 보면 some 의 value 값이었던 paint 가 나온다. 이 역시 위와 비슷한 맥락으로, const {some:subtitle}로 some 키값이 subtitle 로 할당된 것이다.


한 번 더~!


스프레드연산자(...)

: 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있다.

(1) 배열에서의 스프레드 연산자

const color = [] 배열로 4가지 색깔을 넣는다.
const [car,bus, ,my] = color; 로 세 번째 value 를 , , 로 제외한 후 다른 이름을 넣는다.
console.log(car); 는 첫 번째 값인 red 가,
console.log(my); 는 맨 마지막 값인 green 이 나온다.


const fruit = ['apple','orange','banana'];
console.log(fruit[0]); -> apple
console.log(fruit[1]); -> orange
console.log(fruit[2]); -> banana
까지는 예상할 수 있는 값이다.

하지만 이 때 스프레드 연산자를 사용해
console.log(...fruit); 를 입력한다면 값은
apple orange banana 로 fruit 의 값이 모두 배열되어 나온다.

(2) 함수에서의 스프레드 연산자

function toOj(a,b,c){
return {
a:a,
b:b,
c:c
}
}
console.log(toOj(fruit[0],fruit[1],fruit[2]));
console.log(toOj(...fruit));

toOj 라는 함수를 만들어 return 안에 값을 넣는다.
console.log 로 toOj 의 furit 배열을 나열하면 콘솔창에 나오는 값은

{a: 'apple', b: 'orange', c: 'banana'}
a: "apple"
b: "orange"
c: "banana" 이러한 배열로 나온다.

스프레드연산자를 사용해
console.og(toOj(...fruit)); 로 적어도
같은 값이 나오는 것을 확인할 수 있다.

(3)축약형 만들기

const color = ['red','blue','green','orange'];
라는 변수를 선언하여 값을 배열한다.

① 함수
function myColor(a,b,...c){
return{
a:a,
b:b,
c:c
}
}

myColor 이름으로 함수를 선언한 후 (a,b,...c) 로 스프레드 연산자 사용, return 으로 값을 반환한다.
콘솔창을 열어 확인하면

{a: 'red', b: 'blue', c: Array(2)}
a: "red"
b: "blue"
c: (2) ['green', 'orange']

으로 a와 b에는 값이 들어가고 c에는 배열 두개의 값이 묶여 배열이 된 것을 볼 수 있다.

② 1차 변형 (축약)
function myColor(a,b,...c){
return{a,b,c
}
}

return 에 a,b,c 라는 키값만 넣어 축약했다.

③ 2차 변형 :화살표 함수
const myColor = (a,b,...c) =>{return{a,b,c}}

화살표 함수를 사용해 축약할 수 있다.

④ 3차 변형
const myColor = (a,b,...c) => ({a,b,c})

return 을 빼면 남은 객체를 식으로 만들어야 한다.


정규표현식

정규표현식에 대해서도 배워보았다!
특정 문자 조합을 찾기 위한 패턴으로, 처음 배우는 건데도 뭔가 재밌고 익숙한 느낌..

생성자 방식과 리터널 방식을 사용해 정규 표현식을 사용하는 것을 배워보았다!

생성자 방식

새로운 const 함수를 만들어 찾을 문자를 작은 따옴표로 만든다. console.log 에 위의 함수 이름인 str에 match 되는 문자를 찾아달라고 하면 콘솔 창에서 the 와 전역으로 찾아달라는 플래그 gi를 넣는다!

리터널 방식

const 를 선언하고 /찾을 문자/(전역으로 찾아주는 플래그)gi; 를 입력하고 이도 역시 콘솔을 열어 str.match(함수이름) 을 넣으면 결과를 확인할 수 있다.

이번엔 문자열에 일치하는 부분이 있는지 확인해 true 또는 false를 반환하는 test 를 사용해보았다.

let str2 에 배틱으로 바꾸고 싶은 메일 주소를 넣는다.
리터널 방식으로 naver 를 찾아 replace 를 넣는다.
replace 는 문자열에서 일치하는 부분을 탐색하고, 그 부분을 대체 문자열로 바꾸는 매소드이다.

신기한 백슬래시

정규 표현식은 정말 다양한데, 백슬래시도 사용할 수 있다.
리터널 방식으로 /백슬래시.$/gm(모든 패턴의 다중 라인일 경우도 검색) 을 넣는다.
자바스크립트 초반에 $는 선택자에서 $ 앞에 있는 문자로 끝나는 것을 찾아달라는 기호였는데, 여깃도 그렇다.
그럼 콘솔창에 .이 몇개인지 나온다.

^


신기한 .gitignore


코딩하고 있는 파일 중 git 에 업로드하고 싶지않은 파일만 따로 빼내어 github 에 업로드되지 않는 방법을 배웠다!
신 박 신 박
.gitignore 라는 파일을 만들어
파일명을 넣고 / 를 작성하면 그 파일은 github 에 올라가지 않는다.

ex) .gitignore 파일 사용
cache/
index.html/

다시 javascript 로 돌아왔으니 다시 javascript 공부랑 jquery 공부 꾸준하게 가보자고~!

profile
매일 하는 것보다 중요한 건 그럼에도 불구하고 그만두지 않는 것

0개의 댓글