'분류 전체보기' 카테고리의 글 목록 (9 Page)

분류 전체보기

VS코드 - 자동줄바꿈 켜기 2019.03.20
NODE JS - PUG 설치와 사용법 2019.03.15
Node JS - middleware , express 의 url 추가맵핑 , 뷰템플릿 변수설정 2019.03.15
NODE JS - babel 란? (babel 설치방법) 2019.03.15
NODE JS - node js , express.js 란? 2019.03.15

VS코드 - 자동줄바꿈 켜기

2019. 3. 20. 10:35

◎ VS코드 - 자동줄바꿈 켜기

▼ 내용

셋팅 켜기 : File > Preferences > Settings

여기 사용자 정의셋팅에서

"editor.wordWrap": "on",

자동줄바꿈 단축키로는 Ctrl + , 입니다. (컨트롤+ 쉼표)

저작자표시 비영리 변경금지

NODE JS - PUG 설치와 사용법

2019. 3. 15. 17:38

◎ Template Engine PUG의 장점

▼ 내용

Pug는 요즘 가장 핫한 Node Express Template Engine입니다.

HTML을 간단하게 표현해서 가독성이 좋다.

마크업 문법보다 코드량이 적어 생산성이 좋아진다.

JS 연산 결과를 쉽게 보여줄 수 있다.

정적인 부분과 동적인 부분을 따로 할 수 있다.

타 Express Engine보다 Google Trend 수치가 높다.

Pug는 Jade였다

Pug는 기존에 Jade라는 이름을 가지고 있었습니다. 하지만 이미 상표권이 있는 이름이였기 때문에 Pug라는 이름으로 바꾸게 됩니다.

◎ PUG 라이브러리 설치

▼ 내용

PUG 는 HTML 을 PUG 문법으로 작성하면 HTML 로 바꿔주는 기능을 한다.

pug 는 express의 패키지 view engine이다.

pug는 html파일들을 이쁘게 가공해준다.

pug는 템플릿 언어

npm install pug

설치가 끝나면 views 라는 폴더를 만들고 안에 파일은 .pug 라는 확장자를 붙인다

그이후 app.js 에 아래와같이

app.set('view engine' , 'pug');

그리고 라우터 응답받는곳에 아래처럼 적으면 /home 경로는 home.pug 로 연결된다

const home = (req,res) => res.render('Home');
//const home = (req,res) => res.send('Home');

만약 views/ 폴더가아닌 다른 폴더에서 view템플릿을 찾을려면

app.set('views','바꿀폴더명'); 
으로 정의 해줘야한다

app.set(view engine 은 view의 확장자

app.set(views 은 view의 폴더명

◎ pug의 문법

▼HTML 작성법

아래 소스와 같이

탭을 하면 안에 자식 노드가되고

탭을 안하면 동등한 형제 노드가 된다.

닫는 태그는 따로 할필요없이 다음 태그를 적으면 알아서 된다.

//main.pug
doctype html
html
    head
        title Wetube
    body
        main
            block content
        footer
            span &copy: WeTube

▼ ( extends : 상속후 컨텐츠 추가)

pug는 레이아웃으로 짜둔 .pug 를 extends 파일경로 써줘서

레이아웃 .pug 들을 상속? 같은걸 받을수 있다.

위에서 작성한 레이아웃을 상속받아서 block content 의 부분을 p Hello 로 바꿔준 것.

만약 extends 를 하는 파일에 block 을 적어주지 않으면 에러가난다

//home.pug
extends layouts/main
block content
    p Hello!!

▼ PARTIALS ( include : spring tiles 같은 것)

이것도 spring tiles 와 비슷하다 다른 파일을 이 html 안에 갖고오는것이다.

extends 와 차이점이라면 extends는 상속받아서 block 부분을 새로 작성하는것이고

include는 그냥 있는 그대로 껴넣는다

include ../partials/footer

태그의 class 이름 추가 방법

PUG 는 HTML 코드로 작성해도 상관없다

PUG의 문법으로 할려면 HTML 태그의 속성들은 () 안에 넣어야하고 각 콤마를 넣어야한다

link.babo_blo (rel="stylesheet", href="../babo")
<link rel="stylesheet" href="../babo class="babo_blo">

.footer__icon
<div class="footer__icon"></div>

javascript 작성법

#{ } 안에 javascript 문법을 적으면된다.

실행시키고 개발자도구로보면 결과값만 나온다.

#{new Date().getFullYear()} //현재 년도 구하는 javascript 코드

저작자표시 비영리 변경금지

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - 모듈이란? , module.export 와 exports의 차이 (1)	2019.03.20
NODE JS - File System 파일 생성,삭제,수정,동기와 비동기 (0)	2019.03.20
Node JS - middleware , express 의 url 추가맵핑 , 뷰템플릿 변수설정 (0)	2019.03.15
NODE JS - babel 란? (babel 설치방법) (0)	2019.03.15
NODE JS - node js , express.js 란? (0)	2019.03.15

Node JS - middleware , express 의 url 추가맵핑 , 뷰템플릿 변수설정

2019. 3. 15. 17:36

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(함수명) 을 써주면 어느곳에서나 #{변수명} 을 적어주면 된다.

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

저작자표시 비영리 변경금지

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - File System 파일 생성,삭제,수정,동기와 비동기 (0)	2019.03.20
NODE JS - PUG 설치와 사용법 (0)	2019.03.15
NODE JS - babel 란? (babel 설치방법) (0)	2019.03.15
NODE JS - node js , express.js 란? (0)	2019.03.15
NODE JS - NODE JS 설치 , NPM 설치 ,PARCEL 설치 (0)	2019.03.04

NODE JS - babel 란? (babel 설치방법)

2019. 3. 15. 17:33

◎ 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 로 바꾼다

저작자표시 비영리 변경금지

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - File System 파일 생성,삭제,수정,동기와 비동기 (0)	2019.03.20
NODE JS - PUG 설치와 사용법 (0)	2019.03.15
Node JS - middleware , express 의 url 추가맵핑 , 뷰템플릿 변수설정 (0)	2019.03.15
NODE JS - node js , express.js 란? (0)	2019.03.15
NODE JS - NODE JS 설치 , NPM 설치 ,PARCEL 설치 (0)	2019.03.04

NODE JS - node js , express.js 란?

2019. 3. 15. 17:30

◎ NODE JS 란?

▼ 내용

back-end (서버기술) 로

프론트가 아닌 백엔드에서도 javascript기술을 쓸수 있게 고안된 언어.

NPM : Node Package Manager

◎ Express.js

▼ 내용

Node.js 의 프레임워크다

java 의 스프링 php 의 라라벨 파이썬의 django 같은 프레임워크다.

express.js 의 경우 github의 마지막 커밋이 2달전 4년전 1년전이다.

그만큼 준비가 다되있고 완벽,완성에 가까운 프레임 워크라는거다.

가장 많이 쓰이는 프레임워크다.

◎ express js 설치방법

▼ 내용

npm install express
// install 하고나서
npm init -y
//하면 pakage.json 이자동으로 생김

//pakage.jsn
{
  "name": "wetube",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "express": "^4.16.4"
  },
  "devDependencies": {},
  "scripts": {
    "start": "index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
//이렇게 설정해주고 나면 npm run start 할때마다 start 기준으로 파일이 실행됨

◎ express 라우팅 (서버 실행을 위한 index.js 정의)

▼ 내용

라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말합니다. 라우팅에 대한 소개는 기본 라우팅을 참조하십시오.

( 링크 : https://expressjs.com/ko/guide/routing.html )

requIre : module.exports를 리턴한다 (함수로 모듈을 가지고 온다.)

다음 코드는 매우 기본적인 라우트의 예입니다.

const express = require('express');  
//requre 는 module.exports를 리턴한다 (함수로 모듈을 가지고 온다.)
const app = express();
const PORT = 4000; // PORT 번호

const handlehome = (req,res) => {
  console.log(req);
  console.log("핸들홈");
  res.send("Hello From Home");
}

const handleProfile = (req,res) => {
  res.send("You are profile");
}

app.get('/',handlehome); //root로 접속한 경로에 response로 helloworld를 받아서 출력해준다
app.get('/profile',handleProfile); //경로 http://localhost:4000/profile

console.log('시작');

const handleListening = () =>{ //애로우 함수로 펑션을 만들엇다.
    console.log(`Listening on : http://localhost:${PORT}`);
}
app.listen(PORT,handleListening); //port번호 설정
//node 실행 방법 node index.js

express 를 불러와서 app 변수에 담아서 port번호달고,url 경로를 맵핑시켜주는게 다다.

위 소스처럼 express는 url 경로를 쉽게 해주고

url 경로마다 호출해서 보여줄 함수들을 쉽게 정리할수 있다.

REQUIRE, Exports , module.exports 내용정리 링크

https://medium.com/@flsqja12_33844/require-exports-module-exports-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-1d024ec5aca3

require(), exports, module.exports 공식문서로 이해하기 – Chullin – Medium

medium.com

◎ node.js 로 만들어진 대기업 사이트

▼ 내용

paypal uber netflix

-> node js로 만들어진 웹사이트

-> 데이터를 다루기 때문에 node js 를 사용

netflix

-> 엄청 많은 언어를 사용했을 것으로 추정 !

-> 기본 메인 언어는 하나 있겠지만, 여러 언어를 사용

paypal

-> 자바 : 은행과 연결

-> 등등 다른 언어들...

facebook

-> 수백개의 언어로 만들어졌다.

-> 채팅 : javascript(websocket)

==node js==

많은 테스트가 있었고, 많은 사람들이 사용하고 , 많은 회사에서 사용한다.

cool~~~~

수없이 검증되었고 많은 곳에서 사용 되니 걱정말고 공부하자~

저작자표시 비영리 변경금지

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - File System 파일 생성,삭제,수정,동기와 비동기 (0)	2019.03.20
NODE JS - PUG 설치와 사용법 (0)	2019.03.15
Node JS - middleware , express 의 url 추가맵핑 , 뷰템플릿 변수설정 (0)	2019.03.15
NODE JS - babel 란? (babel 설치방법) (0)	2019.03.15
NODE JS - NODE JS 설치 , NPM 설치 ,PARCEL 설치 (0)	2019.03.04

PREV 1 ···6 7 8 9 10 11 12 ···24 NEXT

아빠개발자의 노트