한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.

Ch 3. Creating React Project

내용

결론

다른 거 다 필요 없고 CRA로 했을 때, husky로 Git Hooks을 공유(통일)하자

왜?

• 프로젝트에서 팀원들 간의 스타일을 통일하기 위해서
• 프로젝트를 관리하기 위해서 (test 등)

1. git hooks

• git 커밋, 머지, 푸시 등을 할 때 자동으로 특정 스크립트를 실행하게 할 수 있다.
• 특정 상황에 특정 스크립트를 실행하게 하는 것

2. CRA

• Create-react-app의 줄임말
• 페이스북의 공식 오픈소스로 아주 쉽게 리액트 프로젝트를 생성하는 방법
• 최신 버전으로, 기초적인 세팅이 다 되어있음 참고 : https://create-react-app.dev/

사용법

npx create-react-app

package.json

package.json 파일은 현재 프로젝트에 관한 정보와 버전의 내용이 들어있는 파일 dependencies 각 라이브러리들

• web-vitals : 구글에서 사이트 개선을 위해 측정하기 위한 정보

scripts ** npm start ** : 개발모드 화면, 수정하면 반영

** npm run build** : 배포, 최적화 : build 폴더에 파일이 담기게 됨 -> npm install -g serve : 압축된 상태로 빌드파일 실행 -> npx serve -s build : 템퍼러리하게 실행

-g 옵션 : Global의 약자 - 어떤 디렉터리 에서든지 해당 모듈을 사용한다는 옵션 -s 옵션 : singlePage의 약자 - 어떤 라우팅으로 하더라도 index로 옮기게하는 옵션

** npm test ** : jest기반으로 테스트 코드 작성가능 : 아래의 테스트 파일들을 실행시킴

• .test.js ~로 끝나는 파일
• .spec.js ~로 끝나는 파일
• tests 폴더 안의 파일

** npm run eject ** : create-react-app의 관리를 받지 않겠다! 라는 것임 하게되면 react-scripts가 담고 있던 각종 패키지가 다 드러나고 react-scripts는 사라짐 현업에서 잘하지 않음. 오픈소스로 잘 관리되고 있던 것을 탈출하는 것이어서

3. ESLint

1) 설치 방법

*CRA하면 따로 생성할 필요가 없음. mkdir (프로젝트 이름) cd (프로젝트 이름) npm init -y

-y는 yes의 약자 - default값으로 설정된 package.json을 만든다. 여러가지를 묻지 않음.

npm i eslint -D

i : install -D 옵션 : dev디펜던시, 빌드 안에 들어갈 필요가 없다면 (= run time에 사용되는 패키지가 아니라면) -D 옵션을 건다. 디펜던시 옵션을 걸면 아래의 부분 devDependencies에 들어간다.

npx eslint –init

• 초기화 하면서 설정을 물어봄. (체크, 문제찾기, 강제성)

  2) 사용 방법

  npx eslint (검사할파일명) : 문제가 무엇인지 확인해줌 npx eslint (검사할파일명) –fix : 수정하기

3) 설정 방법

아래와 같이 package.json > eslintConfig > "rules"를 추가하여서 항목 추가

rules : https://eslint.org/docs/latest/rules/ Configuring Rules : https://eslint.org/docs/latest/user-guide/configuring/rules

4) extension

4. Prettier

1) 설치 방법

mkdir (프로젝트 이름) cd (프로젝트 이름) npm init -y npm i prettier -D

2) 사용 방법

npx prettier (확인할 파일명) : 확인할 경우 npx prettier (확인할 파일명) –write : 수정까지 할 경우

3) 설정 방법

.prettierrc.json 파일을 생성하고 https://prettier.io/docs/en/options.html 참고하여 옵션 입력

예시

3) extension

5. Husky

6. lint-staged

5+6. Husky & lint-staged

Husky : 깃훅을 쉽게 사용하게 하는 라이브러리 lint-staged : git에 staged된 파일만 lint해주는 라이브러리

1) 설치 방법

*CRA로 생성된 프로젝트 기준

1. npm i husky -D
2. npx husky install
3. 파일 수정 package.json > “scripts” : {“prepare”: “husky install” …}
4. npx husky add .husky/pre-commit “npx lint-staged” .husky폴더의 pre-commit 파일에 보면 npx lint-staged 라는 코드가 삽입된다.

5. npm i lint-staged -D lint-staged 설치
6. 작동 시킬 파일 범위 정하기 - package.json 에 아래의 코드 추가

   "lint-staged": {
    “**/*.js” : [
        "eslint –fix",
        "prettier –write",
        "git add"
    ]
   },

7. npm i prettier -D : prettier 설치
8. VScode : Preferences > Settings > Editor : format on Save [ ]해제

소감

하.. 별거 아닌 내용인데.. 최선의 방법이 아닌 원리부터 설명해주다보니.. 답답했다. ESlint 남이 세팅해준 것만 썼지 세팅법은 처음 제대로 배웠다.

강의

벨로퍼트와 함께하는 모던 리액트

3장. 투두리스트 만들기 https://react.vlpt.us/mashup-todolist/

1. 세팅

yarn add styled-components yarn add react-icons

2. 참고 사이트

오픈컬러 https://yeun.github.io/open-color/

아이콘 https://react-icons.github.io/react-icons/

3. styled-components

셀렉터 : 다른 css 요소에 스타일 변경하기

const Remove = styled.div`
 opacity: 0;
`;
ㅤ
const TodoItemBlock = styled.div`
&:hover {
   ${Remove} {
       opacity: 1;
   }
}`;

## 4. useState
>```js function TodoCreate() {
 const [open, setOpen] = useState(false); // useState 안에는 기본값
 const onToggle = () => setOpen(!open);
ㅤ
 return (
   <CircleButton open={open} onClick={onToggle}>
     <MdAdd />
   </CircleButton>
 );
}

5. 커스텀 훅

반복을 줄이고 재사용성을 높이기

export function useTodoState() {
  const context = useContext(TodoStateContext);
  if (!context) {
    throw new Error("Cannot find TodoProvider");
  }
  return context;
}

```

6. context

React의 전역적이라고 볼 수 있는 데이터 관리 방법 import React, { createContext, useContext } from "react"; const state = useContext(TodoStateContext);

7. 구조를 이해하기

외부에 TodoContext

소감

1. subtask만들기 : 실패

기존 강의가 끝나고나서 subtask를 만들어서 추가하고 삭제하게 만들려고 했는데 실패했다. UI만 만들었지, 리액트 데이터 연동을 하지못했다. 제대로 이해하지 못한 것 같고.. 좀 더 시도해볼 수도 있겠지만, 지금 부딪히는 것보다 다른 예제들을 더 접하는 것이 좋겠다.

• map을 두 번 돌리는 게 문제가 있었나.
• 하위 구조를 만들어서 연동시키는 것

  2. styled-components : 아하

  styled-components가 되게 와닿지 않았었는데 실습으로 접하니 어느 정도 이해가 되고 익숙해졌다.

조급하지 말자

벨로퍼트와 함께하는 모던 자바스크립트

1장. 자바스크립트 입문 https://learnjs.vlpt.us/basics/

1. 객체

아래와 같이 객체 Object를 만들 수 있다. 객체 안에 들어가는 것은 속성 Property과 메서드 method 속성 Property는 키 key : 값 value로 구성 object = { key : value }

1) constructor 생성자 방식

const pig = new Object();
pig.type = "돼지";
pig.name = "꿀꿀이";
pig.sound = "꿀꿀";

### 2) literal 리터럴 방식 👏
>```js
const pig = {
  type: "돼지",
  name: "꿀꿀이",
  sound: "꿀꿀"
};

2. 객체 생성자

객체 생성자란 객체를 반복적으로 만들 수 있는 틀을 의미한다.

• Constructor 생성자 -> instance 만들어진 객체

1) function 방식

function Animal(type, name, sound) {
   this.type = type;
   this.name = name;
   this.sound = sound;
}
const pig = new Animal("돼지", "꿀꿀이", "꿀꿀);
const dog = new Animal("개", "멍멍이", "멍멍");
const cat = new Animal("고양이", "야옹이", "야옹");

### 2) class 방식 👏
- 필드 field
- 메서드 method

>```js
class Animal {
    constructor(type, name, sound) {
      this.type = type;
      this.name = name;
      this.sound = sound;
    }
}
const pig = new Animal("돼지", "꿀꿀이", "꿀꿀);
const dog = new Animal("개", "멍멍이", "멍멍");
const cat = new Animal("고양이", "야옹이", "야옹");

3. prototype

function방식과 class방식의 차이

function AnimalFunc(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
  this.say = function () {
    console.log(this.sound);
  };
}
 ㅤ
AnimalFunc.prototype.code = function () {
  console.log(this.sound);
};
ㅤ
class AnimalClass {
  constructor(type, namename, sound) {
    this.type = type;
    this.namename = namename;
    this.sound = sound;
  }
  say() {
    console.log(this.sound);
  }
}
ㅤ
AnimalClass.prototype.code = function () {
  console.log(this.sound);
};

## 4. constructor
생성된 객체의 생성자 찾기
>```js
function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}
ㅤ
const pig = new Animal("돼지", "꿀꿀이", "꿀꿀");
ㅤ
console.log(pig.constructor.name); // Animal
console.log(Animal.constructor.name); // Function
```


## 5. static method
static 키워드를 사용하면 객체가 아니라 클래스에 속하게 만들 수 있다. 
객체 차원이 아니라 클래스 차원에서 함수를 구현해야 하는 경우 필요하다.
**static 키워드로 만든 함수는 반대로 만들어진 인스턴스에서 불러올 수 없다.**
>```js
class Pet {
  constructor(..., sound) {
    ...
    this.sound = sound;
  }
  static say() {
    console.log("say " + this.sound);
  }
  speak() {
    console.log("speak " + this.sound);
  }
}
ㅤ
const turtle = new Pet("엉금");
ㅤ
// 클래스 - static
console.log(Pet.say); // f say() {}
console.log(Pet.say()); // say undefined
// 클래스
console.log(Pet.speak); // undefined
console.log(Pet.speak()); // not a function
ㅤ
// 객체 - static
console.log(turtle.say); // undefined
console.log(turtle.say()); // not a function
// 객체
console.log(turtle.speak); // f speak() {}
console.log(turtle.speak()); // speak 엉금
```
```

## 6. call 함수
프로토타입을 받아올 때 사용, **첫 번째 인자에는 this를 받아온다.**
>```js
function Animal(type, name, sound) {
 this.type = type;
 this.name = name;
 this.sound = sound;
}
 ㅤ
Animal.prototype.say = function () {
 console.log(this.sound);
};
 ㅤ
function Dog(name, sound) {
 Animal.call(this, "개", name, sound); // Call 함수
}
```


## 7. extend & super
super의 2가지 사용법
- 1. super(): 부모-class의 생성자constructor를 참조
- 2. super.method() : 부모-class의 prototype-method를 참조

>```js
function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}
 ㅤ
Animal.prototype.makeNoise = function () {
  console.log("wooo");
};
 ㅤ
class Cat extends Animal { // extends
  constructor(name, sound) {
    super("고양이", name, sound); // super의 사용
  }
  meow() {
    super.makeNoise(); // super의 사용
  }
}

## 8. delete
delete 명령어로 프로퍼티를 지우거나 오브젝트를 지울 수 있다.
- delete 프로퍼티
- delete 오브젝트


## 9. Object.assign();
- 오브젝트 얕은 복사

## 10. 깊은 복사와 얕은 복사
이건 워낙 고생한 이슈기도 하고, 정말 필요한 부분이라 나중에 다시 더 진하게 보는 걸로...


> * 참고 : https://bbangson.tistory.com/78
JSON으로 파싱해서 텍스트를 전부 그대로 붙여넣는 방법이 나와있다.
정말로 이렇게 하는 방법밖에 없는 것인가..
전에 무식하게 포문 다 돌려가면서 했던 것이 맞는 방법이었나보다..

자바스크립트 상속은 아는 개념이라 강의내용만 듣고 넘어가려다가 예전에 개발할 때 헷갈리는 부분이 있어서 잘 안쓰다보니 이번에는 대충 넘어가지 않고 집요하게 정리를 해보았다.

1. 상속

01. function방식과 class방식의 차이

ES6 도입 이전에도 function을 통해서 생성자를 만들어 클래스처럼 사용하였으나, class가 나오면서 기능이 더 명확해졌다.

function AnimalFunc(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
  this.say = function () {
    console.log(this.sound);
  };
}
ㅤ
AnimalFunc.prototype.noise = function () {
  console.log(this.sound);
};
ㅤ
// -----------------------------------------
class AnimalClass {
  constructor(type, namename, sound) {
    this.type = type;
    this.namename = namename;
    this.sound = sound;
  }
  say() {
    console.log(this.sound);
  }
}
ㅤ
AnimalClass.prototype.noise = function () {
  console.log(this.sound);
};

같은 생성자를 Function방식과 Class방식으로 짜보았다.
>```js
console.log(AnimalFunc.prototype); // {noise: f()}
console.log(AnimalFunc.prototype.say); // undefined
console.log(AnimalFunc.prototype.noise); // f() {}
ㅤ
console.log(AnimalClass.prototype); // {noise: f()}
console.log(AnimalClass.prototype.say); // f say() {} //?????
console.log(AnimalClass.prototype.noise); // f() {}

*의문 1. * 여기서 의문인 점은 클래스로 짠 say 함수의 경우 직접 콘솔에 입력하면 나오지만 prototype으로 찍으면 안나오는가? ...결국 답을 찾지 못했다.

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}
ㅤ
Animal.prototype.say = function () {
  console.log("say", this.sound);
};
ㅤ
// 개로 상속 --------------------------------
function Dog(name, sound) {
  Animal.call(this, "개", name, sound); // call 함수
}
ㅤ
Dog.prototype = Animal.prototype;
ㅤ
Dog.prototype.speak = function () {
  console.log("speak", this.sound);
};
ㅤ
// 고양이로 상속 --------------------------------
class Cat extends Animal {
  constructor(name, sound) {
    super("고양이", name, sound); // super 함수
  }
}
ㅤ
Cat.prototype.speak = function () {
  console.log("speak", this.sound);
};
ㅤ
// 객체 생성 --------------------------------
const mong = new Dog("몽이", "왈왈");
const mio = new Cat("미오", "냥냥");

---
**의문 2. **
완전 다른 방식인데 왜 같은 것처럼 설명되어 있을까?

![](https://velog.velcdn.com/images/teo_ryu/post/d6adee18-a2f3-4af8-a48b-ee7a913bc802/image.png)
`Dog.prototype = Animal.prototype;`을 하게 되면 말 그대로 `Animal.prototype`을 함께 쓰게 되기 때문에 다른 동물들도 같은 방식으로 연결하게 되면 Dog에 업데이트하든 Pig를 업데이트하든 `Animal.prototype`안에 다 들어가게 된다. 상속이 아니라 프로토타입 공유에 가까운.. 

반면 오른쪽처럼 class로 상속받은 Cat의 경우 `Animal.prototype`만 상속받으면서 추가되는 메서드는 자신에게만 추가한다. 

---
### <span style="color:var(--primary1)">02. prototype과 \_\_proto\_\_</span>

세 가지 키워드를 통해서 상속받는 관계를 추적하고 접근할 수 있게 된다.
- 1. **prototype** : 해당 클래스의 prototype에 접근
- 2. **\_\_proto\_\_** : 상속받은 곳으로 참조
- 3. **constructor** : 해당 인스턴스를 만든 생성자를 참조


>```js
console.log(Animal.prototype); // {say: ƒ (), speak: ƒ ()}
console.log(Dog.__proto__); // ƒ ()
console.log(Cat.__proto__); // ƒ Animal() {}
ㅤ
//------------------------------------
console.log(Dog.prototype); // {say: ƒ (), speak: ƒ ()}
console.log(mong.__proto__); // {say: ƒ (), speak: ƒ ()}
ㅤ
console.log(Cat.prototype); // Animal {speak: ƒ (), say: ƒ (), constructor: Object}
console.log(mio.__proto__); // Animal {speak: ƒ (), say: ƒ (), constructor: Object}
ㅤ
//------------------------------------
console.log(mong.__proto__.__proto__ === Animal.prototype); // false
console.log(mio.__proto__.__proto__ === Animal.prototype); // true

이것을 보면 function 방식으로 선언한 Dog의 경우 기능적으로만 상속처럼 보일 뿐 실제로 구조적으로 연결되는 것은 아니다. Dog.__proto__ 는 빈 함수를 가리키고 있는 반면, Cat.__proto__ 는 Animal()을 정확하게 가리키고 있다.

여기서 하나 의문이었던 것이 mio.__proto__.__proto__ 와 Cat.__proto__ 가 콘솔에서 같지 않게 나왔다는 것이었다. __proto__는 거슬러 올라가는 것이 아닌가...? 사실 이 때 살짝 포기했다

|-|-|-|의미| |---|---|---|---|---| |⬇️ constructor|||| |mio.constructor|===|Cat|같다| |Cat.constructor|===|Animal.constructor|같다|? ||||| |⬇️ 여기까지는 괜찮다.|||| |mio.__proto__|===|Cat.prototype|true| |mio.__proto__.__proto__|===|Animal.prototype|true| ||||| |⬇️ ....? |||| |mio.__proto__.__proto__ |!==|Cat.__proto__|같지 않다|???| |Cat.__proto__ |!==|Animal.prototype|같지 않다|???| ||||| |⬇️ ....|||| |Cat.prototype.__proto__ |===|Animal.prototype|true|

무슨 끈기가 생겼는지.. 고생끝에 드디어 이해했다. 콘솔로 하나하나 확인해보다가 겨우 깨닫게 되었다. __proto__는 "인스턴스"에서 거슬러올라 갈 때만 해당되는 것 아니 그림으로 그려서 확인하는 것이 더 좋겠다.

prototype과 __proto__는 서로 반대되는 개념도 아니고, 일직선의 구조가 아니기 때문에 의도한대로 되지 않았던 것이다.

핵심은 여기에 있다. 세 가지 키워드의 관계를 그림으로 나타냈다.

인스턴스를 기준으로 자신을 찍어낸 클래스를 찾으려면 .constructor를, 내가 상속하고 있는 prototype을 찾기 위해서는 .__proto__를, 클래스의 prototype을 참조하려면 .prototype을 사용하면 된다.

이왕 콘솔로 노가다하면서 찾아보는 거 그 끝은 어디에 있을까 올라가다가 Object와 Function까지 만나게 되었다. Object와 Function은 순환하는 구조로 서로 맞물려 있었고 Object.prototype의 __proto__는 null로 끝난다. Function.prototype과 Function.__proto__가 같다고 나올 때는 너무 기분이 이상했다.. 무사수행으로 무신 만난 느낌

어찌보면 쓸데없는 내용을 디깅한 것 같기도한데 큰 구조를 이해하는데 좀 도움이 된 것 같다.

구글링으로 찾아본 다이어그램 이미지가 다양했는데 꼬여있는 그림들은 오히려 더 이해하기 힘들어서 직접 그려보게 되었다.

소감

직접 그리기까지 했으니 절대 안까먹을 것 같다. 저처럼 이렇게 사소한 것에서 잠시 고통받는 사람이 있다면 도움이 되기를 바라며..

참고했던 곳중에 가장 잘 설명해둔 곳 같은 동물 예시라서 그런지 이해하기 쉬웠다. *참고 : https://ko.javascript.info/class-inheritance

    필요없어서 안쓴거야! 했다가 들어가보니 최종 보스 같이 느껴졌던 리듀스.. 하지만 이해하고 보니 쉬웠다. 진작 뜯어볼 걸

• 함수를 실행하고 하나의 결과값을 반환
• reduce는 줄이다라는 뜻이며, 누산기라고 이해하면 될 것 같다.

1. 우선 가장 단순화된 형태를 보자

• 두 개의 인자를 갖는다.
  • acc accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
  • cur current : 현재 돌고 있는 요소

const numbers = [4, 3, 2, 1];
let sum = numbers.reduce((acc, cur) => acc + cur)

위를 풀어서보면 아래와 같다.

>```js
const numbers = [4, 3, 2, 1];
let sum = numbers.reduce((acc, cur) => {
    return acc + cur;
});

더 풀어서보면 다음과 같다. acc 에는 가장 첫 번째 원소인 '4'를 할당하고 (index 0) cur 에는 나머지 원소인 '3, 2, 1'이 순차적으로 들어간다. (index 1, 2 ...)

acc += cur; // 4 += 3;
acc += cur; // 7 += 2;
acc += cur; // 9 += 1;
console.log(acc); // 10

---

### 2. 옵션이 추가된 발전된 형태를 보자


- 2개의 인자 + 1개의 초기값
  - `acc` accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
  - `cur` current : 현재 돌고 있는 요소
  - ** `initialValue` : acc의 초기값 _(optional) _**

>```js
const numbers = [4, 3, 2, 1];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum);

여기서 사람 화나게 하는 부분이 initialValue다. acc의 초기값으로 initialValue를 할당하는 순간 cur는 index 1부터가 아니라 0부터 돌아간다.

같은 배열이지만 index 0의 주인이 달라진다.

acc += cur; // 0 += 4;
acc += cur; // 4 += 3;
acc += cur; // 7 += 2;
acc += cur; // 9 += 1;
console.log(acc); // 10

---
### 3. 이제 두 개의 인자를 추가해보자

- 4개의 인자 + 1개의 초기값
  - `acc` accumulator : 누산기, 누적되는 값, 최종적으로 출력되는 값
  - `cur` current : 현재 돌고 있는 요소
  - `idx` index : 배열 요소의 순서 _(optional) _
  - `arr` array (또는 `src` source) : 현재 배열, 원본 배열 _(optional)_ 
  - `initialValue` : acc의 초기값 _(optional) _

다음은 평균을 구하는 reduce 함수이다.
마지막에만 나누기를 위해서 index와 arr를 불러왔다.
헷갈려보이지만 주석에 표시된 순서대로 돌면 된다.
>```js
const avg = numbers.reduce((acc, cur, index, arr) => {
    if (index === arr.length - 1) { // index가 마지막일 때
        return (acc + cur) / arr.length; // cur - 4
    }
    return acc + cur; // cur - 1, 2, 3
    }, 0);
ㅤ
console.log("avg", avg);

4. 응용편

각 알파벳의 개수를 구하는 reduce 함수

const alphabets = ["a", "a", "c", "c", "c"];
 ㅤ
const cnt = alphabets.reduce((acc, cur) => {
 if (acc[cur]) {
   acc[cur] += 1;
 } else {
   acc[cur] = 1; // acc.cur이 없으면 선언함
 }
 return acc;
}, {}); // acc는 오브젝트로 선언
 ㅤ
console.log(cnt); // {a: 2, c: 3}

- 1) 초기값으로 갑자기 **빈 오브젝트**를 할당하고
- 2) 오브젝트인데 배열처럼 불러오지 않나...
- 3) if 구문은 어떻게 되는 것인지..?

난리도 아니다.


우선 오브젝트의 프로퍼티(속성)를 불러오는 법을 알아야한다.
`obj["a"]` 과 `obj.a` 은 동일하다.
>```js
// 오브젝트의 프로퍼티를 부르는 2가지 방법
const obj = { a: "hey", b: 0, c: 0 };
console.log(obj["a"]); // 'hey"
console.log(obj.a); // "hey"

if 구문 if (acc[cur])을 이해하려면 오브젝트의 프로퍼티 선언방법을 봐야한다. acc[cur] 이 undefined 인지 아닌지가 중요하다. 처음에는 당연히 빈 오브젝트가 초기값이다보니 undefined 가 된다. 그러면 else 구문에서 처음으로 프로퍼티가 선언되는 것이다.

//  프로퍼티 없을 경우
console.log(obj.j); // undefined
console.log(obj["k"]); // undefined
 ㅤ
//  프로퍼티 선언
obj.j = 1; // 선언
console.log(obj.j); // 1
 ㅤ
obj["k"] = 2; // 선언
console.log(obj["k"]); // 2

---

# 문제 풀이
배운 내용(배열 내장함수)을 바탕으로 3가지 방법으로 풀어보세요.
>```js
function countBiggerThanTen(numbers) {
 /** 문제 **/
}
  ㅤ
const count = countBiggerThanTen([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count); // 5

1) 첫 번째 풀이법

reduce를 마지막으로 썼던 터라 이 생각 밖에 안났다.

function countBiggerThanTen(numbers) {
 return numbers.reduce((acc, cur) => {
   if (cur > 10) {
     return acc + 1;
   } else {
     return acc;
   }
 }, 0);
}

### 2) 두 번째 풀이법
딱히 더할 필요가 없다는 것을 깨닫고 필터로 잘라서 개수만 셌더니 코드가 한줄로 해결되었다.
>```js
function countBiggerThanTen(numbers) {
 return numbers.filter((el) => el > 10).length;
}

3) 세 번째 풀이법

내가 기존에 항상 코딩하던 방식이다. 변수 범벅으로 ...

function countBiggerThanTen(numbers) {
 let cnt = 0;
 numbers.forEach((element) => {
   if (element > 10) cnt++;
 });
 return cnt;
}

```

소감

고작 기초 자바스크립트를 풀고 있는 단계지만 전혀 부끄럽지 않고 기초를 다져놓는다는 안도감이 들었다. 항상 불안했었던 부분이 막 기능만들고 페이지만드는데 내 스스로 기초가 너무 부족했다는 점이었다. 마지막에 문제 3개 풀었는데 딱 정답도 저렇게 3가지여서 기분 좋았다. 하하 근데 글 정리하는데 날 밤새웠다. 배우는데 1시간이면 글쓰는데는 3시간 걸리네..

강의

벨로퍼트와 함께하는 모던 자바스크립트

1장. 자바스크립트 입문 https://learnjs.vlpt.us/basics/

배열 내장 함수

forEach

• 배열의 요소 각각에 대해 실행

function zoo = [‘pig’, ‘cat’, ‘dog];

1) 기본적으로 원리는 아래와 같이 함수를 선언해서 콜하는 방식
>```js
function print(animal) {
    console.log(animal);
}
zoo.forEach(print);

2) 보통 아래와 같이 함수를 안에서 선언쓰기 때문에 구조적으로 헷갈려 보인다.

zoo.forEach(animal => {
    console.log(animal);
});

## <span style="color:var(--primary1);margin-left:2em;"> map</span>
- 배열의 요소 각각에 대하여 (함수를 호출하고 그 결과로) **새로운 배열을 반환**

>```js
const numbers = [1, 2, 3];

1) 마찬가지로 아래와 같이 선언한 함수를 콜

const square = n => n*n;
const squared = numbers.map(square);

2) 보통 아래와 같이 map안에서 선언

const squared = numbers.map(n => n*n);

indexOf, findIndex, find

• indexOf : 배열에서 특정 요소의 index값 찾을 때 (텍스트일 경우)
• findIndex : 배열에서 특정 요소의 index값 찾을 때 (객체일 경우, 조건있을 경우)
• find : 배열에서 특정 요소를 찾아올 때

const index = numbers.indexOf(2); //1

## <span style="color:var(--primary1);margin-left:2em;"> filter</span>
- 조건에 맞는 배열만 찾아 새로운 배열을 반환

>```js
const zoo = [
 {
   name: "dog",
   sound: "멍멍",
   leg: 4
 },
 {
   name: "cat",
   sound: "야옹",
   leg: 4
 },
 {
   name: "bird",
   sound: "짹짹",
   leg: 2
 }
];
const index = zoo.findIndex((animal) => animal.name === "dog");
const animal = zoo.find((animal) => animal.name === "dog");
const fourlegs = zoo.filter((animal) => animal.leg === 4);
console.log(index); // 0
console.log(animal); // {name: "dog", sound: "멍멍"}
console.log(fourlegs); // [Object(dog), Object(Cat)]

concat 그리고 "..." 스프레드 연산자

• 배열 합치기 아래 두 문장은 같은 결과 *concat은 배열 껍데기를 벗길 때도 사용

    const newArray = arr1.concat(arr2);
     const newArray = [...arr1, ...arr2];

## <span style="color:var(--primary1);margin-left:2em;"> splice & slice </span>
- 배열 가져오기
두 함수의 매개변수와 효과가 다르니 주의!
  - splice(index, cnt); <span style="color:var(--destructive1)">***잘라온다**</span> (원본 손상)
  - slice(start, end); <span style="color:var(--primary2)">***복사한다**</span> (원본 유지)

## <span style="color:var(--primary1);margin-left:2em;"> push, pop, shift, unshift </span>
- 배열 안에 넣고 빼기


- |ㅤㅤㅤㅤㅤ|ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ|ㅤㅤㅤㅤㅤ|
|---|---|---|
|unshiftㅤㅤ➡️||⬅️ㅤㅤㅤpush|
||ㅤㅤㅤㅤㅤㅤ[배열]ㅤㅤㅤㅤㅤㅤ|ㅤㅤㅤㅤ|
|shiftㅤㅤㅤ⬅️|| ➡️ㅤㅤㅤpop|

- shift & unshift : 인덱스를 변경하기 때문에 느리다
   - shift : 앞에서 뺌
   - unshift : 앞에서 넣음
- push & pop : 배열 요소만 넣고 빼기 때문에 빠르다
  - push : 뒤에서 넣음
  - pop : 뒤에서 뺌


    ~~쉬운 개념인데 항상 쓸 때마다 헷갈렸는데.~~ _이제야 확실하게 알았다. shift 방식은 인덱스를 변경하는 방식이라는 것, 배열에 추가할 때는 당연히 뒤에 넣지 않는가. 퍼포먼스 차이도 이해했다._
    shift는 튀어나오게, unshift는 돌려놓는 느낌으로 기억하자.


## <span style="color:var(--primary1);margin-left:2em;"> join </span>
- 배열을 텍스트로 출력
>```js
const numbers = [1, 2, 3];
console.log(numbers.join());    // 1,2,3
console.log(numbers.join(",")); // 1,2,3
console.log(numbers.join(""));  // 123
console.log(numbers.join(" ")); // 1 2 3
console.log(numbers.join("-")); // 1-2-3

```

... 남은 건 reduce ... 뒤에 이어집니다.

나에겐 개발자라고 하기엔 매우 안좋은 습관이 있다.

1. 세련된 방식을 찾아보지 않고 무식하게 개발한다.
2. 노가다라도 돌아가면 리팩토링 안한다.
3. 새로운 기술이나 문법나오면 미룬다 안본다.

자바스크립트를 처음 접한 것이 하필 2015년이고 그 뒤로는 아는 수준으로만 개발을 해왔던 터라 ES6에 나온 문법들도 어색하다. (라기엔 시간이 너무 흐른거 아닌가요) 비개발자 직업의 한계랄까.. 강의를 조금만 들어도 바로 나오는 내용인데 항상 바쁘게 무작정 만들기부터 하다보니 이렇게 된 것 같다. 그래서 지금 아주 기초부터 강의를 듣는, 이 시간이 너무나 행복하고 보람차고 씻어내는 기분이든다.

강의

벨로퍼트와 함께하는 모던 자바스크립트

1장. 자바스크립트 입문 https://learnjs.vlpt.us/basics/

학습 내용

1. 객체 구조분해 (비구조화)

다음과 같은 과정으로 더 코드를 효율적으로 깔끔하게 쓸 수 있다. 아래 보기의 경우 1단계가 가장 쉬워보이지만 코드 줄이 길어지고 반복해서 쓰게되는 것을 줄일 수 있다.

1단계

function print(hero) {
    console.log(hero.name);
}

2단계

function print(hero) {
    const { name, age } = hero;
    console.log(name);
}

3단계

function print({ name, age }) {
    console.log(name);
}

2. 화살표 함수

1단계

화살표 함수
const dog = {
    sound: ‘멍멍',
    say: function() {
        console.log(this.sound);
    }
}

메서드 축약 표현

const dog = {
    sound: ‘멍멍',
    say() { // 축약
        console.log(this.sound);
    }
}

*화살표함수는 this를 사용할 경우 에러

const dog = {
    sound: ‘멍멍',
    say: () => {
        console.log(this.sound);
    }
}
 // 에러 화살표 함수는 this를 모른다

3. getter/setter

get, set을 설정해서 은닉

1. 프로퍼티명은 언더바로 설정 (getter, setter와 이름 분리) *프로퍼티명을 _언더바로 하지 않으면 루프에 빠지는 케이스 발생할 수 있음 RangeError: Maximum call stack size exceeded

*참고 : https://pxd-fed-blog.web.app/getter-setter/

2. set 구문은 객체의 속성에 할당을 시도할 때 호출할 함수를 바인딩 무슨말이냐면 보통의 함수처럼 ( )를 사용하지 않고 할당(대입)할 때 불러온다는 것

const numbers = {
    _a: 1,
    _b: 2,
    sum: 3,
    calculate() {
      console.log(‘calculate’);
      this.sum = this._a + this._b;    
    },
    get a() {
        return this._a;
    },
    get b() {
        return this._b;
    },
    set a(value) {
        this._a = value;
        this.calculate();
    },
    set b(value) {
        this._b = value;
        this.calculate();
    }
};
console.log(numbers.a); // getter
numbers.a = 5; // setter함수이기 때문에 set a안에 this.calculate()가 실행 -> sum도 업데이트 됨
console.log(numbers.sum); // 7 *연산을 하지 않고 기존에 업데이트 값 읽음

4. of 와 in

of >>>> 배열

const numbers = [0, 1, 2]
for (let i of numbers) {
    ...
}

### in >>>> 객체
>```js
const dog = {
    name: ‘강아지’,
    sound: ‘멍멍',
    age: 2
}
for (let i in dog) {
    console.log(i);         // “name”, “sound”, “age” *** key와 동일
    console.log(dog[i]);     // ”강아지", “멍멍", 2 *** values와 동일
}
console.log(Object.entries(dog));     // [[“name”,”강아지”], [“sound”,”멍멍”],[“age”,2]]
console.log(Object.keys(dog));         // [“name”, “sound”, “age”]
console.log(Object.values(dog));     // [“강아지", “멍멍", 2]

entries, keys, values

위의 예시처럼 오브젝트의 메서드들이 있는데 아래의 메서드들도 자주 사용했던 것 같다.

• Object.freeze()
• Object.getOwnPropertyNames()
• Object.getPrototypeOf()
• Object.values()

*참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

5. continue, break

break는 워낙 많이 사용하는데, continue는 써본 적이 없어서 볼 때마다 항상 새롭다..

for (let i = 0; i < 10; i++) {
    if (i===2) continue; // 다음 것
    if (i===5) break;
    console.log(i); // 0,1,3,4 *2는 continue에 의하여, 5는 break로 종료
}

```

배열 내장 함수는 다음 글에서 이어서...

기타 메모

codesandbox.io

온라인 코드 에디터로 크롬 > 더보기 > CodeSandbox 설치 로 바로 새 창으로 설치할 수도 있다.

eslint VS prettierrc

eslint : 코드 구현 방식을 방식을 일관성 있는 방식으로 구현 prettierrc : 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성

강의 내용

벨로퍼트와 함께하는 모던 리액트 · GitBook

2장. 리액트 컴포넌트 스타일링하기 2-3. styled-components https://react.vlpt.us/styling/03-styled-components.html

1. [styled-components]란?

CSS in JS : 자바스크립트 안에 css를 작성하는 것 styled components : 그 중 가장 인기 있는 라이브러리 그 외에 emotion, styled jsx, jss 등

2. 환경 세팅

2-1. 설치

yarn add styled-components

2-2. VSCode에서 스타일 적용

마켓플레이스에서 vscode-styled-components 설치

3. 활용법

3-1. Template Literal 와 Tagged Template Literal

1) Template Literal

백틱을 사용하는 문법 const message = `hello ${name}`;

2) Tagged Template Literal *중요

백틱을 함수처럼 사용하는 문법

괄호 대신에 백틱으로 감싸주는 식으로 사용한다는 점이 흥미롭다.

const name = "레옹";

function send(staticText, ...data) {
    console.log(staticText);
    console.log(data);
}

*send`내 이름은 ${name}이야`; *

결과
// ['내 이름은 ', '이야']
// ['레옹']

send(`내 이름은 ${name}이야`);

결과    
// '내 이름은 레옹이야'

3-2. 스타일링 문법

import styled from "styled-components";

1) HTML 엘리먼트 스타일링

styled.button`
 /* css */
`;

2) <Button>이라는 React 컴포넌트의 스타일링

styled(Button)`
   /* css */
`;

4. 기타

4-1. Polished

다양한 스타일 유틸 함수 라이브러리 https://polished.js.org/

유틸 예시

• darken :
• lighten :
• cover : 컨텐츠를 풀로 채워주는
• ellipsis 생략 : 텍스트가 넘치면 '…'으로 생략해주는

활용법 예시

import { darken, lighten } from 'polished';

&:hover {
    background: ${lighten(0.1, selected)};
}

4-2. ThemeProvider

내부 컴포넌트에 스타일을 전달하는 방법 https://styled-components.com/docs/api#themeprovider

활용법 예시

import styled, { ThemeProvider } from 'styled-components';

const palette = {
  blue: '#228be6',
  gray: '#496057',
  pink: '#f06595'
};

function App() {
  return (
    <ThemeProvider theme={{palette}}>
        <Button></Button>
    </ThemeProvider>
  )
}

...
background: ${props => props.theme.palette.blue};

4-3. keyframes

@keyframes 규칙은 특정 지점들을 키프레임으로 설정함으로써 CSS 애니메이션 제어. import styled, { keyframes } from 'styled-components';

@keyframes 이름 {
  from {
    width: 300%;
  }

  to {
    width: 100%;
  }
}

위처럼 from ~ to를 사용하거나

@keyframes 이름 {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

위처럼 %로 타임라인을 직접 설정할 수 있음

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes

4-4. 사라지는 트랜지션

1.useState 사라지는 효과를 구현하려면 Dialog 컴포넌트에서 두개의 로컬 상태를 관리해야 함

1) animate : 현재 트랜지션 효과를 보여주고 있는 중이라는 상태 2) localVisible : 실제로 컴포넌트가 사라지는 시점을 지연시키기 위한 값

2.useEffect : visible 값이 true 에서 false 로 바뀌는 시점을 감지하여 animate 값을 true 로, setTimeout 함수를 사용하여 필요한 시간 이후 false로

* localVisible 이 없으면 컴포넌트가 처음 나타났을 때부터 실행됨, 전환되는 시점만 캐치해서 하기 위해서 필요

function Dialog({ title, content, children, confirmText, cancelText, visible, onConfirm, onCancel}) {

    const [animate, setAnimate] = useState(false);
    const [localVisible, setLocalVisible] = useState(visible);

    useEffect(() => {
        if(localVisible && !visible) {
            setAnimate(true);
            setTimeout(() => setAnimate(false), 250)
        }
        setLocalVisible(visible);
    }, [localVisible, visible]);

    if(!localVisible && !animate) return null;
    return (
        <DarkBackground dissapear={!visible}>
            <DialogBlock dissapear={!visible}>
              ...생략...

5. 이슈

& + &의 덮어쓰기 문제

코드에 문제가 있나 싶었다가 테스트를 해보니 특정하게 문제가 있었는데, 찾아보니 역시 버전 이슈가 있었다.

6. 소감

스타일링의 마지막인 styled-components를 경험해보면서 신기했지만 참 힘겨웠다. 뭐랄까 굳이 잘 정리된 체계를 무너뜨리며 하나에 담아야 하나.. 만약 CSS를 분업해서 담당하는 디자이너나 개발자가 따로 있다면 더더욱 안좋을 것 같다. 실제로 찾아보니 개발 효율성이나 컴포넌트 위주라면 CSS in JS 방식이 좋고, 그렇지 않다면 CSS in CSS를 유지하는 것이 좋다고 한다.

우연히 유튜브를 통해서, 우리가 흔히 알고 있는 버전의 로드맵이 아닌 간략하게 정리한 버전의 로드맵을 보게 되었다. 워낙 정리도 잘 되어있고 핵심만 잘 설명해주신 점이 매우 유익하여서 벨로그에 따로 정리하게 되었다.

https://www.youtube.com/watch?v=TTLHd3IyErM *출처 : 본문의 이미지는 모두 유튜버 '드림코딩'님의 2022 웹개발 로드맵 총정리 영상에서 캡쳐하여 사용했습니다.

프론트엔드 Front-end

1. Basic Tools

컴퓨터

텍스트 에디터

• VS CODE
• 장점 : 코드를 작성할 에디터, 무료 + 다양한 익스텐션

  브라우저

• 크롬 (+모든 브라우저 확인)

  터미널

• OS 기본 제공 터미널 사용

2. Front-end

2-1. HTML

1) HTML Tags

2) Page Structure

3) Semantic Tags

<div>, <span> 등이 아닌 <form>, <table>, and <article> 등 의미가 있는 태그를 사용해서 개발자와 브라우저가 이해하는 구조를 만들기

4) SEO

SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정. 크롤링 할 때 더 높은 순위를 매기도록 수정하여 검색 결과(SERPs)의 상단에 노출을 시키는 것. 검색엔진 마케팅의 영역으로 디지털 마케팅에서 중요.

5) Accessibility

웹 접근성

2-2. CSS

1) Styling

2) Layouts

3) Responsive Design

4) Animation

2-3. JavaScript

1) ES6+ Syntax

2) Browser APIs

+2-4. CSS 심화

1) BEM (Block-Element-Modifier)

CSS 클래스 이름 규칙 아키텍쳐로 .Block__Element--Modifier 와 같이 이름을 짓는 방법을 말한다. ex) .header__form--email

다음에 나올 css 전처리기를 사용하면 활용할 일이 없긴하다. 게다가 [CSS in 2022]를 보면 Sass나 CSS Module의 기능까지도 포함하기 때문에 더더욱.. 레거시 파일들을 이해하는 정도로 알아두면 좋지 않을까

2) Preprocessors 전처리기

Sass (Syntactically Awesome Style Sheets)

3) CSS in JS

Styled Components

4) CSS Framework

이미 디자인된 요소를 가져와서 사용하는 것 Bootstrap Material UI

*PostCSS는 처음 들었다.

+2-5. JS 심화

1) TypeScript

• JS가 가지지 못한 '타입'과 '객체지향'을 개념을 가진 언어
• 규모있는 현업에서 사용한다고 함

2) JS Framework

• React

3) SSR

• Next.js (React)
  • SEO 보완
  • 코드 분할 : 로딩 빠르게
  • 페이지 기반 라우팅 제공

4) SSG

• Gatsby (React)

3. Tools

3-1. Version Control System : GitHub

작업 히스토리 버전 관리

3-2. Package Manager : npm & yarn

외부 라이브러리 관리

3-3. Module Bundler : Webpack

배포 시 압축

4. Testing

4-1. Test Pyramid

react-testing-library(React)

4-2. Good Test Principles

? 무엇을 봐야하는지 모르겠다.

4-3. CI/CD

지속적인 통합 / 지속적인 제공 (Continuous Integration/Continuous Delivery). 빌드 시 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결

5. Publish

필요에 따른 배포 툴 활용

AWS

Heroku

Netlify

Github Pages

백엔드 Back-end

Public APIs

트위터나 유튜브 등 무료 공식 API 활용

Firebase

실시간 데이터 베이스 저장, API 활용

Node.js

더 나아가서

Electron : Desktop App

React-Native (RN) : Mobile

Web Assembly

특정하게 성능이 중요한 경우 ex) 비디오, 이미지 등의 처리

GraphQL vs REST Api

GraphQL

• 페이스북에서 만든 쿼리언어
• 엄격하게 정의된, 최소한의 원하는 데이터 유형만 요청하고 받아옴
• 👍 하나의 Query(Endpoint)에 모두 담아 요청가능하기 때문에 요청 횟수와 응답 줄일 수 있음
• 👎 Text로만 하기 힘든 내용을 처리하기 복잡 ex) file 전송 / 재귀적인 Query 불가

  Apollo

• GraphQL을 편하게 사용할 수 있도록 도와주는 라이브러리

  RESTful

• Resource마다 하나의 Endpoint를 가지고 있음
• 요청의 구조가 정해져 있을 때
• 👍 HTTP와 HTTPs에 의한 caching

  *참고 : GraphQL vs REST https://www.holaxprogramming.com/2018/01/20/graphql-vs-restful-api/ REST? https://dev-coco.tistory.com/97

강제로 접해서 눈물나게 만든 지식들

1. CMS (Content Management System)

*CMS란? WordPress, Wix처럼 전문 기술 없는 유저가 쉽게 디지털 컨텐츠를 구축, 생성, 관리할 수 있는 서비스. Traditional CMS - 마케터에게 친숙, 프론트엔드 요소 Headless CMS - 개발자에게 친숙, API기반, 디바이스 제한이 없음 (HEAD = PC-모바일-워치 등) Serverless CMS - 두 가지 결합 https://www.techmagic.co/blog/headless-vs-serverless-cms/ SSG에서 여기까지 왔다. 웹빌더, SI, 요즘 트렌드인 노코드와도 관련이 있어보인다. 그만 알아보자.

2. SPA vs MPA

1) SPA (Single Page Application)

• 활용 : 대체로 역동적이고 섬세한 웹 어플리케이션 ex) 구글맵
• 방식 : 브라우저에서 자바스크립트를 이용하여 단일 웹페이지에 동적으로 생성
• 클라이언트 측에서 비동기로 처리, AJAX(비동기)
• 대표 : React
• 장점 👍 : UX (깜빡거림 없음), 한 번 요청하여 캐시로
• 단점 👎 : 자바스크립트 의존, 클라이언트 코드 양이 많아 로딩 느림, 웹크롤링 제한, 보안 이슈

2) MPA (Multiple Page Application)

• SSR 방식

3. CSR vs SSR vs SSG

1) CSR (Client Side Rendering)

= SPA

2) SSR (Server-Side Rendering)

• 활용 : 전자상거래 플랫폼, SNS 서비스
• 핵심 : 서버측에서 렌더링
• 방식 : 클라이언트 요청이 들어올 때마다 실시간으로 웹을 만들어냄
• 데이터 즉시 반영, 유저마다 다른 경험
• 대표 : Next.js
• 장점 👍 : 초기 렌더링 빠름, SEO 크롤링 적합
• 단점 👎 : 페이지마다 새로고침, 트래픽, 서버 부하

3) SSG (Static Site Generator)

• 활용 : 제품 카탈로그, 개인 블로그 등 컨텐츠의 변경이 없는 소규모 웹
• 방식 : 서버가 웹사이트 전체를 만들어놓고
• 대표 : Gatsby
• 장점 👍 : 속도가 빠르다, SEO 크롤링에 적합
• 단점 👎 : 큰 프로젝트 빌드에 비효율

+ 여러 방식을 보완한 하이브리드 방식 : Universal Rendering, ISR (Incremental Static Regeneration)

*참고 :

• https://velog.io/@goodenough/Web-Development-CSRSSR-%EC%9D%B4%EB%9E%80-feat.-SPAMPA
• https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

4. 객체지향 vs 함수형

명령형 - HOW 절차지향, 객체지향 선언형 - WHAT 함수형

*이미지 출처 : 얄팍한 코딩사전 https://www.youtube.com/watch?v=KDiE5qQ3bZI

1) 절차지향 Procedural

• 대표 : C언어
• 특징 : 사람의 사고방식과 유사, 서비스 플로우 관점
• 👍 컴퓨터의 처리구조와 유사해 실행속도가 빠르다.
• 👎 유지보수, 디버깅 어려움

2) 객체지향 OOP Object-oriented Programming

• 대표 : C++, JAVA, Python, React(클래스형)
• 특징 : 추상화, 캡슐화, 상속, 다형성
• 👍 코드 재활용, 디버깅 쉬움
• 👎 느림, 설계 어려움

*절차지향과 객체지향은 반대되는 개념이 아니다.

3) 함수형 FP Functional Programming

• 대표 : React(함수형)
• 👍 방대한 데이터를 빠르게 병렬적으로 처리
• AI, IoT, 빅데이터, 비트코인 등이 뜨면서 주목
• 특징 : 순수함수, 비상태, 불변성, 일급함수 First-class, 고차함수 Higher-order function, Only Expression
  • Expression -
  • Statement - if, switch, for...
• 데이터 변경없이 map reduce등 복사본 함수 사용

4) 함수형 반응형 FRP

• 대표 : ReactiveX 라이브러리
• 시간의 흐름, 사용자의 동작, 네트워크 요청의 결과까지 흐름으로 만들어서 파이프라인 처리
• 거의 다른 차원의 이야기라서 유튜브로 설명 대체... 얄팍한 코딩사전 - https://www.youtube.com/watch?v=KDiE5qQ3bZI

*참고 : 선언형, 명령형 프로그래밍 https://velog.io/@blackb0x/%EC%84%A0%EC%96%B8%ED%98%95-%EB%AA%85%EB%A0%B9%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D 함수형프로그래밍이 대세다?! (함수형 vs 객체지향) - 드림코딩 https://www.youtube.com/watch?v=4ezXhCuT2mw 리액트 함수형 vs 클래스형 https://devowen.com/298

기타 참고

*로드맵 - 프론트엔드 & 백엔드

https://roadmap.sh/frontend https://roadmap.sh/backend 이미지로는 많이 봤는데 하나하나 항목별로 클릭할 수 있는 하이퍼링크가 있는 웹사이트 인건 처음 알았다. 누르면 어디서 무엇을 공부하라고 링크가 걸려있다. 일종의 목차같은 하지만 못생기고 복잡해서 싫다. 더 어렵게 느껴지는듯 😿.

소감

어째 모르는 키워들 찾아서보다가 배보다 배꼽이 더 큰 글이 되었다. 시간도.. 가볍게 유튜브 본 거 정리하려다가 거의 강의 정리한 것보다 더 많이 들었네. 로드맵을 정리하면서 좋았던 것이 이름만 들어봤던 것들, 어디에 붙어있는지 몰랐던 것들을 자리정리를 해서 머리가 맑아진 느낌이다. 막막했던 것들도 걷히고 생각보다 웹 개발에 전반적인 경험과 지식이 있다는 자신감도 생겼다.

앞으로 나에게 필요한 것은 이 세 가지가 아닐까.

1. 실전의 경험 2. 습관화 3. 고급 기술로 레벨업

벨로퍼트와 함께하는 모던 리액트 · GitBook

2장. 리액트 컴포넌트 스타일링하기 2-2. CSS Module https://react.vlpt.us/styling/02-css-module.html

CSS module이란?

컴포넌트 별로 CSS를 적용해주어 다른 컴포넌트의 동일 이름과 충돌되지 않도록 해주는 방식 (아래의 이미지처럼 별도의 key값을 알아서 붙여줌)

• 기존 커다란 프로젝트가 있을 때 네이밍 규칙을 고민하지 않아도 되기 때문에 매우 유용함

사용 방법

프로젝트 생성

npx create-react-app 이름 // ** 별도의 설치가 필요 없음*

파일 이름 규칙

1) 파일을 만들 때 파일명을 .module.css 또는 .module.scss로 끝내면 된다. 2) 불러올 때 import styles from “./파일명.module.css”; 로 불러오면 끝

리액트 아이콘 사용

설치 : yarn add react-icons 링크 : https://react-icons.github.io/react-icons/

• 사이트에서 각 아이콘 불러오는 법이 나와 있음

아래와 같이 컴포넌트식으로 불러와 사용 가능

import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md';

 <div><MdCheckBox/></div>

글로벌/로컬 사용 법

모듈 사용 시 글로벌화

/* sample.module.css */
:global .name {
}

/* sample.module.scss */
:global {
.name { }
}

모듈을 사용하지 않았을 때 로컬화

/* sample.css */
:local .name {
}

/* sample.scss */
:local {
.name { }
}

classnames의 활용 bind

설치 : yarn add classnames

백틱을 이용해서 아래와 같이 적어야하는 것을 classnames의 bind를 사용하면 줄여서 쓸 수 있다

`$(styles.checkbox) $(styles.noname)`

import classNames from ‘classnames/bind’; const cx = classNames.bind(styles); cx('checkbox', 'noname')

코드

CheckBox.js

import React from 'react';
import styles from './CheckBox.module.css'; // (1) 모듈
import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md'; // (2) 아이콘 불러오기
import classNames from 'classnames/bind'; // (3) 바인드 불러오기

const cx = classNames.bind(styles); // (3) 바인드 활용

function CheckBox({checked, children, ...rest}) {
    return (
        <div className={cx('checkbox', 'noname')}> // (3) 바인드 활용
            <label>
                <input type="checkbox" checked={checked} {...rest}/>
                <div className={styles.icon}>{checked ? <MdCheckBox className={styles.checked}/> : <MdCheckBoxOutlineBlank/>}</div> // (2) 아이콘 불러오기
            </label>
            <span>{children}</span>
        </div>
    );
}

export default CheckBox;

App.js

import CheckBox from "./components/CheckBox";
import React, { useState } from 'react';

function App() {
  const [check, setCheck] = useState(false);
  const onChange = (e) => {
    setCheck(e.target.checked);
  }
  return (
    <div className="App">
      <CheckBox onChange={onChange} checked={check}> 다음 약관에 모두 동의 </CheckBox>
    </div>
  );
}

export default App;

팁 메모

netlify 네트리파이 https://www.netlify.com/

• 정적 사이트 배포 / 호스팅
• 개인 사이트 목적이면 무료, 커스텀 도메인 설정 가능, 깃허브와 연결해서 저장소에 바로 푸시 빌드, 보안도 쉽게 해결
• 정보 : https://blog.outsider.ne.kr/1417

벨로그에서 백틱 하나만 쓰면 코드 뭉치 표시가능

ex) 벨로그 // 참고로 맥에서 백틱 입력은 option+₩ 노션에서도 되었던 것 같은데 까먹고 있었다.

소감

강의 내용이 아주 유용했다. 강의를 듣는 건 굉장히 빠른데 다시 정리해서 쓰는데 생각보다 걸린다. 그 이유는 다시 정확하게 쓰려고 찾게 되다보니.. 하지만 내 것으로 만드는 것이기도 하고 정확하게 알려는 습관이 드는 것이라 생각하고 꾸준히 하리라

패스트캠퍼스 React.js 올인원 패키지 Online 벨로퍼트's 컴포넌트 스타일링 Sass 버튼

SASS란?

Syntactically awesome stylesheets 문법적으로 멋진 스타일시트 *가이드라인 : https://Sass-Guidelin.es/ko/

SASS vs SCSS

SASS : 중괄호, 세미콜론 사용하지 않음 SCSS : CSS문법과 유사 *두 문법의 차이 예제 : https://sass-lang.com/guide

개발환경 세팅

1. npx create-react-app 이름

*npx : 로컬에 패키지 남기지 않고, 최신버전 유지하는 방식 *참고 : https://velog.io/@kimkyeseung/%EB%B2%88%EC%97%AD-%EA%B7%B8%EB%9E%98-npx-npm%EB%A7%90%EA%B3%A0-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%84%A4%EB%AA%85

2. VS에서 Code라는 명령어 사용해서 새 프로젝트 열기

*참고 : https://jsikim1.tistory.com/194

• F1키 눌러서, install code 입력, ‘code’라는 command in PATH 설치
• code ./이름

3. yarn add node-sass sass설치

4. yarn add classnames classnames라는 라이브러리 설치

CSS 셀렉터

* - all
. - class
# - id
, - and

div > p - 자식
div p - 자손
div+div - 인접한 형제 선택
div ~ p - 다음의 모든 형제 선택

예시

<h1> </h1>
<p> </p> // ①
<p> </p> // ②
<p> </p> // ③

h1+p : ① p+p : ②,③ h1 ~ p : ①,②,③

selector 종류와 사용법 *참고 : https://webty.tistory.com/60

@extend, @mixin 사용

반복하는 css 코드를 변수처럼 가져와 사용할 수 있음

1. $변수
2. @extend 이름 // 그대로 불러오기
3. @mixin 이름($인자: 디폴드값) { }

-> @include 이름(인자값)

예시

$blue: #228be6;
$pink: #f06595;

@mixin button-color($color){
        background: $color;
        &:hover{
            background: lighten($color, 10%);
        }
        &:active {
            background: darken($color, 10%);
        }
}

.Button {
    &.blue {
        @include button-color($blue)
    }

    &.pink {
        @include button-color($pink)
    }

    & + & {
        margin-left: 1rem;
    }
}

버튼 생성 컴포넌트

import React from 'react';
import classNames from 'classnames'; // 1
import './Button.scss';

function Button({ children, size, color, outline, fullWidth, className, ...rest }) {
    return (
        <button 
            className={classNames( // 1
                'Button', // 1-①
                size, // 1-②
                color, 
                {
                    outline, // 1-③
                    fullWidth
                }, 
                className // 2-①
            )}
            {...rest} // 2-②
        > 
            {children} 
        </button>
    );
}

Button.defaultProps = { // 3
    size: 'medium',
    color: 'blue'
}

export default Button;

  <div className="buttons">
    <Button className="customized-button"> Text </Button>
    <Button fullWidth outline={true} color="pink" size="small"> Text </Button>
    <Button onClick={() => console.log('클릭')} onMouseMove={() => console.log('움직임')}> Text </Button>
  </div>

1. classNames 라이브러리를 활용 ① 최상위 엘리먼트 클래스이름 = 컴포넌트 이름 'Button' (클래스가 겹치지 않도록 정리하는 것) ② string 파라미터 'size, color' ③ boolen은 객체로 'outline, fullWidth'

2. 재사용성 높이기 ① 스프레드 연산자를 활용한 …rest props 전달하기 onClick, onMouseMove 등의 추가적인 키워드를 한 번에 받아옴 ② className을 추가로 받아서 커스텀 클래스에 대비하여 스타일링

3. defaultProps 분리 (리덕스 개발자도구에서 볼 수 있도록)

*참고 : 스프레드 연산자 (three dots) https://dinn.github.io/javascript/js-dotdotdot/

defaultProps 분리 및 다른 방법 코드 비교

1. defaultProps 분리 가장 이상적인 방법

function Button({ children, size }) {
   return (
       <button className={classNames('Button', size)}> {children} </button>
   );
}

Button.defaultProps = {
   size: 'medium'
}

2. 매개변수 기본값

   function Button({ children, size = 'medium'}) {
   return (
       <button className={classNames('Button', size)}> {children} </button>
   );
   }

3. OR 연산자

function Button({ children, size = 'medium'}) { return ( <button className={classNames('Button', size || 'medium')}> {children} );

## 팁 메모
반복되는 키워드 일괄 수정 : 블록처리 한 다음 **[cmd+d]** 를 누를 때마다 다음 키워드를 추가로 잡음

https://flexboxfroggy.com Flexbox Froggy는 웹에서 간단하게 CSS의 FLEX개념을 배울 수 있는 웹 게임이다. CSS에서 flex는 막상 쓸 상황에는 조급해지고 쓸 때마다 마음대로 되지 않아서 짜증나는 개념이었는데 24개의 문제를 풀며 순차적으로 익히다보니 편하고 재미있었다. 강의 중간에 소개를 받아서 잠시 한 눈을 팔았다. 들어야 할 강의는 안듣고...

아래의 CSS 속성들을 배울 수 있다.

• justify-content
• align-items
• flex-direction
• order
• align-self
• flex-wrap
• flex-flow
• align-content

마지막 문제 풀이

개구리 친구들과 헤어지는 것이 아쉬워서 기록했다.

ㅤ ㅤ ㅤ

GRID GARDEN

시리즈로 CSS grid를 배우는 GRID GARDEN도 있다. 나중에 풀어봐야겠다. https://cssgridgarden.com/

Vue는 가장 강력한 React와 비교해서 활용도와 관심도면에서 나름 비벼볼만한 프론트엔드 프레임워크이다. (물론 그래프만 봐도 알 수 있듯이 새롭게 떠오르는 Svelte를 더 주목해야 하는 상황)

리액트 VS 뷰 (장단점 비교)

아래의 두 글에도 정리되어 있는 것처럼 일반적으로 Vue는 React에 비해 소규모로 덜 능숙한 개발자가 참여하는 프로젝트에 좋을 것이라는 평이 있다.

• 출처 :
• https://velog.io/@leehaeun0/React-vs-Vue-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%B9%84%EA%B5%90
• https://ahnheejong.name/articles/why-i-prefer-react-over-vuejs/

강의 내용

• 패스트캠퍼스 React.js 올인원 패키지 Online

• 더 나은 사용자 경험을 위한 UI 컴포넌트 제작
• Form, Toast, ProgressBar 구현

*아래의 메모 내용은 대부분 위 강의를 기반으로 한 내용임을 미리 밝힙니다.

1. 개발환경 세팅

Vue-CLI : vue 개발 환경을 설정해주는 도구

• 설치 : npm install -g @vue/cli
• 생성 : vue create (이름) → 생성할 프로젝트 환경 선택
• 이동 : cd (이름)
• 실행 : npm run serve

VS code extensions

• Vetur : VS Code에서 뷰 지원
  • Vue VSCode Snippets : 일부 안되는 현상이 있어서 추가로 설치

2. 뷰 특징

1. 컴포넌트 기반 개발 방식

• 화면을 여러 개의 작은 단위로 쪼개어 개발
• 재사용성, 구현속도, 코드가독성 높음

2. MVVM패턴

• 화면 UI코드와 백엔드 데이터 처리 코드를 분리함
• 리액트와 앵귤러의 장점을 흡수

3. 뷰 CDN

Vue CDN : https://v2.vuejs.org/v2/guide/

1. development ver → 개발자도구 vue탭에서 확인 가능

   <!-- development version, includes helpful console warnings -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2. production ver → 배포용으로 개발자도구에서 볼 수 없음

   <!-- production version, optimized for size and speed -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

   4. Vue 실습

   Vue 데이터

• props: [] // (변수) 템플릿에서 활용되는 키워드들, 부모에서 자식으로 내려감
• data() { }// (변수) 리턴해서 활용

  Vue 컴포넌트 요소

• el: // element의 약자, html DOM요소 의미
• template: `` // 마크업 뷰 템플릿 인스턴스
• components: {} // template와 script에서 import한 요소들

  Vue API

• methods: {} // 호출에만 실행
• computed: {} // 데이터 값이 바뀔 때마다 실행, 선언형
• watch: {} // (비동기식) 명령형

  Vue Directives 디렉티브

  v-접두사가 가지는 속성
  • v-if : if문
  • v-bind : 데이터 속성과 html 연결
  • v-on : 화면 요소의 이벤트 감지
  • v-model : 인스턴스 데이터와 동기화 (부모-자식 양방향)

    이벤트 전달

    this.$emit : 부모로 이벤트 전달

활용

// Event.preventDefault() 활용하지 않고 .prevent로 바로 처리
<form v-on:submit.prevent="submitForm()">

스니펫

vim → import New from '@/components/New.vue'; vda →

data() {
  return {
    key: value
  }
},

vue → vue 구조 자동완성

<template> </template>

<script>
export default { }
</script>

<style> </style>

5. 메모 : 기타 알게 된 내용

스니펫 snippet : 사용자의 루틴화를 도와주는, 반복을 줄여주는 것, 자동완성이나 단축키 등

• Code > Preferences > User snippets
• javascript react

에밋 Emmet : HTML, CSS의 작성 시간을 줄이는 자동완성 기능

• !만 쳐도 html 구조가 바로 생성된다
• [HTML]Emmet 사용법 : https://nachwon.github.io/How_to_use_emmet/
• Emmet 예시 : https://jeonghakhur.gitbooks.io/sublime-text3/content/package-emmet.html

nvm (Node Version Manager): Node.js 버전 매니저

CLI : Command line interface

바벨 Babel : js개발환경에 구애받지 않도록 하는 컴파일 또는 프랜스파일러 ex) ES6 문법으로 작성한 것을 ES5로

웹팩 webpack : 웹 복잡성에 대응하는 모듈화 방식

• node.js 환경 필요
• export, module, loader 등의 키워드를 활용하고 package.json 사용
• 웹팩 핸드북 : https://joshua1988.github.io/webpack-guide/

Reset css : 브라우저마다 기본 스타일이 달라서 정리하는 세팅 코드 https://abcdqbbq.tistory.com/9

Vue를 접한 소감

React 강의 마지막에 짤막한 Vue 수업이 있어서 비교할 겸 듣게 되었다. 전반적인 소감은 굉장히 간단하고 쉽다는 것이다. template - script - style으로 이루어진 구조가 한 눈에 보기 편했다. 정리하려고 다시 찾아보니 생각보다 복잡했다

오랜만에 공부한 소감

구글 독스에 혼자서만 노트용으로 대충 작성하다가 처음으로 외부에 공유하려니 생각보다 부담스럽다. 너무 쉬운 개념도 몰라서 부끄러운 부분도 있었는데 나만 그런 것은 아니리라.. 지금이 중요한 것이 아니라 성장이 중요한 것이다!

밀러의 약은 살짝 들러붙는 정도가 아니었다. 그의 약은 피라나였다. 엉뚱한 단백질에 들러붙는다면 치명적일 수 있었다. 수많은 이들이 겨우 몇 달밖에 남지 않은 시한부 인생을 산다. 이런 맥락을 고려한다면 피라냐의 위험성을 정당화할 수 있었다. ㅤ 몇 달 뒤 밀러의 회사 파머사이클릭스는 이 약의 아이디어를 조롱했던 어느 대형 제약회사에 인수되었다. 인수 가격은 210억 달러였다. -20p

노키아의 몰락

1970년대에 노키아는 주로 화장지로 유명한 대기업이었다. 이후 20년간 노키아는 최초 카폰, 무선전화 시장을 개척했다. 2000년대 초반까지 노키아는 지구상 스마트폰의 절반을 팔아 치우며 유럽에서 가장 가치 있는 기업이 됐다. 노키아의 CEO는 조직 문화가 성공의 핵심 열쇠라고 설명했다. "좀 재미나게 일해도 되고, 정도에서 벗어나는 생각을 해도 되고... 실수를 해도 되는 거죠." ㅤ 2004년 신이 난 노키아의 엔지니어 몇몇이 완전히 새로운 종류의 전화기를 만들었다. 인터넷이 가능하고 커다란 컬러 터치스크린에 고해상도 카메라가 달린 전화기었다. 엔지니어들은 이 전화기에 어울리는 미친 아이디어를 하나 더 제안했다. 바로 '온라인 앱스토어'를 만들자는 것이었다. 기업의 지도부는 두 가지 아이디어를 모두 깔끔히 묻어버렸다. ㅤ 3년 뒤 엔지니어들은 자신들의 미친 아이디어가 샌프란시스코를 무대로 구체화되는 것을 목격했다. 애플의 스티브 잡스가 아이폰을 공개한 것이다. 2013년 노키아는 모바일 사업 부문을 매각했다. -27p

창의성이 중요한 모든 분야에서 우리는 전설의 팀들이 어느 날 갑자기 묘하게 변질되는 것을 본다. -28p

레이더 시스템

1922년 해군항공기지에서 아마추어 무선통신 애호가 두 명이 고주파 전파를 이용해 해상에서 배들이 통신할 수 있는 방법을 실험하다가 전파 간섭을 경험한다. 통신 장비를 테스트하다가 우연히 '탐지 장비'를 발견한 것이다. 안개나 어둠, 연막에 관계없이 탐지할 수 있다고 해군에 제안했으나 해군은 이 제안을 무시한다. 그러다 둘은 30년대에 활주로에서 일을 돕다가 비슷한 현상을 경험하고 적군 항공기에 대비한 조기 경보 시스템을 제안하였으나, 이 역시도 자금 지원 요청을 무시당하게 된다.

행운은 설계의 흔적이다 -75p

룬샷 VS 프렌차이즈

룬샷과 프렌차이즈는 저자가 구분한 두 가지 조직 타입이다. 룬샷 ↔ 프렌차이즈 예술가 ↔ 병사 발명가 ↔ 운영자

제목과 처음 도입부만 읽는다면 룬샷에 집중해야할 것처럼 느끼지만 저자는 한 조직만을 편애해서는 안된다고 말한다. 한 쪽을 추구하다보면 양쪽의 그룹 사이에서 적대감이 형성되거나 소통하지 않게 되기 때문이다. 룬샷만을 추구하다보면 잡스가 쫓겨날 당시의 애플처럼 시장에서 상업적으로 완전히 실패할 수 있다.

포스트잇과 스카치테이프를 발명했던 3M이 2000년대에 식스시그마의 열혈 전도사를 새 CEO로 들이자, 혁신은 곤두박질쳤다. 이런 상황은 그 사람이 떠나고 새로 부임한 CEO가 옛 시스템을 복원한 후에도 한참이 지나서야 회복 될 수 있었다. 새로 부임한 CEO는 효율주의 시스템을 실수라고 설명했다. "할당된 발명 개수를 채우지 못했으니 수요일에 좋은 아이디어 세 개, 금요일에 좋은 아이디어 두 개를 생각해내야겠어...라고 할 수는 없는 노릇이죠. - 82p

버니바 부시는 스스로도 뛰어난 발명가이자 엔지니어였으나 룬샷의 세부 사항에 대해서는 일절 관여하지 않는다는 원칙을 칼같이 지켰다. "내가 갖고 있는 아이디어를 구현한 적은 한 번도 없었다." 베일 역시 기술프로그램의 상세한 부분에는 관여하지 않았다. 본인들의 할 일은 룬샷과 프랜차이즈 사이의 균형과 소통을 관리하는 것이라고 생각했다. -85p

정신 · 사람 · 시간

정신 : 우리가 계속 움직일 수 있게 하는 목적, 이유 사람 : 가장 등한시하기 쉬운 것, 가장 중요한 것. 시간 : 생각 없이 채워나가게 되는, 그러나 가장 귀중한 자원.

앞부분은 어느 정도 읽었던 내용들인데도, 오랜만에 독서하는 데 이렇게 재미를 느낀 적이 있었나? 중간에 잡생각과 혼란이 있었지만, 회사 상황과도 비슷해서 아주 아주 많이 몰입되었다. 이제 규칙적으로 독서 시간을 정해서 남은 부분을 읽을 예정

나는 변화를 좋아한다. 탈바꿈하는 것. 지인이든 연예인이든 새롭게 확 변환 모습으로 등장했을 때를 참 좋아한다. 항상 똑같은 모습으로 있는 건 지루하고 뻔하게 느껴진다.

사실 사람은 크게 달라지지 않기 때문에 더더욱 내 스스로가 임의로 변화점을 정하고 변했다고 느끼려고 하는 것 같다. 바로 지금 순간이 또 하나의 전환점이 되는 시기인데, 그에 맞추어서 내 삶을 새롭게 개편하려고 한다.

습관화한다는 것, 삶의 일부가 된다는 것

그 방법의 하나로 [독서]를 습관화하는 것인데, '습관화'라고하는 것은 어떤 의지의 차원이라기보다 앞으로의 삶에서 나의 일부로 가져가겠다는 '인정'의 개념에 더 가까울 것이다.

그런 측면에서 내가 해냈던 것이 바로 [운동]과 [개발]이다. 이 분야에서 높은 위치에 올라가 있는 사람들이 보기에는 아주 귀여운 수준이겠지만, 습관화에서 성공한 것들로 [독서]를 성공시키려는 상황에서도 근거있는 자신감을 주고 있기도 하다. 이런 식으로 또 한 가지를 습관화한다면 다음 번에 무언가를 가져가려고 할 때도 자신감을 줄 것이라 생각한다. 억지로 어떤 기록이나 활동을 하는 것이 중요한 것이 아니라, 내 스스로 이것들이 나의 삶의 일부분이고 앞으로도 멀어질 일 없는 요소라고 생각하는 태도가 자리잡는 것이 중요하다고 생각한다. 독서는 이제 막 시작이다.

독서를 하려는 이유 : 나를 달라지게 하기

1) 어떤 정보를 취함에 있어서 너무나 단편적으로 즉흥적으로만 하고 있다는 생각이 들어서이다. 인터넷 커뮤니티, 기사, 주변 지인들의 이야기 등 자극적이고 가십거리인 이야기들로만 머리를 채우고 있기 때문이다. 계속 성장하면서 살아가야겠다는 것이 삶의 모토인데, 나의 뇌와 나의 사고는 어느 순간 멈춰가고 있는 것처럼 느껴졌다.

2) 생활 속에서 비어있는 부분들을 쓸데없는 행위들로 채우고 있었다. <게임 + 커뮤니티 + 예능 + 불필요한 컨텐츠> 이런 것들로 시간을 채우고 있었기 때문에 어느 정도는 편하고 재미있게 느껴졌겠지만, 한편으로는 점점 스트레스를 받고 있었다. 나의 생활이 너무 엉망으로 느껴졌기 때문이다.

그리고 그 툴로써 블로그에 독서 기록을 남겨보려고 한다. 짧아도 습관화. 화이팅.