본문 바로가기

IT/개발27

[Vue] ⛔ cli 설치 후 에러 'vue'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. @vue/cli 설치 이후 프로젝트를 생성(vue create 'projectName')했을 때 위와 같은 오류가 발생 했을 경우에는 보통 환경 변수가 오류인 경우가 많아서 환경변수 세팅을 해줘야 합니다. 아니면 터미널을 관리자모드로해서 @vue/cli를 다시 설치하면 됩니다. > npm install -g @vue/cli | 환경변수 설정 키보드의 윈도우버튼을 누르고 '시스템 환경 변수 편집' 을 검색해서 아래와 같이 수정합니다. 시스템 속성 > 고급 > 환경변수 > 사용자변수에서 Path를 '편집' 하고 Path의 환경 변수에 npm 위치를 추가하면 됩니다. @vue/cli를 글로벌로 설치했다면 설치된 위.. 2024. 4. 3.
웹사이트 속도 향상을 위한 트리쉐이킹 활용법 안녕하세요! aloveu입니다. 웹 페이지 최적화 작업을 하다 보니 js 파일을 다운로드하고 파싱하고 코드를 실행하는 과정자체가 느린 걸 발견했습니다. 요즘은 프런트앤드 개발 스쿱자체가 커져서 js 파일의 용량을 무시할 수 없습니다. 꽤 커서 웬만한 프로젝트들은 10메가가 훌쩍 넘을 경우들이 있죠. (압축하지 않은 상태) 자바스크립트는 브라우저에서 다운로드하고 압축을 풀고 파싱, 컴파일하고 실행하는 과정을 거치게 되는데 이미지나 폰트 같은 다른 리소스들보다 처리 비용자체가 많이 드는 리소스입니다. 그래서 각 브라우저 밴더사들에서는 엔진을 개선하려고 많이 노력을 하지만 그렇다고 마냥 손 놓고 있을 순 없으니 우리도 최적화를 해야 하죠. 각설하구요. 네트워크 속도 이슈나 다른 이슈 들은 모두 수정이 되고 있.. 2024. 3. 28.
프론트 개발자라면 꼭 알아야 할 package-lock.json의 비밀! npm 5.0부터 npm install을 하면 생기는 package-lock.json 파일이 있습니다. 어차피 모듈 관리는 package.json에서 하고 있으니 시스템 구동상 필요한 파일이겠거니 하고 신경을 쓰지 않던 애였는데요. 같은 팀원끼리 협업을 하면서 설치된 패키지들이 서로 버전이 달라 오류가 발생하는걸 몇 번 겪고 이를 해결하기 위해 yarn berry, pnpm을 찾아보다가 package-lock.json의 용도를 알게 됐습니다. | package-lock.json파일이란? 패키지들을 npm을 통해서 설치하게 되면 자동으로 생성하게 되는 파일인데 node_modules 폴더에 설치된 패키지들의 의존성 트리를 기록하고 있는 파일입니다. lock 파일에는 버전이 정확하게 명시 되어있습니다. | .. 2024. 2. 14.
웹성능 최적화! 구글 라이트하우스를 활용한 웹사이트 진단 및 개선 방법 안녕하세요! aloveu입니다. 블로그를 운영하든 웹사이트를 운영하든 SEO가 중요하다는 건 모두 아실 텐데요. 이 SEO에 중요한 영향을 미치는 웹성능에 대해서 구글에서 제공하는 lighthouse라는 성능체크툴을 이용해 알아보려고 합니다. 라이트 하우스 말고 다른 페이지 성능 결과를 보여주는 사이트는 https://pagespeed.web.dev/?hl=ko 도 있어요. | Lighthouse 실행하기 크롬에서 웹사이트를 들어간 다음에 F12를 눌러봅니다. 그러면 devtools가 뜨는데 여기 상단탭에 보면 lighthouse라는 탭이 있을 겁니다. Navigation (Default)를 선택하고 진단할 Device와 categories를 선택한 후에 Analyze page load 버튼을 눌러보면 .. 2024. 2. 5.
IntelliJ Test Case Setting 안녕하세요! aloveu입니다. 오늘은 Vue에서 단위테스트 하실 때 편하게 사용하실 수 있는 IDE 세팅에 대해서 알아보겠습니다. Vue에서 단위테스트를 하려면 vue-cli에서 제공해 주는 jest를 쓰면 되는데 기존 설치된 vue-cli에서 jest를 추가하려면 터미널에서 아래와 같은 명령어로 추가해 줍니다. > vue.cmd add unit-jest 테스트 케이스 작성법은 jest docs(https://jestjs.io/docs/getting-started)를 참고하시면 되고요. 여기에서는 세팅을 어떻게 하는지만 알아보겠습니다. | Pinia 테스트 작성법 그전에 상태관리 라이브러리로 Pinia를 쓰고 계시는 분들을 위해 추가하자면 Pinia는 따로 테스트 모듈을 추가해줘야 합니다. npm i .. 2024. 1. 25.
Vue3의 상태관리자로 Pinia를 사용해 봅시다. 안녕하세요! aloveu입니다. 오늘은 vue의 상태관리자로 pinia를 사용하는 걸 적어볼게요. 보통 vue2까지는 vuex를 많이 사용했을 텐데 vue3로 올라온 이상 pinia를 고려해 보심이 좋을 거 같아요. 그럼 각 상태관리툴로써 비교를 해보겠습니다. | VUEX vuex는 기존 vue에서는 유일하게 상태관리 툴로 사용되고 있는 공식 지원 상태관리자였습니다. 단점으로는 모듈 분리, typescript 등 설정하는데 시간이 많이 걸리는 게 있어요. 하나의 상태(state)를 가져다 쓰고 업데이트하는데 state, getter, action, mutation이라는 각 타입별로 모듈 분리하고 typescript 적용하는 게 번거롭습니다. typescript를 사용하신다면 vuex는 완벽하게 지원을 하.. 2024. 1. 15.
Service Worker 적용해 보기 서비스워커는 기본 브라우저 스레드와 별도로 실행되어 네트워크 요청을 가로채거나 리소스를 캐싱하거나 푸시 메시지를 전송하는 js 파일로 되어있는 하나의 워커입니다. 보통 서비스워커는 앱과 서버 간의 프락시 역할을 하고 메인 스레드에서 오는 모든 네트워크 요청이 여기를 통과합니다. 따라서 캐시 된 데이터들이 있을 경우 네트워크 요청을 중지하거나 수정하거나 하는 권한을 가집니다. 물론 캐시를 쓸 수 있도록 등록을 해야 합니다. 등록과정은 아래 서비스워커 등록하는 방법을 알려드릴 때 캐시 부분도 같이 기술하겠습니다. | Service Worker 적용하기 LifeCycle 서비스 워커의 라이프 사이클은 아래처럼 동작을 하고 이건 등록하는 과정을 설명하는 과정에서 다시 한번 언급하겠습니다. 서비스워커 등록 보통 .. 2024. 1. 13.
Mocking 서비스 도입하기 (msw) 안녕하세요! aloveu입니다. 프로젝트를 진행할 때 기획도 나오고 api 명세도 나왔는데 백앤드 api 개발이 완성될 때까지 기다리고 계시나요? 아니면 비즈니스 로직 안에 받을 데이터를 모두 넣어 소스가 지저분 해지나요? 오늘은 그냥 api 통신을 하고 데이터만 내가 설정한 데이터를 받아 볼 수 있게 하는 msw라는 라이브러리를 알아보겠습니다. | 설치 > npm i msw > npx msw init public/ --save 프로젝트 루트에서 설치하면 public 폴더 및에 mockServiceWorker.js 파일이 생성되는데 이 서비스워커를 우리 프로젝트에 등록을 해줘야 합니다. 그게 두 번째 줄에 있는 명령어인데 msw에서 제공하는 init 명령어로 따로 설정할 필요 없이 바로 등록이 가능합니다.. 2024. 1. 11.
IDE - intelliJ의 알아 두면 좋은 기능들 오늘은 제가 사용하는 유료 IDE(Phpstorm, IntelliJ)에 대해서 적어볼까 합니다. 사실 이 글은 예전에 깃블로그에 썼던 내용인데 거긴 폐쇄하고 옮겨온 거예요. 2017년부터 사용하고 있는 중이고 지금도 사용하고 있는 너무 편한 기능들을 정리해 봤습니다. 그동안 써봤던 IDE는 많았지만 유료는 유료값을 한다라고 느껴요. 물론, 유료라서 회사에서 라이선스 결제한 거 아니면 개인적으로 쓰기는 부담스럽죠. (개인용은 $89 정도 됩니다.) 각설하고, 기능을 한번 살펴보겠습니다. | 자주 사용하는 단축키 기본 설정 키로 쓰는 경우도 있고 제가 커스텀한 것도 있어서 Setting > Keymap에서 보시고 쓰시면 됩니다. commit : Ctrl + K push : Ctrl + Shift + K up.. 2024. 1. 11.
반응형

티스토리툴바