1. 개요
"서버의 요청을 처리한다", "데이터를 다룬다"
toy project와 같이 규모가 작은 프로젝트를 진행하거나, 학습 목적의 localhost server를 구성하였다면 장담컨대 가장 많이 활용하는 도구가 express일 것이다.
물론 express보다 훨씬 간편하고 직관적인 graphql을 사용할 수 있겠지만, graphql을 만나기 전에 한 번씩은 express라는 도구를 접해보지 않을까 생각한다.
express는 넓은 의미에서 보면 framework의 일종이지만, 좁은 의미에서는 app/router method(get, post) 등을 통해 데이터를 파싱(parsing)하는 미들웨어(middleware)이다.
서버의 요청을 처리하는 것의 기본은 이 "parsing"에서 부터 시작한다.
2. express
app = express()
app.use
app.get
app.post이 중 app.get app.post는 express middleware의 기본이다.
특히 app.get('/', (req, res) => { ... }) 을 통해 전달하거나 받고 싶은 데이터를 req, res인자를 통해 주고받는 것은 가장 간단한 data parsing, middleware의 형태이기도 하다.
이 쯤 배우면, 엔드포인트가 많이 나뉘어져 프로젝트 규모가 커질 경우 graphql이라는 단일 엔드포인트 체계를 활용하는 것이 더 효율적이기 때문에 graphql 단계로 넘어가게 된다.
그러나 백엔드, 프론트엔드에서 모두 활용할 수 있는 개념을 간과해서는 안된다.
3. context
백엔드, 프론트엔드 상관없이 특정 인자를 받아올 수 있다.
app.get('/', (req, res, next) => {
{ sth } = req.body;
{ sth } = res.body;
}) app.get에서 req인자를 ctx인자(=context)로 관리하는 것이다.
백엔드, 프론트엔드 상관없이 context에 데이터를 저장하고 이를 받아올 수 있다. 단, 해당 data는 중간에 수정할 수 없다.
4. koa
express의 최신 버전.
express middleware도 최근 업데이트 과정을 거쳐 koa라는 새로운 형태로 나오게 되었다.
기존 express framework가 가지는 무거움, 비동기처리를 위한 번거로움(코드의 경량화 등)에 대한 문제점을 보완하여 코드를 경량화하고 최신화된 버전의 express이다.
참고로 express에서 req, res 인자를 받아왔다면 koa에서는 ctx, next 인자로 구성되어 있다.
이 ctx 인자를 통해 data를 전달하고, 받아오는 것이 가능하다.
app.use(async (ctx, next) => {
{sth} = ctx.body;
await next();
});잘 활용하면 백엔드, 프론트엔드 상관없이 데이터 받아오기가 가능해진다.
const app = new ApolloServer({
typeDef,
resolvers,
context: async ({ ctx }) => {
return {
variable: ctx.state.variables,
};참고로 express에서 req, res 인자를 받아왔다면 koa에서는 ctx, next 인자로 구성되어 있다.
이 ctx 인자를 통해 data를 전달하고, 받아오는 것이 가능하다.
5. 참조링크
apollo 공식문서 - apolloserver / context
https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructor
https://www.apollographql.com/docs/apollo-server/data/resolvers/#the-context-argument
Express / Koa
https://geonlee.tistory.com/217 [빠리의 택시 운전사]
