[패스트캠퍼스] 프론트엔드 강의 학습일지(JavaScript)

국비지원교육으로 패스트캠퍼스에서 진행하는 프론트엔드 강의를 듣고 정리한 내용입니다.

---

MDN 문서를 참고합니다.

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

String - JavaScript | MDN

위 문서에서 String 생성자란, new라는 키워드로 문자 데이터를 만들어 내는 것인데, JS에서 '' 를 통해 생성해 준다.

이처럼 기호를 통해 손쉽게 생성하는 방법을 리터럴 방식이라고 한다.

이 외에도 객체: {}, 배열 [] ...등 이 있다.

 

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

String.prototype.indexOf() - JavaScript | MDN

prototype의 개념

prototype을 통해 지정한 메소드는 메모리에 딱 한 번만 만들어지고, 그것을 new키워드로 만들어낸 인스턴스에서 언제든지 활용할 수 있다.

 

전역함수(Global Function)

toFixed()

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

소수점 자리 수를 정해줄 수 있는데, 반환 타입은 string이다.

const str = 3.14159265358979.toFixed(2);
console.log(typeof str) // string

이를 숫자로 변환하려면, 아래 내용을 참고한다.

 

parseInt() 정수 변환

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

Number.parseInt() - JavaScript | MDN

 

parseFloat() 소수점 유지

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

Number.parseFloat() - JavaScript | MDN

 

수학적인 메서드

Math()

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

Math - JavaScript | MDN

자바스크립트에 이미 내장되어있는 객체이다.

 

객체

속성 복사 및 참조

참조할 때 키가 같으면 덮어쓰기가 된다.

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

Object.assign() - JavaScript | MDN

위에 속성 복사로 생긴 데이터는 비교하면 같다고 나온다. (참조형 데이터로 특정 주소를 참조하기 때문이다.)

const age = {
	name: 'hyemin',
  age: 30
}
const email = {
  name: 'hyemin',
  email: 'aaa@aaa.com'
}
const target = Object.assign(age, email);
console.log(target);
console.log(age);

그러나 모양이 같을 뿐, 메모리 주소는 다른 경우도 있다.

const a = { k: 123 };
const b = { k: 123 };
console.log( a === b ); // false (다른 메모리 주소를 바라보고 있기 때문이다.)

그리고 target위치에 비어있는 객체 데이터를 넣으면, 새로운 객체 데이터를 반환한다. (복사)

이렇게 하면, 원본 데이터에 손상 주지 않고 생성할 수 있다.

const target = Object.assign({}, age, email);

 

키 추출

오브젝트의 키만 추출해서 배열로 반환해 준다.

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

Object.keys() - JavaScript | MDN

Object의 인덱싱

객체명['키명'];으로 해당하는 데이터를 가지고 올 수 있다.

const user = {
  name: 'hyemin',
  email: 'aaa@aaa.com',
};
const keys = Object.keys(user);
console.log(keys); // ['name', 'email']
console.log(user['email']); // 해당하는 키의 데이터만 가지고 올 수 있다.

const values = keys.map((key) => user[key]);
console.log(values);

 

구조 분해 할당(비구조화 할당)

데이터의 구조를 분해해서 사용할 수 있다.

장점은 필요한 속성들만 꺼내서 사용할 수 있다.

const user = {
  name: 'hyemin',
  email: 'aaa@aaa.com',
};
const {name, email, address} = user;
console.log(name); // hyemin
console.log(email); // aaa@aaa.com
console.log(address); // undefined

속성이 추후 추가 될 상황을 대비하여 기본 값을 지정해 줄 수 있다.

const user = {
  name: 'hyemin',
  email: 'aaa@aaa.com',
};
const {name, email, address = 'korea'} = user;
console.log(address); // korea

속성의 이름을 대체해서 사용할 수 있다.

const user = {
  name: 'hyemin',
  email: 'aaa@aaa.com',
};
const {name: hyemin, email, address = 'korea'} = user;
console.log(hyemin); // hyemin

구조 분해 하는 데이터의 타입에 맞게 기호를 사용해야 합니다.

아래와 같이 배열 데이터의 경우엔 이름으로 구조 분해해서 추출하는 게 아니고, 순서대로 추출이 된다.

const fruits = ['Apple', 'Banana', 'Cherry'];
const [a, b, c, d] = fruits;
console.log(a, b, c, d); // Apple Banana Cherry undefined

배열 데이터에서 뽑아오고 싶은 데이터가 있다면 그 순서에 맞추어 ,(쉼표)로 구분해서 추출하면 된다.

const fruits = ['Apple', 'Banana', 'Cherry'];
const [, , b] = fruits;
console.log(b); // Cherry

 

전개 연산자(Spread)

const fruits = ['Apple', 'Banana', 'Cherry'];
console.log(...fruits); // Apple Banana Cherry

function toObject(a, b, c) {
  return {
    a: a,
    b: b,
    c: c,
  };
}
console.log(toObject(...fruits));

 

만약 과일의 배열이 늘어난다면? 나머지 매개변수(rest parameter)를 사용해서 나머지를 모두 받는다.

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'];

function toObject(a, b, ...c) {
  return {
    a: a,
    b: b,
    c: c,
  };
}
console.log(toObject(...fruits));

객체 데이터 속성과 데이터의 이름이 같으면 하나만 작성해도 된다.

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'];

function toObject(a, b, ...c) {
  return {
    a,
    b,
    b,
  };
}

// 위 코드를 화살표 함수로 사용 한다면?
const toObject = (a, b, ...c) => ({a,b,c}); // 화살표함수에서 중괄호는 코드블록이라서, 객체 데이터를 반환한다면 꼭 소괄호로 감싸서 정의해줘야함!

console.log(toObject(...fruits));

 

데이터 불변성

원시(기본) 데이터: String, Number, Boolean, undefined, null..

참조형 데이터: Object, Array, Function

 

원시 데이터는 불변성이다.

let a = 1;
let b = 4;
console.log(a, b, a === b); // flase
b = a;
console.log(a === b); // true
a = 7;
console.log(a === b); // false
let c = 1; // 원시형 데이터는 새로운 데이터를 새롭게 만드는게 아니고, 메모리에 있는 건 불변하기 때문에 기존에 있던 메모리의 주소를 갖는다.
console.log(b === c); // true

참조 데이터는 가변 한다.

참조형으로 메모리 주소만 참조하기 때문에 값을 변경할 때, 연결된 변수들의 값이 다 변경될 수 있으니 주의해야 한다.(이런 경우엔 복사해서 사용)

let a = { k: 1 };
let b = { k: 1 };
console.log(a === b); // false 똑같이 생긴 데이터지만, false값으로 서로 다른 메모리 주소를 바라보고 있다는 의미
// 참조형 데이터는 불변성이 없다.(가변한다.) 추가로 새로운 데이터가 생성되면 새로운 메모리에 넣는다.
a.k = 2;
b = a;
console.log(a === b); // true
a.k = 2;
console.log(a, b, a === b); // true 같은 메모리를 바라보고 있는 경우 값이 바뀔 수 있으니 주의하자!

 

얕은 복사와 깊은 복사

// 얕은 복사 방법 1
const user = {
  name: 'hyemin',
  age: 20
};
const copy1 = Object.assign({}, user);
console.log(copy1 === user); // false

// 얕은 복사 방법 2
const copy2 = {...user};
console.log(copy2 === user); // false

얕은 복사는??

아래 코드처럼 객체의 겉만 복사하고 내부 속성까지 복사는 하지는 못해서 true 값이 나왔다.

const user = {
  name: 'hyemin',
  age: 20,
  email: ['aaa@aaa.com']
};
const copy1 = Object.assign({}, user);

user.emails.push('aaa@aaa.com');
console.log(user.email === copy1.email); // true

깊은 복사는 lodash 패키지의 도움을 받아본다.

https://lodash.com/

Lodash

npm i lodash로  설치한다.

import _ from 'lodash'; // _(언더바)로 사용하는걸 권장함

// 깊은 복사 방법(lodasy 사용)
const user = {
  name: 'hyemin',
  age: 20,
  email: ['aaa1@aaa.com']
};
const copy1 = _.cloneDeep(user); // lodash에서 모든 속성을 반복적(재귀)으로 복사한다.
console.log(copy1 === user); // false

user.age = 30;
user.emails.push('aaa2@aaa.com');
console.log(user.email === copy1.email); // false
console.log(user);
console.log(copy1);

 

자바스크립트의 Import와 Export

• Import를 통해 불러오기 위한 js 파일이다.(main.js...)
• 내보내기 위한 js를 module이라고 한다.(module.js)

 

하나의 자바스크립트 파일은 내보내기 위한 통로는 2가지가 있다.

1. Default export인 기본으로 이름 지정하지 않아도 되는 방식(기본통로)
2. Named export인 이름 지정 방식

기본 통로(export default)

• 내보낼 때 기본 통로로 내보내기 때문에 함수명을 지어주지 않아도 된다.
• 그러나 단 하나의 데이터만 내보낼 수 있다.(Only one default export allowed per module)

export default function (data) {
  return Object.prototype.toString.call(data).slice(8, -1);
}

이름 지정 통로(named export)

• 이름이 지정된 통로로 나오는 데이터의 경우 사용하는 곳에서 {} 중괄호로 묶어서 사용해야 한다.
• 여러 개의 데이터를 내보낼 수 있다.
• export default인 기본 통로도 같이 사용할 수 있다.

// 내보내는 곳(getRandom.js)
export function random() {
  return Math.floor(Math.random() * 10);
}

export const user = {
  name: 'hyemin'm
  age: 10
}

export default 123;

// 사용하는 곳(main.js)
import { random, user } from './getRandom'; // From getRandom.js

console.log(random);
console.log(user);

// 꺼내오는 데이터의 이름을 변경하고 싶을땐 as 키워드를 사용한다.
import { random, user as hyemin } from './getRandom';


console.log(random);
console.log(hyemin);

// 여러개의 데이터를 한번에 가져오는 방법
import * as R from './getRandom';
console.log(R); // {default: 123, randor: randor(), user: {...}}

 

Lodash 사용하여 데이터 처리하기

https://lodash.com/

Lodash

중복 데이터 처리하기

• uniqBy, unionBy를 사용하여 데이터 고유화할 수 있다.

특정 데이터를 찾거나 삭제할 수 있다.

/**
 * lodasy
 * uniqBy: 특정 배열(1개)의 특정 속성을 고유화 시킴(중복 데이터 처리)
 * unionBy: 여러개 배열을 합치고, 마지막 인수에 있는 특정 속성을 고유화 시킴
 * find: 배열 데이터에 해당하는 데이터를 찾는다.
 * remove:해당 데이터 삭제
 */
const userA = [
  {
    userId: '1',
    name: 'A1',
  },
  {
    userId: '2',
    name: 'A2',
  },
];
const userB = [
  {
    userId: '1',
    name: 'B1',
  },
  {
    userId: '2',
    name: 'B2',
  },
];
const users1 = userA.concat(userB);
console.log('concat', users1);
// uniqBy: 해당하는 배열 데이터(인수1)를 특정 데이터(인수2)를 고유화 시킴
console.log(_.uniqBy(users1, 'userId'));
// unionBy: concat을 사용하지 않고 바로 합치고 고유 값을 해결하는 방법(배열데이터 여러개 나열, 마지막 인수에 합칠 고유 값)
const users2 = _.unionBy(userA, userB, 'userId');
console.log('unionBy', users2);
// find
const foundUser = _.find(userA, { name: 'A1' });
const foundUserIndex = _.findIndex(userA, { name: 'A1' });
console.log(foundUser);
console.log(foundUserIndex);
// remove
_.remove(userA, { name: 'A1' });
console.log(userA);

 

JSON(Javascript Objec Notation)

• 자바스크립트의 데이터를 표현하는 방식이다.
• 서버에서 데이터를 주고받을 때 사용한다.
• 파일확장자는 .json이다.
• 문자열을 큰따옴표(")만 사용한다.
• JSON은 문자 데이터인데, 자바스크립트에서 사용할 때 객체 데이터처럼 사용된다.
• JSON은 문자 데이터로 관리된다.(데이터 가변성 때문에 메모리 차지로 인해, 하나의 메모리만 사용하도록)
• 자바스크립트 내에서는 키에 따옴표를 작성하지 않아도 된다. 그리고 키는 camelCase로 사용한다.

https://ko.wikipedia.org/wiki/JSON

JSON - 위키백과, 우리 모두의 백과사전

// data.json
{
  "string": "hyemin",
  "number": 20,
  "boolean": true,
  "null": null,
  "object": {},
  "array": []
  // "undefined": undefined // 에러 발생: undefined 사용 불가
}

// main.js
import data from './data.json'; // js파일 외에는 확장자를 명시해준다.
console.log(data);

const user = {
  name: 'hyemin',
  age: 20,
};

const str = JSON.stringify(user); // JSON포맷(문자데이터화 시킴) 
console.log(str); // string
const obj = JSON.parse(str); // 해당 문자를 분석해서 자바스크립트에서 활용할 수 있도록 객체로 재조립한다.

 

Storage

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

크롬 개발자도구의 Application에서 Storage를 확인할 수 있다.

로컬스토리지에는 문자데이터화로 저장해야 한다.

localStorage.setItem('user', JSON.stringify(user22)); // 문자 데이터화로 변환하여 저장
console.log(JSON.parse(localStorage.getItem('user'))); // 객체 데이터로 변환
// localStorage.removeItem('user');
// 로컬스토리지 데이터 변경: 덮어쓰기해주면됨
const localstorageUser = localStorage.getItem('user');
const localstorageUserObj = JSON.parse(localstorageUser);
localstorageUserObj.age = 2;
localStorage.setItem('user', JSON.stringify(localstorageUserObj));

 

위 내용을 lodash를 이용할 수 있다.

lodash를 기반으로 사용하는 라이브러리를 확인해서 사용해 본다.(TODO)

https://github.com/typicode/lowdb

GitHub - typicode/lowdb: Simple to use local JSON database. Use native JavaScript API to query. Written in TypeScript. (supports

 

OMDb API

영화 정보 관련 API이다.

API 키를 발급받아서 무료로 사용할 수 있다.

https://www.omdbapi.com/

OMDb API - The Open Movie Database

쿼리스트링(Query String)

문자를 가지고 검색하나는 의미이다.

• 형태: 주소?속성=값&속성=값&속성=값

http://www.omdbapi.com/?apikey=[yourkey]&

 

axios

axios 설치(개발의존성이 아닌 일반 의존성으로 설치)

npm i axios

OMDb API와 axios를 활용한 데이터 요청

import axios from 'axios';
function fetchMovies() {
  axios.get('https://www.omdbapi.com/?apikey={key}&s=frozen').then((response) => {
    console.log(response);
  });
}
fetchMovies();