인프런 커뮤니티 질문&답변
작성한 질문수
tailwind css 설치 위치
해결된 질문
작성
·
76
0
홈페이지에서 tailwind 4.1버전을 다운 받으니 packge.json의 devDependencies가 아닌 dependencies에 tailwind가 생기는데요. 강의 내용 중엔 devDependencies에 생겨서 구글링을 해보니 배포용과 개발용의 차이라고 하는데, 그렇다면 그 둘을 따로 관리하는 이유가 뭔가요?
제 생각엔 어차피 개발을 완료한 다음에 배포를 할 테니 별도로 관리할 필요가 있을까 싶어서요.
또 한쪽에서 설치한 프레임워크를 다른 쪽으로 옮기려면 그냥 해당 부분을 복사 붙여넣기 하면 되는 건가요?
답변 1
0
안녕하세요. 질문 남겨주셔서 감사합니다!
질문을 다시 정리해보면
1. devDependencies와 dependencies 차이
2. 프레임워크나 설정을 다른 쪽 프로젝트로 옮길 때 복붙하면 되는지
1번 질문에 대해 먼저 설명 드리기 전에 npm install명령어 옵션에 대해 먼저 설명 드리겠습니다.
npm install -D 아니면 npm install --save-dev 처럼 뒤에 해당 옵션이 붙는 경우에는 devDependencies에 넣으라는 뜻입니다.
반대로, 아무런 옵션 없이 npm install만 사용하게 되면 dependencies 로 설치가 될 것 입니다.
따라서 1-2 강의에서는 -D 옵션이 추가로 사용되었기에 devDependencies로 설치가 되었고 Tailwind CSS 4.1의 공식문서에는 아무런 옵션이 없었기 때문에 dependencies 에 설치가 되었습니다.
구글링을 하셔서 얻으신 정보처럼 dependencies는앱(=프로젝트)이 실제로 실행될 때 필요한 라이브러리를 명시한 것이고, devDependencies는앱을 개발하거나 빌드할 때만 필요한 도구만 명시한 항목을 의미합니다.
강의 후반부부터 axios라는 패키지를 통해 백엔드와 API 통신을 하게 됩니다. 해당 패키지는 배포 이후에도 실제로 사용되는 패키지이기 때문에 dependencies 항목에 추가가 될 것이고,
반대로 TailwindCSS도 배포 이후에도 사용되지 않나요? 라고 질문 하실 수 있지만, TailwindCSS는 배포된 웹사이트에서 “결과물(CSS)”은 사용되지만, Tailwind 자체 코드는 사용되지 않기 때문에 devDependencies로 설치해도 괜찮습니다.
이렇게 둘을 나눠서 관리하는 이유는 배포 시 불필요한 개발 도구를 제거해 용량을 줄이는 것이 가장 큰 핵심이라고 할 수 있겠습니다!
2번 질문에 대해서 답변 드리겠습니다.
네, 맞습니다! 패키지를 설치하시면 동일한 폴더 위치에 node_modules라는 폴더가 새로 생성 되었을 것입니다. 이 폴더 안에 실제 패키지 코드들이 있습니다. package.json 파일은 단순히 이 프로젝트에서 어떤 패키지가 사용되었고 해당 버전은 무엇인지 명시한 설계도라고 보시면 되고 따로 node_module를 전체 복사하실 필요 없이 설계도(=package.json)와 홈페이지 코드만 갖고 다른 컴퓨터로 옮기셔서 npm install 명령어 한번 만으로 프로젝트 복사 붙여넣기가 가능합니다!
도움이 되셨길 바라며 추가 질문이 있으시면 언제든지 문의 바랍니다. 감사합니다!