slack 실시간 채팅 (1)

https://thebook.io/080229/ch07/02/

Node.js 교과서 개정 2판: 7.2 MySQL 설치하기

https://asummerz.tistory.com/m/38

[MySQL] MySQL Installer 포트번호 설정 시 오류 the specified port already in use

 

 

npx sequelize db:create

 

아 순서의 문제 였네요 npx sequelize db:create 하고 npm run dev 를 해준다음에 npx sequelize

db:seed:all 해줘야 되는 거였네요 테이블을 만들어 주는게 npm run dev 라고 설명 해주셨엇네요... 아오

 

 

데이터베이스(database) -> 테이블(table) -> 로우(row)

 

 

Package.json , Package-lock.json

노드모듈을 설치하면 depedencies를 볼 수 있다. 이러한 dependecies는 Package.json에 저장이 된다. 

그런데 설치된 모듈을 보면 Package.json에는 5개 밖에 없지만 그 이상인 것을 확인 할 수 있다. 그 이유는, react는 자신이 따로 의존하는 모듈이 있고, react-dom도 마찬가지이다.

 

그러면 react와 react-dom이 모두 A를 의존할때, 두개의 버전이 다르다면 어떻게 될까? 

 

그때, Package-lock.json을 참고한다. Package-lock.json은 버전이 딱 명시되어 있기때문에 오류를 줄일 수 있다.

https://ehddud100677.tistory.com/314

공부시간 측정 어플리케이션

예전에 npm i 와 npm ci를 공부하면서 두개의 차이를 알았지만, 한번더 상기 시킬 수 있어서 좋았다.

 

eslint 는 코드 검사 도구이다. 코드에서 안쓰고 있는 변수라던지, 오타를 잡아주는 도구이다.

 

prettier도 이런식으로 설치가 가능했구나.

 

두 파일 제로초 깃허브에 있는 내용 복붙하기!

 

2. 한줄에 120줄 정도 쓰겠다.

3. 탭 길이2칸 ,

4. 쌍따옴표 안쓰고 홑 따옴표 쓰겟다.

5. 항상콤마를 뒤에 붙히겠다.

6. 세미콜론은 항상 붙히겠다. 

 

웹팩 설명해주는데 뭐라는지 하나도 모르겠다..

 

우선 웹팩을 설치하자.

npm i -D webpack @babel/core babel-loader @babel/preset-env @babel/preset-react

 

 

typescript를 추가해준다.

npm i -D @types/webpack @types/node @babel/preset-typescript

 

 

npm i style-loader css-loader

 

위 파일을 생성

 

명령어가 너무 길때는

scripts를 활용하자. 이때 따옴표 앞에는 \를 붙여줘야된다.

 

 

리눅스와 윈도우 모두 돌아가게 하기 위해서는

cross-env를 설치해줘야한다.

 

 

 

• npm i -D ts-node webpack-dev-server @types/webpack-dev-server webpack-cli
• npm install -D react-refresh-webpack-plugin react-refresh

npm i @emotion/babel-plugin

 

Pakage.json 

"build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" NODE_ENV=production webpack",

바꿔주기

 

npm run build

 

 

Hot reloading 

npm i webpack-dev-server -D

-D 쓰는 이유 

제로초님 강의 보면서 핫 리로딩 부분 세팅중인데 -D 라는 명령어를 왜 사용하는지 궁금해졌다.

그 이유는 -D 명령어를 쓰면 dev dependency 에 추가 되는데 이는 npm ci에 반영되지 않는다.

왜 그런가 하면 핫리로딩은 개발할때만 사용하기때문에 나중에 배포시 npm ci로 설치할 이유가 없기때문이다.

 

 

npm i webpack-cli

 

npm i -D @types/webpack-dev-server

 

npm i @pmmmwh/react-refresh-webpack-plugin

 

 

npm i react-refresh

 

 

npm i fork-ts-checker-webpack-plugin

 

 

npm i --save-dev @types/webpack-bundle-analyzer

 

 

 

npm i react-router@5 react-router-dom@5

npm i -D @types/react-router @types/react-router-dom

 

TypeScript란

간단하게 설명하면,

변수 , 함수의 매개변수, 함수의 리턴값 에 Type을 붙히는 것이다.

 

 

 

 

 

CodeSplitting

https://medium.com/greendatakr/loadable-components-881e936aa8fa

Loadable Components

Code Spliting이란?

싱글페이지 어플리케이션에서 번들 사이즈가 커지면 로딩속도나 성능면에서 문제가 생길 수 있다. 코드 스플리팅은 이것들을 여러개의 번들로 나누거나 동적으로 import 하는 기법을 말한다.

Loadable Components 란?

React가 자체적으로 제공하는 React.lazy나 React.suspense도 있지만 SSR까지 커버 가능하고 사용방법이 거의 동일한 Ladable Components를 페이스북에서도 추천하고 있다.

npm i --save-dev @types/load able__component

 

페이지 단위로 코드 스플리팅 하는 것을 추천한다고 한다.

 

React에서 Css 적용하는 방법

1. 인라인 

2. import css 파일

3. Styled, 이모션

내가배우는 강좌에서는 emotion을 사용한다. 처음 배운다.

 

npm i @emotion/core @emotion/styled

잘못 깔았다.

 

npm i @emotion/react

 

emotion은 styled 컴포넌트와 비슷하다. 미리 사용하려는 컴포넌트에 미리 css를 입혀놓는것이다.

 

라벨 태그 하위의 자식 span을 뜻한다.

 

또한 Label 태그를 따른 태그의 자식으로 넣을 수 도 있다.

Label이 Form에 하위 태그이면 css가 적용이 된다.

 

 

npm i @emotion/babel-plugin

위 기능을 사용하기 위해서는 해당 모듈을 설치해야한다.

 

 

useCallback에서 외부 state를 사용하면 deps를 꼭 명시해줘야한다!

 

useCallback은 함수를 기억해서 불필요한 재생성을 하지 않게 해주고, useMemo는 복잡한 함수내의 값을 기억해준다.