마론미밍의 아뜰리에

[자바스크립트] 배열 작은수 5개를 제외한 수 오름차순으로 정렬

마론미밍 — Thu, 25 Jul 2024 16:23:38 +0900

문제

정수로 이루어진 리스트 num_list가 주어집니다. num_list에서 가장 작은 5개의 수를 제외한 수들을 오름차순으로 담은 리스트를 return하도록 solution 함수를 완성해주세요.

정답

function solution(num_list) {
    return num_list.sort((a, b) => a - b).splice(5);
}

[자바스크립트] 실수를 정수로 바꾸는 방법

마론미밍 — Thu, 25 Jul 2024 16:09:04 +0900

문제

실수 flo가 매개 변수로 주어질 때, flo의 정수 부분을 return하도록 solution 함수를 완성해주세요.

정답

function solution(flo) {

    const test = Math.floor(flo);
    console.log(test);
    return test;
}

코드 리펙토링

const solution = flo => ~~flo;

[자바스크립트] 문자열을 숫자로 변경해서 각 자리수의 합

마론미밍 — Thu, 25 Jul 2024 15:50:34 +0900

문제

한 자리 정수로 이루어진 문자열 num_str이 주어질 때, 각 자리수의 합을 return하도록 solution 함수를 완성해주세요.

정답

function solution(num_str) {
   const a = num_str.split('')  //문자열을 '' 이용해서 배열로 변환시킨다.
   const b = a.map(Number)  // 배열에 있는 문자열을 숫자로 변경한다.
   return b.reduce((c,d)=>c+d);  // 배열의 숫자의 값을 더한다.
}

코드 리펙토링

function solution(num_str) {
    return [...num_str].reduce((a, c) => a + +c, 0)
}
// spread 연산자를 이용해 개별 배열 요소로 나눔.
// reduce 함수는 배열의 각 요소를 순회하면서 누적 합을 계산해. 
// 여기서 a는 누적값이고, c는 현재 배열 요소를 나타내.

// +c는 현재 배열 요소인 c를 숫자로 변환해. 예를 들어, '1'은 숫자 1로 변환됨.
// a + +c는 현재 누적값 a에 현재 요소 c를 숫자로 변환한 값을 더해.
// 초기값은 0이므로 reduce 함수는 첫 번째 요소부터 시작해 누적 합을 계산해.




// 새로운 배열을 반환하는 메소드
// spread operator, map, filter, slice, reduce 
// * splice는 원본데이터를 변경함

[node] Express의 장점과 미들 웨어 설치

마론미밍 — Tue, 23 Jul 2024 14:42:44 +0900

Express의 장점

미들웨어 기반 아키텍처: 여러 미들웨어를 통해 요청과 응답을 처리.
서드파티 미들웨어 통합: 기존 라이브러리 미들웨어를 플러그인처럼 사용하여 기능을 쉽게 확장.
코어 비즈니스 로직에 집중: 반복적이고 번거로운 작업을 자동화하여 핵심 로직에 집중할 수 있음.

이 요약을 통해 Nodemon과 body-parser를 사용하여 개발 환경을 개선하고, Express의 미들웨어 기반 아키텍처의 장점을 활용하여 효율적으로 서버를 개발하는 방법을 이해할 수 있습니다.

Nodemon의 기능

자동 재시작: 파일이 변경될 때마다 서버를 자동으로 재시작.
효율성 증가: 수동으로 서버를 재시작할 필요 없음.

Nodemon 설치

npm install --save-dev nodemon

package.json에 start 스크립트 추가

"scripts": {
  "start": "nodemon app.js"
}

body-parser 기능

body-parser는 Express 애플리케이션에서 요청 본문을 파싱하여 req.body 객체에 데이터를 저장하는 미들웨어입니다.
HTML 폼 데이터와 JSON 데이터를 파싱하는 데 주로 사용됩니다.
body-parser는 이 요청 본문을 읽고, 사용하기 쉽게 JavaScript 객체로 변환해줍니다.
파싱된 데이터는 이후의 미들웨어나 라우트 핸들러에서 쉽게 접근하고 사용할 수 있습니다.

body-parser 설치

npm install --save body-parser

Express 애플리케이션에서 body-parser 설정

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// URL 인코딩된 데이터 파싱 (HTML 폼 데이터)
app.use(bodyParser.urlencoded({ extended: false }));
// extended: false는 Node.js 기본 querystring 모듈을 사용하여 쿼리 문자열을 파싱합니다.


// JSON 데이터 파싱
app.use(bodyParser.json());

[node] 익스프레스 없이 http 요청하기

마론미밍 — Tue, 23 Jul 2024 14:13:47 +0900

HTTP 요청에서 데이터를 받는 방법

const http = require("http"); // 모듈 불러오기

//서버 생성
const server = http.createServer((req, res) => {
  console.log("INCOMING REQUEST");
  console.log(req.method, req.url);
	
  // post 요청 처리
  if (req.method === "POST") {
    let body = "";
    
    // 데이터가 모두 수신된 후 처리  ++ body에 추가.
    req.on("end", () => {
      // 클라이언트로부터 모든 data를 수신하면 실행한다.
      const userName = body.split("=")[1];
      res.end("<h1>" + userName + "</h1>");
    });
    
    // body.split("=")는 body를 = 문자로 나눕니다. 예를 들어, body가 "username=John"이라면, 
    // split 결과는 ["username", "John"]가 됩니다.
    // [1]은 리스트의 두 번째 요소를 선택합니다. 즉, "John"을 반환합니다.

    // 이 코드는 폼 데이터를 username 파라미터로 받아서 그 값을 HTML 응답으로 반환합니다. 
    // 만약 body가 빈 문자열이거나 올바른 형식이 아니라면 split("=")[1]는 오류를 발생시킬 수 있습니다. 
    // 이를 방지하기 위해서는 추가적인 유효성 검사가 필요합니다.
    //const userName = body.split("=")[1] || "Unknown";

    // 데이터 수신중
    req.on("data", (chunk) => {
      body += chunk;
    });
    // req.on("data", (data) => (body += data));
    // data(chunk data)가 들어올 때마다 body에 chunk data를 넣는다.
    
   // get 요청처리
  } else {
    res.setHeader("Content-Type", "text/html");
    res.end(
      '<form method="POST"><input type="text" name="username"><button type="submit">Create User</button></form>'
    );
  }
});
// 서버 포트 5001에서 대기
server.listen(5001);

이 코드는 간단한 HTTP 서버를 설정합니다. 서버는 두 가지 유형의 요청을 처리합니다: POST와 GET.

GET 요청: 서버는 HTML 폼을 반환합니다. 사용자가 폼을 제출하면 POST 요청이 전송됩니다.
POST 요청: 서버는 요청 본문을 수신하고, 그 데이터를 처리합니다.

request.on의 이벤트

1. data : 데이터를 수신할 때 실행할 이벤트

2. end : 클라이언트로부터 모든 데이터를 수신 완료했을 때 실행할 이벤트

3. error : 요청 처리 중 에러가 발생했을 때의 이벤트

express 를 이용해서 요청하기

// 모듈가져오기
const express = require('express');
const bodyParser = require('body-parser');

// 익스프레스 앱 생성
const app = express();

// bodyParser 미들웨어 설정
app.use(bodyParser.urlencoded({ extended: false }));
//URL 인코딩된 데이터를 해석합니다. 이 미들웨어는 HTML 폼 데이터를 파싱하는 데 사용됩니다.

// POST 요청 처리
app.post('/user', (req, res, next) => {
  res.send('<h1>User: ' + req.body.username + '</h1>');
});
   // user 경로에 대한 POST 요청을 처리합니다.
   // 사용자가 폼을 제출하면, req.body.username에 접근하여 사용자 이름을 가져옵니다.
   // 가져온 사용자 이름을 <h1> 태그로 감싸서 응답으로 보냅니다. 

// GET 요청 처리:
app.get('/', (req, res, next) => {
  res.send(
    '<form action="/user" method="POST"><input type="text" name="username"><button type="submit">Create User</button></form>'
  );
});
//  경로에 대한 GET 요청을 처리합니다.
//  사용자에게 HTML 폼을 반환합니다. 사용자는 이 폼을 통해 사용자 이름을 입력하고 제출할 수 있습니다.

app.listen(5000);