Node.js 정석 설정 과 프로그래밍

설정 과 프로젝트 등 개발환경 설치

직업이 프로그래머라고 작성하는 사람이 블로그에 프로그램 관련 글이 하나도 없어서 겸사겸사 이번 프로젝트에서 사용하게될 Node.js에 대해서 알아보고자 한다.

 

1. Node.js란

구글 크롬의 자바스크립트 엔진 (V8Engine)에 기반해 만들어진 서버 사이드 플랫폼이다.

 

2. 특징

- 비동기 I/O 처리, 이벤트 위주

- 빠른 속도

- 단일 쓰레드, 뛰어난 확장성

- 노 버퍼링

 

3. 설치 및 개발환경 설정

1) Node.js 설치

https://nodejs.org/ko/접속 -> 버전확인 및 설치

 

2) 이클립스에 Node.js 플러그인 설치

-이클립스 실행 > window-Perspective > Open Perspective에서 Node플러그인이 설치되어 있는지 확인

 

3) Node 플러그인이 없을 경우

-이클립스 실행 > help > Eclipse Marketplace에서 node로 검색 후 Node eclipse를 설치 (경고창이 나오면 ok버튼으로 진행)

 

4)Node 플러그인 설치완료

-이클립스 재실행 > window > Perspective > Open Perspective 에서 Node플러그인 설치 확인

 

4.프로젝트 생성

1)프로젝트 생성 전 환경설정 확인
window –> preperences -> Nodeclipse에서 Node.js path의 경로가 맞는지 확인!

 

2)환경설정 확인 후
Node Perspective 모드 실행 후 New – Node.js Project클릭

 

3)샘플 프로젝트 이름 작성 및 Template 선택 후 생성완료

 

4)생성된 hello-world-server.js파일 선택 후 Run As의 Node.js Applicatin 실행 -> 콘솔창에 Server running at http://ip:포트번호/가 뜨면 완료

 

5)인터넷 브라우저에서 확인

 

5.npm을 이용한 모듈 설치

1) Java의 maven과 비슷한 개념 - node.js를 설치할 때 자동으로 제공

(Chrome V8 JavaScript엔진으로 빌드된 JavaScript런타임)

 

2) 기본적으로 명령 프롬프트(cmd)에서 실행

 

3) 설치방법

3-1.cmd창에서 node.js 프로젝트 workspace로 이동 (예시:D:\nodejsProject\nodeWorkspace\test1)

3-2.npm install 외부 모듈명 --save 예)npm install express --save [로컬설치]

예)npm uninstall express [삭제]

예)npm install express --g [전역모듈 설치]

3-3.설치된 모듈 폴더 확인:프로젝트 workspace의 node_modules폴더 확인

 

-추가확인사항-

npm 인스톨 시 --save옵션 추가 시 package.json에 dependencies 항목에

해당 모듈 정보를 포함하고 있음.

(추가가 안되어 있다면 직접등록하여 사용하거나(설치 시 모듈버전 확인) 명령어를 반복실행하여 package.json에 작성될 때까지 시도합니다.)

 

4) 설치한 모듈에 대한 기본 설명

4-1.express(=전자정부프레임워크와 비슷한 기능)

설명)웹서버(express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공 하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크)

4-2.request

설명)서버에서 외부 api를 호출하는 경우 사용

4-3.body-parser(=form태그와 비슷한 기능)

설명)클라이언트 POST request data의 body로부터 파라미터 추출

(body-parser 미들웨어는 클라이언트가 post 방식으로 요청할 때 본문 영역에 들어있는 요청 파라미터들을 파싱 하여 요청 객체의 body속성에 넣어줍니다.)

4-4.mysql(=DB)

설명)데이터베이스

4-5.ejs(=jsp화면과 같은 기능)

설명)html 템플릿 엔진 (서버에서 가져온 데이터를 html로 변환해서 사용하기 위함)

 

6. express 서버 설정 및 기본구조

1)웹개발을 하는데 필요한 기능을 제공하는 프레임워크!

 

2)주요기능

2-1.HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.

2-2.템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합 (integrate)한다.

2-3.접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다.

2-4.핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.

 

3)express모듈 설치 -> node_modules폴더가 생성 -> package.json에 dependencies 확인

 

4)express 기본 폴더(파일) 구조

/conf, /public, /routes, /views, web.js(app.js), package.json 기본 6가지로 구성 (폴더명은 임의로 지정가능)

 

5)웹개발 관련 폴더들의 기본 설명

5-1.conf폴더

설명)DB 연결정보, API 키값 등 환경변수 정보 저장

5-2.public폴더

설명)정적 파일을 위한 폴더로서 자바스크립트 파일, 이미지 파일, CSS 등을 포함합 니다. 웹URL의 루트폴더로 생각하시면 됩니다.(js, css폴더 생성)

5-3.routes폴더(java의 Controller역할!)

설명)라우팅 리소스 별로 모듈을 만들어 라우팅 로직을 구현합니다.

5-4.views폴더(java의 webapp\WEB-INF\jsp역할!)

설명)request 요청에 대한 로직을 처리한 후 클라이언트에 응답을 보낼 때 html 코드로 변환해서 반환하는 파일을 정의한 폴더입니다.

해당 블로그 설명에서는 ejs템플릿을 사용합니다.

5-5.web.js(app.js)파일

설명)express 설정파일이 담겨있는 파일입니다.

5-6.package.json파일

설명) 프로그램 이름, 버전, 필요한 모듈 등 노드 프로그램의 정보를 기술합니다. (npm은 이 정보를 참고하여 필요한 모듈을 관리)

 

7. express를 이용한 화면 띄우기

1) 화면 띄우는 순서

1-1.web.js(app.js)파일을 작성 (필요한 모듈 선언, 서버포트, 서버, 라우팅 모듈, 라우팅 모듈 매핑)

1-2./routes/index.js 라우팅 파일 작성

1-3.위 2개의 파일 작성 후 web.js파일에서 오른쪽 클릭 후 Run As – Node.js Application을 실행 후 인터넷 브라우저에서 확인

 

7. ejs를 이용한 데이터 사용설정

 

1)자바스크립트로 HTML 마크업을 생성할 수 있는 간단한 템플릿 언어입니다. (java개발자라면 익숙한 JSP와 동일한 역할)

Node.js 서버로부터 가져온 데이터를 html을 생성할 때 바로 사용할 수 있다.

 

2)web.js에 ejs를 사용하기 위해 내용추가

 

3)clubList.js 에 send()함수를 render()함수로 교체 (render( 'ejs파일 경로', 'json 형태 데이터');로 활용)

 

4)views/club 폴더에 clubList.ejs파일 생성

 

5)실제예시

 

6) include를 활용한 ejs파일 관리

6-1.<%include 'include할 ejs파일 경로/이름'%>로 설정 => tiles-def와 비슷한 성격

 

6-2.경로 확인을 위한 폴더구성 확인

 

6-3.include된 ejs파일들도 서버에서 넘어온 데이터를 사용 가능

 

8. DB연결 및 SQL결과 데이터 활용 방법

1) DB 접속정보 설정

1-1.conf폴더 아래 접속정보가 담긴 파일을 생성

 

1-2.파일의 상세내용

 

1-3.dbconnection을 호출하는 routes의 .js파일 설정

 

1-4.sql실행결과 데이터를 사용하는 ejs화면 파일

 

2)기본적으로 routes폴더에 있는 *.js파일에 쿼리문을 작성한다.

 

3)기본구조는 다음과 같다.

 

4)select sql쿼리문 실행 -> 결과값을 배열[객체]의 형태로 return;해준다.

4-1.return받은 결과에 로그를 보고 싶을 때 예시

 

5)insert/update/delete sql쿼리문 실행

5-1.쿼리문 실행 및 후처리 관련 내용

5-2.insert쿼리문 실행 후 생성된 Id값 활용법

5-3.쿼리문 디버깅 확인하는법

 

 

9. 예제

1)파라미터 1개 자동 매핑방법

2)파라미터 2개 이상 자동 매핑방법(배열 형태로 추가)

 2-1.select쿼리문

 2-2.insert쿼리문

 2-3.insert쿼리문2

 

3)다중 update쿼리문 예제

 

4)다중 select쿼리문 예제

 

5)한번에 여러 파라미터를 매핑해서 다중 쿼리를 처리하는 예제(insert쿼리)

 

 

10. 참고 사이트 목록

 

1.Node.js설치 사이트

=> https://nodejs.org/ko/

2.설치 및 개발환경 설정 및 Node.js 프로젝트 생성

=> https://junspapa-itdev.tistory.com/5?category=781922

3.npm을 이용한 모듈설치

=> https://junspapa-itdev.tistory.com/6?category=781922

4.express 서버 설정 및 기본구조 및 화면 띄우기

=> https://junspapa-itdev.tistory.com/7?category=781922

5.ejs를 이용한 데이터 사용설정

=> https://junspapa-itdev.tistory.com/2?category=781922

6.클라이언트-서버간 데이터(파라미터) 전송 방법과 REST방식 URL 설계

=> https://junspapa-itdev.tistory.com/8?category=781922

7. DB연결 및 SQL결과 데이터 활용방법

=> https://junspapa-itdev.tistory.com/9?category=781922 

https://junspapa-itdev.tistory.com/10?category=781922

8.exprees공식 사이트(서버&프레임워크)

=> https://expressjs.com/ko/

9.NPM공식 사이트(모듈)

=> http://npmjs.org

10.함수참고 사이트(ejs)

=> https://ejs.co/

11.body-parser 와 get/post통신 관련 사이트

=> https://yahohococo.tistory.com/42

13.개발시 이클립스에서 ejs파일 가독성을 높이기 위한 환경설정 (개발할 때 jsp파일과 같이 구성)

=> https://junspapa-itdev.tistory.com/21?category=781922

14.PostgreSQL연동방법

=> https://kentakang.com/136(구글에서 “node.js와 PostgreSQL 연동” 검색)