210128_TIL

seungyeon·2021년 1월 28일
0

TIL

목록 보기
7/64

🍎 오늘 한 일

  • JavaScript Koans 스프린트를 완료했다.
  • git과 CLI를 사용하는 것에 익숙해졌다.
  • CSS Selector에 대해 배웠다.

✍ 기억할 것 (JavaScript Koans)

오늘 JavaScript Koans sprint 진행 중에 알게 된 내용 정리

Object

1. 함수선언식과 함수표현식의 차이 - 호이스팅

2. Date() 생성자

Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성한다.

  • new Date() - 현재 날짜에 대한 모든 정보를 표시 (요일 월 일 년 시:분:초 타임스탬프)
const now = new Date(); 
// --> Thu Jan 28 2021 10:23:27 GMT+0900 (대한민국 표준시)

.getFullYear() - 년도를 반환

const currentYear = new Date().getFullYear(); 
// --> 2021

3. .repeat(count) - 문자열을 반복한 값을 반환하는 메서드

'love'.repeat(3); // ---> 'lovelovelove'

4. Object.assign() - 출처 객체로부터 대상 객체로 속성을 복사

Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.

문법

Object.assign(target, ...sources);
  • target - 대상 객체 MUTABLE
  • sources - 하나 이상의 출처 객체 IMMUTABLE

5. prop in obj // --> true | false

6. 얕은 복사와 깊은 복사

깊은 복사와 얕은 복사에 대한 심도있는 이야기

복사를 하려는 속성이 참조 자료형인 경우 주소가 복사된다.

  • 이런 고민을 하지 않게 코드를 작성하는게 좋은거다. 너무 깊이 들어가는 자료형을 사용하지 않게 자료구조를 짜는게 가장 중요하다.

깊은 복사를 하는 가장 쉬운 방법

JSON.parse(JSON.stringify(obj))

7. this는 쉽게 말해 '엄마 찾기'다.

  • 메소드(method): 객체 안에 정의된 함수, 객체를 통해서 호출되는 함수
  • this : 실행 중에 this가 포함된 라인(scope)을 가능하게 하신 분. this가 어려운 이유는 그 분이 바뀔 수 있기 때문. this는 동적으로 변한다. 실행 중에 변한다.
    요즘은 가능하면 안쓰려는 추세이다. 그치만 많이 쓰긴 함.
const js = {
  fn: function() {
    console.log('hello', this)
  }
}

js.fn(); // --> hello {fn: f}
console.log(this); // --> 윈도우 객체가 반환된다. window {window: Window, self: Window, document: document, name: "", ...}

전개 문법(spread syntax)

1. 빈 배열에 전개 문법을 사용할 경우, 아무것도 전달되지 않는다.

const spread = [];
let arr1 = [0, ...spread, 1]; // --> [0, 1]

// 전개문법을 사용하지 않으면 빈배열 자체가 전달된다.
let arr2 = [0, spread, 1]; // --> [0, [], 1]

2. arr.concat() 대신에 전개문법을 사용할 수 있다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let concatenated = [...arr1, ...arr2]; // --> [1, 2, 3, 4, 5, 6]
let useConcat = arr1.concat(arr2); // --> [1, 2, 3, 4, 5, 6]

3. 전개문법을 사용해 객체를 병합할 수 있다.

  • 깊은 복사가 이루어진다.
  • 주소가 아니라 value 자체가 할당된다.

4. rest parameter와 arguments

rest parameter는 spread syntax를 통해 간단하게 구현할 수 있다.

function getAllParamsByRestParameter(...args) {
  return args; // --> 배열로 리턴된다.
}


arguments를 통해 비슷하게 함수의 인자들을 다룰 수 있다. (spread syntax 도입 이전)
arguments는 모든 함수의 실행 시 자동으로 생성되는 객체이다.

function getAllParamsByArgumentsObj() {
  return arguments; // --> 객체로 리턴된다. (인덱스가 key이고 입력받은 파라미터가 value인)
}

5. Array.from() 과 전개문법

배열이 아니더라도 이터러블 객체이면 전개 문법을 사용할 수 있습니다.
전개 문법은 for..of와 같은 방식으로 내부에서 iterator(반복자)를 사용해 요소를 수집합니다.
문자열에 for..of를 사용하면 문자열을 구성하는 문자가 반환됩니다. ...str"H","e","l","l","o"가 되는데, 이 문자 목록은 배열 초기자(array initializer) [...str]로 전달됩니다.

메서드 Array.from은 문자열 같은 이터러블 객체를 배열로 바꿔주기 때문에 Array.from을 사용해도 동일한 작업을 할 수 있습니다.

그런데 Array.from(obj)[...obj]에는 다음과 같은 미묘한 차이가 있습니다.

  • Array.from은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있습니다.
  • 전개 문법은 이터러블 객체에만 사용할 수 있습니다.
    이런 이유때문에 무언가를 배열로 바꿀 때는 전개 문법보다 Array.from이 보편적으로 사용됩니다.

Array.from(obj)Object.values(obj)

function getAllParamsByArgumentsObj() {
  return arguments; // --> 객체로 리턴된다.(인덱스가 key이고 입력받은 파라미터가 value인)
}

let argumentsObj = getAllParamsByArgumentsObj('deer', 'cat', 'dog'); 
// --> { 0: 'deer', 1: 'cat', 2: 'dog'}

// Array.from(obj)은 문자열 같은 이터러블 객체의 *value값들*을 배열로 바꿔준다.
let argsArr = Array.from(argumentsObj); // --> ['deer', 'cat', 'dog']
// Object.values(obj)를 사용해도 같은 결과를 얻을 수 있다.
let valuesOfObj = Object.values(argumentsObj); // --> ['deer', 'cat', 'dog']

클로저(Closure)란?

  • 함수와 함수가 선언된 어휘적 환경의 조합
  • 사용 이유
    • function ...?
    • name spacing 문제 해결

🦄 더 공부해야 할 것

  • Closure
  • CSS Selector

🤔 느낀점

  • 하나하나 클래스 지정해주지 않아도 쉽게 선택할 수 있는 CSS Selector가 많이 있었다. 내일부터 기다리던 Twittler 스프린트가 시작되는데, 이번에는 HTML과 CSS를 모두 만질 수 있는 만큼 원하는 걸 모두 시도해보려면 CSS Selector를 잘 알아놔야겠다는 생각을 했다.
  • 오늘은 GUI를 거의 사용하지 않고 최대한 CLI에 익숙해지는 시간을 가졌다. 확실히 git을 사용하는 것도 어제보다 훨씬 자연스러워졌고, 터미널을 사용하는 것이 더 편한 상황이 있다는 것도 체감하게 되어 뿌듯하다.
  • 벌써부터 Twittler에 넣어보고 싶은 기능들과 어떻게 UI를 구성해야 좋은 UX를 만들 수 있을지 생각이 한가득이다. 내일 페어 프로그래밍 시간이 너무 기대된다.

🌈 내일 할 일

  • 레이아웃 학습
  • 웹 앱 화면 설계하기 학습
  • Twittler 와이어프레임 설계
  • Twittler 목업 구현

0개의 댓글