본문 바로가기

JavaScript

(22)
[JavaScript] 자바스크립트의 일급 함수 리액트를 배워보면서 일급 함수라는 개념이 종종 등장하였습니다.자바를 주로 사용하던 저에게는 생소한 개념이었습니다.왜 자바스크립트의 함수는 일급 함수라고 부르는 걸까요?이번 글에서는 일급 함수가 무엇인지 그 조건에 대해서 작성해보겠습니다.일급 함수단어의 생김새만 봐서는 무언가 뛰어난 함수를 의미하는 것 같습니다.단어의 의미를 말하기에 앞서, 일급 객체의 조건에 대해서 살펴보겠습니다.일급 객체는 변수나 자료구조에 저장할 수 있어야 합니다.일급 객체는 매개변수의 인자로 전달할 수 있어야 합니다.일급 객체는 함수의 반환값으로 사용할 수 있어야 합니다.보셨듯이 간단한 정수와 실수 자료형은 대부분 일급 객체에 속합니다.그럼 자바스크립트의 함수는 일급 객체의 조건을 만족하는 것일까요?예제를 통해 이를 확인해보겠습니다..
[Javascript] Promise와 async/await의 비동기 처리 저번 글에서 말했듯이 자바스크립트는 비동기 방식으로 동작합니다.비동기 코드에서 작업의 순서를 보장하기 위한 방법 중 하나는 콜백이 있습니다.하지만 순서를 지켜야 할 작업이 여러 개라면 어떨 것 같나요?호출한 콜백은 또다른 콜백을 호출하고 그 콜백은 또 다른 콜백을...이렇게 가독성을 떨어뜨리는 문법을 해결할 또 다른 방법이 있습니다.이번에는 Promise와 async/await의 비동기 처리에 대해서 알아보겠습니다.🐸 PromisePromise라는 객체에는 작업에 대한 상태를 가지고 있습니다.가지고 있는 상태의 종류는 다음과 같습니다.Pending(대기)Fulfilled(이행) Rejected(거부)const promise = new Promise((resolve, reject) => { if (/*..
[Express] 유효성 검사를 해보자 미니 프로젝트로 만든 API에 사용자의 아이디를 입력할 때,문자열이 아닌 정수형으로 입력해도 데이터가 전달되지만데이터베이스에서는 컬럼의 자료형과 달라서 에러를 뱉습니다.이처럼, 클라이언트에서 전달한 데이터를 서버에서 그대로 사용하면예기치 못한 문제가 생길 수 있습니다.이를 예방하기 위해서 전송받은 데이터를 검사하는 것을 유효성 검사라고 합니다.이번 포스트에서는 Express-validator를 써서 유효성 검사를 하는 방법을 알아보겠습니다.💡 express-validator 설치하기진행하고 있는 프로젝트에서 패키지 매니저를 통해 설치하면 됩니다.npm install express-validator 💡 유효성 검사 시작하기공식 문서에서는 express-validator가 Express 애플리케이션 뿐만..
[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회차 이벤트 당첨자 삭제});매우 직관적인 단일 라우트 방식입니다.동일한 경로에 대한 처리이다 보니 반복되는 코드가 많습니다.그럼 동일한 경로를 관..
[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..