JS 6회차 | 토이 프로젝트 설명, import/export, axis, express, app.get, SQL

import / export

여러 개의 자바스크립트 파일의 특정한 변수/함수를 가져다 쓰기 위함

 

script.js

import sum from './cal.js'
// import * as cal from './cal.js' : default없을 때, 다 가져올래, 이름을 줄수 있음
// 내가 만든 건 ./로 경로 지정을 해줘야 하지만 node_modules에 있는 것은 경로지정 안해줘도 됨

const result = sum(100, 200);
// const result = cal.sum(100, 200);
console.log(result)

 

cal.js

export function sum(a, b) {
  return add(a, b);
}

export default function div(a, b) {
  return a / b;
}
// default의 경우, 가져오는 쪽에서 이름을 정할 수 있음

function add(a, b) {
  return a + b;
}
// export 없기 때문에 가져갈 수 없음

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

import - JavaScript | MDN

 

 

프로젝트 파일 설명_main.js

import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'

// 번들러로 css파일도 import 가능

async function app() {
  document.querySelector('#app').innerHTML = `
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="${viteLogo}" class="logo" alt="Vite logo" />
      </a>
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
        <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
      </a>
      <h1>Okay</h1>
      <div class="card">
        <button id="counter" type="button"></button>
      </div>
      <p class="read-the-docs">
        Click on the Vite logo to learn more
      </p>
    </div>
  `
  
  setupCounter(document.querySelector('#counter'))
}

document.addEventListener('DOMContentLoaded', app);

 

axios

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

 

express

Express.js는 Node.js를 위한 간단하고 유연한 웹 애플리케이션 프레임워크입니다. 서버를 쉽게 설정하고, 요청과 응답을 처리하며, 다양한 기능을 확장할 수 있게 해줍니다. Express.js를 사용하면 웹 서버를 구축하고 API를 만들기가 매우 간편합니다.

 

기본 개념
1. 라우팅 (Routing):
• 클라이언트 요청 URL에 따라 서로 다른 함수를 실행하도록 설정할 수 있습니다.
2. 미들웨어 (Middleware):
• 요청이 처리되는 동안 여러 단계에서 특정 작업을 수행할 수 있습니다. 예를 들어, 요청 로그를 기록하거나 인증을 처리하는 데 사용됩니다.
3. 핸들러 함수 (Handler Function):
• 특정 경로로 들어오는 요청을 처리하는 함수입니다.

 

// express 모듈을 가져옵니다.
const express = require('express');

// 앱 인스턴스를 생성합니다.
const app = express();

// 루트 경로에 대한 GET 요청을 처리합니다.
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

// 서버가 요청을 수신할 포트를 설정합니다.
const port = process.env.PORT || 3000;

// 서버를 시작합니다.
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

설명

1. const express = require('express');:
• Express 모듈을 가져옵니다.

2. const app = express();:
• Express 애플리케이션 인스턴스를 생성합니다.

3. app.get('/', (req, res) => {...});:
• 루트 경로 (’/’)에 대한 GET 요청을 처리하는 라우트를 정의합니다. 클라이언트가 루트 경로로 요청을 보내면 ’Hello, World!’라는 응답을 보냅니다.

4. const port = process.env.PORT || 3000;:
• 서버가 수신할 포트를 설정합니다. 환경 변수에 설정된 포트가 없으면 기본값으로 3000을 사용합니다.

5. app.listen(port, () => {...});:
• 지정된 포트에서 서버를 시작하고, 서버가 실행 중임을 콘솔에 출력합니다.

 

app.get('/api/counter', (req, res) => {
  // 쿼리 문자열에서 'latest' 값을 가져와 숫자로 변환합니다.
  const counter = Number(req.query.latest);

  // 0에서 9 사이의 무작위 숫자를 생성합니다.
  if (Math.floor(Math.random() * 10) <= 3) {
    // 무작위 숫자가 3 이하일 경우, 오류 응답을 보냅니다.
    res.status(400).send({
      status: 'Error',
      data: null,
    });
  } else {
    // 무작위 숫자가 4 이상일 경우, 정상 응답을 보냅니다.
    res.status(200).send({
      status: 'OK',
      data: counter + 1,
    });
  }
});

1. 라우트 정의:
• app.get('/api/counter', (req, res) => {...}): /api/counter 경로에 대한 GET 요청을 처리합니다.

2. 쿼리 문자열에서 값 추출:
• const counter = Number(req.query.latest);: 요청 URL에 포함된 쿼리 문자열 latest 값을 숫자로 변환하여 counter 변수에 저장합니다.
• 예를 들어, 클라이언트가 /api/counter?latest=5와 같이 요청을 보내면 req.query.latest는 ‘5’가 되고, Number('5')는 5가 됩니다.

3. 무작위 숫자 생성 및 조건문:

• Math.floor(Math.random() * 10) <= 3: 0에서 9 사이의 무작위 숫자를 생성하고, 이 숫자가 3 이하인지 확인합니다.
• 무작위 숫자가 3 이하일 확률은 40%입니다 (0, 1, 2, 3 네 가지 경우).

4. 응답 전송:

• 오류 응답:
• 무작위 숫자가 3 이하인 경우, res.status(400).send({status: 'Error', data: null});를 통해 HTTP 상태 코드 400과 함께 오류 메시지를 보냅니다.
• 정상 응답:
• 무작위 숫자가 4 이상인 경우, res.status(200).send({status: 'OK', data: counter + 1});를 통해 HTTP 상태 코드 200과 함께 counter 값을 1 증가시킨 데이터를 보냅니다.

 

기타

 

const port = process.env.PORT || 8080

 

1. 환경 변수 process.env.PORT:

• process.env는 Node.js에서 환경 변수를 저장하는 객체입니다.
• process.env.PORT는 서버가 실행될 포트 번호를 환경 변수에서 가져오려고 합니다. 이 값은 일반적으로 서버가 실행되는 환경(예: 클라우드 서비스나 호스팅 플랫폼)에서 설정됩니다.

2. || 8080:

• 만약 process.env.PORT가 정의되어 있지 않거나 값이 없다면, 기본값으로 8080을 사용하겠다는 의미입니다.
• ||는 논리적 OR 연산자로, 왼쪽의 값이 false(또는 null, undefined 등)일 경우 오른쪽 값을 반환합니다.

이 코드의 목적은 서버가 실행될 포트 번호를 설정하는 것입니다. 먼저 환경 변수 process.env.PORT에서 포트 번호를 가져오려고 시도합니다. 만약 환경 변수가 설정되어 있지 않으면, 기본값으로 8080을 사용합니다. 이는 서버가 클라우드나 특정 환경에서 실행될 때 환경 변수를 통해 포트 번호를 설정하고, 로컬 개발 환경에서는 8080 포트를 사용하여 실행할 수 있도록 합니다.

 

app.get('/api/counter', (req, res) => {
  const counter = Number(req.query.latest)

  if (Math.floor(Math.random() * 10) <= 3) {
    res.status(400).send({
      status: 'Error',
      data: null,
    })
  } else {
    res.status(200).send({
      status: 'OK',
      data: counter + 1,
    })
  }
})

 

app.get

app.get은 Express.js에서 특정 경로에 대한 HTTP GET 요청을 처리하기 위해 사용되는 메서드입니다. 쉽게 말해, 서버가 특정 URL로 들어오는 요청을 받았을 때 어떤 작업을 할지 정의하는 방법입니다.

 

기본구조

app.get('경로', (요청 객체, 응답 객체) => {
  // 요청을 처리하고 응답을 보냅니다.
});

• app.get: Express 애플리케이션 인스턴스(app)에서 GET 요청을 처리하기 위해 사용되는 메서드입니다.

• 경로: 클라이언트가 요청할 URL 경로입니다.

• (요청 객체, 응답 객체) => { ... }: 요청을 처리하는 함수입니다. 요청 객체(req)와 응답 객체(res)를 매개변수로 받습니다.

 

SQL

https://www.programiz.com/sql

Learn SQL

 

 

추천 책

HTTP 완벽 가이드

『HTTP 완벽 가이드』는 HTTP 규약이 어떻게 작동하고 웹 기반 애플리케이션을 개발하는 데 어떻게 사용하는지 설명하고, HTTP가 효율적으로 동작하도록 함께 사용하는 다른 핵심 인터넷 기술에 대해서 소개한 책이다. 책에서는 HTTP 메서드, 헤더, 상태 코드, 프락시와 캐시의 최적화, 웹 로봇과 크롤러 설계 전략, 쿠키, 인증, 보안 HTTP, 국제화와 내용 협상, 리다이렉션과 부하 균형 전략, 더 좋은 성능의 HTTP, HTTP/2.0에 대해서 다루고 있다. 또한, 10여년 전 기준으로 작성된 예시들을 현재에 맞게 최신화 했다.

저자

브라이언 토티, 마조리 세이어, 세일루 레디, 안슈 아가왈, 데이빗 고울리

출판

인사이트

출판일

2014.12.15