🍊 감상

📙 열품타 코딩 시간 9hour
👍🏼 -
👎🏼 -

🚀 목표

• Udemy에서 Javascript 강좌 수강하기 (332/682)
• 커밋 연속 30일 달성하기 (9/30, 4.15 완료)
• 드림코딩 자바스크립트 기초 강의 완강 (완료)

📣 자바스크립트 기초 강의: 14-23

• 참고링크: 드림코딩 엘리
• 참고링크: Udemy

async & await

Homework

//그럼 이 부분 어떻게 await 활용해서 쓸 수 있을까?
const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage
  .loginUser(id,password)
  .then(userStorage.getRoles)
  .then(user => alert(`Hello ${user.name}, you have a ${user.role} role`);
  .catch(console.log);

javascript function

함수 선언과 호출

어떤 값을 전달받아 올 건지 전달받는 인자 정의 부분 + 함수 안에 동작하는 코드 작성하는 부분

function doSomething() {
  console.log('hello');; //선언만 한 것
}
doSomething(); //호출

함수의 두 가지 타입

값을 리턴하는 함수

계산 후 특정값 전달, 리턴

//함수 선언
function add(a,b) {
  const sum = a+ b;
  return sum;
}
//a와 b라는 특정한 인자값을 받아와서 const sum이라는 변수에 a,b 저장
//a,b 값 더한뒤 sum이라는 변수에 할당 
//a,b에 값 전달해서 a,b라는 이름으로 각각의 값에 접근할 수 있다
//코드블록 수행 뒤 return이라는 키워드 이용해서 계산한 값 전달

//함수 호출
const result = add(1,2); //정의함과 동시에 값 할당, 함수를 호출한 것
console.log(result);

함수를 인자로 전달

function doSomething(add) {
  console.log(add);; //선언만 한 것
}

doSomething(add); //함수 호출하면서 인자로 함수 자체를 전달 //f add(a,b) {...}
doSomething(add()); //이렇게 하면 함수가 바로 실행돼버린다 //sum
//add 호출된 뒤에 나온 마지막으로 전달된 값이 전달됨, 따라서 함수를 전달하는 것이 아님

//함수 선언
function add(a,b) {
  const sum = a+ b;
  return sum;
}
function doSomething(add) {
  console.log(add);; 
  const result = add(2,3);
  console.log(result);
}
//함수 호출
doSomething(add);

함수를 변수에 할당

const addFun = add;
console.log(add);
addFun(1,2);

자바스크립트 변수

primitive 타입과 object

변수

처리해야 하는 데이터를 담을 수 있도록 도와준다. 데이터를 담고 있음
변수를 통해서 데이터에 접근하고 업데이트할 수 있다
담을 수 있는 가장 작은 단위의 데이터를 primitive data type이라고 한다
변수의 이름은 로직과 연관된 의미있는 이름으로 짓기

number, string, boolean, null, undefined, symbol

let number = 2; //숫자가 변수에 할당 
let number2 = number;
//number라는 데이터에 들어있는 2를 그대로 복사해서 할당한다 

number2 = 3; //3을 업데이트, number에는 영향을 주지 않는다

메모리 공간의 number라는 변수 안에 2라는 값, 숫자 데이터가 적재된다
변수를 선언하면 메모리에 그 변수를 위한 공간이 생긴다 -> 메모리에 바이트 사이즈의 공간이 확보된다

object

primitive type을 제외하면 모두 object
오브젝트: 최소한 한 두가지 이상의 다양한 데이터를 한 군데에 묶어놓은 것
(e.g. 배열, 함수 등)

let obj = {
  name: 'eillie',
  age: 5
};

let obj2 = obj 
console.log(obj2.name);

obj.name = 'james';
//obj2의 값도 바뀐다

오브젝트에 있는 키도 각각 키마다 메모리에 할당이 된다
변수 할당하면 안의 값이 복사돼서 들어온다
primitive 타입은 데이터 자체가 변수에 담겨있어서 데이터 자체가 복사
오브젝트는 주소만 복사돼서 들어온다
primitive타입은 메모리에 바로 할당될 수 있다

let은 값 변경 가능, const는 값 변경 불가능
근데 왜 오브젝트는 const로 했는데 왜 변경되나?
오브젝트가 할당된 레퍼런스의 값은 잠겨있다 변경 불가능
대신 obj가 가리키고 있는 이름을 바꾸는 건 가능
reference가 가리키고 있는 것은 변경 가능

자바스크립트 함수

반복적으로 수행되는 로직을 쓸 때
코드블록 안의 함수, 기능에 add라는 이름을 지정해 준 것 - 이건 이제 함수라고 keword로 자바스크립트 엔진에 알림
함수 이름도 간결하고 명확하게 쓰기
자바스크립트에는 타입이 없다

function add(a,b) {
  return a+b;
}

function surprise(operator) {
  const result = operator(2,3); //add(2,3)
  console.log(result);
}

surprise(add);

받아오는 인자의 이름를 통해 블럭 안에서 접근이 가능하다
어떤 데이터가 올지는 모르지만 그 데이터의 이름을 통해 접근하는 것
함수를 만드는 시점에는 데이터가 들어있지 않은 것
함수를 호출하면 실제로 데이터가 전달된다

함수도 오브젝트 중의 하나 함수가 들어있는 레퍼런스가 데이터에 담김

함수를 변수에 할당하면 변수에 함수의 레퍼런스가 할당되는 것
함수의 이름은 함수가 정의된 곳을 가리키고 함수의 이름을 다른 변수에 할당하면 함수가 가리키고 있는 주소가 변수에 할당, 결국 같은 함수 가리키고 있어서 같은 함수를 수행하게 된다

아무런 인자를 받지 않는 함수는 인풋을 받지 않는다
인자도 의미있는 이름쓰기, 우리가 정의한 아이임
인자를 함수로 전달하면, 함수가 가리키고 있는 레퍼런스를 가리키는 것과 동일하다

연산자

if가 true면 실행, false면 실행 안 함
false: 0, -0, '', null, undefined (비어있는 값들)
true: -1, 'false', []
배열은 오브젝트이기에 트루

let num;
num && console.log(num); //false이므로 실행되지 않음 
let num2 =9;
num2 && console.log(num2); //실행
let obj;
console.log(obj.name); //에러, 없는 것에 접근하면 프로그램 자체가 죽어버린다
obj && console.log(obj.name); //obj가 있다면 접근하라는 말, 따라서 실행 안 됨 

클래스

class Counter {
  constructor() {
    this.counter = 0;
  }
  
  increase() {
    this.counter++;
}

Counter라는 클래스에는 counter라는 변수가 있다. 그리고 이 변수는 클래스 이용해서 오브젝트 만드는 순간 0으로 초기화된다
클래스에서 함수 선언할 때는 function 안 적어도 됨
클래스는 다양한 오브젝트를 만들기 위한 청사진
레고처럼 쓸 수 있도록 재사용성 높이기

자바스크립트 핵심 최신 문법

(ES6, ES11) , 인터넷 익스플로러에서 실행 안 되므로 바벨 사용하기
자바스크립트 라이브러리: 리액트, 앵귤러, 뷰

ES6

shorthand property names

키와 밸류의 이름이 동일하다면 축약해서 작성 가능

  const ellie1 = {
    name: 'Ellie',
    age: '18',
  };
  const name = 'Ellie';
  const age = '18';

  // 💩
  const ellie2 = {
    name: name,
    age: age,
  };
   // ✨
  const ellie3 = {
    name,
    age,
  };

Destruncturing assignment

오브젝트 키와 밸류에 접근할 때 키의 이름을 괄호 안에 정의, 키와 밸류가 각각 네임과 레벨에 맞게 할당

  const student = {
    name: 'Anna',
    level: 1,
  };

  // 💩
    const name = student.name;
    const level = student.level;
    console.log(name, level);
  // ✨
    const { name, level } = student;
    console.log(name, level);

    const { name: studentName, level: studentLevel } = student;
    console.log(studentName, studentLevel);
    
    
  // array
  const animals = ['🐶', '😽'];
  // 💩
    const first = animals[0];
    const second = animals[1];
    console.log(first, second);
  // ✨
    const [first, second] = animals;
    console.log(first, second);

Spread syntax

주소의 참조값을 복사하는 것이기에 값 바꾸면 원래에 적용됨

  const obj1 = { key: 'key1' };
  const obj2 = { key: 'key2' };
  const array = [obj1, obj2];

  // array copy
  const arrayCopy = [...array];
  console.log(array, arrayCopy);

  const arrayCopy2 = [...array, { key: 'key3' }];
  obj1.key = 'newKey';
  console.log(array, arrayCopy, arrayCopy2);

  // object copy
  const obj3 = { ...obj1 };
  console.log(obj3);

  // array concatenation
  const fruits1 = ['🍑', '🍓'];
  const fruits2 = ['🍌', '🥝'];
  const fruits = [...fruits1, ...fruits2];
  console.log(fruits);

  // object merge //동일한 key 면 값 덮어씌우므로 주의
  const dog1 = { dog: '🐕' };
  const dog2 = { dog: '🐶' };
  const dog = { ...dog1, ...dog2 };
  console.log(dog);
  console.clear();

default parameters

  // 💩
    function printMessage(message) {
      if (message == null) {
        message = 'default message';
      }
      console.log(message);
    }
    printMessage('hello');
    printMessage();
  // ✨
    function printMessage(message = 'default message') {
      console.log(message);
    }
    printMessage('hello');
    printMessage();

ternary operator

  // 💩
    let component;
    if (isCat) {
      component = '😸';
    } else {
      component = '🐶';
    }
    console.log(component);
  // ✨
    const component = isCat ? '😸' : '🐶';
    console.log(component);
    console.log(isCat ? '😸' : '🐶');

template literals

  const weather = '🌤';
  const temparature = '16°C';

  // 💩
  console.log(
    'Today weather is ' + weather + ' and temparature is ' + temparature + '.'
  );
  // ✨
  console.log(`Today weather is ${weather} and temparature is ${temparature}.`);

ES11

optional chaining

  const person1 = {
    name: 'Ellie',
    job: {
      title: 'S/W Engineer',
      manager: {
        name: 'Bob',
      },
    },
  };
  const person2 = {
    name: 'Bob',
  };

  // 💩💩💩💩💩💩
    function printManager(person) {
      console.log(person.job.manager.name);
    }
    printManager(person1);
    // printManager(person2);

  // 💩💩💩
    function printManager(person) {
      console.log(
        person.job
          ? person.job.manager
            ? person.job.manager.name
            : undefined
          : undefined
      );
    }
    printManager(person1);
    printManager(person2);

  // 💩
    function printManager(person) {
      console.log(person.job && person.job.manager && person.job.manager.name);
    }
    printManager(person1);
    printManager(person2);

  // ✨
    function printManager(person) {
      console.log(person.job?.manager?.name);
    }
    printManager(person1);
    printManager(person2);

nullish coalescing operator

    const name = 'Ellie';
    const userName = name || 'Guest';
    console.log(userName);

    const name = null;
    const userName = name || 'Guest';
    console.log(userName);

  // 💩
    const name = '';
    const userName = name || 'Guest';
    console.log(userName);

    const num = 0;
    const message = num || 'undefined';
    console.log(message);

  // ✨
    const name = '';
    const userName = name ?? 'Guest';
    console.log(userName);

    const num = 0;
    const message = num ?? 'undefined';
    console.log(message);

💡 팁

T자 공부법

• 참고링크: 드림코딩

개발자 공부방법과 경력관리법

넓게 공부하고 전문성 하나 관리 + 토양 위에

프론트엔드

-- 깊이
1. 기본: html, css, javascript
2. 프레임워크: 타입스크립트, 뷰, 리액트
3. 사용자에게 번들링되는 사이즈 줄이기 고려
4. 레이지로딩, 번들링 스플리팅해서 전달하기, 퍼포먼스 분석, 애니메이션 레이트 줄이고 옵티마이제이션 하기
5. 디자인스킬, 백엔드 통신 방법, 백엔드 데이터 받아오고 더 최적화된 서비스 레이어 만드는 법

-- 넓이

• 백엔드 언어, 노드.js, 리액트 네이티브로 크로스플랫폼

-- 토양
컴퓨터 공학의 기본 지식(운영체제, 네트워크, 어셈블리, 임베디드, 수학(행렬,통계)
자료구조(배열,리스트,맵 언제 어떻게 써야 효율적으로 데이터관리 할 수 있는지 차이점)
알고리즘(상황과 주어진 자료구조에 따라 어떤 알고리즘 써야 시간과 공간을 효율적으로 쓰는지)
깨끗한 코드, test driven code, refactoring, code review

공부법

1. 토양(기본)과 최대한 넓게 배우기
2. 현업 시작했다면 깊게 공부 (커뮤니티 조인) -> 전문성 기르기
3. 시니어 다시 넓게 공부
4. 기술자 vs 매니징

비전공자는 언어 하나 마스터하고 자료구조와 알고리즘 공부
-> 자바스크립트 일단 마스터하기

📣 The Web Developer Bootcamp 2021: 27.0-

27. Async

27.1 Call stack

call stack = mechanism the JS interpreter uses to keep track of its place in a script that calls multiple functions

how js knows what function is currently being run and what function are called from within that function, etc like finger in a book

stack: basic data structure in computer science

• LIFO : last in first out ◀︎
• FIFO : first in first out

how it works

When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function.
Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.
When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.

콜스택 보여주는 사이트

혹은 크롬 개발 툴의 source를 봐도 알 수 있다

🕹 Project

음악 DB 사이트 프로젝트 시작

기획서 작성, 구현할 기능과 화면 기획함