npm8 [웹개발] 프론트앤드 빌드 시스템 (바벨, Node.js, NPM, ESLint, Prettier) 프론트앤드 빌드 시스템 프론트앤드 개발은 여러 컴포넌트를 빌드해 소스코드 파일을 컴퓨터에서 실행할 수 있게 변환한다. 이때 코드를 변환하도록 도와주는 도구가 빌드 시스템이다. 컴파일 (Compile) 사람이 프로그래밍 언어로 작성한 소스코드를 컴퓨터가 이해할 수 있는 바이너리 언어로 작성된 코드로 변경하는 것 (사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업) 컴파일러 (Compiler) 개발자가 작성한 소스코드를 컴퓨터가 이해할 수 있는 코드로 변경해주는 프로그램 빌드 (Build) 소스코드 파일을 소프트웨어로 만드는 과정 (소스코드 파일을 컴퓨터에서 실행할 수 있게 변환하는 과정) 빌드의 단계 중 컴파일이 포함이 되어 있는데 컴파일은 빌드의 부분집합이라 할 수 있다 빌드 시스템 .. 2022. 11. 22. [npm/한줄정리] 패키지 매니저(npm, yarn)으로 패키지 설치할때 @next 키워드의 의미 vuex라는 패키지를 yarn, npm으로 설치하려면 아래와 같은 코드가 필요하다. 여기서 나오는 @next 키워드는 다음 버전을 의미한다. npm install vuex@next --save yarn add vuex@next --save 터미널에 해당 코드를 입력하면 최신버전과 다음버전의 정보를 알 수 있다. npm info vuex 2022년 7월 1일 날짜로 가장 최신 버전의 vuex와 다음 버전의 vuex는 같기 때문에 @next 키워드는 필요하지 않다. 2022. 7. 8. [npm/에러해결] npm에서 패키지 설치시 code ENOSELF 에러 해결 방법 ⚠️ 에러내용 Vue 프로젝트에서 vuex 패키지를 설치하려고 시도했을때 해당 에러메세지가 발생하였다. npm i vuex ❓ 에러발생이유 에러가 발생한 이유는 사실 에러 메세지에 나타나 있다. 터미널 에러 메세지 Refusing to install package with name "vuex" under a package also called "vuex". Did you name your project the same as the dependency you're installing? 대충 해석 vuex라는 이름을 가진 프로젝트에서는 같은 이름을 가진 vuex 패키지 설치가 불가하다. 프로젝트 이름이 설치하려는 패키지 이름과 동일하지 않은지 확인하도록! 프로젝트의 package.json에 있는 프로젝트 이.. 2022. 7. 6. [npm/에러해결] npm ERR! code EEXIST ⚠️ 에러내용 CLI로 Vue 프로젝트 생성하기 위해서 아래의 명령어를 실행했을때 에러가 발생하였다. npm install -g @vue/cli ❓ 에러발생이유 -g 를 붙여서 전역으로 설치 할 경우 발생하는 오류 ❗️ 해결방법 아래의 코드를 입력해주고 profile이라는 숨겨져 있는 파일을 vi 에디터로 열어준다. mkdir ~/.npm-global npm config set prefix '~/.npm-global' vi ~/.profile i로 해당파일을 수정모드로 바꿔주고 아래의 코드를 맨 하단에 입력해준 후 :wq 키워드로 파일을 저장, 종료시켜준다. export PATH=~/.npm-global/bin:$PATH 변경된 profile 파일을 적용해준다. source ~/.profile 2022. 6. 30. [npm/에러해결] npm ERR! code ELIFECYCLE 해결방법 1. cache 삭제 npm cache clean --force 2. node_modules 삭제 rm -rf node_modules 3. package-lock.json 삭제 rm -rf package-lock.json 3. 패키지 다시 설치 npm install 4. 프로젝트 시작 npm start 2022. 6. 20. [Node.js] npm(Node Package Manager) 정리 npm(Node Package Manager) Node.js가 설치될때 npm도 같이 설치된다. npm이란 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)을 관리하는 페키지 매니저다. 패키지란? 특정 기능과 관련된 여러 모듈을 한 폴더 안에 넣어 관리하는데 이를 패키지라고 한다. 모듈이란? 프로그램을 이루고 있는 독립적이고 재사용할 수 있는 코드의 집합체를 의미한다. 하나 또는 여러개의 모듈이 모여서 프로그램이 만들어진다. 패키지를 웹 프로젝트에 사용하는 방법 과거 링크, 스크립트 태그로 어떤 기능을 프로젝트에서 연결해 사용 요즘 최신의 웹 프론트앤드 개발에서는 프로젝트에 패키지를 직접 설치해 별도의 가공처리를 거쳐 결과물로 만들고 그렇게 만들어진 결과물을 웹사이트로 동작시킨다 Node.js 환경.. 2022. 5. 26. [Node.js] npm 명령어 정리 명령어 의미 npm help npm 명령어의 종류와 사용법을 알고 싶을때 사용 npm init 프로젝트를 npm에서 관리하도록 설정 (package.json 파일 생성) 프로젝트 시작시 가장 먼저 해야할일 npm init -y 기본 설정을 위한 질문을 생략한 후 프로젝트를 바로 npm에서 관리하게 설정 (package.json 파일 생성) npm install package.json에 dependencies 맞춰 프로젝트에 필요한 패키지를 모두 설치 npm install 패키지 설치 npm install 패키지를 해당 버전으로 설치 npm i npm install 패키지이름 축약형 npm install —save-dev 패키지를 개발용으로 설치 (개발할때만 필요하고 브라우저에서는 필요없는 패키지를 설치할.. 2022. 5. 13. [Node.js/한줄정리] npm init이란? npm init은 프로젝트에 package.json 파일을 생성하는 명령어다. 2022. 4. 20. 이전 1 다음
