인프런 커뮤니티 질문&답변
작성한 질문수
vscode 확장 프로그램과 npm 모듈
작성
·
288
1
안녕하세요.
강의를 보고, 회사 프로젝트(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 모듈로 설치하는 건가요?
선임분들이 셋팅해놓은 플젝만 해보아서
저의 질문이 제대로 된 질문인지도 모르겠습니다.ㅜㅜ
구글링을 해보았는데, 원하는 답변이 나오지 않아서 이렇게 질문을 올립니다.
구글링을 너무 대충한거라면.... 키워드라도 말씀 부탁드립니다. 다시 한번 찾아보겠습니다.
확인 부탁드립니다.
감사합니다!
답변 1
1
장기효(캡틴판교)
지식공유자
안녕하세요 빵지님, 강의듣고 바로 회사 프로젝트 진행하시느라 많이 힘드시죠? 진행하시면서 궁금하신 내용 있으면 편하게 질문 주세요 :)
답변 드릴게요.
1. VSCode에 설치한 플러그인과 NPM 모듈은 별개입니다. 반대로 생각해서 VSCode로 개발하다가 다른 개발 툴 사용하더라도 프로젝트 NPM 모듈을 변경해야 할 일은 없어요 :)
2. 네 이름이 같더라도 용도가 다릅니다 :) lodash를 예를 들어볼게요.
- lodash : 유틸리티 라이브러리. 서비스 로직에 필요함
- @types/lodash : lodash의 타입 라이브러리. 서비스 로직은 없고 타입스크립트 컴파일에 필요함.
그 외 eslint도 추후 학습로드맵 따라서 해당 도구를 학습하시게 되면 자연스럽게 익혀질 거예요 :)
3. 뷰 프로젝트는 보통 Vue CLI로 대부분 생성해서 사용할텐데요. 그럼 sass-loader는 프로젝트 내부에 기본적으로 내장되어 있습니다. 강의에서 안내해 드린 것처럼 로컬 서버를 실행할 때 웹팩 데브 서버로 실행이 되고 있구요. 데브 서버 안에 sass-loader가 있으므로 별도로 loader 설치는 안하셔도 됩니다 :) 이거 역시 일단 웹팩 쪽 강의를 들어보시고.. 아래 문서는 추가로 참고해 보시면 될 것 같아요!
빠른 답변 감사합니다!
아직 공부해야할 것들이 많네요^.^
말씀해주신 내용들 토대로 확장 프로그램과 모듈들을 정리해보겠습니다.
감사합니다!