Web/100일 코딩 챌린지 - Web Development

섹션 20: 동적 라우트(URL), 오류 & 관리 처리하기 더 큰 Express 프로젝트 [53일차]

hy30nq 2024. 2. 8. 11:30
728x90





익스프레스 라우터로 깔끔하게 라우트 구성 분할하는 방법

안녕하세요, 여러분! 오늘은 Node.js의 대표적인 웹 프레임워크인 익스프레스(Express)에서 라우트 구성을 깔끔하게 분할하는 방법에 대해 알아볼 거예요. 프로젝트가 커지면서 라우트가 많아지는 것을 어떻게 관리할까요? 바로 '익스프레스 라우터'를 활용하는 것이랍니다. 예시와 함께 설명드릴게요!

라우트 분할이란?

익스프레스 애플리케이션을 개발하다 보면, 라우트가 점점 늘어나 관리하기 어려워질 수 있어요. 이때 각 기능별로 파일을 나누어 라우트를 관리하는 것을 '라우트 분할'이라고 해요. 이 방식을 사용하면 코드가 깔끔해지고 유지보수하기도 편해집니다.

익스프레스 라우터 사용하기

익스프레스 라우터를 사용하려면 먼저 express.Router()를 호출해야 해요. 이를 통해 새로운 라우터 인스턴스를 생성할 수 있죠. 그 다음, 이 인스턴스에 라우트를 등록한 후, 애플리케이션에 마운트하면 됩니다.

사용자 관련 라우트 분할하기
  1. 사용자 라우트 파일 생성하기
    // users.js
const express = require('express');
const router = express.Router();

// 사용자 목록 조회
router.get('/', (req, res) => {
res.send('사용자 목록');
});

// 사용자 생성
router.post('/', (req, res) => {
res.send('사용자 생성');
});

module.exports = router;


2. **애플리케이션에 라우터 마운트하기**
```javascript
// app.js
const express = require('express');
const userRoutes = require('./users');

const app = express();

app.use('/users', userRoutes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`서버가 ${PORT}번 포트에서 실행중이에요.`));

라우트 분할의 장점

  • 유지보수 용이: 기능별로 파일을 분리함으로써 코드를 찾기 쉬워지고, 유지보수가 용이해집니다.
  • 재사용성 향상: 공통 라우트를 별도의 파일로 관리하면 다른 프로젝트에서도 재사용할 수 있어요.
  • 가독성 개선: 파일이 명확하게 분리되어 있어 코드의 가독성이 좋아집니다.

라우트 분할은 대규모 애플리케이션을 개발할 때 필수적인 기술이에요. 오늘 설명드린 내용을 통해 여러분의 프로젝트도 한 단계 업그레이드되길 바랍니다. 더 궁금한 점이 있으시면 언제든지 물어보세요!





자바스크립트에서 쿼리 매개변수(req.query) 활용하기

안녕하세요, 여러분! 오늘은 웹 개발 시 자주 접하는 쿼리 매개변수(req.query)에 대해 알아보려고 해요. req.query를 통해 어떻게 클라이언트로부터 전달받은 쿼리 스트링을 처리하는지, 그리고 이를 활용하는 방법에 대해 예시와 함께 살펴볼 거예요. 자바스크립트와 함께라면, 더욱 쉽고 효율적으로 데이터를 다룰 수 있답니다!

쿼리 매개변수(req.query)란?

웹 애플리케이션에서 사용자의 요청을 처리할 때, URL의 일부로 전달된 데이터를 읽어야 할 경우가 있어요. 이때 URL의 '?' 뒤에 오는 이름과 값의 쌍을 '쿼리 스트링'이라고 하죠. Express.js에서는 이 쿼리 스트링을 req.query 객체를 통해 쉽게 접근할 수 있어요.

req.query로 쿼리 매개변수 다루기

req.query 객체를 사용하면 URL에서 쿼리 스트링을 파싱하여 JavaScript 객체로 만들어 접근할 수 있습니다. 이를 통해 웹 애플리케이션에서 필요한 정보를 효율적으로 추출할 수 있죠.

쿼리 매개변수를 활용한 사용자 검색 기능 구현
const express = require('express');
const app = express();

app.get('/search', (req, res) => {
  const query = req.query.query; // URL에서 'query' 쿼리 매개변수의 값을 읽음
  res.send(`검색어 '${query}'에 대한 검색 결과`);
});

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행중이에요.');
});

이 예시에서는 /search?query=JavaScript와 같은 요청을 받으면, 'JavaScript'라는 검색어를 추출하여 사용자에게 응답을 보내는 간단한 검색 기능을 구현했어요.

req.query 활용 시 주의사항

  • 데이터 검증: 사용자로부터 받은 쿼리 매개변수는 항상 검증해야 합니다. 악의적인 사용자가 예상치 못한 값을 전달할 수 있으니까요.
  • 인코딩 문제: URL에는 공백이나 특수 문자 등을 직접 포함할 수 없어요. 이러한 값은 인코딩하여 전달해야 하며, 서버에서는 디코딩 과정을 거쳐야 합니다.

req.query를 활용하는 것은 Express.js에서 매우 유용한 기능이에요. 사용자로부터 필요한 정보를 효과적으로 수집하고, 그에 따른 적절한 응답을 제공하기 위해 꼭 알아두어야 할 내용이죠.





자바스크립트에서 sort() 함수 마스터하기

안녕하세요, 여러분! 오늘은 자바스크립트에서 배열을 정렬하는 데 사용되는 sort() 함수에 대해 자세히 알아볼 거예요. sort() 함수는 배열의 요소를 쉽게 정렬할 수 있게 해주는 매우 유용한 내장 함수랍니다. 예시를 통해 다양한 사용 방법을 살펴보도록 할게요!

기본 사용법

sort() 함수는 기본적으로 배열의 요소를 문자열로 변환하여 사전 순으로 정렬합니다. 숫자 배열에서 sort()를 바로 사용하면 예상치 못한 결과가 나올 수 있어요.

let fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.sort();
console.log(fruits); // ['Apple', 'Banana', 'Mango', 'Orange']

숫자 배열 정렬

숫자를 정렬할 때는 sort() 함수에 비교 함수를 전달해야 합니다. 비교 함수는 두 요소를 비교하여 정렬 순서를 결정합니다.

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 4, 5]

내림차순 정렬

내림차순으로 정렬하려면 비교 함수의 반환 값을 바꿔주면 됩니다.

let numbersDesc = [4, 2, 5, 1, 3];
numbersDesc.sort((a, b) => b - a);
console.log(numbersDesc); // [5, 4, 3, 2, 1]

객체 배열 정렬

객체의 특정 속성을 기준으로 배열을 정렬할 수도 있어요. 예를 들어, 나이를 기준으로 사용자 객체 배열을 정렬해 볼게요.

let people = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Gary', age: 28 },
];
people.sort((a, b) => a.age - b.age);
console.log(people); // 나이 순으로 정렬된 객체 배열

문자열 길이로 정렬

문자열 배열을 문자열의 길이를 기준으로 정렬해보겠습니다.

let words = ['Banana', 'Orange', 'Apple', 'Mango'];
words.sort((a, b) => a.length - b.length);
console.log(words); // ['Apple', 'Mango', 'Banana', 'Orange']

sort() 함수는 매우 강력하고 유연하여, 사용자 정의 정렬 로직을 구현할 때 큰 도움이 됩니다. 여러분이 직접 다양한 방법으로 실험해 보면서 sort() 함수의 매력을 느껴보세요!





HTML에서 input type="hidden"의 활용과 중요성

안녕하세요, 여러분! 오늘은 웹 개발 시 자주 사용되는 input type="hidden"에 대해 자세히 알아보도록 해요. 웹 폼을 만들 때, 모든 입력 필드가 사용자에게 보이는 것은 아니에요. 어떤 정보는 서버로 전송해야 하지만, 사용자에게 직접 보여주거나 입력받을 필요가 없는 경우가 있죠. 이럴 때 input type="hidden"을 사용합니다. 그럼 input type="hidden"의 역할과 사용 방법에 대해 함께 살펴볼까요?

input type="hidden"이란?

input type="hidden"은 사용자에게 보이지 않는 입력 필드를 생성합니다. 이 필드는 폼 데이터와 함께 서버로 전송되지만, 사용자 인터페이스에는 표시되지 않아요. 주로 서버에서 필요로 하는 데이터를 사용자의 폼 제출과 함께 전송할 때 사용됩니다.

input type="hidden"의 활용 예

  • 세션 ID 또는 토큰 전송: 사용자 인증 정보나 세션 ID를 안전하게 서버로 전송할 때 사용할 수 있어요.
  • 사용자 추적: 사용자의 활동을 추적하기 위한 정보를 숨겨진 필드에 저장해서 서버로 전송합니다.
  • 기본값 설정: 폼에 사전에 정의된 값을 서버로 전송해야 할 경우, 숨겨진 필드에 저장해 둘 수 있어요.

input type="hidden" 사용 예시

HTML 폼에서 사용자 ID를 서버로 전송하고자 할 때, 사용자에게 보이지 않게 정보를 전송하려면 아래와 같이 작성할 수 있어요.

<form action="/submit-form" method="post">
  <input type="hidden" name="userId" value="123456">
  <input type="text" name="username">
  <input type="submit" value="제출">
</form>

이 예시에서는 userId라는 이름의 숨겨진 입력 필드를 사용해 사용자 ID 123456을 서버로 전송합니다. 사용자는 이 정보를 볼 수 없지만, 폼을 제출할 때 userId 값이 함께 전송되요.

input type="hidden" 사용 시 주의사항

  • 보안: input type="hidden" 필드는 개발자 도구를 통해 쉽게 볼 수 있어요. 따라서, 중요한 정보나 민감한 데이터를 이 방식으로 전송하는 것은 피해야 합니다.
  • 데이터 검증: 서버 측에서는 사용자로부터 받은 모든 데이터를 검증해야 해요. 숨겨진 필드라 하더라도 사용자가 데이터를 변경할 수 있기 때문이죠.

input type="hidden"은 간단해 보이지만, 웹 개발에서 매우 유용하게 사용됩니다. 사용자에게 보여질 필요가 없는 데이터를 서버로 전송하고 싶을 때, 이 타입의 입력 필드를 활용해 보세요!

728x90