반응형

◎ 모듈이란?

▼ 내용

모듈이란 관련된 객체들의 집합소.

어떠한 기능을 수행하기 위해 함수 또는 객체들을 만들어 놨으면.

그걸 한 .js의 파일에 써놓기엔 가독성이나 유지보수가 좋지 않아서 관련 함수 또는 객체들을

.js파일별로 따로 모아놓은것들을 모듈이라고 생각하면 된다.


◎ module.exports

▼ 내용

module.exports의 모듈방법

test.js

var template = { a: 'a', b: 'b' } module.exports = template; //또는 module.exports = { a: 'a', b: 'b' }

abc.js

var template = require('test.js'); console.log(template.a); // a

test.js 처럼 2가지 경우로 module.export 를 사용하여 모듈화를 시킬수 있다.

그 모듈화 시킨걸 abc.js 처럼 가져오는 거다.


◎ exports

▼ 내용

module.exports의 모듈방법

test.js

var template = { a: 'a', b: 'b' } exports.foo = template; //또는 exports.foo = { a: 'a', b: 'b' }

abc.js

var template = require('test.js'); console.log(template.foo.a);//a

test.js 처럼 2가지 경우로 module.export 를 사용하여 모듈화를 시킬수 있다.

그 모듈화 시킨걸 abc.js 처럼 가져오는 거다.


◎ exports 와 module.exports 의 차이점

▼ 내용

일단 간단하게 소스로 설명하자면 exports와 module.exports의 차이점은

var module = { exports: {} }; var exports = module.exports; // your code return module.exports;

이렇게 되는것이다. 결국 exports객체와 module.exports객체는 동일하며

exports 가 module.exports객체를 call by reference 방식으로 바라보고 있으며, 최종적으로 리턴값은 module.exports 라는것이다.

위의 예제중에서 exports는 property 방식을 쓰고 module.exports는 그냥 바로 썻는데

그 이유는 exports를 바로 써버리면 module.exports의 call by reference 관계를 끊어버려서

exports라는 변수가 되버리기 때문이다.

결론

exports 는 property 방식으로 사용

module.exports 는 바로 사용가능

var template = { a: 'a', b: 'b'}; module.exports.foo = template; //(o) module.exports = template; //(o) module.exports = { a: 'a', b: 'b'} // (o) exports.foo = template; //(o) exports = template; //(x) exports = { a: 'a', b: 'b'} // (x)


반응형
반응형

File System 함수를 node js에 가져오는 방법은 require('fs'); 이다.

◎ 파일읽기

▼ 내용

var fs = require('fs'); fs.readFile('sample.txt','utf8',function(err,data){ console.log(data); }); //sample.txt 의 내용 출력

require('fs'); 는 node 모듈에 파일시스템을 가져온다는 의미이다.

fs.readFile 의 첫번쨰 인자는 읽을 파일경로 (현재실행 디렉토리 기준 path 입니다.)

두번째 인자는 문자 캐릭터 (생략시 헥사코드로 나옴 , 바이너리데이터)

세번쨰 인자로 콜백함수를 넣어줬습니다. data 가 읽은 파일의 데이터 입니다.


◎ 파일목록 가져오기

var fs = require('fs'); fs.readdir('./test',function(err,filelist){ console.log(filelist); }); //[ 'css3', 'file.js' ]

▼ 내용

fs 의 readdir 을 쓰면 파일 목록을 배열에 담아서 가져온다


◎ 파일 생성

var fs = require('fs'); fs.writeFile('파일경로/파일명','파일에들어갈내용',function(err){ if (err === null) { console.log('success'); } else { console.log('fail'); } });

▼ 내용

fs.writeFile 의 첫번째인자는 파일명 , 두번째 인자는 파일의 내용 , 세번째는 콜백함수 이다.

콜백함수엔 err을 인자로 줄수있으며 err은 에러가 낫을경우이다.


◎ 파일 이름 수정 , 파일 내용 수정

fs.rename(oldPath, newPath, callback)

▼ 내용

fs.rename(oldPath, newPath, callback)

fs.writeFile 의 첫번째인자는 파일명 , 두번째 인자는 파일의 내용 , 세번째는 콜백함수 이다.

콜백함수엔 err을 인자로 줄수있으며 err은 에러가 낫을경우이다.

예제)

fs.rename(`./data/${title_ori}`,`./data/${title}`,()=>{ //파일 이름 바꾸기 fs.writeFile('./data/'+title,'파일수정할내용','utf8',function(err){ // 파일 내용 수정 if (err ===undefined || err == null){ response.writeHead(302, {Location: `/?id=${title}`}); //요청한 주소로 리다이렉션 response.end(); } }); });

◎ 파일 삭제

fs.unlink(Path, callback)

▼ 내용

fs.unlink(Path, callback)

fs.unlink 의 첫번째인자는 파일경로+파일명, 두번째는 콜백함수 이다.

콜백함수엔 err을 인자로 줄수있으며 err은 에러가 낫을경우이다.

예제)

fs.unlink(`./data/${post.id}`,(err)=>{ console.log(post.id); response.writeHead(302, {Location: `/`}); //요청한 주소로 리다이렉션 response.end(); })

예제)

fs.rename(`./data/${title_ori}`,`./data/${title}`,()=>{ //파일 이름 바꾸기 fs.writeFile('./data/'+title,description,'utf8',function(err){ // 파일 내용 수정 if (err ===undefined || err == null){ response.writeHead(302, {Location: `/?id=${title}`}); //요청한 주소로 리다이렉션 response.end(); } }); });

◎ 동기와 비동기

▼ 내용

파일의 목록을 콘솔에 출력하고 파일의 내용을 콘솔에 출력하고 싶다.

fs.readFile(`data/${queryData.id}`,'utf8',function(err,description){ fs.readdir('./data',function(err,filelist){ console.log(filelist); }) console.log(description); })

위와 같이 작성하면 filelist 가 먼저고 그다음 파일 내용을 출력할것 같지만...

그렇지 않다 실상 출력을 해보면 파일 내용 먼저 출력되고 filelist가 출력이된다.

그 이유는 node js의 함수는 기본적으로 모두 비동기로 처리되기 때문이다.

그래서 위의 readFile 과 readdir 의 메소드들은 모두 비동기로 처리가됬다.

이걸 동기로 바꾸려면

fs.readFile(`data/${queryData.id}`,'utf8',function(err,description){ var filelist = fs.readdirSync('./data'); console.log(filelist); console.log(description); })

이렇게 바꿔야 한다.

node js 의 fs 함수같은경우 비동기 함수와 동기 함수를 모두 제공해준다

대부분 이름을 보면 동기함수 뒤에 Sync 를 붙혀서 제공된다.

단 동기함수같은경운 리턴값을 변수로 받아서 위와같이 작업을 해야한다.

자세한설명은 아래 링크를 참조

https://opentutorials.org/module/938/7373


반응형
반응형

middleware 란?

요청 url 의 response를 받기 전에

실행할 함수들? 그런걸

middleware 라고 한다.

java spring의 intecepter 와 똑같은 역할

◎ middleware 의 예제

▼ 내용

아래 소스 처럼 between hom 을 출력하는 함수를 하나 만들어주고

그걸 express의 라우팅 함수의 가운대 인자로 함수를 집어 넣고

함수의 next() 를 넣어주면 handlehome 의 요청 함수로 가기전에

betweenhome 을 실행 시킬수 있다.

이걸로 로그인정보, 파일다운로드 등등 중간에 인터셉터해서 사용할수있다.

안에 middleware는 많은 갯수제한없이 많이 넣을수 있다.

middleware 의 함수에 next() 를 넣어줘야 다음함수로 진행이된다 안넣으면 에러.

만약 middleware 에 next() 를 안넣고 res.send로 다른걸 받아서 연결을 끊을 수도 있다.

const app = express(); const betweenHome = (req,res,next) => { console.log("between hom") next(); }; const handlehome = (req,res) => res.send("Hello From Home"); } app.get('/',betweenHome,handlehome); //요청 url / 에 들어갈떄마다 betweenhome 함수가 실행된다 .

◎ middleware 의 또다른 예제

▼ 내용

middleware 는 app.get 또는 app.post의 인자로 넣어줄수도 있지만

app.use 로 .use 라는 메소드를 통해 모든 요청 url에 대하여 설정해줄수도 있습니다.

라우팅 메소드 전에 써줘야 그 라우팅에 대헤서만 작동하고

app.use 이전에 쓴 라우팅 메소드들에 대헤선 동작하지 않는다

app.get('/profile',handleProfile); app.use(betweenHome); app.get('/',handlehome); // 이럴 경우 /profile 로 들어온건 app.use 가 동작하지 않는다


◎ middleware 의 라이브러리1 (morgan)

▼ 내용

morgan 은 logging 할때 유용한 패키지 이다.

application 에서 발생하는 모든일을 logging (콘솔출력) 해준다

npm install morgan

설치후 사용방법은 app.use(morgan("")); 다

import morgan from "morgan"; app.use(morgan("tiny"))

morgan 의 인자로는 combined , common , dev , short , tiny 를 사용할수 있다.​

tiny : 접속종류(get/post) , http상태코드 , 로딩시간 을 알 수 있다. (ex GET /profile 304 - - 0.397 ms)

combined : 접속종류(get/post) , 브라우저 종류 , 접속날짜 등등

common : 접속날짜 , 접속종류 , 상태코드 등

dev : 상태코드 , 접속종류 , 로딩시간 등

short : 상태코드 접속종류 로딩시간 등





◎ middleware 의 라이브러리2 (helmet)

▼ 내용

node.js 앱의 보안에 도움이되는 라이브러리. 앱을 안전하게 해준다

nosniff , nocache , ieNoOpen , xssFilter 등등 을 지원해준다

설치법

npm install helmet

사용법

import helmet from "helmet"; app.use(helmet());

​기본적으로 해놓는것이 좋다.


◎ middleware 의 라이브러리3 (cookie parser)

▼ 내용

cookie 를 전달받아서 사용할 수 있도록 만들어주는 미들웨어

사용자 인증 같은 곳에서 쿠키를 검사할때 사용

설치법

npm install cookie-parser

사용법

import cookieParser from "cookie-parser";

​기본적으로 해놓는것이 좋다.


◎ middleware 의 라이브러리4 (body parser)

▼ 내용

사용자가 웹사이트로 전달하는 정보들을 검사하는 미들웨어 request 에서 form 이나 json 형태로 된 정보를 접근하는 미들웨어 cookie-parser 와 같이 작동해서 세션에 정보를 담을수 있다.

설치법

npm install body-parser

사용법

import bodyParser from "body-parser"; app.use(bodyParser.json()); 또는 app.use(bodyParser.urlencoded({extended:true})); //중첩객체허용 app.post('/create_process',(request,response) => { console.log(request.body); } //{ title: 'abcd', description: 'efgh' }

위처럼 app.use 를 설정하면 get,post로 들어온 request의 값들을 body 프로퍼티를 추가해 위처럼자동으로 객체화 시켜준다. 사용할땐 request.body를 쓰면된다.

▼ [extended 옵션]

extended 는 중첩된 객체표현을 허용할지 말지를 정하는 것이다. 객체 안에 객체를 파싱할 수 있게하려면 true. 내부적으로 true 를 하면 qs 모듈을 사용하고, false 면 query-string 모듈을 사용한다. 이 두 모듈간의 차이에서 중첩객체 파싱여부가 갈린다. querystring.parse는 object를 상속받지 않는다. 따라서 toString()와 hasOwnProperty() 등이 사용불가능해진다

express 자체에도 있어서 구지 설치할 필요는 없다. 아래는 express의 body parser 사용하는 방법

app.use (express.urlencoded ({extended : true})); app.use (express.json ());

◎ express 의 url 추가맵핑

▼ 내용

app.use로 중간에 인터셉터해서 함수를 실행할수 있다고 말했다.

이걸 이용해서 abc/index , abc/abcd , abc/correction 이렇게

url 앞에 맵핑하는법을 설명하겠다.

router.js

import express from "express"; export const userRouter = express.Router(); userRouter.get("/",(req,res) => res.send('user index')); userRouter.get("/edit",(req,res) => res.send('user edit')); userRouter.get("/password",(req,res) => res.send('user password'));

app.js

import { userRouter } from "./router"; app.use('/user',userRouter);

이렇게 import,export 로 모듈화시켜서 app.use 에 모듈을 집어 넣으면

모듈에 정의된 함수가 /user/* 이렇게 정의된대로 url 맵핑이 된다.

추가로 URL의 :URL 이렇게 적으면 :URL 은 변수 URL 로 인식한다 (express 에서)


◎ 뷰템플릿 글로벌변수

▼ 내용

app.use를 활용하여 .pug에 변수를 사용할수 있다.

즉 app.use에 할당된 함수의 지역변수를 뷰템플릿 어디서나 사용할수있도록 하기 위함이다.

설명은 너무기니 소스를 참고하면 된다

app.js

import { localsMiddleware } from "./middlewares"; app.use(localsMiddleware);

middlewares.js

export const localsMiddleware = (req,res,next) => { res.locals.siteName = "WeTube"; res.locals.routes.login = "/login"; next(); }

footer.pug

a(href=routes.login) Login span.footer__text #{siteName}

이렇게 middlewares.js의 req,res,next 를 받아서 함수로 작성하고

(함수안에 마지막엔 next(); 를 꼮써야 한다.

res.locals 는 express에서 지원해주는객체로 rex.locals.xxx <-- 여기에 변수명을 준다.

그리고 그 변수를 export 해준다음 app.js 에 import 해서

app.use(함수명) 을 써주면 어느곳에서나 #{변수명} 을 적어주면 된다.

태그의 속성 () 안에 있는 경우엔 =변수명 이렇게 쓰면된다



반응형
반응형



◎ babel 설치 방법

▼ 내용

npm install @babel/node


babel 설치 후 babel 추가 설정 다운로드 방법

npm install @babel/preset-env npm install @babel/core

설치 후 node 동작할 메인 폴더에 .babelrc 를 추가 하고 아래 소스를 적어준다.

대충 babel의 preset-env 의 옵션을 사용하겠다는 듯이다.

{ "presets" : ["@babel/preset-env"] }


그리고 package.json 의 scripts 안에 start 도

node index.js 가 아닌 babel-node index.js로 변환

그후 작동되는지 테스트를 위해서 최신의 문법이 변환되나 확인

import express from "express"; //const express = require('express'); 위와 동일한 소스임

P.S 설치 하면 아래 그림처럼 pakage.json 의 dependencies의 버전 기입이 된다.

P.S 2 소스를 변경할때마다 일일이 재시작 할 필요없이 자동으로 재시작해주는 패키지 설치

npm install nodemon -D //-D 를 붙이면 pakage.json 에 알아서 붙혀준다 그이후 // scripts 의 start 를 nodemon --exec babel-node index.js --delay 2 로 바꾼다


반응형
반응형

◎ 1 .NODE JS 설치


▼ 1. 아래 URL 주소로 NODE JS 접속 해서 각 자기 OS 환경에 맞는 버전 다운

 


저는 윈도우 10 64비트라 저거 클릭후 다운받음.


node-v10.15.2-x64.z01

node-v10.15.2-x64.zip


파일 다운로드

혹시나 싶어서 분할압축으로 NODE JS 윈도우 10 X64비트용 올려놓음

그후 파일클릭후 실행하고 NEXT 만 누르면 자동으로 다운됨

(PATH설정도 자동 맞춰주는거같음)


◎ 2. NPM 설치


▼ NODE.JS 설치후 CMD에서 아래 명령어를 치면 NPM 설치 작업 완료.

npm install --global --production npm-windows-upgrade

요런 창이뜨더니 계쏙진행되면서

요런창이 뜨면 작업완료


◎ 3. parcel 설치


▼ npm 설치후 vs 코드에서 작업을 수행하였다

1. 터미널에 npm install -g parcel-bundler 입력

npm install -g parcel-bundler

이렇게 작업이 수행된다

작업 완료까지 2분 이렇게 뜨면 작업이 완료된다.




◎ 4. parcel 사용 (서버실행)


▼ parcel 을 사용하기 위하여 pacakage.json을 수정

1. vs 코드 터미널에서 npm init -y 명렁어를 친다.

2. package.json 파일이 생성된다.

3. package.json 파일에서 main 부분을 지우고

4. scripts 부분에 'start : 'parcel index.html' 로 수정

5. 터미널에 npm run start 입력

6. 터미널에 뜬 주소로 들어가면 index.html이 서버로 수행이된다. (제경우는 http://localhost:1234)

npm init -y

npm init -y 입력호 package.json 다운받아짐


package.json 내용 수정

npm run start 터미널 입력


반응형

+ Recent posts