잡동구리들

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

Son. 점점 내용을 알아가니 더 잘 읽힌다.
좀 자주 나오는 단어인데 모르겠거나 그냥 읽으면서 궁금한 단어가 나오면 Oxford Learner's Dic. 을 이용해서 찾고 quizlet으로 정리를 하고 있다. Flunt Forever에 나온 내용대로 flash card를 이용해서 단어 공부해보려 하는데 아직 습관이 안들었는지 손이 잘 안 간다. 그래도 오늘부터 다시 습관 들여봐야겠다.

export default

1. 일반적으로 해당 모듈엔 하나의 개체(변수, 클래스, 함수 등)만 있다는 의미로 받아들여진다. 

2. 따라서 해당 모듈의 전체 개체를 export 한다는 의미를 갖는다.

3. 원하는 이름으로 import가 가능하다.(ex. import ThisIsSample from "경로")

// Data.js

function Data() {
  return <h1>Hello, React!</h1>;
}

export default Data;


// DataChild.js

import Data from "./Data"

export

1. 복수의 개체가 있는 라이브러리 형태의 모듈에서 가져오기 할 때 사용된다.

2. 특정 개체만 가져오는게 가능하다. 

3. 원하는 이름으로 import가 불가능하다.

// Robot.js

function Robot() {
  return <h1>Hello, React!</h1>;
}

function Robot2() {
  return <h1>Who are you??</h1>;
}

export Robot2;


// RobotChild.js

import { Robot2 } from "./Robot.js"

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

Son. 내용이 쉬운 건지 아니면 나의 읽기 실력이 조금이나마 올라서 그런 건지 모르겠지만, 잘 읽힌다. 거의 90% 이상 이해가 간다. 아마도 The Giver의 배경이 되었던 마을(도시?)이 다시 등장해서 일수도 있다. 배경지식이 이래서 중요한가 보다. 어찌 되었든 이해가 가니 재미있어지고, 재미가 있어지니 더 읽고 싶어지는 선순환 구조가 완성된듯하다. 물론 이 책에 한해서지만. 역시 뭐든 간에 재밌는 게 최고인 것 같다. 

git clone과 git pull의 차이는 내가 해당 프로젝트에 참여하고 있느냐 아니냐로 갈리는 것 같다.

git clone의 경우 해당 repository를 통째로 다운 받는 개념으로 내 컴퓨터에 해당 프로젝트의 폴더를 새롭게 생성을 하는데,

git pull의 경우는 내가 참여하고 있는 프로젝트에서 변경 사항이 생긴 경우 내가 로컬로 작업하고 있는 프로젝트와의 병합을 위해서 수행한다.

기술적인 부분은 김코더 김주역님 웹페이지를 참고하자.

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

ING

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

ING

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

ING

1. sessionStorage란?

sessionStorage에 대한 자세한 설명은 아래의 두 사이트를 참고.

쓸데없는 코딩하기

모던 JavaScript 튜토리얼

2. sessionStorage 간단 사용

아래 그림과 같이 input tag에 댓글을 달면 로그인 시 사용한 이메일 정보(sessionStorage)와 댓글이 입력되는 웹페이지를 구현한다고 했을 때, login.html에서 수집한 이메일 정보를 review.html에서 사용하기 위해서는 이메일 정보가 지속성 있게 유지될 필요가 있다. 

sessionStorage 객체를 이용하면 이를 손쉽게 구현할 수 있다.

login.html과 연동된 login.js에 아래와 같은 코드를 입력하고, 

// login.js

let id = document.getElementById("emailInput"); 
// 이메일정보가 입력되는 input tag의 id(혹은 class)를 불러온다.

sessionStorage.setItem("ID", id.value);
// sessionStorage에 해당 정보의 값을 저장한다.

댓글이 작성될 review.html과 연동된 review.js에 아래와 같은 코드를 입력한다. 이 후에 해당 값을 원하는 대로 사용하면 끝!

// review.js

let yourID = sessionStorage.getItem("ID");
// sessionStorage에 저장된 이메일 정보 값을 review.js에서 불러온다.

개발자 도구에서 살펴보면 아래 그림과같이 Application 탭의 Session Storage에 해당 값이 저장되어 있는 것을 확인할 수 있다. 

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

ING

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

ING

13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6)

// async & await
// clear style of using promise :)

// 1. async
// function fetchUser() {
//   return new Promise((resolve, reject) => {
//     // do network request in 10 secs...
//     resolve("ellie");
//   });
// }

async function fetchUser() {
  // do network request in 10 secs...
  return "ellie";
}

const user = fetchUser();
user.then(console.log);
console.log(user);

// 2. await
function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function getApple() {
  await delay(2000);
  return "🍎";
}

async function getBanana() {
  await delay(1000);
  return "🍌";
}

// function pickFruits() {
//   return getApple().then((apple) => {
//     return getBanana().then((banana) => `${apple} + ${banana}`);
//   });
// }

async function pickFruits() {
  const applePromise = getApple();
  const bananaPromise = getBanana();
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`;
}

pickFruits().then(console.log);

// 3. useful Promise APIs
function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then((fruits) =>
    fruits.join(" + ")
  );
}

pickAllFruits().then(console.log);

function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log);

12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)

// promise.js

"use strict";

// Promise is a JavaScript object for asynchronous operation.
// State: pending -> fulfilled or rejected
// Producer vs Comsumer

// 1. Producer
// when new Promise is created, the executor runs automatically.
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log("doing somthing...");
  setTimeout(() => {
    resolve("ellie");
    // reject(new Error("no network"));
  }, 2000);
});

// 2. Consumers: then, catch, finally
promise //
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("Done");
  });

//   3. Promise chaining
const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
  .then((num) => num * 2)
  .then((num) => num * 3)
  .then((num) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num - 1), 1000);
    });
  })
  .then((num) => console.log(num));

//   4. Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve("Chicken"), 1000);
  });
const getEgg = (hen) =>
  new Promise((resolve, reject) => {
    // setTimeout(() => resolve(`${hen} => Egg`), 1000);
    setTimeout(() => reject(new Error(`error! ${hen} => Egg`)));
  });
const cook = (egg) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => Egg fry`), 1000);
  });

getHen() //
  //   .then((hen) => getEgg(hen))
  .then(getEgg)
  //   .then((egg) => cook(egg))
  .catch((error) => {
    return "Bread";
  })
  .then(cook)
  //   .then((meal) => console.log(meal));
  .then(console.log)
  .catch(console.log);

// callback-to-promise.js

// Callback Hell example
class UserStorage {
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (
          (id === "ellie" && password === "dream") ||
          (id === "coder" && password === "academy")
        ) {
          resolve(id);
        } else {
          reject(new Error("not found"));
        }
      }, 2000);
    });
  }

  getRoles(user) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (user === "ellie") {
          resolve({ name: "ellie", role: "admin" });
        } else {
          reject(new Error("no access"));
        }
      }, 1000);
    });
  }
}

const userStorage = new UserStorage();
const id = prompt("enter your id");
const password = prompt("enter your password");
userStorage //
  .loginUser(id, password)
  .then(userStorage.getRoles)
  .then((user) => alert(`Hello ${user.name}, you have a ${user.role} role`))
  .catch(console.log);