패스트캠퍼스 react 강의 학습후기 5주차

 

이번 주차에는 JS에 대한 필수적인 학습을 한다. 지난 주차에 깔았던 npm을 이용해 parcel-bundler를 이용한다. 여기서 잠시 지난주에는 대강 알고만 넘어갔던 npm과 bundler에 대해 복습을 해본다.

 

npm은 Node Packaged Manager의 약자이다. Node.js로 만들어진 모듈을 웹에서 받아서 설치하고, 관리해주는 프로그램이라는 뜻인데 npm을 설치하면 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있다. node.js를 설치하면 npm은 자동으로 내장되어 있기 때문에, npm을 따로 설치할 필요 없이 node.js만 설치하면 된다.

 

npm init -y

 

이 명령어를 터미날 창에 입력하면 package.json 이 생성된다.

 

npm init parcel-bundler -D   

 

이 명령어를 입력하면 parcel-bundler 를 개발자 모드로 설치할 수 있다. 그런데 parcel은 뭐고, bundler은 뭘까?

 

번들러(Bundler)는 여러개의 파일을 하나의 파일로 묶어주는 역할을 한다. 이 번들러의 종류에는 대표적으로 Webpack, Parcel, Rollup, Browserify등이 있다. 번들러는 애플리케이션에 필요한 모든 종류의 파일을 모듈 단위로 나누어 최서한의 파일 묶음으로 만들어내며, 자바스크립트 파일을 외부에서 알아보기 힘들게 코드를 변환하는 작업을 하거나, ES5문법으로 변환시켜주는 등 다양한 기능을 지원한다.

 

Webpack - 서드파티를 많이 필요로 할 때
Rollup - 최소헌의 서드파티로 라이브러리를 만들고 싶을 때
Parcel - 복잡한 설정 없이 비교적 간단한 어플리케이션을 만들 때

 

 

우리가 하는 것은 국비 지원 과정으로 복잡한 작업이 아닌 간단한 작업이므로, Parcel 의 bunlder를 사용한다. npm run dev를 이용해 개발 서버를 실행시키고, 이번 주차에 배운 화살표, 콜백, 생성자 등을 복습해보도록 하겠다.

실습 이미지

 

 

화살표 함수

 

(인수) => { 함수 동작 } ;

- 익명의 함수를 줄여서 만들 수 있는 간편한 방식이며 인수가 없을 때는 괄호만 표시하고 비워둔다. 

- 화살표 함수의 this는 자신이 선언된 함수 범위에서만 this가 정의될 수 있다. 즉, 화살표 함수의 { } 안에서만 this가 적용된다.

 

CALLBACK 

function timeout (cb) {   
setTimeout( () => {  console.log('run for time out')
cb() },
3000)}

timeout ( ( ) => { //timeout 함수를 호출하면서, 인자로 함수를 작성하여 넣어준다.   
console.log('Done!')
})

- 함수의 인수로 사용되는 함수.

 

생성자 함수

function User(first, last) { //생성자 함수
    this.firstName = first

    this.lastName = last

}

 

생성자로 사용되는 함수. 파스칼 케이스로 첫문자를 대문자로 사용한다.

 

this

const timer = {    
name: 'Heropy!!'

    timeout: function() {

        setTimeout( () => {

            console.log(this.name)

        },3000)

    }

}

timer.timeout()

 

- 일반 함수는 호출 위치에 따라서 this가 정의된다.

- 화살표 함수는 자신이 선언된 함수 범위에서 this를 정의한다. 즉, 화살표 함수를 빠져나와 this를 사용하면 적용되지 않는다. 따라서 함수로 감싸서 화살표 함수를 사용할 경우에만 this의 사용이 원활하게 가능하다.

 

 

class

 

// function User(first, last) { //생성자 함수
//     this.firstName = first
//     this.lastName = last
// }
// User.prototype.getFullName = function () {
//     return `${this.firstName} ${this.lastName}`
// } //prototype :
// const calluser = new User('first', 'last')
// const amy = new User('Amy', 'Clarke')
// const neo = new User('Neo', 'Smith')

// console.log(amy.getFullName())

class User {
    constructor(first, last) {
        this.firstName = first
        this.lastName = last
    }
    getFullName() {
        return `${this.firstName} ${this.lastName}`
    }
}

class 키워드를 이용해서 생성자 함수를 만들 수 있다. prototype을 사용하지 않아도 되어 구문이 짧고 간결해진다. 여기서 constructor는 생성자라는 뜻의 키워드이다.

 

상속

class Vehicle {

    constructor(name, wheel) {

        this.name = name

        this.wheel = wheel

    }

}

class Bicycle extends Vehicle {

    constructor(name, wheel) {

        super(name, wheel)

    }

}

class Car extends Vehicle {

    constructor(name, wheel, license) {

        super(name, wheel)

        this.license = license

    }

}

const coding = new Car('개발자', '4륜', '2종보통')

console.log(coding)
//결과 : Car {name: '개발자', wheel: '4륜', license: '2종보통'}

사실 자바를 경험해본 사람에게 상속은 익숙하고도 쉬운 구조다. 상속관계를 맺은 클래스는 서로 부모-자식간의 관계를 맺는데, 부모가 되는 클래스를 작성해 두고 extends를 통해 내용을 그대로 물려주는 것을 뜻한다. 공통적인 부분을 부모 클래스에 작성해두고, 자식 클래스에서 차별화되는 부분을 작성하여 상속받아 사용한다.

 

 

JS 데이터

 

1) 문자

 

' String mdn ' 이라고 검색해서 나온 문자를 통해 자세히 살펴볼 수 있다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

 

2) 숫자

' Math mdn ' 이라고 검색해서 나온 문자를 통해 자세히 살펴볼 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

 

ex) parseInt(문자데이터) : Int 형식으로 전달받은 문자 데이터를 바꾼다.

ex) parseFloat(문자데이터) : float 형식으로 전달받은 문자 데이터를 바꾼다.

 

3) 배열

 

배열은 0번째부터 출발한다.

const numbers = [1, 2, 3, 4]

에서, 1은 0번째 숫자이다. 즉, console.log(numbers[0]) 으로 확인할 수 있다.

 

ex) forEach() 메소드 // 배열 데이터의 아이템 개수만큼 인수로 전달된 콜백함수가 반복적으로 실행된다.

 

numbers.forEach( function(element,index,array)

{ console.log(element, index, array)

}) 

 

ex) map() 메소드 //반환된 데이터를 기준으로 하여, 새로운 배열을 반환한다. 

ex) filter() // 특정한 기준에 의해 판별된 배열을 새로운 배열로 반환한다.

ex) find() // 조건과 일치하는 아이템을 반환한다.

ㄴ정규 표현식

ㄴex) /^B/   : 대문자 B로 시작하는 데이터

ex) includes() // 특정 데이터가 포함되어 있는지 아닌지를 true, false로 반환한다.

ex) push() // 배열의 가장 뒤에 인수로 전달된 아이템을 삽입한다. 원본 배열이 수정된다.

ex) unshift() // 배열의 가장 앞에 인수로 전달된 아이템을 삽입한다. 원본 배열이 수정된다.

ex) reverse() // 배열 내용의 순서를 거꾸로 뒤집는다. 원본 배열이 수정된다.

ex) splice(index값,지울 개수) // index 번호부터 시작해 지정된 개수만큼의 배열 아이템을 삭제한다. 원본 배열이 수정된다.

 

 

4) Object

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

 

중괄호 { } 를 사용해 리터럴로 표현된 데이터를 뜻하며, prototype이 붙어있지 않은 메소드들을 '정적 메소드' 라고 부른다. Obejct에 할당된 다양한 메소드들을 자유롭게 활용할 수 있다.

 

 

5) 구조 분해 할당

const user = {

    name: 'tis',

    age: 85,

    email: 'tis@naver.com'

}

const { name, age, email, adress } = user

 

객체 데이터에서 내용을 구조 분해하여 원하는 속성들만 꺼내 사용할 수 있는 개념.

cosnt{name, age, email, adress='Korea'} 같은 형식으로 언디파인드를 대비한 초기값을 설정해 줄 수도 있다.

const{name:nickname} 을 통해, 변수의 이름을 활용 정의할 수도 있다. { 꺼내올 이름 : 사용할 이름 } 

배열을 사용할 경우에는 중괄호 대신 대괄호를 사용함에 주의해야 한다.

 

6) 전개 연산자 

const fruits = ['1', '2', '3']

console.log(...fruits)

 

...을 사용하면, 쉼표로 구분된 데이터를 배열 데이터로 전개한다.

 

7) 데이터 불변성

원시 데이터 - String, Number, Boolean, undefined, null
참조 데이터 - Object, Array, Function 

원시 데이터

- 만일 원시 데이터가 기존의 메모리에 저장되어 있는 내용이라면, 새로 메모리를 할당하는 것이 아니라 해당 데이터가 저장되어 있는 메모리의 주소를 바라보도록 만든다. 즉, '생긴 것이 같으면, 같은 주소를 가지고 있다.'

 

참조 데이터 - 새로운 값을 만들 때 마다, 새로운 주소에 할당된다. 즉, 데이터 불변성을 가지고 있지 않다. 이것을 가변성이라고 한다.

 

 

• 배열 등 객체를 복사할 때 카피본을 새 메모리에 저장하는 방법 = 얕은 복사.

const copyarray = Object.assign( {대상객체}, 출처객체) // 출처객체를 복사하여 대상객체에 저장한 뒤 반환한다.
const copyarray = {...복사할객체명}

// 이 경우, 원본 객체에 참조형 데이터가 들어있을 경우(참조형 데이터 안에 참조형 데이터가 있을 경우) 해당 데이터는 같은 주소만 공유하는 상태가 된다.

 

• 깊은 복사 : 모든 데이터들을 복사 처리 하는 방법.

        > lodash 라는 패키지를 사용한다.

          설치법 : 터미널 열고 'npm i lodash' 입력

const user = {

    name: 'tis',

    nickname: 'tory',

    age: '12',

    emails: ['tistory@naver.com']

}

const copyUser = _.cloneDeep(user) //깊은 복제

const normalcopy = {...user} //얕은 복제

user.emails.push('tis2@naver.com')

console.log(user.emails === copyUser.emails) //false

console.log(user.emails === normalcopy.emails) //true