본문 바로가기

Node.js12

[웹개발] 프론트앤드 빌드 시스템 (바벨, Node.js, NPM, ESLint, Prettier) 프론트앤드 빌드 시스템 프론트앤드 개발은 여러 컴포넌트를 빌드해 소스코드 파일을 컴퓨터에서 실행할 수 있게 변환한다. 이때 코드를 변환하도록 도와주는 도구가 빌드 시스템이다. 컴파일 (Compile) 사람이 프로그래밍 언어로 작성한 소스코드를 컴퓨터가 이해할 수 있는 바이너리 언어로 작성된 코드로 변경하는 것 (사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업) 컴파일러 (Compiler) 개발자가 작성한 소스코드를 컴퓨터가 이해할 수 있는 코드로 변경해주는 프로그램 빌드 (Build) 소스코드 파일을 소프트웨어로 만드는 과정 (소스코드 파일을 컴퓨터에서 실행할 수 있게 변환하는 과정) 빌드의 단계 중 컴파일이 포함이 되어 있는데 컴파일은 빌드의 부분집합이라 할 수 있다 빌드 시스템 .. 2022. 11. 22.
[Node.js] nvm 설치방법 1. nvm GitHub에 들어가서 Installing and Updating 섹션으로 이동 후 아래의 코드 복사 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 2. 터미널에 해당 코드를 붙어넣는다 3. nvm이 설치되었는지 확인하고 싶다면 아래의 코드로 컴퓨터에 설치된 nvm의 버전을 확인한다 nvm --version 2022. 5. 26.
[Node.js] Node.js란? Node.js Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. JavaScript 엔진: 자바스크립트 문법을 해석하고 동작시켜줄 수 있는 엔진 런타임: 프로그래밍 언어가 동작하는 환경 자바스크립트 런타임: 자바스크립트 프로그래밍 언어가 동작하는 컴퓨터 환경 자바스크립트가 동작할 수 있는 환경 2가지 1. Node.js가 설치된 컴퓨터 2. 웹 브라우저 (Chrome, Firefox, Safari…) 프론트엔드에서 Node.js의 쓸모 웹브라우저에서는 HTML, CSS, JavaScript만 동작 한다. 웹 개발시 개발을 도와주는 모듈을 사용하는데 모듈은 브라우저에서 동작 하지 못한다. 이때 Node.js 환경에서 모듈을 변환시켜 웹브라우저에서 동작시킬 수 있도록 컴퓨터에.. 2022. 5. 26.
[Node.js] npm(Node Package Manager) 정리 npm(Node Package Manager) Node.js가 설치될때 npm도 같이 설치된다. npm이란 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)을 관리하는 페키지 매니저다. 패키지란? 특정 기능과 관련된 여러 모듈을 한 폴더 안에 넣어 관리하는데 이를 패키지라고 한다. 모듈이란? 프로그램을 이루고 있는 독립적이고 재사용할 수 있는 코드의 집합체를 의미한다. 하나 또는 여러개의 모듈이 모여서 프로그램이 만들어진다. 패키지를 웹 프로젝트에 사용하는 방법 과거 링크, 스크립트 태그로 어떤 기능을 프로젝트에서 연결해 사용 요즘 최신의 웹 프론트앤드 개발에서는 프로젝트에 패키지를 직접 설치해 별도의 가공처리를 거쳐 결과물로 만들고 그렇게 만들어진 결과물을 웹사이트로 동작시킨다 Node.js 환경.. 2022. 5. 26.
[Node.js] package.js 파일 정리 package.json이란? 프로젝트 터미널에 npm init 명령어를 실행하면 package.json 파일이 루트 디렉토리에 자동으로 생성된다. package.json에 작성되는 정보는 크게 2개로 나눌 수 있다: 프로젝트의 정보: 현재 프로젝트에 관한 정보를 명시 패키지 버전 정보: 패키지 매니저(npm, yarn)를 통해 설치한 패키지의 목록과 버전 명시 package.json 파일 해석 package.json 파일 생성 npm init -y 개발용으로 사용할 parcel bundler 패키지 설치 npm install parcel-bundler -D 패키지를 설치하면 node modules에 해당 패키지가 다운받아진다. node_modules 폴더 안을 확인해보면 설치한 parcel bundler.. 2022. 5. 26.
[Node.js/한줄정리] 모듈(Module) vs 패키지(Package) ​모듈 모듈이라는 단어는 모듈화 프로그래밍이라는 소프트웨어 디자인 기법에서 나온 말이다. 모듈화 프로그래밍이란 프로그램을 개발할 때 코드를 독립적이고 재사용할 수 있는 작은 모듈로 이루어지게 해야한다는 컨셉이다. 즉, 모듈이란 프로그램을 이루고 있는 독립적이고 재사용할 수 있는 코드의 집합체를 의미한다. 하나 또는 여러개의 모듈이 모여서 프로그램이 만들어진다. 기능을 가지고 있는 파일로 주로 자바스크립트에서 자주 사용되는 용어다. 패키지 특정 기능과 관련된 여러 모듈을 한 폴더 안에 넣어 관리하는데 이를 패키지라고 한다. 비슷한 기능을 가지고 있는 파일의 모음집(폴더)로 npm에서 자주 사용되는 용어다. 2022. 5. 15.
[Node.js] package.json에서 안쓰는 패키지 삭제하기 사용하고 싶지 않은 모듈을 dependencies에서 삭제해준다 { "name": "test", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "parcel-bundler": "^1.12.5", "sass": "^1.51.0" }, "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, "dependencies": { "@popperjs/core": "^2.11.5", "bootstrap": "^5.1.3", "regenerator-runtime": "^0.13.9" } } @popperjs/core와 bootstrap 삭제 .. 2022. 5. 15.
[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/한줄정리] package.json과 package-lock.json package.json 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)를 통해 설치한 패키지를 관리해주는 파일 package.json에 작성되는 정보는 크게 2개로 나눌 수 있다: 프로젝트의 정보: 현재 프로젝트에 관한 정보를 명시 패키지 버전 정보: 패키지 매니저(npm, yarn)를 통해 설치한 패키지의 목록과 버전 명시 package-lock.json package.json에 명시된 패키지들이 동작하기 위해 필요한 다른 패키지들에 관한 정보가 명시된 파일 yarn을 통해 패키지를 설치했다면 yarn.lock 파일이 생성된다 package.json 파일은 직접 관리하지만 package-lock.json 파일은 package.json에 명시된 패키지를 설치하고 삭제할때 자동으로 업데이트(.. 2022. 4. 20.
[Node.js/한줄정리] npm init이란? npm init은 프로젝트에 package.json 파일을 생성하는 명령어다. 2022. 4. 20.
[Node.js/한줄정리] nvm에서 사용 중인 노드 버전 바꾸기 nvm use 2022. 4. 7.
[Node.js/한줄정리] 로컬 컴퓨터에 설치된 노드버전을 모두 불러오는 nvm 명령어 nvm ls 2022. 4. 7.

티스토리툴바