서버

프론트엔드 개발과 Mocking (axios-mock-adapter, Mock Service Worker)

프론트엔드 개발을 진행할 때, 많은 경우 서버 API 개발이 우선시 되어야 하는 경우가 많은 것 같다. 아무래도, 데이터를 받아와 웹 페이지를 구성해야 하는 경우가 많다보니 그런데 API 개발이 선행되지 않았을 때 프론트엔드 개발자는 무엇을 해야할까? 다양한 케이스가 있을 수 있지만, mock(소프트웨어 개발을 위해 사용하는 가짜 객체)을 가지고 API 연결을 하기 전에 미리 페이지를 개발할 수 있다. 이때, mock 객체를 하드코딩하여 사용하면 실제 API 통신 환경과는 다소 동떨어진 개발을 하게 되는데 API 환경을 유사하게 구현하여 mocking 개발을 도와주는 라이브러리가 있다. 👻 axios-mock-adapterhttps://www.npmjs.com/package/axios-mock-adap..

Nginx를 사용하면 어떤 장점이 있을까? (express.js & React.js)

서버에서 nginx를 사용하여 얻는 이점 (ex. express.js) 🍒 정적 파일 제공 엔진엑스는 정적 파일을 처리하는 데 특화되어 있다. Express에서 정적 파일(이미지, CSS, JavaScript 파일 등)을 처리하기 위해 별도의 미들웨어를 설정하고 관리해야하지만, 엔진엑스는 정적 파일을 효율적으로 처리할 수 있어 웹 애플리케이션의 성능을 향상시킬 수 있다. 🍒 로드 밸런싱 엔진엑스는 로드 밸런싱을 지원하여 여러 대의 백엔드 서버로 들어오는 요청을 분산시킬 수 있다. 이를 통해 트래픽을 분산하고 애플리케이션의 가용성과 성능을 향상시킬 수 있다. 🍒 Reverse Proxy 엔진엑스는 리버스 프록시로 사용할 수 있어 클라이언트 요청을 받아 애플리케이션 서버로 전달하고, 서버 응답을 클라이언트에..

REST API 란?

웹 app에서는 HTTP 매소드를 사용하여 서버와 통신한다. 이때, requests와 responses를 어떻게 하는 것이 좋을까? 이에 대한 해답으로 가장 대표적인 API 아키텍쳐인 REST API가 있다. 🍅 REST: Representational State Transfer REST API는 웹에서 사용되는 데이터/자원을 HTTP URI로 표현하여 HTTP를 통해 요청(requests)과 응답(responses)을 정의하는 방식이다. 즉, 서버와 클라이언트의 효율적인 통신을 위해서 REST API를 따라서 문서를 작성하는 것이다. REST 원리를 따르는 시스템을 RESTful 이라고 표현하기도 한다. 좋은 REST API를 작성하기 위해서 리차드슨의 REST 성숙도 모델을 참조할 수 있다. 🎁 2단..

express 서버에서 요청한 클라이언트의 IP주소 확인하기

서버에서는 클라이언트를 구별하기 위한 방법으로 ip주소를 확인할 수 있다. express에서는 이를 어떻게 확인할 수 있을지 알아보았다. const express = require("express"); const app = express(); const port = 8080; app.get("/", (req, res) => { res.send("Hello World!"); }); app.get("/ip", (req, res) => { const ip = req.headers["x-forwarded-for"] || req.ip; console.log("req.ip", ip); res.status(200).send({ ip, message: "Check Your Ip" }); }); app.listen(po..

http 통신 request의 query, params, body (with express)

express를 사용하여 서버를 만들면 URI를 통해서 API를 사용할 수 있다. API 문서를 통해서 서버의 자원을 사용할 수 있다. 그렇다면, 클라이언트가 원하는 데이터를 얻기 위해서 URL에 데이터를 추가적으로 더 주었을 때(URI), express에서 어떻게 이 데이터를 받아와 response할 수 있을까? query const express = require('express'); const router = express.Router(); router.get('/hi', findAll); /hi?name=Kim&age=33 과 같은 URI에 접근하면, 서버에서 req.query 를 통해 데이터를 받을 수 있다. query를 시작할 때 ?를 쓰고, 여러 데이터를 받을 때는 &로 데이터를 구분한다. ..

Node.js에서 ORM 사용하기 (sequelize 기본 설정 하기)

ORM, Object-Relational Mapping 은 model을 기술하는 도구이다. ORM을 통하여 SQL query문을 직접 작성하지 않고, 프로그래밍 언어를 통해서 Model에 접근할 수 있다. 이렇게, 프로그래밍 언어의 관점에서 Model에 접근할 수 있는 까닭은, ORM이 대신 프로그래밍 언어를 SQL query문으로 변환해주기 때문이다. 🏁 데이터베이스와 프로그래밍 언어 사이의 개념의 간극을 좁힌다. ORM은 entity나 record를 객체나 클래스를 다루듯이 접근할 수 있게 한다. 🍙 ORM을 통해서 객체에서의 각 속성은 데이터베이스에서 필드를 의미하게 된다. 각 언어마다 사용할 수 있는 ORM API가 있다. 자바에서는 JDBC(Java Database Connectivity) 자바..

간단하게 노드 서버에서 로그 기록하기 (morgan 사용하기)

노드를 사용한 서버에서 요청에 대한 로그를 남기기 위해서 미들웨어를 작성할 수 있다. 좀 더 편리한 방법으로 morgan이라는 라이브러리를 설치하여 사용할 수 있다. 난 express 환경에서 morgan을 사용해 보았다. const express = require("express"); const morgan = require("morgan"); const app = express(); app.use(morgan("dev")); 위와 같이 morgan을 사용하여 로그를 남길 수 있다. 인자로 설정을 넣을 수 있는데, 나는 dev설정을 사용하였다. combined, common, dev등의 설정이 있는데 앞의 두 개는 표준 Apache 로그에 관한 설정이고 dev는 개발용으로, 요청에 따라서 색상이 다른 ..

개발한 서비스 (클라이언트 & 서버)의 배포전략에 대해서

로컬 환경에서 개발한 서비스가 이제 많은 사용자들에게 공개될 때가 왔다. 그렇다면, 어떻게 사용자들이 우리의 서비스를 원활히 이용하도록 잘 배포할 수 있을까? 크게 클라이언트 앱, 서버, 데이터베이스를 어떻게 사용자에게 제공할지 고민이 필요하다. 클라이언트 배포 클라이언트 앱을 통해서 사용자는 배포한 서비스를 이용할 수 있다. 사용자가 요청한 정보나 데이터가 클라이언트 앱을 통해서 화면에 그려진다. 만약 클라이언트를 배포하고자 한다면, AWS에서 제공하는 S3 서비스를 이용할 수 있다. (Netlify, Vercel같은 선택지도 있다.) 클라이언트 배포에 EC2를 사용하는 것은 어떠할까? 🫓 클라이언트 앱은 정적 파일로 빌드하여 배포해야 하기에 EC2는 적합하지 않다. S3를 이용하도록 하자. 클라이언트..