0915
peerDependencies 속성
- peer란? 동료, 또래.
- peer review, peer to peer 다 여기서 온 것
- 그렇담 peer dependencies의 의미는?
나와 같은 레벨에서 반드시 같이 있어야 하는 패키지 속성
- 그래서 일반적인 사이트를 만들 때는 해당 속성이 사용되지 않고,
- 주로 내가 직접 패키지를 만들 때 peerDependencies 속성을 사용함.
- 왜?
- 그래야 패키지가 중복되지 않을테니까.
- 예를 들어 react를 활용한 컴포넌트 패키지를 만든다고 가정해보자.
- 근데 이 때 dependencies나 bundleDependencies0에 react를 명시하면, 내 패키지를 사용하는 사람이 기존에 깔아놨던 react랑 내 패키지에 깔려있는 react가 다 설치 되면서 react가 여러번 깔리게 됨.
- 이는 번들 크기도 늘리고, 버전 충돌의 위험성도 생길 수 있음.
- 결론적으로 일반 사이트 만들 땐 거의 dependencies랑 devDependencies 속성만 사용하고,
- 내가 직접 패키지를 만들면 bundleDependencies랑 peerDependencies 속성도 사용하는 것.
cjs(common js)와 esm(es module)
- cjs는 node.js 환경에서 사용되는 모듈 시스템. node.js는 기본적으로 서버사이드에서 동작하기 때문에, 파일 시스템에 있는 파일을 동기적으로 불러오는 방식이 자연스러움. 서버 환경에서는 파일이 모두 준비될 때까지 기다려도 사용자 경험에 큰 영향을 미치지 않기 때문.
- esm은 웹 브라우저 환경에서 사용되기 위해 고안된 모듈 시스템. 웹 환경은 네트워크를 통해 파일을 가져와야 하기에 동기적으로 파일을 불러오면 네트워크 지연 시간 동안 웹 페이지가 멈춰버리는 문제가 발생함. 그래서 비동기적 로딩 방식을 사용하는 것
- package.json에서 type을 module로 지정하면 .js 확장자명의 파일들이 기본적으로 esm을 기반으로 동작하고, type을 아무것도 지정하지 않거나 commonjs로 지정하면 cjs로 취급되어 동작함.
- cjs에서 모듈을 불러올 때는 require 함수를 사용하고, esm에서 모듈을 불러올 땐 import를 사용함.
- import를 사용하여 cjs 모듈을 불러올 수는 있어도, require로 esm 모듈을 불러오는 것은 불가능함.
- 왜?
- cjs는 런타임에 동적으로 로딩되지만
- esm은 컴파일 타임에 정적으로 분석되기 때문. (그래서 번들링이나 트리쉐이킹이 가능한 것)
참고자료
오늘의 오류 및 배운 것
route type 오류
- as route로 type 명시해주기
boolean type 변수명 짓기
- https://soojin.ro/blog/naming-boolean-variables
- is + 명사
- is + 현재진행형
- is + 동사원형 => 절대 쓰면 안됨!!!
- can + 동사원형
- should + 동사원형