728x90

Study Planner(Google Spredsheet)
Book Library(Notion)

 

Today Read Hours Total Read Hours
2.0 559.5

 


Today I Read

 

Book No. Hours
(Sum)
Title Author Date Pages IL BL
79 0.0
(1.0)
P.S. I Still Love You(Audio) Jenny Han 2021.11.01 ~
ING
248 UG 4.3
81 1.0
(3.0)
Fluent Forever: How to Learn Any Language Fast and Never Forget It Gabriel Wyner 2021.11.11 ~ 
ING
25~37/326 - -
82 1.0
(1.0)
Messenger Lois Lowry 2021.11.14 ~
ING
1~20/147 MG+ 5.0

 


 

Messenger는 직전에 읽은 Gathering Blue와  난이도가 거의 비슷한 것 같다. 그리고....내용도 뭔가 비슷하다. The giver도 마찬가지다. 기본적으로 아이들이 주인공이고, 뭔가 갇혀있는 사회를 배경으로 한다. 동일한 작가에 내용도 비슷비슷하다 보니 영어 공부로서의 책 읽기에는 딱 좋은 재료인 것 같다. 
반응형
728x90

Study Planner(Google Spredsheet)
Book Library(Notion)

 

Today Read Hours Total Read Hours
1.0 557.5

 


Today I Read

 

Book No. Hours
(Sum)
Title Author Date Pages IL BL
79 0.0
(1.0)
P.S. I Still Love You(Audio) Jenny Han 2021.11.01 ~
ING
248 UG 4.3
80 1.0
(10.0)
Gathering Blue Lois Lowry 2021.11.03 ~
2021.11.13
165~187/187 MG+ 5.0
81 0.0
(2.0)
Fluent Forever: How to Learn Any Language Fast and Never Forget It Gabriel Wyner 2021.11.11 ~ 
ING
25~/326 - -

 


 

ING
반응형
728x90

Study Planner(Google Spredsheet)
Book Library(Notion)

 

Today Read Hours Total Read Hours
2.0 556.5

 


Today I Read

 

Book No. Hours
(Sum)
Title Author Date Pages IL BL
79 0.0
(1.0)
P.S. I Still Love You(Audio) Jenny Han 2021.11.01 ~
ING
248 UG 4.3
80 1.0
(9.0)
Gathering Blue Lois Lowry 2021.11.03 ~
ING
144~165/210 MG+ 5.0
81 1.0
(2.0)
Fluent Forever: How to Learn Any Language Fast and Never Forget It Gabriel Wyner 2021.11.11 ~ 
ING
12~25/326 - -

 


 

Gathering Blue, Fluent Forever 두 책 모두 잘 읽힌다. 내 영어가 늘어서인지, 내용이 쉬워서 인지 솔직히 조금 헷갈리긴 한다. 특히 Gathering Blue 이 책은 도대체 어떻게 끝나는 것인지 궁금하다. 그동안 접한 적이 없는 독특한 세계관인 것 같다. 
반응형
728x90

Study Planner(Google Spredsheet)
Book Library(Notion)

 

Today Read Hours Total Read Hours
2.0 554.5

 


Today I Read

 

Book No. Hours
(Sum)
Title Author Date Pages IL BL
79 0.0
(1.0)
P.S. I Still Love You(Audio) Jenny Han 2021.11.01 ~
ING
248 UG 4.3
80 1.0
(8.0)
Gathering Blue Lois Lowry 2021.11.03 ~
ING
120~144/210 MG+ 5.0
81 1.0
(1.0)
Fluent Forever: How to Learn Any Language Fast and Never Forget It Gabriel Wyner 2021.11.11 ~ 
ING
1~12/326 - -

 


 

ING
반응형
728x90

script 태그란?

<script> 태그는 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용

 

[references]

http://tcpschool.com/html-tags/script

 

script 태그의 위치에 따른 차이점

1. script 태그가 head 태그 안에 있을 때

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script src="test.js"></script> // script 태그가 head 태그 안에 위치
  </head>
  <body></body>
</html>

script 태그가 head 태그 안에 있을 때

js 파일 사이즈가 크거나, 인터넷 환경이 느릴 때 사용자가 웹사이트를 로딩하는데 시간이 오래 걸린다.

따라서 script를 head 태그에 포함하는 것은 좋은 선택은 아니다. 

 

2. script 태그가 body 태그의 제일 하단에 위치해 있을 때

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <div></div>
    <script src="test.js"></script> // script 태그가 body 태그의 하단에 위치
  </body>
</html>

html이 모두 준비가 된 후에 javascript를 실행한다. 

사용자가 기본적인 html 컨텐츠를 빨리 볼 수 있는 장점이 있지만, 해당 웹사이트가 javascript에 의존적이라면 의미 있는 웹페이지를 보기까지 시간이 오래 걸린다. 

 

3. script 태그가 head 태그 안에 있지만, async 속성 값을 사용한 경우

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script async src="test.js"></script> // async 속성값을 사용
  </head>
  <body>
    <div></div>
  </body>
</html>

async 속성을 사용할 경우, 위 사진과 같이 html 파싱과 javascript 다운로드를 병렬로 수행한다. 다만 javascript 다운로드가 완료되면 html 파싱을 중지하고, 다운로드된 javascript 파일을 먼저 수행한 후, 나머지 html을 파싱한다. 

 

병렬로 진행되기 때문에 웹사이트를 불러오는 속도를 조금 빠르게 할 순 있지만, html이 파싱되기 전에 javascript가 동작하므로 javascript에 html과 상호작용하는 코드가 있을 경우 제대로 작동하지 않을 가능성이 있다.

 

4. script 태그가 head 태그 안에 있지만, defer 속성값을 사용한 경우

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script defer src="test.js"></script> // defer 속성값을 사용 
  </head>
  <body>
    <div></div>
  </body>
</html>

async와 동일하게 html 파싱중에 javascript 다운로드가 병렬적으로 진행된다. 그러나 async와 다르게 html 파싱이 모두 종료된 후에 javascript 명령을 수행한다.

 

[references]

드림코딩 : script async와 defer의 차이점

반응형
728x90

11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6)

"use strict";

// JavaScript is synchronous.
// Execute the code block in order after hoisting.
// hoisting: var, function declaration // 변수나 함수를 제일 위로 끌어올려 주는 것
console.log("1"); // 동기
// setTimeout(function () {
//   console.log("2");
// }, 1000);
setTimeout(() => console.log("2"), 1000); // 비동기
console.log("3"); // 동기

// Synchronous callback
function printImmediately(print) {
  print();
}
printImmediately(() => console.log("hello")); // 동기

// Asynchronous callback
function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(() => console.log("async callback"), 2000); // 비동기

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

  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === "ellie") {
        onSuccess({ name: "ellie", role: "admin" });
      } else {
        onError(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,
  (user) => {
    userStorage.getRoles(
      user,
      (userWithRoles) => {
        alert(
          `Hello ${userWithRoles.name}, you have a ${userWithRoles.role} role`
        );
      },
      (error) => {
        console.log(error);
      }
    );
  },
  (error) => console.log(error)
);
반응형
728x90

10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON | 프론트엔드 개발자 입문편 (JavaScript ES6)

// JSON
// JavaScript Object Notation

// 1. Object to JSON
// stringfy(obj)
let json = JSON.stringify(true);
console.log(json);

json = JSON.stringify(["apple", "banana"]);
console.log(json);

const rabbit = {
  name: "tori",
  color: "white",
  size: null,
  birthDate: new Date(),
  //   symbol: Symbol("id"), // Symbol은 JSON에 포함되지 않는다.
  jump: () => {
    console.log(`${this.name} can jump!`);
  },
};

json = JSON.stringify(rabbit);
console.log(json);

json = JSON.stringify(rabbit, ["name", "color", "size"]);
console.log(json);

console.clear();
json = JSON.stringify(rabbit, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  //   return value;
  return key === "name" ? "ellie" : value;
});
console.log(json);

// 2. JSON to Object
// parse(json)
console.clear();
json = JSON.stringify(rabbit);
const obj = JSON.parse(json, (key, value) => {
  console.log(`key: ${key}, value: ${value}`);
  //   return value;
  return key === "birthDate" ? new Date(value) : value; // string을 다시 object로..
});
console.log(obj);
rabbit.jump();
// obj.jump(); // JSON으로 변환될때 함수는 포함되지 않는다.

console.log(rabbit.birthDate.getDate());
console.log(obj.birthDate.getDate()); // JSON으로 넘어가면서 string이 되었기 때문에, parse를 이용해 다시 object로 넘어와도 여전히 string이다.
반응형
728x90

Study Planner(Google Spredsheet)
Book Library(Notion)

 

Today Read Hours Total Read Hours
2.0 552.5

 


Today I Read

 

Book No. Hours
(Sum)
Title Author Date Pages IL BL
78 1.0
(10.5)
The Compound Effect Darren Hardy 2021.11.01 ~
2021.11.10
137~158/158 - -
79 0.5
(1.0)
P.S. I Still Love You(Audio) Jenny Han 2021.11.01 ~
ING
248 UG 4.3
80 0.5
(7.0)
Gathering Blue Lois Lowry 2021.11.03 ~
ING
111~120/210 MG+ 5.0

 


 

The Compound Effect. 매일 꾸준히 뭔가를 한다는건 힘든일이 맞다. 그런데 그게 습관이 되면 전혀 힘든일이 아니게 되는 것도 맞는것 같다.
반응형
728x90

9. 유용한 10가지 배열 함수들. Array APIs 총정리 | 프론트엔드 개발자 입문편 ( JavaScript ES6)

// Q1. make a string out of an array
{
  const fruits = ["apple", "banana", "orange"];
  // di it yourself!
  // console.log(fruits.toString()); // .join과 .toString의 차이는 구분자(seperator)
  // answer
  const result = fruits.join(" and ");
  console.log(result);
}

// Q2. make an array out of a string
{
  const fruits = "🍎, 🥝, 🍌, 🍒";
  // do it yourself!
  // const fruit = fruits.split(",");
  // console.log(fruit);
  // answer
  const fruit = fruits.split(",");
  console.log(fruit);
}

// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
  const array = [1, 2, 3, 4, 5];
  // do it yourself!
  // const reverseArray = array.reverse();
  // console.log(reverseArray);
  // answer
  const reverseArray = array.reverse();
  console.log(reverseArray);
  console.log(array); // 원래 배열도 바뀐다.
}

// Q4. make new array without the first two elements
{
  const array = [1, 2, 3, 4, 5];
  // do it yourself!
  // const result = array.slice(2);
  // const resultNew = array.slice(2, 5);
  // console.log(result);
  // console.log(resultNew);
  // // answer
  const result = array.slice(2, 5);
  console.log(result);
  console.log(array);
}

// -------------------------------------------------------------
class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student("A", 29, true, 45),
  new Student("B", 28, false, 80),
  new Student("C", 30, true, 90),
  new Student("D", 40, false, 66),
  new Student("E", 18, true, 88),
];

// Q5. find a student with the score 90
{
  // do it yourself!
  // for (let i = 0; i < students.length; i++) {
  //   if (students[i].score === 90) {
  //     console.log(students[i]);
  //   }
  // }
  // answer
  // const result = students.find(function (value) {
  //   return value.score === 90;
  // });
  const result = students.find((value) => value.score === 90);
  console.log(result);
}

// Q6. make an array of enrolled students
{
  // do it yourself!
  // const result = students.filter((value) => value.enrolled === true);
  // console.log(result);
  // // answer
  const result = students.filter((student) => student.enrolled === true);
  console.log(result);
}

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
  // do it yourself!
  // let result = [];
  // for (let i = 0; i < students.length; i++) {
  //   result.push(students[i].score);
  // }
  // console.log(result);
  // answer
  const result = students.map((student) => student.score);
  console.log(result);
}

// Q8. check if there is a student with the score lower than 50
{
  // do it yourself!
  // const result = students.some((student) => student.score < 50);
  // console.log(result);
  // answer
  const result = students.some((student) => student.score < 50);
  console.log(result);

  const result2 = !students.every((student) => student.score >= 50);
  console.log(result2);
}

// Q9. compute students' average score
{
  //do it yourself!
  // let result = 0;
  // for (let i = 0; i < students.length; i++) {
  //   result += students[i].score;
  // }
  // console.log(result / 5);
  // answer
  // const result = students.reduce((prev, curr) => {
  //   console.log("----------");
  //   console.log(prev);
  //   console.log(curr);
  //   return prev + curr.score;
  // }, 0);
  const result = students.reduce((prev, curr) => prev + curr.score, 0);
  console.log(result / students.length);
}

// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
  // do it yourself!
  // const result = students.map((student) => student.score);
  // const resultArray = result.join();
  // console.log(resultArray);
  // answer
  const result = students
    .map((student) => student.score)
    // .filter((score) => score >= 50)
    .join();
  console.log(result);
}

// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
  // do it yourself!
  // const result = students
  //   .map((student) => student.score)
  //   .sort((a, b) => a - b)
  //   .join();
  // console.log(result);
  // answer
  const result = students
    .map((student) => student.score)
    .sort((a, b) => a - b)
    .join();
  console.log(result);
}
반응형
728x90

Study Planner(Google Spredsheet)
Book Library(Notion)

 

Today Read Hours Total Read Hours
2.0 550.5

 


Today I Read

 

Book No. Hours
(Sum)
Title Author Date Pages IL BL
78 1.0
(9.5)
The Compound Effect Darren Hardy 2021.11.01 ~
ING
121~137/158 - -
79 0.0
(0.5)
P.S. I Still Love You(Audio) Jenny Han 2021.11.01 ~
ING
248 UG 4.3
80 1.0
(6.5)
Gathering Blue Lois Lowry 2021.11.03 ~
ING
91~111/210 MG+ 5.0

 


 

확실히 원서읽기를 처음 시작했을때 보다는 영어를 언어 자체로 받아들이고 있다는 느낌이 많이 든다. 글을 읽을 때 단어 하나 하나 읽는게 아니라 익숙한 구문끼리 묶어서 읽고 있는걸 발견했기 때문이다. 아마 1000시간쯤 되면 그래도 좀 많이 달라져 있지 않을까 살짝 기대가 된다. 
반응형
728x90

Study Planner(Google Spredsheet)
Book Library(Notion)

 

Today Read Hours Total Read Hours
2.0 548.5

 


Today I Read

 

Book No. Hours
(Sum)
Title Author Date Pages IL BL
78 1.0
(8.5)
The Compound Effect Darren Hardy 2021.11.01 ~
ING
102~121/158 - -
79 0.0
(0.5)
P.S. I Still Love You(Audio) Jenny Han 2021.11.01 ~
ING
248 UG 4.3
80 1.0
(5.5)
Gathering Blue Lois Lowry 2021.11.03 ~
ING
79~91/210 MG+ 5.0

 


 

확실히 자기 계발서 같은 non-fiction은 어디서 많이 들어봤던 내용들의 반복이 많다. The Compound Effect도 마찬가지다. 개인적으로 자기 계발서와 같은 책 종류를 좋아하진 않지만, 영어 독서 능력을 기르기에는 좋은 재료 같다는 생각이 든다. 결국 저자가 얘기하고 싶은 핵심은 하나인데 이것을 설명하기 위해 수많은 예제들을 가지고와 살을 붙이니 그 내용들은 어찌 되었든 약간은 비슷할 수밖에 없다. 나도 non-fiction 영어 원서를 많이 읽어본 건 아니라 뭐라 할 말은 없지만, 개인적으로는 영어공부로서의 자기 계발 원서는 추천하고 싶다. 
반응형
728x90

8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 | 프론트엔드 개발자 입문편 (JavaScript ES6 )

"use strict";

// Array

// 1. Declaration
const arr1 = new Array();
const arr2 = [];

// 2. Index position
const fruits = ["apple", "banana"];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[fruits.length - 1]);
console.clear();
// 3. Looping over an array
// print all fruits
// a. for
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

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

// c. for each
// fruits.forEach(function (fruit, index) {
//   console.log(fruit, index);
// });

// fruits.forEach((fruit, index) => {
//   console.log(fruit, index);
// });

// fruits.forEach((fruit, index) => console.log(fruit, index));
fruits.forEach((fruit) => console.log(fruit));

// 4. Addtion, deletion, copy
// push: add an item to the end
fruits.push("strawberry", "peach");
console.log(fruits);

// pop: remove an item from the end
fruits.pop();
fruits.pop();
console.log(fruits);

// unshift: add an item to the beginning
fruits.unshift("strawberry", "peach");
console.log(fruits);

// shift: remove an item from the beginning
fruits.shift();
fruits.shift();
console.log(fruits);

// note!! shift, unshift are slower than pop, push: 나머지 전체가 움직여야 하기 때문에
// splice: remove an item by index position
fruits.push("strawberry", "peach", "lemon");
console.log(fruits);
fruits.splice(1, 1);
console.log(fruits);
fruits.splice(1, 1, "greenapple", "watermelon");
// fruits.splice(1, 0, "greenapple", "watermelon");
console.log(fruits);

// combine two arrays
const fruits2 = ["coconut", "durian"];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);

// 5. Searching
// indexOf: find the index
console.clear();
console.log(fruits);
console.log(fruits.indexOf("apple"));
console.log(fruits.indexOf("lemon"));
console.log(fruits.indexOf("durian")); // 찾는 값이 없을 경우 -1을 출력

// includes
console.log(fruits.includes("durian"));
console.log(fruits.includes("peach"));

// lastIndexOf
console.clear();
fruits.push("apple");
console.log(fruits);
console.log(fruits.indexOf("apple")); // 첫번째 값의 index만 출력
console.log(fruits.lastIndexOf("apple")); // 마지막 값의 index만 출력
반응형

+ Recent posts