오늘은 일반적으로 웹용으로 개발하는 방법에 대한 설명을 포함하여 Node.js 및 NPM의 가장 기본적인 사항을 안내해 드리겠습니다. 참고 사항: 기본 웹 개발 및 NPM에 익숙하다면 이 기사를 건너뛰고 여기에서 매우 유용한 NPX에 대해 자세히 알아볼 수 있습니다.
큰 확인! 시작하자!
노드.js
이 글을 읽고 있다면 이미 Node.js + NPM을 다운로드하고 자바스크립트의 바다에 발을 담그기 시작했을 것입니다. 그러나 첫 번째 단계는 이미 두려운 것처럼 보일 수 있습니다. "Javascript로 작은 프로그램을 작성하고 싶습니다. 왜 다른 모든 것이 필요합니까?". 그것은 이해할 수 있지만 실제로는 전혀 중요하지 않습니다.
처음부터 시작하겠습니다. '.js' 접미사로 표시된 컴퓨터의 모든 곳에서 Javascript 파일을 간단하게 만들 수 있습니다. 이 파일은 원하는 방식으로 코드로 채울 수 있지만 한 가지 빠진 것이 있습니다. 실제로 프로그램을 실행하는 방법은 무엇입니까? Node.js가 작동하는 곳입니다.
Node.js는 명시적으로 Javascript용 런타임 환경입니다. 설명에서 알 수 있듯이 Node는 Node 자체에서 제공하는 특정 환경에서 Javascript 코드를 실행할 수 있습니다. 프로세스는 항상 동일합니다. 먼저 Node.js를 시작하고 Node가 스핀업되면(즉, 시작이 완료됨) Javascript 코드를 제공할 수 있습니다.
Javascript를 Node에 입력으로 제공할 수 있는 두 가지 방법이 있습니다.
- 실행 중인 Node-process에 직접 파일을 포함하지 않고 한 줄씩
- 라인별 입력 없이 로드할 Javascript 파일을 Node에 알려줍니다.
node
한 줄 한 줄
Node.js를 성공적으로 설치한 후(설치 프로그램을 다운로드하고 실행하는 중이며 설명은 Node 웹사이트에 있음) 터미널(macOS/Linux) 또는 PowerShell(Windows) 어디에서나 Node.js를 시작할 수 있습니다. . 명령은 다음과 같습니다.
그래, 그게 다야! Node를 성공적으로 시작했습니다! 이것이 얼마나 빨리 일어났는지 눈치채셨나요? Node.js가 인기 있는 이유 중 하나는 (무엇보다도) 엄청나게 빠른 부팅 때문입니다.
이제 Node가 실행 중이므로 Javascript-app을 한 줄씩 정의할 수 있습니다. 각 입력은 처리되어 메모리에 저장됩니다. 여기에 약간의 예가 있습니다.
(Hit enter after every line end)
const greet = (name) => console.log("Hello, " + name);
greet("Tom"); let x = 10; x = x + 5;
(enter the following line to terminate node)
.exit
이제 모든 것이 훌륭하고 멋지지만 더 큰 앱을 작성하려면 Node.js에 제공하기 전에 먼저 파일에 초안을 작성해야 합니다. 다음 장, 제발!
파일을 통한 입력
이 예에서는 텍스트 편집기가 필요합니다. 기본적으로 텍스트를 조작할 수 있는 모든 프로그램(예: macOS의 TextEdit 또는 Windows의 Editor)을 사용할 수 있습니다. Microsoft의 오픈 소스 VS Code를 권장하지만 인체 공학에 가장 적합한 것을 선택할 수 있습니다.
파일을 입력으로 제공하려면 파일을 생성하기만 하면 됩니다. 이름에 접미사 'js'가 포함된 일반 텍스트 파일을 생성하기만 하면 됩니다. 파일 이름을 app.js로 지정하겠습니다. 이제 원하는 명령 프롬프트를 엽니다(첫 번째 예에서 사용한 것). 파일이 저장된 디렉토리에서 파일을 여는 것이 중요합니다.
VS Code를 사용하는 경우 내장된 명령 프롬프트를 사용할 수 있습니다. 탐색기 보기에서 마우스 오른쪽 버튼을 클릭하고 "코드에서 열기"(Windows)를 호출하거나 파일이 포함된 디렉토리를 끌어다 놓기만 하면 됩니다. Dock(macOS)의 VS 코드 아이콘. 그런 다음 여기에 설명된 대로 터미널을 열 수 있습니다.
터미널이 준비되면 다음 명령을 입력하기만 하면 됩니다.
node app.js
보시다시피 몇 가지 일이 발생했습니다.
- 사용 가능한 사용자 입력 없이 노드가 직접 시작됨
- 노드는 파일이 끝날 때까지 위에서 아래로 전체 파일을 실행했습니다.
- 파일의 끝도 프로세스의 끝을 표시하므로 노드 자체가 종료됨
Node.js에 대한 기본 소개는 여기까지입니다! Node를 다운로드하고 라인별로 또는 파일에서 고유한 Javascript 앱을 시작하기 위한 명령 프롬프트 사용을 처음 경험했다면 공식적으로 Javascript 개발자가 된 것입니다! 클럽에 오신 것을 환영합니다!
이제 NPM의 핵심 개념을 안내해 드리겠습니다. 다음 장 이후에는 Node.js, NPM 및 웹 개발 간의 연결을 빠르게 살펴보겠습니다. Node.js에 대해 더 자세히 알고 싶다면 여기에서 Javascript, 도구 체인 및 코딩과 관련된 모든 것에 대한 이야기를 확인할 수 있습니다. 또한 더 많은 것을 배울 수 있도록 이 기사의 끝에 몇 가지 유용한 리소스를 연결했습니다.
좋아, 하나 이동하자!
노드 패키지 관리자, NPM
이미 보았듯이 자신의 코드를 관리하는 것은 그리 어렵지 않습니다. 앱은 파일에 저장할 수 있으며 적용한 변경 사항은 그대로 유지됩니다. 그러나 암호화 또는 이미지 조작 라이브러리와 같이 다른 사람의 코드를 사용하려면 어떻게 해야 할까요? 어떻게든 그 코드를 자신의 코드 옆에 놓고 애플리케이션에 사용할 수 있도록 하고 모든 것을 관리 가능하게 유지해야 합니다.
순진한 접근 방식은 소스에서 직접 외부 코드를 다운로드하는 것입니다. Github에서 라이브러리를 파일별로 복사하여 자신의 프로젝트에 복사합니다. 그러나 이는 몇 가지 문제를 야기합니다.
- 이 외부 코드를 가장 잘 업데이트하는 방법은 무엇입니까? 손으로 복사하는 것이 최선의 해결책은 아닙니다.
- 외부의 모든 코드를 어떻게 추적합니까?
- 이 외부 코드 자체가 프로젝트에 설치되지 않은 라이브러리에 의존한다면 어떻게 될까요?
이러한 모든 문제는 Node.js용 패키지 관리자인 NPM이 해결합니다. 패키지 관리자의 임무는 기본적으로 종속성이라고도 하는 외부 코드를 추가, 추적 및 제거하는 방법에 대한 강력한 솔루션을 제공하는 것입니다. 다음은 작동 중인 NPM의 몇 가지 예입니다.
npm install serve-static npm remove serve-static
당연히 이 관리자는 프로젝트의 모든 종속성을 추적하기 위해 몇 가지 특수 파일 자체가 필요합니다. 그렇기 때문에 NPM을 사용하는 애플리케이션에는 package.json과 package-lock.json의 두 가지 파일이 있습니다. 다음 명령을 호출하여 새 NPM 패키지를 빠르게 만들 수 있습니다.
npm init -y
참고: 이 기사의 첫 번째 부분에서 보았듯이 NPM은 Node.js 또는 Javascript를 사용하는 데 필요하지 않습니다. 그 초점은 종속성을 관리하는 것입니다. 더도 말고 덜도 말고요. NPM을 통해 npmjs.com에 게시된 코드를 다운로드할 수 있습니다. 이러한 모든 외부 모듈은 프로젝트의 node_modules라는 특수 디렉토리에 저장됩니다. NPM에서 완전히 관리하기 때문에 이 디렉토리를 변경할 필요가 거의 없습니다.
package.json은 프로젝트에서 현재 사용되는 종속성에 대한 통찰력을 제공합니다. package-lock.json은 package.json-file 또는 node_modules-directory와 관련된 돌연변이에 대한 일부 메타데이터를 저장하는 특수 파일이며 지금은 무시할 수 있습니다.
NPM의 핵심 개념, NPM이 하는 일, 자동으로 생성하는 파일/디렉토리에 대한 설명을 마치겠습니다. 자세한 내용은 기사 끝에 링크되어 있습니다.
아크 투 웹 개발
좋습니다. 이제 Node.js와 NPM의 기본 사항을 알게 되었습니다. 그러나 자신의 현대적인 웹 사이트를 만들기 시작하려는 경우 왜 이 모든 것이 배우기 위해 필요한 것입니까?
방금 보았듯이 NPM을 사용하면 방대한 라이브러리 컬렉션(정확히 말하면 현존하는 가장 큰 라이브러리)에서 코드를 다운로드할 수 있습니다. 웹 개발을 위해서는 웹 앱을 호스팅(즉, 제공)할 수 있는 서버가 필요합니다. 웹사이트 프로젝트를 업로드하고 서버를 포함한 기존 인프라를 사용하여 웹사이트를 웹에서 사용할 수 있도록 하는 서비스가 많이 있습니다.
또한 로컬 개발의 경우 서버는 로컬 파일을 로드하고 개발 중에 장치에서 사용자만 사용할 수 있도록 하는 데도 필요합니다. Node.js 덕분에 그렇게 할 수 있습니다. 소위 localhost를 통해 로컬에서 웹사이트를 사용할 수 있게 만드는 것입니다. Node.js에는 로컬 서버를 시작하는 데 필요한 도구가 내장되어 있지만 NPM을 통해 짧은 시간에 매우 큰 서비스를 만드는 데 도움이 되는 전투 테스트를 거친 구성 요소로 애플리케이션을 강화할 수 있습니다.
물론 그것은 시작에 불과합니다. NPM은 현대적인 웹 앱(PWA, "프로그레시브 웹 앱"으로 알려짐)과 복잡한 서버를 구축하기 위한 수많은 코드를 호스팅합니다. 그러나 첫 번째 소개를 위해서는 그 설명이 괜찮을 것이라고 생각합니다.
Node.js와 NPM을 이해하는 데 도움이 되었으면 합니다. 첫 번째 단계는 항상 가장 어렵지만 개발의 첫 날과 (많은) 학습을 통해 깨달은 것은 최신 웹 애플리케이션 개발로 확장되는 기술로 보상을 받을 것이며 원하는 모든 것을 구축할 수 있습니다.
