on
Node.js 앱을 구축하여 대학 학점을 추적합니다.
Node.js 앱을 구축하여 대학 학점을 추적합니다.
반응형
개인 포트폴리오를 구축하려고 하거나 웹 애플리케이션 프로젝트를 쉽게 익히고 싶다면 여기에 멋진 프로젝트 아이디어가 있습니다.
이 튜토리얼에서는 대학 학점을 추적하기 위한 간단한 Node.js 애플리케이션을 구축하는 방법을 안내하겠습니다.
이 튜토리얼에서는 최소한 JavaScript와 명령줄에 대한 실무 지식이 있다고 가정합니다. Node.js 생태계에 대한 지식도 도움이 되겠지만, 튜토리얼의 요점은 이러한 Node.js 관련 기술 중 일부가 어떻게 함께 작동하는지 설명하는 것이기 때문에, 저는 사전 지식을 가정하지 않고 진행하면서 기본 개념을 설명하려고 최선을 다할 것입니다.
개괄적 개요
프로젝트는 Node.js 응용 프로그램으로 빌드됩니다. Express.js를 프레임워크로 사용할 예정입니다. 데이터베이스 구성요소는 몽구스 오브젝트 모델링과 함께 몽구스DB를 사용할 것입니다. 마지막으로, Pug.js를 프론트엔드 템플릿 엔진으로 사용할 것입니다.
코드로 바로 넘어가기 전에 잠시 멈춰서 우리가 왜 이러한 특정 기술을 선택하고 있는지 그리고 어떻게 이들이 함께 작동하는지 설명하겠습니다.
기본적으로 당사의 웹 애플리케이션은 클라이언트 측, 서버 측 및 데이터베이스의 세 가지 구성 요소로 구성됩니다.
클라이언트 측면은 사용자가 브라우저에서 상호 작용하고 볼 수 있는 측면인 애플리케이션의 프런트엔드입니다.
서버 쪽은 응용프로그램의 백엔드이며, 사용자의 요청을 처리하고 사용자가 볼 수 있도록 페이지를 제공합니다. 또한 서버 쪽은 데이터베이스와 앞뒤로 통신하여 정보가 올바른 위치로 이동하는지 확인합니다.
마지막으로, 데이터베이스는 애플리케이션에 필요한 모든 데이터를 저장합니다. 이를 통해 브라우저에서 애플리케이션을 종료한 후에도 데이터가 영구화되거나 "지속화"될 수 있습니다.
웹 애플리케이션의 이 세 가지 구성 요소가 함께 작동하는 방식을 이해하는 것이 구성 요소를 구현하는 데 사용할 특정 기술을 이해하는 것보다 훨씬 더 중요합니다.
Node.js, Express.js 및 기타 고급 기술은 웹 애플리케이션의 구성 요소를 구축하는 데 활용할 수 있도록 이미 구축된 인기 있는 도구입니다. 우리가 정말 원한다면 수십 가지의 다른 기술을 사용하여 같은 목적을 달성할 수 있습니다. 예를 들어, 우리가 원한다면 퍼그 대신 리액트를 프런트 엔드로 사용할 수 있습니다. 또는 Express.js 대신 Vue.js와 같은 다른 프레임워크를 사용할 수도 있습니다.
요점은 각 기술이 우리의 웹 애플리케이션의 세 가지 주요 구성 요소의 서로 다른 측면을 구현하는 하나의 특정한 방법일 뿐이라는 것이다. 튜토리얼을 진행하면서 구현 세부 정보보다는 기본 개념에 더 주의를 기울이십시오. 튜토리얼을 마치면 다른 프레임워크와 기술을 훨씬 더 쉽게 배울 수 있습니다.
누구나 코드를 복사할 수 있지만, 여러분이 하는 일을 왜 하는지 이해하는 것이 항상 더 중요합니다.
이를 염두에 두고 웹 애플리케이션을 구축하는 단계를 소개합니다. 필요한 경우 단계 간에 자유롭게 이동하거나 단계 간에 일시 중지하여 상황을 더 자세히 이해할 수 있습니다. 각 단계마다 추가 리소스에 대한 링크를 포함하므로 계속 진행하기 전에 상황을 완전히 이해할 수 있습니다.
목차.
1. 프로젝트 계획 수립 2. 프로젝트 초기화 및 종속성 설치 3. 폴더 구조 설정 4. 서버 구축 5. 데이터베이스 연결 6. 모델을 만드세요. 7. 경로 정의 8. 컨트롤러 제작 9. UI 구축 10. 모든 것을 종합해 보면
프로젝트 계획 수립
저희의 목표는 졸업까지 남은 학점을 추적하는 간단한 웹 애플리케이션을 구축하는 것입니다.
그 앱은 우리가 한 명씩 수업에 들어갈 수 있게 해줄 것이다. 그런 다음, 그것은 얼마나 많은 강의가 남아 있고 얼마나 많은 학점이 남아 있는지의 집계와 함께 입력된 모든 수업의 목록을 보여줄 것이다.
마지막으로, 그 앱은 우리가 수업을 마칠 때 우리의 목록에서 수업을 삭제할 수 있게 해줄 것이다. 삭제 기능은 남은 수업과 학점의 집계를 자동으로 업데이트합니다.
바로 그거예요. 화려한 기능이나 종소리나 휘파람 소리가 없습니다. 기능 추가, 삭제 기능 및 클래스 및 학점 업데이트 집계만 하면 됩니다.
애플리케이션이 매우 작기 때문에 이 애플리케이션을 한 페이지만 포함하는 서버 렌더링 애플리케이션으로 구축할 계획입니다.
프로젝트 초기화 및 종속성 설치
첫 번째 단계는 컴퓨터에 Node.js가 설치되어 있는지 확인하는 것입니다. Node.js를 다운로드하는 방법은 여러 가지가 있습니다. 참고로 Node.js 웹 사이트의 다운로드 페이지를 확인하십시오.
Node.js를 다운로드했거나 컴퓨터에 이미 설치되어 있는 경우 터미널의 명령을 사용하여 올바른 버전이 있는지 확인할 수 있습니다.
노드 -v
이 튜토리얼에서는 이전 버전인 Node.js 버전 10.13.0을 사용하고 있습니다.
Node.js에는 npm이라는 자체 패키지 관리자가 함께 제공되므로 프로젝트에 종속성을 추가하고 업데이트 상태를 유지할 수 있습니다.
유사한 통신망으로 설치한 npm 버전을 확인할 수 있습니다.
npm -v
버전 7.16.0을 사용하고 있습니다. 이전 버전입니다.
이 튜토리얼 내내 npm을 사용하여 프로젝트에 종속성을 추가하고 Node.js 프로젝트를 초기화합니다. npm 사용 방법을 모를 경우 여기서 해당 설명서를 확인하십시오.
마찬가지로 Node.js는 애플리케이션의 런타임입니다. Node.js나 런타임에 대한 개념이 익숙하지 않다면, 여기에서 Node.js의 설명서를 확인해 보십시오. 또한 제가 특별히 도움이 된다고 생각한 훌륭한 기사가 여기에 실렸습니다.
프로젝트를 시작하려면 프로젝트를 저장할 폴더로 이동하여 명령을 실행합니다.
npm init
이렇게 하면 패키지가 초기화됩니다.프로젝트의 json 파일입니다. 기본적으로, 소포입니다.json 파일은 종속성, 버전 번호 및 작성자 정보를 포함하여 프로젝트에 대한 모든 중요한 정보를 알려줍니다.
만약 당신이 패키지 에 대해 더 배우고 싶다면.json` 파일, 여기 설명서를 참조하십시오.
다음으로, 프레임워크와 의존성을 설치해야 합니다.
Express.js를 설치하려면 다음 명령을 사용합니다.
npm 설치 익스프레스 --저장
이 명령은 노드 패키지 관리자에게 프로젝트 폴더에 Express.js를 설치하고 패키지의 종속성 목록에 저장하라는 메시지를 표시합니다.json 파일
이 프로젝트에 사용할 다른 의존성은 5개뿐입니다. 각 제품은 동일한 방식으로 설치됩니다.
데이터베이스에 사용할 MongoDB를 설치하려면:
npm mongodb 설치 --저장
객체 모델을 만드는 데 사용할 Mongoose를 설치하려면:
npm 설치 몽구스 --save
프런트 엔드에 사용할 Pug를 설치하려면:
npm 설치 pug --저장
HTTP 요청을 구문 분석하는 데 사용할 미들웨어인 본문 분석기를 설치하려면 다음과 같이 하십시오.
npm 설치 본문 분석기 --저장
마지막으로 비동기식 자바스크립트 작업을 도와주는 모듈인 async를 설치하려면:
npm 설치 비동기 --저장
그게 다예요. 우리의 패키지 입니다.이제 json` 파일이 설정되었고 우리의 종속성이 설치되었습니다.
이제 이 프로젝트를 시작할 때입니다.
폴더 구조 설정
우리는 우리의 프로젝트를 6개의 기본 폴더로 나눌 것이다. npm init 명령으로 프로젝트를 초기화하면 Node.js는 자동으로 /node_modules 폴더와 package 를 생성합니다."json 파일이기 때문에 설치는 걱정할 필요가 없습니다.
나머지 5개 폴더는 우리가 직접 만들겠습니다. 튜토리얼 전체에 걸쳐 각 폴더를 참조합니다. 현재 폴더 구조는 다음과 같습니다.
서버 구축
우리의 첫 번째 단계는 서버를 설치하는 것입니다.
이를 위해 먼저 프로젝트 루트에 app.js라는 파일을 만듭니다. app.js 파일은 우리의 모든 서버측 코드를 담고 전체 프로젝트의 메인 파일 역할을 할 것입니다.
app.js 안에는 required() 기능을 사용하여 Express.js를 앱에 연결할 것입니다. 그런 다음 app 이라는 Express.js 인스턴스를 만들겠습니다.
그런 다음 앱을 사용하여 서버를 시작하고 포트 3000에서 연결을 수신합니다.
이 때 터미널에서 다음 명령을 호출하여 서버를 실행할 수 있어야 합니다.
노드 app.js
모든 설정을 올바르게 했다면 단말기에 다음과 같은 메시지가 표시됩니다.
localhost에서 실행 중: 3000
데이터베이스 연결
다음 단계는 MongoDB 데이터베이스를 프로젝트에 연결하는 것입니다.
그렇게 하기 전에 컴퓨터에 MongoDB가 설치되어 있는지 확인하십시오.
다음 명령으로 설치한 MongoDB 버전을 확인할 수 있습니다.
mongod --v
이 튜토리얼은 몽고DB 버전 4.4.0 입니다. 아직 MongoDB가 설치되어 있지 않다면 홈브루를 사용하여 명령을 사용하여 설치할 수 있습니다.
수돗물을 우려내다 brew install [email protected]
이 두 가지 명령의 기능에 대한 자세한 설명이나 홈브류가 설치되어 있지 않다면 여기에서 MongoDB의 설명서를 확인해 보십시오.
일단 MongoDB를 설치하면, 데이터베이스 연결을 설정할 수 있는 몇 가지 다른 방법이 있습니다. 이 프로젝트를 위해, 우리는 몽구스를 통해 지역적으로 연결할 것입니다.
이를 위해 app.js 파일에 다음 코드를 추가하겠습니다.
여기, 위의 코드 조각에서, 우리가 하고 있는 것은 몽구스 패키지를 가져오는 것입니다. 그런 다음, 우리는 몽구스를 사용하여 27017번 포트에서 로컬로 실행되는 credits-tracker 라는 데이터베이스를 사용하여 MongoDB 서버에 접속합니다.
로컬 데이터베이스에 성공적으로 연결되면, 콘솔은 "몽구스를 사용하여 MongoDB에 성공적으로 연결되었습니다!"라는 메시지를 출력합니다.
이 모든 것이 어떻게 작동하는지 더 자세히 설명드릴 수 있습니다. 하지만 지금은 성공적으로 데이터베이스에 연결되었고 영구 데이터를 저장할 수 있습니다.
모델 제작
데이터베이스가 연결되면 몇 가지 모델을 구축해야 합니다.
프로젝트에 필요한 모델은 크레딧 모델 하나뿐입니다.
객체 모델링이라는 개념에 익숙하지 않은 사람이라면 누구나 Mongoose는 우리의 자바스크립트 코드에 있는 우리의 클래스와 오브젝트를 MongoDB 데이터베이스에 저장된 문서에 매핑할 수 있도록 도와주는 ODM(Object-Document Mapper)이다. 모델을 통해 데이터에 저장될 데이터 유형과 데이터 구성을 계획하는 방법을 정의할 수 있습니다.
다시 말씀드리지만, 더 많은 정보를 얻을 수 있습니다. 하지만 지금으로서는, 그 정도로 하겠습니다. 몽구스에 대해 더 읽고 싶으시다면, 여기서 몽구스의 설명서를 확인해 보세요.
우리는 /models 폴더 안에 credit-model.js 라는 파일을 만들 것이다. 파일의 코드는 다음과 같습니다.
이것은 모델이 얻을 수 있는 가장 단순한 것입니다.
몽구스 라는 명령을 사용합니다.스키마는 신용 모델을 정의합니다. 우리 모델은 name, credits, classId의 세 가지 속성만 가지고 있다. 각 속성에 대해 각 속성이 저장해야 하는 데이터 유형도 지정합니다. name과 classId는 String 데이터 형식을 사용하고 credits는 `Number 데이터 형식을 사용합니다.
이 몽구스 모델은 우리가 데이터를 정리하고 개념화하는 것을 돕는다.
경로 정의
다음으로, 데이터베이스를 연결하고 모델을 정의하여 필요한 경로를 정의하겠습니다.
라우팅 개념에 익숙하지 않은 이 튜토리얼을 보시게 되면 기본적으로 우리가 여기서 하는 모든 것은 프로젝트의 어떤 측면을 다룰지 정의하는 것입니다. 사용자가 특정 URL을 검색하거나 탐색할 때 라우터는 특정 URL에 대한 요청을 처리할 기능을 결정합니다.
이 프로젝트에 필요한 경로는 GET(홈페이지 표시) 요청, 포스트(POST) 요청(새 클래스 추가 양식 처리) 요청, 포스트(POST) 요청(클래스 삭제 기능 처리) 등 3개뿐이다.
이 세 경로는 웹 앱의 모든 사용자 상호 작용을 처리합니다. 우리는 /routes 폴더 안에 저장될 routes.js 라는 파일에 세 경로를 모두 정의할 것입니다. 파일에는 다음 코드가 포함됩니다.
HTTP 요청이 올바른 기능으로 처리되도록 하려면 이 정도만 하면 됩니다. 이 파일은 서버에 GET 요청을 제출하면 / display_credits` 기능을 호출합니다. POST 요청도 같은 패턴으로 처리한다.
이때 이 코드를 실행하면 오류가 발생합니다. HTTP 요청을 처리하기 위해 이러한 기능을 아직 정의하지 않았기 때문입니다.
지금 만들겠습니다.
컨트롤러 구축
경로를 작동시키기 위해 이제 /컨트롤러 폴더에 있는 credit-controller.js 라는 컨트롤러 파일에 컨트롤러 기능을 구축하겠습니다.
컨트롤러는 기본적으로 특정 URL에 대한 HTTP 요청을 처리하는 기능일 뿐입니다. 앞에서 설명한 것처럼, 경로는 어떤 컨트롤러가 어떤 요청을 처리해야 하는지 정의합니다. 그런 다음 컨트롤러가 나머지 작업을 수행합니다.
이 프로젝트를 위해서는 3개의 컨트롤러가 필요합니다. 하나는 모든 크레딧을 표시하고 하나는 새 크레딧을 추가하고 다른 하나는 크레딧을 삭제합니다.
먼저 모든 크레딧을 표시하는 컨트롤러입니다. 이 컨트롤러는 기존의 모든 크레딧을 데이터베이스에 조회하기만 하면 됩니다. Mongoose는 Model.find() 명령을 사용하여 이 작업을 매우 쉽게 수행할 수 있습니다. Model.find() 는 Mongoose가 제공하는 여러 기능 중 하나로, 다양한 파라미터에 따라 데이터베이스에서 특정 항목을 검색할 수 있습니다.
이러한 모든 함수는 요청한 모든 항목을 허용 가능한 형식으로 포함하는 쿼리 개체를 반환합니다. 몽구스가 제공한 쿼리 방법의 전체 목록을 여기에서 찾을 수 있습니다.
그러나 현재로선 Model.find() 메서드가 입력된 매개 변수와 일치하는 데이터베이스의 모든 문서를 반환한다는 것만 알아두면 됩니다. 아래 예에서와 같이 매개변수를 입력하지 않으면 데이터베이스의 모든 문서 목록이 반환됩니다. 프로젝트의 코드는 다음과 같습니다.
다음으로, 새로운 크레딧을 추가할 수 있는 컨트롤러를 구축하겠습니다. 다시, 몽구스는 이것을 쉽게 할 수 있게 해준다. 이름, 크레딧 수, classId 등 3가지 속성으로 새로운 크레딧 객체를 만들면 된다. 그런 다음 새로 만든 개체를 데이터베이스에 저장합니다. 우리는 이렇게 합니다.
마지막으로 크레딧을 삭제하려면 해당 ID를 기준으로 지정된 크레딧을 검색하는 컨트롤러가 필요합니다. 이를 찾기 위해 Mongoose 함수 Model.findById()를 사용합니다. 이 기능은 제공된 ID와 일치하는 문서를 찾는 Model.find()` 기능과 유사하게 작동합니다. 그런 다음, 일단 신용이 확보되면 데이터베이스에서 신용을 삭제하기만 하면 됩니다. 이에 대한 코드는 다음과 같습니다.
데이터베이스에서 문서를 삭제하는 방법에는 실제로 `Model.findByIdAndDelete() 방법을 포함하여 몇 가지 다른 방법이 있습니다. 이렇게 하면 실제로 우리가 직접 작성해야 하는 코드의 양을 줄이는 측면에서 좀 더 효율적일 수 있지만, 궁극적으로는 가장 합리적인 방법을 사용해야 합니다.
UI 구축
다음으로 사용자에게 데이터를 표시하는 UI를 구축하겠습니다. 이 프로젝트의 UI는 매우 간단합니다.
몇 가지 일만 할 수 있을 거예요. 과정 추가 양식을 표시하고, 남은 총 과정 수와 학점을 집계한 후, 하단에 입력된 과정 목록을 표시하는 것이 전부입니다.
이 UI를 확장할 수 있는 방법은 여러 가지가 있지만 이 튜토리얼에서는 최대한 간단하게 유지하겠습니다.
UI는 퍼그 파일 4개, 간단한 스타일시트 및 글꼴 멋진 아이콘으로 구성됩니다. 앞서 언급했듯이 pug 는 UI를 렌더링하기 위한 템플릿 엔진입니다. 템플릿 엔진이나 퍼그에 대한 개념을 잘 모르는 경우라면, 여기에서 퍼그의 설명서를 확인해 보십시오.
프로젝트용 템플릿 엔진을 사용하면 HTML 마크업이 포함된 동일한 파일에서 직접 자바스크립트 연산을 수행할 수 있다는 것이 주된 장점입니다. 이 방법은 편리하지만, 프로젝트가 너무 간단해서 원한다면 UI를 이전 HTML로 작성할 수도 있습니다.
프로젝트에 과중한 경우 멋진 타사 라이브러리를 사용할 필요가 없다는 점을 강조하기 위해 이 점에 유의해야 합니다. 일반적인 좋은 프로그래밍 연습에 따라, 가능한 한 단순하게 유지하는 것이 보통 좋은 생각이다.
이 말처럼, 우리는 퍼그 를 계속할 것이다, 단지 이 템플릿 엔진을 사용하는 연습일 뿐일 뿐이다.
UI의 기본 파일은 index.pug 파일이 되며, 이 파일은 /views 폴더에 배치될 것입니다. 또한 style.css라는 스타일시트를 만들어 /public/css 폴더에 넣을 것입니다. 전체 index.pug 파일은 다음과 같습니다.
위의 코드가 완전히 미디엄에 표시되지 않는 경우, index.pug 파일 전체를 여기에서 찾을 수 있습니다. index.pug 파일은 대부분 단순하다. 파일은 주로 제목, 크레딧 입력 양식, 단락 설명 및 크레딧 총액 및 크레딧 목록이 표시되는 주 섹션으로 구성됩니다. HTML 파일 헤드에는 스타일시트에 대한 링크인 style.css와 글꼴이 멋진 파일에 대한 링크도 포함되어 있습니다.
HTML의 기본 사항에 익숙하다면 퍼그 파일을 쉽게 번역할 수 있습니다. 가장 주목해야 할 대목은 포함으로 시작하는 대사다. 여기에는 다른 퍼그 파일의 내용을 코드에 삽입할 수 있는 문구가 포함됩니다.
첫 번째로 포함된 파일은 credit_totals 이다.pug 파일입니다. 코드에서 볼 수 있듯이 이 파일은 다른 두 개의 포함된 파일과 함께 /view/credits` 폴더에 저장됩니다. 전체 파일은 다음과 같습니다.
다음은 크레딧 표시입니다.파일 퍼그:
마지막으로 delete_credit 입니다.pug` 파일:
여기서 delete_credit 에 주목하십시오.pug 파일에는 숨겨진 입력과 버튼이 있는 양식이 포함되어 있습니다. 양식은 버튼을 클릭할 때마다 /delete` 엔드포인트로 HTTP 삭제 요청을 보내는 것입니다. 삭제 요청은 앞에서 논의한 컨트롤러에서 처리됩니다.
마지막으로 퍼그 템플릿 파일과 함께 다음과 같은 간단한 style.css 파일을 만들 것입니다.
본 튜토리얼의 주요 초점은 Node.js 애플리케이션을 구축하는 것이기 때문에 스타일시트에 대해서는 자세히 설명하지 않을 것입니다. 복사하거나 붙여넣기만 하면 됩니다.
스타일시트와 함께 글꼴 멋진 라이브러리의 로컬 사본을 다운로드하여 /글꼴 폴더에 삽입해야 합니다. 글꼴 대박의 로컬 버전을 다운로드하려면 다운로드 페이지로 이동하여 바탕 화면 옵션용 다운로드 중 하나를 선택하십시오. 다시 한 번 말씀드리지만, 이 부분에 대해서는 자세히 설명하지 않겠습니다. index.pug 파일의 font-awesome.min.css 파일에 대한 올바른 링크를 제공해야 합니다.
이제 퍼그 파일 4개와 css 파일 2개로 전체 UI를 구축해야 합니다.
모든 것을 하나로 묶기
이제 UI와 모든 올바른 기능을 갖추었으므로 웹 앱이 완성되었습니다!
이제 우리는 대학 수업에 들어갈 수 있는 간단한 어플리케이션을 가지고 있고, 얼마나 많은 수업과 학점이 남았는지를 집계한다.
최종 폴더 구조는 다음과 같습니다.
최종 프로젝트 자체는 다음과 같습니다.
읽어주셔서 감사합니다. 여기서 전체 소스 코드를 찾을 수 있습니다. 이와 같은 튜토리얼에 더 관심이 있으시다면 다른 글을 확인해 보십시오.
from http://sup-poster.tistory.com/23 by ccl(A) rewrite - 2021-10-10 05:27:49