본문 바로가기

전체 글

(66)
[Express] Router 적용하기 애플리케이션이 커질수록 라우트 설정과 미들웨어가 복잡해집니다.라우터를 이용하면 각각을 모듈로 만들고,메인 애플리케이션에서 마운트하여 작은 단위로 관리할 수 있습니다.이번 포스트에서는 라우터의 사용법에 대해서 알아보겠습니다.🎯 모듈 분리예시로 쇼핑몰 애플리케이션에서는,사용자와 상품을 담당하는 엔드포인트가 나누어져 있을 수 있습니다.express.Router()를 사용하면 각 엔드포인트를 모듈식으로 관리할 수 있습니다.// users.jsconst express = require('express');const router = express.Router();// GET /usersrouter.get('/', (req, res) => { res.send('유저 리스트');});module.exports = ..
[Express] 같은 경로의 핸들러 묶기 API는 같은 주소지만 HTTP 메소드를 다르게 하여 다양한 기능을 할 수 있습니다.동일한 주소를 하나로 묶어서 관리할 수는 없을까요?두 가지 예제를 보면서 알아보겠습니다.app.get('/event/:n', (req, res) => { // n회차 이벤트 당첨자 출력});app.post('/event/:n', (req, res) => { // n회차 이벤트 당첨자 생성});app.put('/event/:n', (req, res) => { // n회차 이벤트 당첨자 수정});app.delete('/event/:n', (req, res) => { // n회차 이벤트 당첨자 삭제});매우 직관적인 단일 라우트 방식입니다.동일한 경로에 대한 처리이다 보니 반복되는 코드가 많습니다.그럼 동일한 경로를 관..
회원 API 설계하기 이제는 어느 웹 서비스를 방문해도 로그인 페이지가 있는 것을 확인할 수 있습니다.로그인, 회원 가입, 회원 정보, 회원 탈퇴는 어떻게 설계해야 할까요?🔗 HTTP 메소드데이터를 처리하는 방식을 보통 CRUD라고 부릅니다.서버에서 데이터를 어떻게 처리하는지에 따라서 메소드를 정의할 수 있습니다.CRUDReadCreateUpdateDeleteHTTP 메소드GETPOSTPUTDELETE로그인 기능은 어떤 메소드를 사용해야 할까요?로그인을 할 때는 아이디와 패스워드를 입력합니다.이 정보를 주소창에 노출하면 상대적으로 위험할 수 있으니 POST를 사용하겠습니다. 🔗 URL회원 가입: /join로그인: /login회원 정보: /users/{id}회원 탈퇴: /users/{id} 🔗 요청 파라미터회원 가입: 아..
[Postman] 편리한 API 호출 툴 사용해보자 개발한 API를 브라우저에서 테스트하기에는 부족함이 있습니다.예를 들어서, 요청하는 헤더와 바디를 수정하는 작업 등이 해당합니다.포스트맨은 이런 작업을 쉽게 할 수 있도록 인터페이스를 제공해줍니다.한 번 알아볼까요?📫 설치공식 사이트에서 설치가 가능합니다.다운로드를 하고 회원가입까지 마친 후에 사용이 가능합니다.유료 버전은 Collection Runners, Flows 등의 추가 기능이 생기네요.저는 무료 버전을 기준으로 테스트해보겠습니다. 📫 콜렉션 생성하기콜렉션은 하나의 북마크 기능입니다.테스트하기 위해 준비한 API 요청을 그룹화할 수 있습니다.좌측 콜렉션 탭에서 + 버튼을 눌러서 새로운 콜렉션을 만들어 사용합니다. 📫 API 요청생성한 콜렉션에서 더보기 탭을 눌러 새로운 API 요청을 생성합..
[Express] 폴더 구조 알아보기 웹 애플리케이션은 다양한 방식으로 구현이 가능합니다.마이크로서비스 아키텍처에 관심이 생겨서 이번에 당근 밋업을 신청했는데성공하면 좋겠네요😂다시 주제로 돌아와서 구현 방식이 다양한만큼 그 계층 구조도 다양할 수밖에 없습니다.공식 페이지의 가이드를 따라서 Express 프로젝트를 생성하면 새로운 폴더 구조가 만들어지는데,이번 포스트에서 이것을 다뤄보도록 하겠습니다.📁 public정적 파일을 제공하기 위한 디렉토리입니다.디렉토리의 하위는 다음과 같이 구분되어 있습니다.images: 이미지 파일javascripts: 자바스크립트 파일stylesheets: css 파일  📁 routes애플리케이션의 라우팅 정보를 관리하는 디렉토리입니다.각 라우터 파일은 특정 URL 경로에 대한 요청을 처리합니다.  📁 v..
함수를 생성하는 여러가지 방법 자바스크립트의 함수는 일급 함수라고 불립니다.일급 함수라는 것은 일급 객체의 조건을 만족한다는 것이고,변수에 대입하고 함수에 매개변수로 넘기는 것을 지원합니다.때문에, 자바스크립트에서 함수를 생성하는 문법이 여러가지가 있는데요.이번 포스트에서 한 번 알아보겠습니다.✍ 함수 선언식function sing(song) { return `${song}을 부릅니다.`;}function 표현식을 사용하여 함수를 생성할 수 있습니다.함수 선언식은 호이스팅에 영향을 받습니다.호이스팅이란 인터프리터가 코드를 실행하기 전에, 선언문의 위치를 맨 위로 끌어 올리는 것을 말합니다.호이스팅의 영향을 받기 때문에 함수의 호출을 선언문 앞에서 할 수 있습니다. ✍ 함수 표현식let sing = function(song) { r..
Express - Path에 매개변수 사용하기 팬 메이드 게임 중 하나인 포켓로그 다들 해보셨나요?포켓몬 도감을 만들고 싶으면 어떻게 하면 좋을까요?poketmons 라는 페이지를 만들어 여기에 라우팅을 해주면 됩니다.그렇다면, 도감에 있는 포켓몬 중 하나를 보고 싶다면..?슬래시 뒤에 도감 번호로 분리하여 페이지를 만들어주면 됩니다.아...무수히 많은 페이지를 생성해야 할까요?✍ 경로 파라미터(Route Parameter)app.get('/poketmons/:no', function(req, res) { res.send(req.params); })// url: /poketmons/1// response: { "no" : "1" }콜론을 사용하면 URL에 입력한 값을 매개 변수로 사용할 수 있습니다. ✍ Map 객체 사용하기let db = new M..
구조 분해 할당! 나도 이제 중간 변수(temp) 없이? 오늘 KDT 과정 중에 비구조화 할당이라는 내용을 들었습니다.문법이 익숙해서 검색해보니까 구조 분해 할당으로 부르기도 하더라구요!전 이게 더 익숙했습니다.😌이번 포스트는 구조 분해 할당에 대해서 적어보겠습니다.구조 분해 할당은 배열 혹은 객체를 해체하여 개별 변수에 값을 담는 것을 의미합니다.✍ 배열 구조 분해 let color = ['blue', 'green', 'orange'];let [ sky, tree, sun ] = color;console.log(sky); // blueconsole.log(tree); // greenconsole.log(sun); // orange배열에서 구조 분해 할당을 이용하면, 인덱스의 순서대로 값을 담을 수 있습니다.  ✍ 요소 무시하기let color = ['blu..