slack 실시간 채팅 (1)
https://thebook.io/080229/ch07/02/
Node.js 교과서 개정 2판: 7.2 MySQL 설치하기
thebook.io
https://asummerz.tistory.com/m/38
[MySQL] MySQL Installer 포트번호 설정 시 오류 the specified port already in use
얼마 전 웹&모바일 페이지 프로젝트를 진행하면서 서버는 MySQL로 진행했는데 테스트 단계에서 MySQL을 재설치하며 오류가 발생했었다. 초기 설정 시에는 나타나지 않았던 오류가 재설치를 하면서
asummerz.tistory.com
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
공부시간 측정 어플리케이션
Teachable Machine https://teachablemachine.withgoogle.com/ Teachable Machine Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for yo..
ehddud100677.tistory.com
예전에 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
-D 쓰는 이유
제로초님 강의 보면서 핫 리로딩 부분 세팅중인데 -D 라는 명령어를 왜 사용하는지 궁금해졌다.
그 이유는 -D 명령어를 쓰면 dev dependency 에 추가 되는데 이는 npm ci에 반영되지 않는다.
왜 그런가 하면 핫리로딩은 개발할때만 사용하기때문에 나중에 배포시 npm ci로 설치할 이유가 없기때문이다.
TypeScript란
간단하게 설명하면,
변수 , 함수의 매개변수, 함수의 리턴값 에 Type을 붙히는 것이다.
CodeSplitting
https://medium.com/greendatakr/loadable-components-881e936aa8fa
Loadable Components
Code Spliting이란?
medium.com
Code Spliting이란?
싱글페이지 어플리케이션에서 번들 사이즈가 커지면 로딩속도나 성능면에서 문제가 생길 수 있다. 코드 스플리팅은 이것들을 여러개의 번들로 나누거나 동적으로 import 하는 기법을 말한다.
Loadable Components 란?
React가 자체적으로 제공하는 React.lazy나 React.suspense도 있지만 SSR까지 커버 가능하고 사용방법이 거의 동일한 Ladable Components를 페이스북에서도 추천하고 있다.
페이지 단위로 코드 스플리팅 하는 것을 추천한다고 한다.
React에서 Css 적용하는 방법
1. 인라인
2. import css 파일
3. Styled, 이모션
내가배우는 강좌에서는 emotion을 사용한다. 처음 배운다.
잘못 깔았다.
emotion은 styled 컴포넌트와 비슷하다. 미리 사용하려는 컴포넌트에 미리 css를 입혀놓는것이다.
라벨 태그 하위의 자식 span을 뜻한다.
또한 Label 태그를 따른 태그의 자식으로 넣을 수 도 있다.
Label이 Form에 하위 태그이면 css가 적용이 된다.
위 기능을 사용하기 위해서는 해당 모듈을 설치해야한다.
useCallback에서 외부 state를 사용하면 deps를 꼭 명시해줘야한다!
useCallback은 함수를 기억해서 불필요한 재생성을 하지 않게 해주고, useMemo는 복잡한 함수내의 값을 기억해준다.