JArchive 프로그래밍 일기

웹 애플리케이션 프레임워크 Express 설치하고 hello 를 출력해본다.

https://expressjs.com/ko/

감사하게도 많은 개발자 분들의 노력으로 한글 번역 페이지가 있다. 

간단한 설치 설명 

Node.js 가 설치된 상태에서,

내 프로젝트에 express 모듈을 사용할 것이기 때문에, 

내 프로젝트 디렉토리 경로에서 npm init 을 해서 npm 프로젝트로 만든다. 

npm install express --save 로 설치한다. 

hello world 예제 

require() 로 express 객체를 생성하고

app 이라는 객체를 반환 받는다. 

여기까지는 express 를 사용하기 위한 기본적인 코드다. 

그리고 주의할 것은 app.get() 함수로 구현하는 라우팅이다. 

사용자가 / 라는 URL 로 접속하면 welcom to home 을 출력한다. 

사용자가 /login 이라는 URL로 접속하면 login please라고 출력한다. 

URL에 따라 다른 페이지로 연결하는 라우팅이 중요하다. 

Node.js 서버를 만드는 코드를 해석해본다. 

https://nodejs.org/en/about/

노드제이에스가 뭔가요?

홈페이지에 가보면, 이벤트 기반 비동기식 자바스크립트 런타임 환경이라는 설명이 있다. 

아래의 샘플코드를 해석해보자. 

일단 http 모듈 객체로 서버를 만든다. 

hostname, post 라는 변수를 만들어서 주소와 포트를 저장한다. 

아래의 코드는 createServer를 쉽게 풀어 쓴 것이다. 위의 샘플 코드와 똑같이 동작한다.

함수의 파라미터로 콜백함수가 들어가 있다.

콜백함수는 이름이 없는 익명함수로 들어가 있다. function() 

http 모듈의 createServer() 함수로 server 객체를 만든다. 

콜백함수의 파라미터에는 요청을 뜻하는 request, 응답을 뜻하는 response가 있다. 

클라이언트의 요청이 오면, 어떤 동작을  할 지 CreateServer() 내부에 써주는 것이다. 

클라이언트에게 해줄 작업은 전부 res 객체가 제공하는 함수를 사용한다.  

server 객체의 listien() 함수는 다양한 이유로 오래걸릴 수 있는 작업이다. 

그래서 listion() 수립이 완료되면, 콜백 으로 console.log() 를 출력하게 해놨다. 

함수가 비동적으로 동작하는 것이 무엇인가에 대한 이해가 필요하다

3가지 일이 있다. 

빨래 설거지 청소 

동기 : 나 혼자서 한다.

빨래 1시간한다. 끝나고 나서 다음 일을 시작한다.

설거지 1시간, 청소 1시간을 순차적으로 끝낸다.

비동기 : 여럿에게 시킨다.(일들을 나눠준다.)

3명한테 동시에 시킨다.

빨래 시작. 그와 동시에 설거지 시작. 그와 동시에 청소 시작. 

File 읽는 함수를 예시로 동기, 비동기를 비교해보자. 

Node.js Documentation 에 접속한다.

File System 을 찾아서 파일 읽는 함수 원형을 보자. 

https://nodejs.org/dist/latest-v12.x/docs/api/fs.html

Node.js 의 철학은 비동기를 권장한다. 

그래서 readFile 처럼 'Sync'가 안붙은 함수는 기본적으로 비동기로 동작한다. 

근데 특별히 '동기'적으로 동작하고자 하면 함수명 뒤에 'Sync' 를 명시적으로 붙은 것을 쓰면 된다. 

일단, 권장하지 않는 '동기' 방식으로 Sync가 붙어있는 함수 readFileSync() 를 써보자. 

실행해 보면

순차적으로 1이 출력되고 

readFileSync로 읽은 파일 내용이 한줄 출력되고,

2가 출력된다. 

이어서 비동기 readFile() 함수를 console.log('2. async') 밑에 써보자. 

readFile() 함수의 인자에는 마지막에 익명의 콜백함수가 있다.

readFile()도 data.txt 똑같은 파일을 읽어서 출력한다. 

실행 결과를 보자. 

코드를 쓴 순서대로 1, 2, 3, 4 가 아니라 

1, 2, 4, 3 이 찍힌다. 

readFile 함수는 readFileSync 함수와는 달리, 비동기로 동작한다. 

비동기는 다른 애한테 일을 위임하는 것이다.

그 애가 일을 끝나면, function 콜백함수를 실행하여 나에게 "시키신 일 끝났어요." 하고 알려주는 구조다.

콘솔 결과를 보니 남한테 시킨 readFile 함수 작업보다 console.log('4') 가 빨리끝나는 작업인가보다. 

동기 비동기에는 장단점이 있다. 

만약에 readFileSync 가 10분씩 걸리는 일이라면, 1 하고나서 readFileSync 작업이 끝날 때 까지 기다리게 된다.

그러면 10분이 지나고 나서야 파일 내용 출력되고, 그 다음에야 2 가 찍힐 것이다. 

너무 오래걸리는 작업은 비동기로 걸어 두고 나머지 것들을 우선으로 처리하는게 좋다. 

underscore 모듈을 예시로 이용해보자. 

환경은 다음과 같습니다. 

Windows10

Node.js 12.16.1 LTS 

VScode

다른 사람이 만든 모듈을 사용하려고 한다. 

https://www.npmjs.com/package/underscore

1. 나의 패키지 초기화 

나의 프로젝트 디렉토리 자체도 일종의 '패키지' 이므로, (하나의 프로그램)

npm의 패키지로 지정을 해야 한다. 

npm 상에서 현재 디렉토리를 패키지로 지정하는 명령어를 실행해야 한다. 초기화. 

(나의 프로젝트 디렉토리 자체 를 이제 '나의 패키지'라고 한다.)

프로젝트 디렉토리에서 cmd를 켜고 npm init 을 입력한다. 

여러가지를 입력하라고 한다. 

대부분 Enter로 스킵해도 되지만, description은 입력해주는 것이 나중에도 편하다. 

entry point 나의 패키지가 시작하는 지점

git repository 깃에 올라갈 때의 깃 레포지토리 경로 (나중에 npm 홈페이지에 올릴때 이것을 써준다.)

끝나고 디렉토리를 확인해보면, 방금 입력한 내용들이 담긴 package.json 이 생성되어 있다. 

2. 패키지 설치

사용하려는 패키지 underscore 의 홈페이지를 방문해보자.

https://underscorejs.org/

홈페이지에 써있는 설치 명령대로 cmd를 열고 프로젝트 디렉토리의 경로에서 설치해보자.  

프로젝트 디렉토리를 확인해보면, 설치한 underscore 디렉토리를 확인할 수 있다. 

3. [중요] 패키지 의존성 확인

프로젝트 디렉토리에 있는 package.json을 다시 보자. 

(underscore 디렉토리 내의 package.json이 아니다.)

"dependencies" 아래의 내용은 무슨 의미일까?

나의 프로젝트가 underscore 모듈의 버전 1.9.2를 쓰겠다는 것을 명시하는 것이다.

의존성을 명시하는 것! underscore 모듈 쓸때는 꼭 이 버전 쓰겠다는 뜻이다. 

혹시 "dependencies" 가 없다면,

npm 으로 모듈 설치를 할 때 다음과 같이 --save 옵션을 붙여서 다시 설치하면 된다.

4. 모듈 사용해보기 

underscore는 자바스크립트가 제공하지 않는 배열 관련 기능들을 많이 제공한다. 

underscore 홈페이지에서 Arrays 관련 함수를 살펴보자.

배열에서 인덱스 0을 지정하면 첫번째 요소에 접근한다. 

underscore의 함수로 배열의 요소에 접근해보자.

underscore.js 파일을 만들고,  underscore의 객체는 _ 로 이름지었다. 

arr[0]은 _.first(arr) 와 같다. 

직관적인 함수 이름으로 배열 요소에 접근할 수 있는 것이다. 

마지막 요소는 last() 함수를 쓰면 된다. 

배열 인덱스로 접근한 것과 _를 이용한 결과가 똑같음을 확인했다. 

5. 더 알아보기 

npm  관련 설명이 친절하게 포스팅 되어 있다. 

https://poiemaweb.com/nodejs-npm

node.js 개발 시에 npm 활용 비중이 크므로 꾸준히 공부하면서 숙달하도록 하자. 

Ubuntu 환경에서 node.js를 설치해보자. 

sudo apt-get update
sudo apt-get install -y build-essential
sudo apt-get install curl

node.js 12.x 버전 설치를 위해 12라고 명시해준다. 
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt-get install -y nodejs

nodejs -v 명령으로 nodejs 버전을 확인하고
npm -v 명령으로 npm 버전을 확인해본다. 

uglify-js 모듈을 하나 설치해보자. 

https://www.npmjs.com/package/uglify-js

1. 코드 작성  

pretty.js 로 저장

2. npm 으로 uglify-js 설치

-g 옵션 : 패키지를 전역적으로 사용하기 위해, (Stand alone) 독립적인 앱으로 설치한다는 의미이다. 

3. uglify-js 사용해보기 

4. uglify-js  의 옵션 사용해보기

function hello(name) 이었는데, 파라미터명 name 이 l로 변환되었다. 

-m 옵션은 함수의 파라미터명도 짧게 줄여버린다. 

이외에도 기능에 영향이 없고 변경 가능한 것들을 전부 줄인다. 

-o 옵션은 uglifyjs 를 적용한 결과를 다른이름으로 저장한다. 

경로에 ugflified.js 파일을 열어봤다. 

오늘 한 일 

용역 요구사항과 2달간의 계획을 확인했다. 

구체적인 개발 환경, 협업 도구에 관한 얘기를 나눴다. 

알고리즘 스터디에서 이진수식트리를 같이 짰다. 

생각거리

손목터널증후군이 부쩍 늘어서 관리를 잘 해야겠다. 

프리웨어인데 너무 좋다. 

https://picpick.app/ko/