vscode 확장 프로그램과 npm 모듈

Question

안녕하세요. 강의를 보고, 회사 프로젝트(vue+ts)도 분석하면서 프로젝트를 재설치 및 셋팅을 연습하고 있습니다. 그러던 중 궁금한 점이 몇 가지 생겼습니다. 1. npm 모듈을 설치하는데 vs code의 확장 프로그램과 겹쳐지는 게 있는데, 두가지를 중복해서 설치하지 않아도 될 것 같다는 생각이 들어서요. 두가지를 모두 설치해야 할까요? 아니면 때에 따라 하나만 설치하나요? ex) 확장 프로그램 / npm 모듈 Prettier - Code formatter <===> prettier ESLint <===> eslint 등등... 2. package.json에서 이름이 비슷한 npm 모듈이 있는데, 서로 하는 일이 다른가요? vue용, ts용과 일반?용을 다르게 설치한걸까요? 하나만 설치하면 안되는건가요? 중복 설치라면 말씀해주세요 ㅜㅜ ex) lodash <===> vue-lodash <===> @types/lodash-es @typescript-eslint/eslint-plugin <===> eslint와 eslint-plugin-vue <===> @vue/cli-plugin-eslint 등등... 3. sass 컴파일 현재 로컬에 확장 프로그램 Live Sass Compiler 가 설치되어 있고, 프로젝트 npm 모듈 sass와 sass-loader가 설치되어 있습니다. sass 사용을 위해선 npm 모듈 sass 설치가 필수 인가요? 그리고 Live Sass Compiler / sass-loader는 둘 가 sass를 css로 컴파일 해준다고 알고 있는데, 둘 다 설치해야 하나요? node를 사용하지 않는 프로젝트를 위해 Live Sass Compiler를 로컬에 설치해놓고, node를 사용하는 프로젝트 시에는 sass-loader를 npm 모듈로 설치하는 건가요? 선임분들이 셋팅해놓은 플젝만 해보아서 저의 질문이 제대로 된 질문인지도 모르겠습니다.ㅜㅜ 구글링을 해보았는데, 원하는 답변이 나오지 않아서 이렇게 질문을 올립니다. 구글링을 너무 대충한거라면.... 키워드라도 말씀 부탁드립니다. 다시 한번 찾아보겠습니다. 확인 부탁드립니다. 감사합니다!

캡틴판교 · Answer

안녕하세요 빵지님, 강의듣고 바로 회사 프로젝트 진행하시느라 많이 힘드시죠? 진행하시면서 궁금하신 내용 있으면 편하게 질문 주세요 :) 답변 드릴게요. 1. VSCode에 설치한 플러그인과 NPM 모듈은 별개입니다. 반대로 생각해서 VSCode로 개발하다가 다른 개발 툴 사용하더라도 프로젝트 NPM 모듈을 변경해야 할 일은 없어요 :)   2. 네 이름이 같더라도 용도가 다릅니다 :) lodash를 예를 들어볼게요. - lodash : 유틸리티 라이브러리. 서비스 로직에 필요함 - @types/lodash : lodash의 타입 라이브러리. 서비스 로직은 없고 타입스크립트 컴파일에 필요함. 그 외 eslint도 추후 학습로드맵 따라서 해당 도구를 학습하시게 되면 자연스럽게 익혀질 거예요 :)   3. 뷰 프로젝트는 보통 Vue CLI로 대부분 생성해서 사용할텐데요. 그럼 sass-loader는 프로젝트 내부에 기본적으로 내장되어 있습니다. 강의에서 안내해 드린 것처럼 로컬 서버를 실행할 때 웹팩 데브 서버로 실행이 되고 있구요. 데브 서버 안에 sass-loader가 있으므로 별도로 loader 설치는 안하셔도 됩니다 :) 이거 역시 일단 웹팩 쪽 강의를 들어보시고.. 아래 문서는 추가로 참고해 보시면 될 것 같아요! 뷰 프로젝트의 웹팩 옵션 속성