오늘의 도전과 배움
- 프론트 스터디 과제 1주차 - 리액트 환경설정 및 github 커밋 과제 완료!
; 멘토님이 도와주셔서 마지막에 해매다가 빠르게 완료했다!
오늘의 배움
1.react dependencies와 devdependencies의 차이
짜장면에 비유를 해보자(멘토님 설명)
dependencies는 손님에게 드릴 짜장과 국수 같은 재료 를 말하고
devdependencies는 짜장을 만드는데 필요한 가스와 웍 칼 등 도구
(손님에게 드리지는 않지만 짜장면을 만들때 필요한 도구를 의미한다.)
짜장면을 만들기 위해 재료와 도구 둘 다 필요하지만
웹 동작에는 dependencies만 줄거라 둘을 구분해놓는다.
그래서 어떤 라이브러리가 어디에 속하는지 보면서 생각해보면 좋다.
react는 왜 dependencies일까?
babel은 왜 dev일까?
typescript는 왜 dev일까?
(정답 -> typescript는 빌드할 때 타입이 다 사라지고 js로 다시 변환되기때문)
결국 -> 소속된 라이브러리에 따라 구분된다.
이해하기 위해 추가적으로 봤던 링크
https://discord.com/channels/905448761218699295/905448761218699298/907260648004649011
dependencies 에는 애플리케이션 동작과 연관된,
devDependencies 에는 애플리케이션 동작과 직접적인 연관은 없지만, 이름 그대로 개발할 때 필요한 라이브러리를 설치하시면 됩니다.
이렇게 구분해주는 이유는 결국 배포할 때 어떤 라이브러리가 포함되냐 일거에용
dependencies 에 설치된 라이브러리는 배포할 때 포함되지만
devDependencies 에 설치된 라이브러리는 개발할 때 필요한 라이브러리기 때문에 배포할 때 포함되지는 않습니당
이렇게 잘 구분을 해서 설치해줘야 빌드시간도 줄이고, 배포할 때 불필요한 라이브러리를 포함시키지 않아도 될거에용
2.package.json이란?
3.package.json과 package-lock.json의 차이
react를 설치하기 위해 필요한 패키지들?을 웹에서 하나하나 받는 게 아니라, npm을 이용해 install하면 npm이 열심히 파일 트리를 찾아서 필요한 파일들을 웹에서 싹 찾아 다운을 받는다.
이 때 내가 (사용자) 설치하려는 파일을 작성하는 구역은 package.json이고
npm이 열심히 그 파일들을 뿌리부터 찾아 다운받고 정리해두는 구역이 package-lock.json이다.
4. .gitignore은 왜 쓰는걸까?
.gitignore을 쓰는 이유는 git에 commit을 할 때마다 매번 모든 라이브러리를 commit,push하게되면 업로딩 시간이 너무 길어지기 때문!
이번 react repository에서는 .gitignore에 node_modules를 작성했는데
node_modules는 내가 이것 저것 새로 설치할 때마다 계속 업데이트가 되기 때문에
업데이트 된 node_modules은 git에서 계속 새로운 것으로 체크하고 commit하려고 한다.
하지만 매번 이렇게 commit을 하게 되면,
git에 내가 새로쓴 코드만 commit 하는 시간 < 업데이트된 node_modules까지 commit 하는 시간
후자가 엄청 더 오래 걸릴 것이므로 .gitignore에 node_modules를 넣고
node_modules는 올리지 않는 것이다!
그럼 node_modules는 어디서 불러오나?
git에 저장하지는 않았지만
다른 사람은 Git clone으로 내 react 프로젝트를 복사하면 그 안에 package.json이 있으니까
터미널에 npm install 명령어를 입력하면 내 프로젝트의 package.json에 있는 라이브러리 목록과 버전을 그대로 받아준다.!
궁금한 점, 어려웠던 점
- 멘토님이 주신 여러개의 단어~개념들을 아직 다 소화하지 못했다.
- 오늘배운 dependency와 devDependency의 차이도
소속 라이브러리에 따라 구분된다는 점이 아직 정확히 이해가 안간다.-리액트는 자바스크립트 라이브러리! 바벨이랑 타입스크립트는 컴파일러!
node modules에 있는 게 모두 라이브러리고 패키지인데
개발할 때 쓰는 라이브러리, 프로그램은 데브 디펜던시,
리액트나 리액트 돔이나 axios ky 같은 건 그냥 디펜던시인 라이브러리고 패키지고
번들에 들어간다~ - yarn을 설치를 두번 했더니 yarn version도 확인이 안되고 다른 환경설정도 꼬여
node도 version 확인이 안된다! 권한 문제라고 하는데 이걸 어떻게 해결해야할지?
uninstall도 해보고 권한도 부여해봤는데 안돼서 다른 방향으로 또 해결해봐야한다 아자아자
내일 해보고 싶은 점, 방향
- yarn 설치 해결!
- 번들이란 무엇인가? 이해해보기
- todolist 3단계부터 연습
- tcpschool javascript 파트 읽어보기
