오늘은 인프런에서 Node.JS 강의를 시청하며 서버를 구현하고 아이피를 통해 접속해 보는 실습과 3개 정도의 NPM을 사용해보고 프로젝트 주제를 구체화하며 Wire Frame과 Flow Chart를 만들었습니다.
Node.JS
Uglified
처음으로 Uglified라는 NPM을 사용해봤습니다.
Uglified는
function hello(name) {
console.log('Hi, '+name);
}
hello('JaeKyun');이런 JS코드가 있을 때 코드의 들여쓰기를 없애고 한줄의 코드라 바꿔 줍니다
uglifyjs pretty.js 이런식으로 사용하게 되면
위에 코드가
function hello(name){console.log("Hi, "+name)}hello("JaeKyun");이런식으로 바뀌게 됩니다
그리고
uglifyjs pretty.js -m이런식으로 끝에 -m을 추가하면
function hello(l){console.log("Hi, "+l)}hello("JaeKyun");name이라는 이름의 변수가 l같은 한글자로 변경되게됩니다
uglifyjs pretty.js -o uglified.js -m이렇게 중간에 -o를 붙이게 되면 한줄로 바뀐 코드가 uglified.js라는 이름의 파일에 저장되게됩니다
underscore
다음으로 underscore라는 NPM를 써봤습니다
우선 underscore를 install할 때 명령어 뒤에 --save라는걸 붙여서 install을 하였습니다
처음에는 이게 뭔가 궁금해서 찾아보았습니다
--save 옵션은 npm을 사용하여 패키지를 설치할 때, 해당 패키지를 package.json 파일의 dependencies 항목에 자동으로 추가하는 기능을 제공합니다. 즉, --save 옵션을 사용하면 패키지를 설치하는 동시에 package.json 파일에 의존성 정보를 기록할 수 있습니다.
이 기능을 이해하기 위해서는 package.json 파일의 역할을 알아야 합니다. package.json 파일은 Node.js 프로젝트의 구성 파일로, 프로젝트에 대한 정보와 의존하는 패키지들을 명시하는데 사용됩니다. dependencies 항목은 프로젝트가 의존하는 외부 모듈의 목록을 정의하는 부분입니다.
예를 들어, Express.js 패키지를 설치하고 dependencies 항목에 추가해야 할 경우, 다음과 같이 --save 옵션을 사용합니다:
npm install express --save위의 명령을 실행하면 Express.js 패키지가 설치되고, package.json 파일의 dependencies 항목에 "express": "^4.17.1"과 같은 정보가 추가됩니다. 이후 다른 개발자들이 프로젝트를 클론한 후 npm install 명령을 실행하면 dependencies 항목에 명시된 패키지들이 자동으로 설치됩니다.
--save 옵션은 npm 버전 5.0.0부터는 기본적으로 동작하도록 변경되었습니다. 따라서 최신 버전의 npm을 사용하는 경우 --save 옵션을 명시하지 않아도 dependencies 항목에 자동으로 추가됩니다. 그러나 버전 5.0.0 이전의 npm을 사용하거나 명시적으로 의존성을 기록하고 싶을 경우에는 --save 옵션을 사용해야 합니다.
--save 옵션을 사용하여 패키지를 설치하면, 프로젝트의 의존성을 명확하게 표시하고, 다른 개발자나 배포 환경에서도 쉽게 의존하는 패키지들을 설치할 수 있습니다.
--save에 관해서는 여기까지 알아보고 Uderscore에 대해 말해보자면
let _ = require('underscore');
let arr = [3, 6, 9, 1, 12];이런 배열이 존제할때 원래 arr의 0번째 값을 꺼내오려면
console.log(arr[0])이런 식으로 인덱스 번호를 적어서 가져왔어야 합니다
underscore를 사용하면
console.log(_.first(arr));이런식으로 첫번 째 값을 가져올 수 있게 되었습니다
특히 마지막 값을 가져올 때
console.log(arr[arr.length-1]);-1의 인덱스를 가져와 마지막 값을 불러왔다면
console.log(_.last(arr));last를 사용해 간편하게 불러올 수 있게 되었습니다
express
마지막으로 express라는 NPM을 사용해봤습니다
Express.js는 Node.js 웹 애플리케이션을 개발하기 위한 빠르고 유연한 웹 프레임워크입니다
let express = require('express');
let app = express();
app.listen(3000, function(){
console.log('Conneted 3000 port!');
});루트 경로에 대한 GET 요청에 대한 처리를 정의하고, 3000번 포트에서 서버를 실행하는 간단한 Express.js 웹 서버를 만듭니다. 서버를 실행하면 콘솔에 "Connected 3000 port!"라는 메시지가 표시되며, 해당 포트에서 서버가 실행됩니다
이 파일을 실행하면
이런 화면을 확일할 수 있습니다
에러는 나지만 3000번 포트에 연결이 되어있기 때문에 그냥 파일을 찾을 수 없습니다가 아니라 에러화면이 나오게됩니다
app.get('/', function(req, res){
res.send('Hello home page');
});이 코드를 추가하게 되면 사용자가 루트 경로에 GET 요청을 보내면 서버는 'Hello home page'라는 문자열을 응답으로 전송합니다
그리고 실행을 해보면
이런 식으로 에러 메시지가 아니라 Hello home page라는 메시지가 출력되는 것을 확일할 수 있습니다
오늘 프로젝트의 아이디어 회의를 하며 만든 Wire Frame과 Flow Chart는 나중에 팀원분들의 허가를 받고 업로드 할 수 있다면 정리해서 업로드 해보겠습니다 ㅎㅎ
