0125 - 0131

0125

Object

자바스크립트의 데이터 타입들 중 하나
기능적으로 연관된 데이터들의 집합
object = { key: value };

리터럴과 속성

const obj1 = {}; // 오브젝트 리터럴
const obj2 = new Object(); // 오브젝트 생성자

자바스크립트는 동적으로 타입을 결정하는 언어기 때문에 속성을 나중에 지우거나 생성할 수 있다.

ellie.hasjob = true;
delete ellie.hasjob;

Computed properties

자바스크립트에서 속성의 값을 가져오는 두 가지 방법

console.log(ellie.키); // 일반적인 사용법
console.log(ellie["키"]); // Computed. 키는 string 타입으로 지정해야 한다.

function printValue(obj, key) {
  console.log(obj[key]); // obj.key로 값을 부르면 obj에는 key라는 키가 없기 때문에 undefined가 나온다.
}
printValue(ellie, "name");

아래 예시처럼 동적으로 key에 따라 값을 호출하고 싶다면 Computed properties 방식을 사용

object에 값 쉽게 생성하기

const person1 = { name: "bob", age: 2 };
const person2 = { name: "steve", age: 3 };
const person3 = { name: "dave", age: 4 };

이처럼 프로퍼티 키가 중복되고 값만 바꿔주어 생성한다면 쉽게 생성할 수 있는 방법은?

생성자 함수

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person4 = new Person("ellie", 30); // 사용법

함수 이름의 첫 글자는 대문자
생략되어 있지만 this object를 생성하여 반환한다.

in 연산자

해당하는 프로퍼티가 object에 있는지 boolean타입으로 반환해준다. key in object형식으로 사용한다.

for (key in obj)

object에 있는 key 개수만큼 반복한다.

for (value of iterable)

예를 들면 배열에 있는 값들만큼 반복한다. value = 값

cloning

object를 복제하는 것

오래된 방법

const user3 = {};
for (let key in user) {
  // user를 복사하기 위해 user의 모든 프로퍼티 값을 user3에 삽입
  user3[key] = user[key];
}

다른 방법

Object.assign()를 이용

const user4 = Object.assign({}, user);

뒤에 있는 인자가 앞의 object를 덮는다.

0126

배열

선언

const arr1 = new Array();
const arr2 = [1, 2]; // 주로 이 방법 사용

인덱스 위치

인덱스는 0부터 시작
배열 변수[index]로 해당하는 인덱스에 위치한 데이터에 접근 가능

배열에서의 반복

for

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for of

for (let fruit of fruits) {
  console.log(fruit);
}

forEach - 콜백 함수

fruits.forEach((fruit) => console.log(fruit));

배열에서의 데이터 추가, 삭제

push - 배열의 뒤에서 아이템을 추가

배열이름.push('추가할 항목');

pop - 배열의 뒤에서 아이템을 삭제

배열이름.pop();

unshift - 배열의 시작에서 아이템을 추가

배열이름.unshift('추가할 항목');

shift - 배열의 시작에서 아이템을 삭제

배열이름.shift();

배열을 앞에서부터 삭제하거나 추가하면 데이터가 이동해야 하기 때문에 push나 pop이 더 빠르다.

splice - 인덱스 위치부터 아이템 삭제

배열이름.splice(시작인덱스, 삭제할 개수); 배열이름.splice(시작인덱스, 삭제할 개수, 해당 인덱스에 추가할 데이터);

cancat - 두 배열을 합쳐서 리턴

배열이름.concat(합칠 배열이름);

검색

indexOf - 데이터의 인덱스 위치 반환

배열이름.indexOf('데이터');

includes - 데이터가 배열에 있는지 boolean타입으로 반환

배열이름.includes('데이터');

lastIndexOf - 데이터의 인덱스 위치를 뒤에서부터 찾아서 반환

배열이름.lastIndexOf('데이터');

0127

JSON

Javascript Object Notation - 자바스크립트 객체 표기법

객체를 JSON으로

stringify(obj)

const rabbit = {
  name: "tory",
  color: "white",
  size: null,
  birthDate: new Date(),
  jump: function () {
    console.log(`${this.name} can jump!`);
  },
};

let json = JSON.stringify(rabbit); // 객체를 json으로 변환한다. 이 때 함수는 포함되지 않는다.
json = JSON.stringify(rabbit, ["name", "color", "size"], 4); // 객체에서 원하는 키 값만 json으로 변환할 수 있다. 숫자는 들여쓰기를 통해 json을 읽기 쉽게 해준다.

json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "name" ? "ellie" : value;
});
// 위처럼 정보를 조작하여 json화 하기 위해서는 replacer를 콜백함수로 이용하여 데이터를 바꿀 수 있다.

JSON을 자바스크립트 객체로

parse(json)

let json = JSON.stringify(rabbit); // rabbit객체를 json화

const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  return key === "birthDate" ? new Date(value) : value;
});
// replacer와 마찬가지로 json을 다시 객체화 시킬 때도 reviver 콜백함수를 이용해서 정보를 조작하여 객체화 시킬 수 있다.

한 번 json화 하고 다시 객체화 한 객체로는 기존에 있던 함수를 호출할 수 없다.
위의 경우 birthDate의 getDate() 메소드를 사용하기 위해서는 json화 하면서 string 값으로 변해버린 값을 다시 new Date로 생성해서 저장해줘야 한다.

0128

일주일 동안 프론트엔드 개발을 진행하며 느낀 점

프론트엔드와 백엔드 간의 데이터 통신이 어떻게 진행되는지 직접 사용해보며 익혔다.
데이터의 validation 체크를 위해 라이브러리를 이용하여 유효한 값을 지정해주고, 정규식을 사용해봤다.
hosts 파일을 조작하여 localhost를 도메인으로 바꿔 사용해보았다.
개발 서버를 동작시켜서 이용해보았다.
가장 크게 느낀 점은 풀스택 개발을 통해 더 좋은 백엔드 개발자로 성장할 수 있을 것 같다는 것이다.

0129

const signIn = async (info) => {
  try {
    let params = new URLSearchParams();
    params.append("email", info.email);
    params.append("password", info.password);
    const req = await axios.post("http://도메인이름:8080/User/login", params, {
      withCredentials: true,
    });
    return req.data;
  } catch (e) {
    console.error(`server error : ${e.error}`);
  }
};

axios를 이용해서 API를 호출할 때 쿠키 값을 받아오거나 전달하는 경우, withCredentials옵션을 true로 해줘야만 쿠키 값을 이용해 동작시킬 수 있다.

0130

콜백

자바스크립트의 콜백

Javascript는 동기적이다.
호이스팅 이후에 코드 블록을 순서대로 실행한다.

콜백 함수

콜백 함수라는 것은 인자로 전달해준 함수를 나중에 호출해 주는 것

Synchronous 콜백

function printImmediately(print) {
  print();
}

printImmediately(() => console.log(2));

Asynchronous 콜백

function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(() => console.log("async"), 2000);

콜백 함수에는 즉각적으로 실행하는 동기 콜백과 나중에 언제 실행될지 모르는 비동기 콜백이 있다.
콜백 함수는 주로 Arrow function을 이용해서 작성한다.

콜백 지옥

콜백안에 콜백을 작성하고, 또 그 안에 콜백을 작성하는 식의 코딩을 콜백 지옥이라고 칭한다.
가독성이 떨어지고, 에러가 발생하거나 디버깅을 할 때에도 문제를 찾아내기가 어렵기 때문에 좋지 않다.

Twitter Facebook LinkedIn

이정훈