Express 공식 문서를 참조했습니다.

1. Express?

: Node.js를 위한 빠르고 개방적인 웹 프레임워크, 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크

 

2. 설치

npm install express --save

npm install express

 

3. 기본 사용법

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

 

4. 라우팅

 

1) 구조

app.METHOD(PATH, HANDLER)

- app : express() 객체 인스턴스

- METHOD : HTTP 요청 메소드(get, post, put, delete...)

- PATH : 서버에서의 경로 url 

- HANDLER : 라우트가 성공했을 때 실행되는 함수

 

2) 예제

- 라우트 메소드

var express = require('express');
var app = express();
// 홈 화면으로 라우팅 되며, hello world가 출력
app.get('/', function(req, res) {
  res.send('hello world');
});

// GET method route
app.get('/', function (req, res) {
  res.send('GET request to the homepage');
});

// POST method route
app.post('/', function (req, res) {
  res.send('POST request to the homepage');
});

 

- 라우트 경로 

 

요청 메소드와의 조합을 통해, 요청이 이루어질 수 있는 엔드포인트를 정의한다. 라우트 경로는 문자열, 문자열 패턴 또는 정규식 일 수 있다.

 

- 라우트 핸들러

하나의 콜백 함수는 하나의 라우트를 처리할 수 있다. 예를 들면 다음과 같다.

app.get('/example/a', function (req, res) {
  res.send('Hello from A!');
});

미들웨어와 비슷하게 작동하는 여러 콜백 함수를 제공하여 요청을 처리할 수 있다. 유일한 차이점은 이러한 콜백은 next('route')를 호출하여 나머지 라우트 콜백을 우회할 수도 있다는 점이다. 이러한 메커니즘을 이용하면 라우트에 대한 사전 조건을 지정한 후, 현재의 라우트를 계속할 이유가 없는 경우에는 제어를 후속 라우트에 전달할 수 있다.

 

// 2개 이상의 콜백 함수는 하나의 라우트를 처리할 수 있다(next 오브젝트를 반드시 지정해야 함)
app.get('/example/b', function (req, res, next) {
  console.log('the response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from B!');
});
// 하나의 콜백 함수 배열은 하나의 라우트를 처리할 수 있다.
var cb0 = function (req, res, next) {
  console.log('CB0');
  next();
}

var cb1 = function (req, res, next) {
  console.log('CB1');
  next();
}

var cb2 = function (req, res) {
  res.send('Hello from C!');
}

app.get('/example/c', [cb0, cb1, cb2]);
// 독립적인 함수와 함수 배열의 조합은 하나의 라우트를 처리할 수 있다.
var cb0 = function (req, res, next) {
  console.log('CB0');
  next();
}

var cb1 = function (req, res, next) {
  console.log('CB1');
  next();
}

app.get('/example/d', [cb0, cb1], function (req, res, next) {
  console.log('the response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from D!');
});

 

 

5. 미들웨어

 

1) 작성

<출처: https://expressjs.com>

2) 예제

var express = require('express');
var app = express();

// 미들웨어 함수 작성 후 변수 할당
var requestTime = function (req, res, next) {
  req.requestTime = Date.now();
  next();
};

// 미들웨어 함수를 로드하려면 미들웨어 함수를 지정하여 app.use()를 호출
// 루트 경로 라우트 로드 전에 먼저 로드 된다.
app.use(requestTime);

// 콜백 함수는 미들웨어 함수가 req(요청 오브젝트)에 추가하는 특성을 사용한다.
app.get('/', function (req, res) {
  var responseText = 'Hello World!';
  responseText += 'Requested at: ' + req.requestTime + '';
  res.send(responseText);
});

app.listen(3000);

 

- app.use() : 사용하고자 하는 미들웨어 함수를 로드한다.

 

미들웨어의 로드 순서는 중요하며, 먼저 로드되는 미들웨어 함수가 먼저 실행된다.

만약 위 예제에서 루트 경로 라우링 이후 app.use()를 하면 루트 경로의 라우트 핸들러가 요청-응답 주기를 종료하므로 요청은 절대로 requestTime에 도달하지 못한다. (스택 내의 그다음 미들웨어 함수에 요청을 전달하는 next() 요청이 없기 때문이다.)

 

현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next()를 호출하여 그 다음 미들웨어 함수에 제어를 전달해야 합니다. 그렇지 않으면 해당 요청은 정지된 채로 방치됩니다.

 

사용자는 요청 오브젝트, 응답 오브젝트, 스택 내의 그 다음 미들웨어 함수, 그리고 모든 Node.js API에 대한 액세스 권한을 가지고 있으므로, 미들웨어 함수에 대한 가능성, 중요성은 끝이 없다고 설명돼있다.

 

3) 여러 미들웨어 함수 종류

<출처: https://expressjs.com/ko/resources/middleware.html>

이 외에도 유명한 여러 미들웨어가 많으니 필요에 따라 사용하면 될 듯하다.

반응형

 

 

1874번: 스택 수열

1부터 n까지에 수에 대해 차례로 [push, push, push, push, pop, pop, push, push, pop, push, push, pop, pop, pop, pop, pop] 연산을 수행하면 수열 [4, 3, 6, 8, 7, 5, 2, 1]을 얻을 수 있다.

www.acmicpc.net

 

<내 코드>

n = int(input())
stack = []
oper = []
cnt = 1
temp = ""
for i in range(n):
    num = int(input())

    while(cnt <= num):
        stack.append(cnt)
        oper.append("+")
        cnt += 1
    if(stack[-1] == num):
        stack.pop()
        oper.append("-")
    else:
        temp = False

if(temp == False):
    print("NO")
else:
    for i in oper:
        print(i)

 

처음에 무슨 문제인지 이해하는데 오래 걸렸다. 이 문제는 입력으로 주어진 수들의 수열을 push, pop으로 만들 수 있는지 확인하는 문제이다. 여기서 중요한 건 '스택 구조'이고 push를 오름차순으로 숫자가 들어간다는 것이다. 따라서 스택의 마지막 수가 비교하려는 입력의 수열의 수와 다르다면 해당 수열을 만들 수 없게 되는 코드다.

반응형

css postioning 

 

화면 상 어디에 위치시킬 것인가 지정하는 속성
html화면 기준 x, y좌표를 지정해 위치를 조정한다.

 

1. static

: position 속성의 기본값으로 다른 요소와의 관계를 가지며 자동으로 배치되어 위치 조정 불가능하다. 따라서 top, left, right, bottom 설정을 할 수 없다. 기본적으로 위에서 아래로, 왼쪽에서 오른쪽으로 아이템들이 쌓인다.

 

2. relative

: 다른 요소와의 관계를 가지며 자동으로 자신이 원래 있던 위치(즉, static일 때)를 기준으로 좌표를 지정한다.
주로 absolute속성과 같이 쓰일 때, 부모 컨테이너에 relative를 준다.

 

3. absolute

: 절대위치를 기점으로 좌표를 설정하고, static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.

 

4. fixed

: window 즉 페이지를 기준으로 위치 설정(다른 position 값을 다 무시) 되며 스크롤을 내려도 항상 화면상의 그 위치에 있다. 화면의 절대 위치를 설정으로 위치가 고정되어진다. 그래서 보통 퀵메뉴, 메뉴바에 사용을 많이 한다.

 

5. sticky
: 원래 자리에 있으면서 대신 스크롤링 될 때, 없어지지 않고 원래 자리에 계속 위치함

 

 

예시

 

 

<body>
  <div class="box1">static</div>
  <div class="box2">relative</div>
  <div class="box3">absolute</div>
  <div class="box4">fixed</div>
</body>
body{
  border:3px solid green;
}

.box1{
  width:70px;
  height:70px;
  background-color: pink;
  position:static;
}
.box2{
  width:70px;
  height:70px;
  background-color: purple;
  position: relative;
  left:60px;
  bottom:20px;
}
.box3{
  width:70px;
  height:70px;
  background-color: orange;
  position: absolute;
  top: 30px;
  left:30px;
}
.box4{
  width:70px;
  height:70px;
  background-color: red;
  position: fixed;
  left:30px;
}
반응형

+ Recent posts