1) DELETE

DELETE FROM 테이블명 (WHERE 조건);

: 조건이 있으면 조건에 맞는 행만 삭제됨

: 조건이 없으면 모든 행이 삭제됨

(테이블은 남아있음)

2) DROP

DROP TABLE 테이블명;

: 테이블을 통째로 삭제하는 것

주의해서 사용해야 함

3) TRUNCATE

TRUNCATE 테이블명;

: 모든 행이 삭제됨

(테이블은 남아있음)

DELETE는 AI 남아있음 → TRUNCATE 사용하면 깔끔하게 AI 초기화 됨

PRIMARY키, FOREIGN 키 설정은 그대로!

오류 발생

참조되는 orderedBook 데이터 삭제하기 위해 truncate해줬지만 오류가 발생함

🚨 Error Code: 1701. Cannot truncate a table referenced in a foreign key constraint (Bookshop.orderedBook, CONSTRAINT fk_orderedBook_orders_id FOREIGN KEY (order_id) REFERENCES Bookshop.orders (id))

SET FOREIGN_KEY_CHECKS=0; // false
SET FOREIGN_KEY_CHECKS=1; // true

Node.js 비동기 처리 방식

• 비동기 발생

실행되는 코드가 기다려야 하는 시간이 생긴다는 의미

ex. setTimeOut(), Ajax, setInterval(), query()

→ sql 실행하면 db 프로그램 실행하러 가기 때문에 node.js는 기다려주지 않고 다음 코드를 실행한다.

• 비동기 처리

비동기가 필요 없을 때가 있다. . 지금!

이전 코드들의 시간을 다 기다려준다. 순서를 맞춰서 코드를 실행해준다.

1. 콜백 함수: 할 일 다 하고, 이거 실행해줘(= 순서 맞춰서 이걸 뒤에 실행해달라고)
2. promise (resolve, reject)
3. then & catch
4. async & await

Promise “객체” : 약속을 지키는 친구

let promise = new Promise(function(resolve, reject) {
    setTimeout(()=> resolve('완료'), 3000);
});

promise.then(
    function(result){
    console.log(result)
    }, 
    function(error){
    }
);

let promise = new Promise(function(resolve, reject) {
    setTimeout(()=> resolve('완료'), 3000);
}).then(
    function(result){
        console.log(result);
        return result+"!!!!!";
    },
    function(error){}
).then(
    function(result){
        console.log(result);
        return result+"!!!!!";
    },
    function(error){}
).then(
    function(result){
        console.log(result);
        return result+"!!!!!";
    },
    function(error){}
)
;

promise는 매개변수로 함수를 받음

excutor? 지킬 약속(할 일)

성공적으로 하면 resolve(결과), 실패하면 reject(에러)

일을 다 하면 무조건 콜백함수 resolve 또는 reject 둘 중 하나는 호출

then()은 기본 메소드, promise가 일 다 하고 호출해야하는 함수

chaining

async & await

promise 객체를 좀 더 쉽고 편하게 사용 문법

즉 비동기 처리가 쉽다

async 함수

function f(){} // 일반 함수
async function f() {} // async 함수

async function f() {
    return 7; // promise 객체를 반환 중
}

async function f() {
    return Promise.resolve(7);
}

f().then(
    function(result){
     console.log("promise resolve: ",result);
    },
    function(error){
     console.log("promise resolve: ",error);
    }
);

async 함수는 무조건 promise 객체를 반환

만약 반환값이 promise가 아니면, promise.resolve()로 감싼다.

await는 async 함수 안에서만 동작!

await이 promise 객체 .then() 이 메소드를 좀 더 쉽게 사용할 수 있는 방법

async의 두 번째 기능

Promise 객체가 일이 끝날 때까지 기다릴 수 있는 공간을 제공한다.

async function(){
    let promise = new Promise(function(resolve, reject) {
    setTimeout(()=> resolve("완료"), 3000);
});

    let result=await promise;
    console.log(result);
}

f();

async 함수 안에서 promise 객체 기다림

async function(){
    let promise1 = new Promise(function(resolve, reject) {
    setTimeout(()=> resolve("첫번째 쿼리"), 3000);
});

    let result1 = await promise1;
    console.log(result1);

        let promise2 = new Promise(function(resolve, reject) {
    setTimeout(()=> resolve("두번째 쿼리 with"+result1), 3000);
});

    let result2 = await promise2;
    console.log(result2);

    let promise2 = new Promise(function(resolve, reject) {
    setTimeout(()=> resolve("세번째 쿼리 with"+result2), 3000);
});
    let result3 = await promise3;
    console.log(result3);
}

f();

const orderItems=(req,res)=>{
    const { items, delivery, totalQuantity, totalPrice, userId, firstBookTitle} = req.body;

    let delivery_id;
    let order_id;

    let sql=`INSERT INTO delivery(address, receiver, contact) VALUES(?,?,?)`
    let values=[delivery.address, delivery.receiver, delivery.contact];

    conn.query(sql, values,
        (err,results)=>{
            if(err){
                console.log(err)
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            delivery_id=results.insertId;
            console.log("results.insertId",results.insertId)
            console.log("conn.query - delivery_id",delivery_id)
        }
    )

    console.log("out - delivery_id",delivery_id);

    sql = `INSERT INTO orders (book_title, total_quantity, total_price, user_id, delivery_id)
            VALUES(?, ?, ?, ?, ?)`;
    values = [firstBookTitle, totalQuantity, totalPrice, userId, delivery_id]
        conn.query(sql, values,
        (err,results)=>{
            if(err){
                console.log(err)
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            order_id=results.insertId;
        }
    )
    sql=`INSERT INTO orderedBook (order_id, book_id, quantity) VALUES ?`
    values=[];
    items.forEach((item)=>{
        values.push([order_id, item.book_id, item.quantity])
        }
    )
    conn.query(sql, [values],
        (err,results)=>{
            if(err){
                console.log(err)
                return res.status(StatusCodes.BAD_REQUEST).end();
            }
            return res.status(StatusCodes.OK).json(results);
        }
    )
}

const mariadb = require('mysql2/promise')

const connection = async () => {
    const conn = await mariadb.createConnection({
        host: 'localhost',
        user: 'root',
        password: 'root',
        database: 'Bookshop',
        dateStrings: true
    });

    return conn;
}

module.exports=connection;

Promise Wrappers | Quickstart

쿼리 순서대로 실행시키기

1. LAST_INSERT_ID() 함수

LAST_INSERT_ID() 함수는 가장 최근에 AUTO_INCREMENT 컬럼에 삽입된 값을 반환한다. 이 함수의 가장 큰 장점은 멀티 유저 환경에서도 안정적으로 마지막으로 삽입된 행의 ID를 가져올 수 있다는 것이다. 즉, 여러 사용자가 동시에 데이터를 삽입하더라도 각 사용자는 자신이 삽입한 데이터의 ID를 정확히 가져올 수 있다.

INSERT INTO orders (title, quantity) VALUES ('어린왕자', 1);
SELECT LAST_INSERT_ID();

장점

• 멀티 유저 환경에서도 안전하게 사용할 수 있다.
• 세션별로 마지막 삽입 ID를 유지하기 때문에 다른 세션의 작업에 영향을 받지 않는다.

단점

• 시간차 공격으로 인해 오류가 간혹 발생할 수 있다. 매우 드문 경우지만, 네트워크 지연 등의 이유로 예상치 못한 값이 반환될 수 있음

2. MAX() 함수

MAX() 함수를 사용하여 특정 컬럼의 최대값을 찾는 방법도 있다. 이 방식은 특히 AUTO_INCREMENT 속성이 없는 컬럼에서 마지막으로 삽입된 값을 찾고자 할 때 유용하다.

SELECT MAX(order_id) FROM orders;

장점

• AUTO_INCREMENT 속성이 없는 컬럼에서도 사용할 수 있다.

단점

• 멀티 유저 환경에서는 안정적이지 않을 수 있다. 동시에 여러 사용자가 데이터를 삽입하면, 어떤 사용자의 데이터가 마지막인지 구분하기 어려울 수 있다.
• 성능 문제가 발생할 수 있다. 대용량 데이터가 있는 테이블에서는 MAX() 함수의 처리 시간이 길어질 수 있다.

작업의 특성과 환경에 따라 적절한 방법을 선택하는 것이 중요하다. 일반적으로 LAST_INSERT_ID() 함수의 사용이 더 안정적이고 추천되는 방법이라고 한다!

🚨 ERROR: 121 Duplicate key on write or update

외래키 제약 조건을 생성할 때, 데이터베이스 내에 동일한 이름의 제약 조건이 존재하여 오류가 발생했다. cartItems 테이블의 user_id 컬럼이 users 테이블의 id 컬럼을 참조하는 외래키 제약 조건을 생성하려고 할 때, 이미 같은 이름을 가진 제약 조건이 있다면 이 오류가 발생한다.

외래키 제약 조건 이름을 지을 때 중복을 피하기 위해 규칙을 설정할 수 있다.

fk_기준이 되는 테이블 명_참조키가 있는 테이블 명_참조키

예를 들어 cartItems 테이블의 user_id가 users 테이블의 id를 참조한다면, 이 외래키 제약 조건의 이름은 fk_cartItems_users_id로 지을 수 있다.

이름을 바꿔주니 오류가 사라졌다. 규칙대로 이름을 지어준다면 이름이 중복되진 않을 것 같다!

🚨 ERROR 1061: Duplicate key name 'book_id_idx’

제약 조건 이름을 바꿔주고나니 이번엔 인덱스에서 중복이 발생했다. 제약 조건은 이름을 바꿔주었지만 인덱스 값은 아래와 같이 변경이 되지 않고 그대로 적용이 되어 오류가 났다.

인덱스도 마찬가지로 규칙에 맞춰 fk_cartItems_users_id_idx 이런 식으로 변경해주니 오류가 해결됐다.

Duplicate key 오류는 처음부터 이름을 신중하게 지어주는 것만으로도 충분히 예방할 수 있을 것이다. 외래키 제약 조건이나 인덱스를 생성할 때, 이미 존재하는 이름을 피하기 위한 명명 규칙을 세워두는 것이 좋을 것이다. 나중에 오류 해결하느라 시간을 다 잡하먹는 것보단 미연에 방지하는 것이 좋겠지!

API 설계에서 중요한 점은 각 엔드포인트가 명확하게 정의되고, 각 기능에 필요한 데이터가 적절하게 반영되는 것이다.

요구사항 분석 및 리소스 식별

• 좋아요: 사용자가 도서에 좋아요를 추가하거나 취소할 수 있어야 한다.bookId
• 장바구니: 사용자가 도서를 장바구니에 담고, 장바구니를 조회하거나 도서를 삭제할 수 있어야 한다. cartItemId, bookId, count
• 주문: 사용자가 장바구니에 담은 도서를 주문할 수 있어야 한다. orderId, items, delivery
• 결제: 사용자가 주문을 확정하고 결제할 수 있어야 한다. totalPrice, deliveryDetails

엔드포인트 설계

좋아요 API

1. 좋아요 추가

   • Method: PUT
   • URI: /likes/(bookId)
   • 설명: 특정 도서에 대해 좋아요를 추가

2. 좋아요 취소

   • Method: DELETE
   • URI: /likes/(bookId)
   • 설명: 특정 도서에 대해 좋아요를 취소

장바구니 API

1. 장바구니 담기 Method: POST URI: /cart 설명: 도서를 장바구니에 추가 Request Body: { bookId: "도서 id", count: "수량" }

2. 장바구니 조회 Method: GET URI: /cart 설명: 장바구니에 담긴 도서 목록을 조회

3. 장바구니 삭제 Method: DELETE URI: /cart/(bookId) 설명: 장바구니에서 특정 도서를 삭제

주문 API

1. 주문 예상 상품 목록 조회 Method: GET URI: /cart 설명: 선택된 장바구니 항목의 주문 예상 목록을 조회 Request Body: [cartItemId, cartItemId, …]

2. 주문 목록(내역) 조회 Method: GET URI: /orders 설명: 사용자의 주문 내역을 조회

3. 주문 상세 상품 조회 Method: GET URI: /orders/{orderId} 설명: 특정 주문의 상세 내역을 조회

데이터 모델링

• 중복을 최소화하고, 관계형 데이터베이스의 장점을 살리기 위해 테이블 간의 관계를 정의한다. 이는 데이터 무결성을 유지하고, 효율적인 데이터 관리를 가능하게 한다.

Books (도서 정보 저장)

CREATE TABLE books (
    book_id SERIAL PRIMARY KEY,
    title VARCHAR(255),
    summary TEXT,
    author VARCHAR(255),
    price DECIMAL(10, 2)
);

Likes (사용자가 좋아요 표시한 도서 정보 저장)

CREATE TABLE likes (
    like_id SERIAL PRIMARY KEY,
    user_id INTEGER,
    book_id INTEGER REFERENCES books(book_id),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Carts (사용자 장바구니 정보 저장)

CREATE TABLE carts (
    cart_id SERIAL PRIMARY KEY,
    user_id INTEGER,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CartItems (장바구니에 담긴 각 도서 정보 저장)

CREATE TABLE cart_items (
    cart_item_id SERIAL PRIMARY KEY,
    cart_id INTEGER REFERENCES carts(cart_id),
    book_id INTEGER REFERENCES books(book_id),
    count INTEGER
);

Orders (주문 정보 저장)

CREATE TABLE orders (
    order_id SERIAL PRIMARY KEY,
    user_id INTEGER,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    address VARCHAR(255),
    receiver VARCHAR(50),
    contact VARCHAR(20),
    total_price DECIMAL(10, 2)
);

OrderItems (주문에 포함된 각 도서 정보 저장)

CREATE TABLE order_items (
    order_item_id SERIAL PRIMARY KEY,
    order_id INTEGER REFERENCES orders(order_id),
    book_id INTEGER REFERENCES books(book_id),
    count INTEGER,
    price DECIMAL(10, 2)
);

결제 API 추가

장바구니 기능 설계하는 과정에서 결제가 필요하다는 요구사항 발생! 이를 추가해준다.

결제하기 (주문 등록)

• Method: POST
• URI: /orders
• 설명: 장바구니에 담긴 도서를 주문하고 결제한다. 주문이 완료되면 해당 장바구니 항목은 삭제된다.
• Request Body:

  {
      "items": [
          {
              "cartItemId": "장바구니 도서 id",
              "bookId": "도서 id",
              "count": "수량"
          },
          {
              "cartItemId": "장바구니 도서 id",
              "bookId": "도서 id",
              "count": "수량"
          }
      ],
      "delivery": {
          "address": "주소",
          "receiver": "이름",
          "contact": "010-0000-0000"
      },
      "totalPrice": "총 금액"
  }

현업에서는 API 설계가 매우 중요할 것이고, 데이터베이스 스키마 역시 효율적이고 확장 가능한 설계가 중요할 것이다. 설계가 튼튼하다면 시스템의 안정성과 유지 보수성을 높일 수 있다. 이러한 설계 과정은 개발 초기 단계에 충분히 검토하고 논의해야 할 것이다. 혼자 해결할 수 있는 문제라기 보다 팀원들의 피드백도 반영하여 최대한 개선해 나가는 방향이 옳을 것이다. 현업에서는 한 달 가까이 걸쳐 정하는 부분이라는 강사님의 말씀에 충분히 그럴 수 있단 생각을 했다...

로그인 세션에서 인증/인가의 차이 사용자가 로그인을 하면 서버는 해당 사용자의 로그인 세션을 생성하게 된다. 이 세션은 사용자가 로그인 상태를 유지할 수 있게 해주며, 세션이 만료되면 사용자는 다시 로그인을 해야한다.

인증(Authentication) vs 인가(Authoriztion)

• 인증: 사용자가 누구인지 확인하는 과정이다. 예를 들어, 쇼핑몰에서 장바구니에 상품을 담거나 구매할 때 로그인이 필요하다.
• 인가: 인증된 사용자가 특정 자원에 접근할 수 있는 권한을 가지고 있는지 확인하는 과정이다. 예를 들어, 관리자 페이지는 일반 사용자가 아닌 관리자만 접근할 수 있다.

쿠키 vs 세션

Cookie & Session 개념

쿠키

로그인 시 서버는 사용자에게 쿠키를 발급하고, 이후 사용자와 서버 간의 통신 시 이 쿠키를 이용해 사용자를 식별한다.(쿠키를 클라이언트와 서버가 주고받으며 사용자 인증 유지)

• 장점: 서버의 저장 공간을 절약하고, HTTP의 Stateless 특성을 유지할 수 있다.
• 단점: 보안에 취약하다.

세션

로그인 시 서버가 정보를 저장하고, 그에 대한 식별 번호를 클라이언트에게 전달한다.

• 장점: 보안성이 비교적 좋다.
• 단점: 서버의 저장 공간을 사용하며, HTTP의 Stateless 특성을 유지하지 못한다.

JWT(JSON Web Token)

jwt.io

웹 표준으로, 두 개체 사이에서 JSON 객체를 사용하여 가볍고 자가수용적인(self-contained) 방식으로 정보를 안전하게 전송하기 위해 설계되었다. 주로 사용자 인증 및 정보 교환에 사용된다.

cf. 자가수용적(self-contained) - 그 자체로 필요한 모든 정보를 포함하고 있다는 의미로, 토큰을 검증하고 사용자를 인증하는 데 필요한 정보가 토큰 안에 이미 포함되어 있어 별도의 정보 조회 과정 없이도 토큰만으로 사용자 인증 및 권한 부여 동의 처리가 가능하다는 것을 의미.

JWT 구조

구조는 세 부분으로 나누어진다. 헤더(Header), 페이로드(Payload), 시그니처(Signature).

1. 헤더(Header) 헤더는 토큰의 타입(주로 JWT)과 사용된 해싱 알고리즘(예: HMAC SHA256 또는 RSA)을 포함하는 두 부분으로 구성된다. 이는 JSON 형식으로 인코딩되며, 이후 Base64Url로 인코딩되어 JWT의 첫 번째 부분을 형성한다.

   {
   "alg": "HS256",
   "typ": "JWT"
   }

2. 페이로드(Payload) 페이로드는 토큰에 포함될 클레임(claim)을 담고 있다. 클레임은 엔티티(주로 사용자 정보)와 추가 데이터에 대한 내용이다. 페이로드도 JSON 형식으로 인코딩되며 Base64Url로 인코딩되어 JWT의 두 번째 부분을 형성한다.

   {
   "sub": "1234567890",
   "name": "John Doe",
   "admin": true
   }
   

3. 시그니처(Signature)
시그니처는 토큰의 무결성과 정보의 검증을 보장하기 위해 생성된다. 헤더의 인코딩된 문자열, 페이로드의 인코딩된 문자열, 그리고 비밀키를 사용하여 헤더에서 지정한 알고리즘으로 해싱된 후 생성된다. 이 시그니처는 Base64Url로 인코딩되어 JWT의 세 번째 부분을 형성한다.


JWT는 이 세 부분을 점(.)을 사용하여 연결하여 하나의 문자열로 만든다. JWT를 사용하면 사용자 인증 정보를 안전하게 전송할 수 있고, 서버는 해당 토큰이 변조되지 않았음을 검증할 수 있다. 



<br>


### JWT 인증/인가 절차
1. **클라이언트**는 로그인 요청을 한다.
2. **서버**는 로그인이 성공하면 JWT를 발급한다.
3. **클라이언트**는 이후 요청 시 JWT를 Header에 포함시켜 서버에 전송한다. 
4. **서버**는 JWT의 서명을 확인하고, 요청에 대한 응답을 한다. (서명이 일치하지 않는 경우, 403 권한 없음 오류를 반환한다.)


### JWT 구현
Node.js 환경에서 [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)과 [dotenv](https://www.npmjs.com/package/dotenv) 패키지를 활용하여 JWT 기반 인증 시스템을 구축할 수 있다. 
1. `npm install jsonwebtoken dotenv`로 필요한 패키지 설치
2. `.env` 파일에 환경변수(예: PRIVATE_KEY)를 설정하여 외부에 노출되면 안 되는 값 관리
3. jsonwebtoken 패키지를 사용하여 JWT를 발행하고 검증하는 로직 구현

```jsx
var jwt=require('jsonwebtoken');
var dotenv=require('dotenv');

dotenv.config();

// JWT 발행
var token = jwt.sign({foo:'bar'}, process.env.PRIVATE_KEY);
console.log(token);

// JWT 검증
var decoded = jwt.verify(token, process.env.PRIVATE_KEY);
console.log(decoded.foo); // 'bar'

환경 변수 파일(.env) 환경 변수 파일은 중요한 설정 값들을 외부에 유출되지 않도록 관리하기 위한 파일이다. 예를 들어, 데이터베이스 계정 정보, 비밀키 등이 이에 해당한다.

🔑

웹 애플리케이션 개발 시 사용자로부터 입력받은 데이터의 유효성을 검사하는 것은 매우 중요하다. Node.js의 Express 프레임워크에서는 express-validator 모듈을 통해 간편하게 입력 데이터의 유효성 검사를 수행할 수 있다. 이 글에서는 express-validator의 기본 사용법과 실제 프로젝트에서 유효성 검사 로직을 모듈화하는 방법에 대해 알아보자.

express-validator 설치 및 기본 사용법

먼저 express-validator를 프로젝트에 설치한다.

npm install express-validator

설치가 완료되면, 다음과 같이 express-validator의 검사 함수들을 이용하여 유효성 검사를 수행할 수 있다.

const express = require('express');
const { body, validationResult } = require('express-validator');
const app = express();

app.use(express.json());

app.post('/user', [
  body('userId').notEmpty().isInt().withMessage('userId는 숫자여야 합니다.'),
  body('name').isString().isLength({ min: 2 }).withMessage('이름은 2글자 이상의 문자열이어야 합니다.')
], (req, res) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array() });
  }
  // 데이터 처리 로직
});

app.listen(3000);

위 예제에서는 POST 요청으로 전달된 userId와 name 필드에 대한 유효성 검사를 수행한다. userId는 비어 있지 않고 숫자여야 하며, name은 문자열이고 최소 2글자 이상이어야 한다. 유효성 검사에 실패한 경우, 400 상태 코드와 함께 에러 메시지를 응답한다.

유효성 검사 미들웨어 분리

유효성 검사 코드는 여러 라우트에서 중복될 수 있으므로, 반복을 피하기 위해 별도의 미들웨어로 분리하는 것이 좋다. 이를 위해 먼저 유효성 검사 결과를 확인하고 처리하는 로직을 함수로 만든다.

const { validationResult } = require('express-validator');

const validate = (req, res, next) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array() });
  }
  next();
};

이제 validate 함수를 미들웨어로서 사용하여 유효성 검사 로직을 재사용할 수 있다.

const express = require('express');
const { body } = require('express-validator');
const app = express();
app.use(express.json());

app.post('/user', [
  body('userId').notEmpty().isInt(),
  body('name').isString().isLength({ min: 2 }),
  validate
], (req, res) => {
  // 데이터 처리 로직
});

app.listen(3000);

위와 같이 유효성 검사 로직을 분리함으로써, 코드의 중복을 줄이고 유지보수를 용이하게 할 수 있다.

정리

express-validator를 사용하여 Express 애플리케이션에서 입력 데이터의 유효성을 쉽게 검사할 수 있다. 유효성 검사 로직을 미들웨어로 분리함으로써 코드의 재사용성을 높이고, 프로젝트의 구조를 개선할 수 있다.

• MySQL Workbench를 실행한 후, 상단 메뉴에서 Database > Connect to Database를 선택한다.

• 연결 설정

  • Connection Method: Standard (TCP/IP)
  • Hostname: 127.0.0.1 또는 localhost
  • Port: MySQL 서버가 사용 중인 포트 (기본값은 3306)
  • Username: 데이터베이스 사용자 이름, 예: root
  • Password: 연결을 위한 비밀번호 (설정된 경우)

테이블 생성

Create Table 옵션을 사용하여 새 테이블을 정의한다다. 테이블의 이름과 필요한 컬럼을 추가한다.

Node.js와 DB 연동

Node.js 애플리케이션에서 MySQL 데이터베이스를 사용하려면 적절한 npm 패키지를 설치해야 한다. 여러 패키지들 중 npm: mysql2 패키지가 성능이 개선되어 사용이 권장된다.

• 패키지 설치 npm install --save mysql2

• 데이터베이스 연결 및 쿼리 실행 예제

  // Get the client
  const mysql = require('mysql2');
  
  // Create the connection to database
  const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    database: 'test',
    password: 'password'
  });
  
  // A simple SELECT query
  connection.query(
    'SELECT * FROM `table` WHERE `name` = "Page" AND `age` > 45',
    function (err, results, fields) {
      console.log(results); // results contains rows returned by server
      console.log(fields); // fields contains extra meta data about results, if available
    }
  );

host, user, database, password 부분은 자신의 환경에 맞게 설정해주어야 한다.

코드 작성해서 실행해도 undefined 상태라 이유를 찾다가.. 내 databse 이름이 대문자로 시작하는데, 소문자로 시작해서 그런 거였다. 이름은 대소문자 구분을 해야하나보다. 수정을 하고나니 제대로 results를 불러온다.

timestamp 설정

데이터베이스의 시간 설정을 Asia/Seoul로 변경하려면 다음 SQL 명령을 사용하면 된다.

• 세션별 시간대 설정 SET time_zone='Asia/Seoul';

• 글로벌 시간대 설정 (권장하지 않음) SET GLOBAL time_zone='Asia/Seoul'; 글로벌 설정은 시스템 시간대 설정에 영향을 줄 수 있으므로 주의해서 사용해야 한다.

GLOBAL 설정을 빼줬더니 시간대가 제대로 적용이 된 것을 확인할 수 있다.

Node.js에서 MySQL 서버의 시간대와 일치하는 시간 정보를 얻으려면, 데이터베이스 연결 설정 시 dateStrings 옵션을 true로 설정해야 한다.

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    database: 'test',
    password: 'password',
    dateStrings: true
  });

이 설정을 통해 서버로부터 반환된 날짜 및 시간 값이 문자열 형태로 처리되어, 로컬 시간대에 영향을 받지 않는다.

워크벤치를 정말 오랜만에 사용하는데 옛날 기억이 새록새록 떠올랐다. 그 때는 시간에 쫓겨 DB 연동할 때 완벽히 이해하지 못하고 구현하기 급급했는데, 이제 연동 방법도 제대로 파악하여 잘 사용할 수 있을 듯하다.

데이터베이스와 데이터베이스 관리 시스템(DBMS)은 데이터를 효율적으로 저장하고 관리, 검색하는데 필수적인 기술! 데이터베이스는 데이터의 집합체로, 데이터 중복을 최소화하고 데이터 관리를 최적화하기 위해 설계된다. DBMS는 이러한 데이터베이스를 쉽게 관리하고 조작하는 소프트웨어이다. 데이터의 생성, 조회, 수정, 삭제 등의 기능을 제공하며 이를 통해 데이터의 일관성과 무결성을 유지할 수 있다.

데이터베이스 장단점

장점

1. 중앙 집중화된 데이터 저장 - 하나의 위치에서 데이터를 관리함으로써 일관성을 유지할 수 있음
2. 데이터 접근성과 재사용성 - 데이터를 효율적으로 공유하고 재사용할 수 있어 정보의 가치를 증가시킴
3. 데이터 무결성 - 데이터베이스의 구조와 제약 조건이 데이터의 정확성을 보장함

단점

1. 복잡성 - 큰 규모의 데이터베이스는 설계와 관리가 복잡할 수 있음
2. 비용 - 유지 관리와 운영에 높은 비용이 들 수 있음
3. 보안 취약성 - 중앙 집중식 데이터는 해킹과 같은 보안 위협에 더 취약할 수 있음

DBMS 장단점

장점

1. 효율적인 데이터 관리 - 다양한 도구와 기능을 제공하여 데이터를 효과적으로 관리할 수 있음
2. 동시성 지원 - 여러 사용자가 동시에 데이터베이스 작업을 수행할 수 있도록 지원함
3. 데이터 보안과 무결성 유지 - 데이터 접근 권한 관리 및 무결성 규칙을 통해 데이터를 안전하게 보호함
4. 백업 및 복구 - 데이터의 손실을 방지하기 위해 정기적인 백업과 복구 기능을 제공함

단점

1. 높은 비용 - 고성능 DBMS는 높은 초기 투자 및 지속적인 유지 관리 비용이 필요함
2. 성능 문제 - 대용량 데이터나 복잡한 쿼리 처리 시 시스템의 성능 저하가 발생할 수 있음
3. 기술적 복잡성 - 효과적인 DBMS 운영은 전문 지식을 요구하며, 복잡한 설정과 최적화가 필요함

주요 DBMS 종류

• Oracle: 대규모 엔터프라이즈 환경에 적합한 기능을 제공
• MySQL: 오픈 소스이며 가장 널리 사용되는 관계형 데이터베이스 관리 시스템 중 하나
• MariaDB: MySQL과 호환되는 또 다른 오픈 소스 관계형 데이터베이스 시스템으로, 최적화된 기능과 보안 제공

운영회사는 다르지만, 데이터베이스 연산을 위해 사용되는 주요 명령어는 같다. 따라서 요구사항과 리소스 고려해서 적절한 시스템을 선택 해야할 것이다!

SQL(Structured Query Language)

관계형 데이터베이스에서 데이터를 관리하기 위한 표준 프로그래밍 언어. 주요 명령어는 다음과 같다.

INSERT 데이터베이스에 새로운 데이터 삽입 SELECT 데이터 조회 UPDATE 기존 데이터 수정 DELETE 데이터 삭제

RDBMS란?

관계형 데이터베이스 관리 시스템(Relational Databse Management System)의 약자로, 데이터를 테이블로 구성되는 형태로 저장한다. 이러한 테이블들은 서로 연결되어 있을 수 있고, 키를 사용하여 정의한다. 테이블은 열(column)과 행(row)으로 구성되며, 각 열은 특정 유형의 데이터를 나타내고, 각 행은 관련 데이터의 집합을 나타낸다.

데이터베이스 정규화(Normalization)

정규화는 데이터베이스 설계 과정에서 _데이터 중복을 최소화_하고, 무결성을 최대화하기 위해 데이터를 구조화하는 과정이다. 테이블을 더 작고, 관리하기 쉽게 여러 테이블로 분리하여 데이터베이스 효율성을 높인다.

정규화 과정에서의 테이블 분리는 데이터 정확성 유지되고 관리가 용이하다. 하지만 시스템 성능은 떨어질 수 있다.

데이터베이스 키(Key)

데이터베이스에서는 키(key)를 사용하여 데이터를 식별하고 조작한다. 각 키는 특정 목적을 가지고 설계된다. 아래는 여러 키 종류 중 가장 중요한 키 두 가지 개념이다.

• Primary Key(PK) 각 행을 고유하게 식별하는 키. 중복된 값이 없으며 NULL 값이 허용되지 않음

• Foreign Key(FK) 다른 테이블의 기본 키를 참조하는 키. 외래키를 통해 두 테이블 간의 관계가 형성됨

데이터베이스 관계 유형

• 1:1 한 테이블의 행이 다른 테이블의 단 하나의 행과만 연결되는 경우
• 1:N 한 테이블의 단일 행이 다른 테이블의 여러 행과 연결될 수 있음
• M:N 두 테이블 간 다수의 행이 서로 관련된 수 있는 경우

이제 데이터베이스와 DBMS의 차이점을 말하라고 하면 정확하게 설명할 수 있을 것 같다. 주요 개념들도 잊고 있었는데 강의를 들으며 함께 떠올릴 수 있었다.

Server와 Router의 역할

• Server: 클라이언트로부터 HTTP 요청을 받는다. 서버는 이 요청을 처리하기 위해 필요한 리소스를 관리하고, 요청에 따른 적절한 응답을 반환한다.
• Router: 요청을 받은 URL 및 HTTP 메소드에 따라 적절한 핸들러 함수로 요청을 전달한다. 라우터는 특정 경로(route)에 따라 처리할 로직을 정해준다.

Node.js에서의 라우팅이란?

Node.js에서 라우팅은 요청이 왔을 때 URL과 메소드에 기반하여 처리 함수(콜백 함수)를 호출하는 과정이다. 원하는 경로에 따라 적절한 방향으로 경로를 안내해주는 것이다.

const express = require('express');
const router = express.Router();

router.get('/api/path', (req, res) => {
    res.send('Response for GET request');
});

router.post('/api/path', (req, res) => {
    res.send('Response for POST request');
});

모듈화

Node.js에서는 자체적으로 개발한 서버 코드를 모듈로 만들어 다른 JavaScript 파일에서 재사용할 수 있다. module.exports와 require()를 통해 이루어진다.

// server.js
const express = require('express');
const app = express();
module.exports = app;

// index.js
const server = require('./server');
server.listen(3000);

ERD(Entity Relationship Diagram) 설계

간단하게 ERD 작성해보기

회원

채널

(* 데이터베이스에서 이름 지을 땐 snake 방식 사용)

채널 API 설계 수정 및 예외 처리

ERD 그리다보니 userId가 필요하다고 생각되어 API 수정(언제든지 맞지 않다고 생각되거나, 고도화 할 생각이 있다면 설계를 뜯어고치면 된다. 겁먹지 말자!)

• 채널 생성 API 요청: POST /channel 본문: { "channelTitle": "New Channel", "userId": "user1" } 응답: 201 Created

• 회원별 채널 조회 API 요청: GET /channels/user1 응답: 200 OK, 채널 리스트 반환

예외 처리 고도화

복잡한 if문을 간소화하고 함수를 통해 재사용 가능한 코드 조각을 만들어 예외 처리를 효과적으로 수행할 수 있다.

function notFoundChannel(res) {
    res.status(404).json({ message: '채널을 찾을 수 없습니다.' });
}

if (!channel) {
    notFoundChannel(res);
}

로그인 처리 과정

1. 클라이언트에서 전송된 userId와 password를 받는다.
2. 데이터베이스(db)를 반복적으로 검색하여 해당 userId를 가진 사용자를 찾는다.
3. 사용자가 존재하면 입력된 비밀번호와 데이터베이스에 저장된 비밀번호를 비교한다.
4. 응답 처리 1) 성공 시: 비밀번호가 일치하면 200 상태 코드와 함께 환영 메시지를 반환한다. 2) 비밀번호 불일치: 비밀번호가 일치하지 않을 경우, 400 상태 코드와 오류 메시지를 반환한다. 3) 사용자 미존재: userId에 해당하는 사용자가 없을 경우, 404 상태 코드와 오류 메시지를 반환한다.

router.post('/login', (req, res) => {
    const { userId, password } = req.body; // 요청에서 ID와 비밀번호 추출
    let loginUser = db.find(user => user.userId === userId); // DB에서 사용자 검색

    if (loginUser) {
        if (loginUser.password === password) {
            res.status(200).json({ message: `${loginUser.name}님 환영합니다!` });
        } else {
            res.status(400).json({ message: '입력 값을 다시 확인해주세요.' });
        }
    } else {
        res.status(404).json({ message: '회원 정보가 없습니다.' });
    }
});

코드를 전체적으로 올릴 수 없어 대략적으로 작성한 코드는 이렇다.

자바스크립트 Object.keys()

Object.keys() 메소드는 객체의 모든 키를 배열로 반환한다. 이를 사용하여 객체가 비어 있는지 확인할 수 있다.

const obj1 = {};
const obj2 = { message: '들어있음' };

console.log(Object.keys(obj1)); // 출력: []
console.log(Object.keys(obj2)); // 출력: ['message']
console.log(Object.keys(obj2).length === 0); // 출력: false

이 메소드는 로그인 과정에서 객체가 비어 있는지 아닌지를 확인하는 데 유용하게 사용된다.

function isExisted(obj) {
    return Object.keys(obj).length > 0;
}

이 함수는 객체에 키가 하나라도 존재하면 true를 반환하고, 그렇지 않으면 false를 반환한다. 로그인 로직에서는 이 함수를 사용하여 loginUser 객체가 비어 있는지 확인한다.

채널 API 설계

1. 채널 생성

• Method: POST
• URL: /channels
• req: { "channelTitle": "채널명" }
• res: { "message": ${channelTitle}님 채널을 응원합니다.}

2. 채널 전체 조회

• Method: GET
• URL: /channels
• req: -
• res: [ { "id": 1, "channelTitle": "채널1" }, ... ]

3. 채널 개별 조회

• Method: GET
• URL: /channels/:id
• req: -
• res: { "id": 1, "channelTitle": "채널1" }

4. 채널 수정

• Method: PUT
• URL: /channels/:id
• req: { "channelTitle": "수정된 채널명" }
• res: { "message": "채널명이 성공적으로 수정되었습니다." }

5. 채널 삭제

• Method: DELETE
• URL: /channels/:id
• req: -
• res: { "message": "채널이 성공적으로 삭제되었습니다." }

채널 API 코드 틀

Express의 route() 메소드를 사용하면 하나의 경로에 대해 여러 HTTP 메소드를 쉽게 정의할 수 있다. 이를 통해 코드의 가독성을 높이고, 유지보수를 용이하게 만들 수 있다.

const express = require('express');
const app = express();

app.route('/path')
  .get((req, res) => {
    // GET 요청 처리 로직
  })
  .post((req, res) => {
    // POST 요청 처리 로직
  })
  .put((req, res) => {
    // PUT 요청 처리 로직
  })
  .delete((req, res) => {
    // DELETE 요청 처리 로직
  });

app.listen(3000, () => console.log('Server running on port 7777'));

자주 사용하는 HTTP 상태 코드 정리

• 200 (OK): 요청이 성공적으로 처리되었다. 가장 일반적인 성공 상태 코드
• 201 (Created): 요청이 성공적으로 처리되었고 새로운 리소스가 생성되었다.
• 400 (Bad Request): 서버가 요청을 이해하지 못했다. 일반적으로 클라이언트의 요청 데이터가 형식에 맞지 않을 때 반환된다.
• 401 (Unauthorized): 이 상태 코드는 인증 실패를 나타낸다. 주로 로그인 실패 시 사용된다..
• 403 (Forbidden): 서버가 요청을 이해했지만 승인을 거부한다. 접근 권한이 없는 자원에 대한 요청에 사용된다.
• 404 (Not Found): 서버가 요청한 리소스를 찾을 수 없다. 일반적으로 잘못된 URL에 대한 요청에서 반환된다.
• 500 (Internal Server Error): 서버 내부에 오류가 발생했다. 서버가 요청을 처리할 수 없을 때 사용된다.

동일한 경로를 묶어 정의할 수 있어 중복을 최소화할 수 있었다. 중복 되는 코드는 거의 없도록 노력하려하는데 이런 편리한 메소드가 있어 정말 편리한 듯하다. 🥹 상태 코드도 이제는 설명을 찾아보지 않고도 알 수 있을 것 같다.

const express = require('express');
const app = express();
app.listen(1234);

let db = new Map();
db.set(1, "NoteBook"); // 상품 정보를 저장하는 Map
db.set(2, "Cup");
db.set(3, "Chair");

app.get('/:id', function(req, res){
    let { id } = req.params;
    id = parseInt(id); // URL에서 받은 id를 숫자로 변환

    if(db.get(id) === undefined) {
        res.json({ message: "상품을 찾을 수 없습니다." });
    } else {
        let product = { productName: db.get(id), id: id };
        res.json(product);
    }
});

Express 구조

Express - Node.js 웹 애플리케이션 프레임워크 Express는 Node.js 기반의 웹 프레임워크로, 웹 애플리케이션과 API를 빠르게 구축할 수 있게 도와준다. 미들웨어 아키텍처를 사용하여 요청과 응답 사이에 다양한 기능을 쉽게 추가할 수 있다. (미들웨어는 다음 시간에 배울 것!)

app.js 파일

app.js 파일은 Express 애플리케이션의 중심 파일로, 애플리케이션의 주요 설정을 포함한다. 예를 들어, 미들웨어 설정, 라우팅 규칙, 서비스 로직 등을 이 파일에 정의할 수 있다.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.use(logger('dev')); // 개발 중 로그를 출력하는 미들웨어
app.use(express.json()); // JSON 요청을 파싱하는 미들웨어
app.use(express.urlencoded({ extended: false })); // URL 인코딩된 데이터를 파싱하는 미들웨어
app.use(cookieParser()); // 쿠키를 파싱하는 미들웨어
app.use(express.static(path.join(__dirname, 'public'))); // 정적 파일을 제공하는 미들웨어

module.exports = app;

이 파일에서는 필요한 모듈들을 가져오고, 미들웨어를 설정한 후, 라우트를 설정한다. 모든 설정은 app 객체에 연결되어 있다.

www 파일

www 파일은 서버를 구동하는 스크립트 파일로, 실제 서버의 시작점 역할을 한다. 이 파일에서는 HTTP 서버를 생성하고, 포트를 설정하며, 서버를 시작한다.

var app = require('../app');
var debug = require('debug')('express-base:server');
var http = require('http');

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

var server = http.createServer(app);

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

이 파일에서는 app.js에서 설정된 Express 애플리케이션을 가져와 HTTP 서버 객체를 생성한다. 그리고 포트를 설정하고, 서버를 시작하여 외부의 요청을 받을 수 있도록 한다. 또한, 서버의 에러 핸들링과 리스닝 이벤트를 처리하는 부분도 포함되어 있다.

let numer=parseInt(req.params.n)-10

    res.json({
        num:number
    })

req.params 연습

//채널 주소: https://www.youtube.com/@ChimChakMan_Data

// 영상 클릭 주소: https://www.youtube.com/watch?v=0ilN6ERNCPQ

app.get('/:nickname',function(req,res){

    res.json({
        channel: req.params.nickname
        })
})

app.get('/:nickname',function(req,res){
    const param=req.params

    res.json({
        channel: params.nickname
        })
})

// 영상 클릭 주소: https://www.youtube.com/watch?v=iOZHOaYl5BY

// 타임라인 주소: https://www.youtube.com/watch?v=iOZHOaYl5BY&t=375s

t=375s→시간 뜻하는 변수

app.get('/watch',function(req,res){
    const query=req.query


    res.json({
        video: query.v,
        timeline=q.t
            })
})

?(질의) → 쿼리 스트링으로 파라미터 받기

url에 변수를 담아 뿌려본 것~

객체를 다르게 전달해보기

query={v:,t:}

app.get('/watch',function(req,res){

    const {v,t}=req.query

    res.json({
        video:v,
        timeline:t
    })
})

app.get('/watch',function(req,res){

    const {q1,q2}=req.query

    res.json({
        video:q1,
        timeline:q2
    })
})
//이렇게하면 json 값이 제대로 안 담김

객체에서는 변수이름 그대로 사용!

JS객체(JSON)의 비구조화

자바스크립트 배열 비구조화

const array=[1,2,3,4,5]

const num1=array[0]

const num4=array[3]

비구조화

const express=require('express')
app.listen(1234)

app.get('/:nickname',function(req,res){

    const {nickname}=req.param

    res.json({
        channel:nickname
    })
})

const express=require('express')
app.listen(1234)

app.get('/:nickname',function(req,res){

    const {nickname}=req.param

    res.json({
        channel:nickname
    })
})

let youtuber1={
    channelTitle="침착맨",
    sub: "243만명",
    videoNum:"6.9천개"
}

let youtuber2={
    channelTitle="침착맨 원본 박물관",
    sub: "38만명",
    videoNum:"1.3천개"
}

let youtuber3={
    channelTitle="침착맨 플러스",
    sub: "71.3만명",
    videoNum:"1.6천개"
}

app.get('/:nickname',function(){
    const {nickname}=req.params

    if(nickname=="@ChimChakMan_Official"){
        res.json(youtuber1)
    }else if (nickname=="@ChimChakMan_Data"){
        res.json(youtuber2)
    }else if(nickname=="@ChimChackMan_Plus"){
        res.json(youtuber3)
    }else{
        res.json({
        message:"모르는 유튜버입니다."
    })
})

예외처리 생각해줘야한다.

자바스크립트 네이밍 룰

kebab-case cf.snake_case

폴더/파일

알파벳 소문자

두 개이상의 단어를 합쳐서 쓸 땐 첫번째 단어와 두번째 단어 사이에 하이픈

camelCase

변수,함수

두 개이상의 단어를 합쳐서 쓸땐, 두 번째 단어의 첫글자를 대문자로

자바스크립트 Map(String)

key-value 형태

let db=new Map()
db.set(1,"NoteBook") // 키로 밸류 찾을 수 있는 한 쌍 저장
db.set(2,"Cup")
db.set(3,"Chair")

반드시 알아야 할 자료구조

map

list

express+map(string)

const express=require('express')
const app=express()
app.listen(1234)

app.get('/:id',function(req,res){

    let {id}=req.params
    id=parseInt(id)

    if(db.get(id)==undefined){
        res.json({
            message:"상품을 찾을 수 없습니다."
        })
    }else{
    res.json({
        id:id,
        productName:db.get(id)
    })
   }

})

let db=new Map()
db.set(1,"NoteBook") // 키로 밸류 찾을 수 있는 한 쌍 저장
db.set(2,"Cup")
db.set(3,"Chair")

express는 Node.js를 위한 가장 인기 있는 웹 프레임워크 중 하나로, 다양한 기능을 제공하여 개발을 편리하게 해준다. http 모듈보다 더 적은 코드로 더 많은 기능을 구현할 수 있다.

npm express

express 설치

npm i express

express 이용한 서버 구축 예제

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

JSON(JavaScript Object Notation)이란?

데이터를 전송하고 저장하는 표준 포맷 중 하나로, 키-값 쌍으로 이루어진 데이터 객체를 전달하는 데 사용된다. JavaScript에서 객체를 쉽게 생성하고 관리할 수 있다.

객체란?

객체는 JavaScript의 핵심 개념 중 하나로, 데이터와 그 데이터와 관련된 동작을 묶어 표현하는 데 사용된다.

app.get(`/products/:n`, function(req,res){

    res.json({
        num:n
    })
})

app.get(`/products/:n`, function(req,res){

// : => 어? 나한테 URL로 매개변수를 전달해줄 건가보다
// products/_ 빈칸에 오는 값을 n이라는 변수에 담아줘

    res.json({
        num: req.params
    })
})

조금 더 응용하면 이렇게 작성할 수 있을 것이다!

app.get('/products/:id', function(req, res) {
    let productId = req.params.id;  // URL에서 id 값을 추출
    // 데이터베이스에서 productId에 해당하는 정보를 조회
    res.json({
        id: productId,
        name: "상품명",
        price: 20000
    });
});

HTTP 메소드는 웹 서버와 통신할 때 사용자의 의도를 명시적으로 표현하는 방법이다. 각 메소드는 특정 작업을 수행하도록 설계되었다.

• GET 데이터 조회
• POST 새로운 데이터 생성(=등록)
• PUT 기존 데이터 전체적으로 수정(덮어쓰기, 값이 있든없든 바꼈는 말든 무조건 수정)
• PATCH 기존 데이터 중 일부를 수정(값이 바꼈다면, 바뀐 값만 수정)
• DELETE 데이터 삭제
• HEAD, OPTIONS, CONNECT, TRACE 다른 보조적인 기능

cf. PATCH - 부분 수정 개인정보 수정 같이 특정 요소만 바꿈 → 부분 수정! 코드 작성할 때 PATCH는 까다로운 면이 있다.

Node.js 개요

Node.js는 이벤트 기반, 비동기 I/O를 지원하는 JavaScript 런타임 환경이다. 프론트엔드 개발 뿐만 아니라 백엔드 개발에도 사용된다. 대표적인 사례로는 넷플릭스, 에어비앤비, 링크드인, 우버 등등...nasa까지!

Node.js 특징

• 싱글 스레드: 모든 요청을 단일 스레드에서 처리한다.
• 이벤트 기반: 이벤트가 발생할 때마다 콜백 함수를 호출한다.
• 논블로킹 I/O: I/O 작업이 CPU 작업과 동시에 일어날 수 있도록 한다.

여기서도 강사님의 기가막힌 비유!

• 싱글 스레드 ⇒ 식당에서 단 한 명의 요리사가 여러 주문을 동시에 처리하는 것과 비슷하다. 주문이 계속 밀려들어와도 한명이 어떻게든 처리해야 한다. 라면 1개, 볶음밥 1개 주문이 들어왔다. 라면 조리 10분 중 물 끓는 시간이 5분이고, 볶음밥 완성하는데 5분이 걸린다면 라면 물 올려놓고 볶음밥 요리하고 라면을 요리하면 효율이 극대화가 될 것이다!
• 이벤트 기반 ⇒ 주문이 들어와야만 일을 한다.(=주문이 없으면 일을 하지 않음)
• 논 블로킹 I/O(막히는게 없는 입출력) ⇒ 한 명이 일을 하는데, 요리를 순차적으로 하지 않고 중간중간 비는 시간이 있으면 다른 요리를 한다.

논 블로킹 실습 setTimeout

function first(){
    console.log("첫 번쨰");
}

function second(){
    console.log("두 번쨰");
}

function third(){
    console.log("세 번쨰");
}

first();
setTimeout(second, 2000);
third();

모듈

모듈이란?

재사용 가능한 코드 덩어리를 의미한다. 이는 프로그램의 특정 기능을 담당하는 코드 부분으로, 다른 프로그램에서 쉽게 불러와 사용할 수 있습니다. 모듈화는 코드의 재사용성을 높이고, 관리를 용이하게 하며, 네임스페이스를 분리하여 코드 충돌을 방지합니다.

모듈 종류

1. 내장 모듈 프로그래밍 언어나 환경에 기본적으로 내장되어 있는 모듈. (예: Node.js의 http, fs 모듈)
2. 외장 모듈 다른 개발자들이 만들어 공유한 모듈로, npm(Node Package Manager)을 통해 설치하여 사용할 수 있다. (예: express, react)

라이브러리 vs 프레임워크

라이브러리와 프레임워크는 코드 재사용을 돕는 도구지만, 사용 방식에 차이가 있다.

• 라이브러리(Library) 라이브러리는 개발자가 필요에 따라 선택적으로 사용할 수 있는 도구 모음. 개발자가 프로그램의 흐름을 제어하며, 필요할 때 특정 기능을 라이브러리에서 호출하여 사용. (예: jQuery, Lodash)
• 프레임워크(Framework) 프레임워크는 전체적인 애플리케이션의 구조(틀)를 제공. 프레임워크가 프로그램의 흐름을 제어하고, 개발자는 프레임워크가 정한 규칙에 따라 코드를 작성. 프레임워크는 필요한 모든 라이브러리를 포함하고 있을 수 있다. (예: Angular, Spring)

라이브러리는 상세 주제의 한권의 책을 골라내는 것. 내가 원하는 기준에 맞춰서! 장점은 내가 원하는 걸 빌릴 수 있고, 단점은 고르기가 힘들 수도 있다. 찾는 시간 오래걸리고 도서관 가는 시간 등 고려해야할 게 많다. 라이브러리도 똑같은 미리 만들어놓은 모듈, 코드를 직접 찾아 선택해서 사용할 수 있음(빌려서 프로젝트에 적용해볼 수 있는 것)

라이브러리=모듈

프레임워크는 틀 안에서 일을 하는 것 내가 원하는(만들고싶은) 서비스 만들기(구현하기) 위한 모든 일을 틀 안에서 하는 것 프레임워크는 필요해보이는 라이브러리(모듈)를 미리 다 틀 안에 넣어뒀다! 프레임워크가 지원하는 라이브러리 사용

npm, figlet 사용해보기

npm(Node Package Manager)

npm은 Node.js의 패키지 관리자로, Node.js와 함께 자동으로 설치된다. npm을 사용하면 다양한 자바스크립트 라이브러리와 모듈을 쉽게 설치, 관리, 삭제할 수 있다.

주요 기능

npm install [패키지명] 또는 npm i [패키지명]: 패키지 설치 npm install -g [패키지명] (전역 설치): 글로벌 설치 npm uninstall [패키지명]: 패키지 제거 package.json: 프로젝트의 의존성을 관리하는 파일 package-lock.json: 설치된 모든 패키지의 정확한 버전을 기록하여 의존성을 일관되게 유지하는 파일 node_modules: 설치된 모든 npm 패키지가 저장되는 폴더

npm | Home

figlet 모듈 사용하기

figlet은 ASCII 아트를 생성하는 데 사용되는 npm 모듈이다. 텍스트를 스타일리시한 아트 형식으로 변환해주는 도구. npm: figlet

npm i figlet

var figlet = require("figlet");

figlet("Bang Subeen!", function (err, data) {
  if (err) {
    console.log("Something went wrong...");
    console.dir(err);
    return;
  }
  console.log(data);
});

함수의 매개변수로 변수 또는 값을 전달하는 것이 아니라, 함수를 전달하는 것! _콜백 함수_라고 부르는 바로 그것.

함수 이름 없이 익명 함수 매개변수로 넘겨준다.(익명 함수 쓰는 이유는 이 함수를 쓸 일이 다른 데는 없어 한 번만 사용하기 때문)

첫 번째 매개변수 문자열을 받아서 아스키 아트를 만든 다음에 두 번째 매개변수 function 함수를 실행 = 콜백!

Node.js 서버 예제

let http=require('http');

function onRequest(request, response){
    response.writeHead(200,{'Content-Type':'text/html'});
    response.write('Hello Node.js');
    response.end();
}

http.createServer(onRequest).listen(8888);

이 스크립트는 8888 포트에서 서버를 실행하고, 웹 브라우저에서 접근할 경우 "Hello Node.js" 메시지를 표시한다. http.createServer() 메소드는 요청을 처리할 콜백 함수를 매개변수로 받는다.

let, const 및 템플릿 문자열

• let: 블록 범위의 지역 변수를 선언하며, 선언된 블록 내에서만 유효하다.
• const: 블록 범위의 상수를 선언하며, 선언 후에는 값을 변경할 수 없다.
• 템플릿 문자열: 백틱을 사용하여 문자열을 표현하며, ${expression} 형태로 표현식을 문자열 안에 삽입할 수 있다.

백엔드 개발자는 _API(Application Programming Interface)_를 개발하여 서로 다른 소프트웨어 혹은 시스템 간의 연결을 가능하게 한다. 예를 들어, 지하철 도착 정보 어플을 만들고자 할 때, 개인이 직접적으로 서울 교통 공사의 데이터베이스에 접근하는 것은 보안상 허용되지 않는다.😂 대신, 백엔드 개발자는 안전하게 접근할 수 있는 API를 개발한다.

• API의 역할 API는 애플리케이션과 서울 교통 공사의 데이터베이스 사이의 중재가 역할을 한다. 개발자는 API를 통해 지하철 도착 시간, 역 정보 등의 데이터 요청을 할 수 있다. (단순히 데이터를 "줘"라는 요청 뿐만 아니라, 필요에 따라 데이터 연산이나 처리를 요구하는 복잡한 작업을 수행할 수 있다.)
• 데이터 요청 애플리케이션 사용자가 지하철 도착 정보를 요청할 때, API는 이 요청을 서울 교통 공사의 데이터베이스로 전달하고, 필요한 데이터를 검색하여 애플리케이션으로 다시 전송한다.

Interface란?

두 개체 혹은 시스템 간의 중재자/매개체 역할을 한다. 사용자 인터페이스(UI)는 아래와 같은 두 가지 주요 형태가 있다.

• GUI(Graphic User Interface): 그래픽을 통해 사용자가 시스템과 상호작용하는 방식
• CLI(Command Line Interface): 텍스트 명령어를 통해 시스템과 상호작용하는 방식

REST API 정의

REST API(Representational State Transfer API)는 웹 표준을 기반으로 개발된 API이다. HTTP 프로토콜의 원칙을 준수하면서 웹에서의 데이터 교환을 원활하게 한다. 각 리소스는 URL로 고유하게 식별되며, 표준 HTTP 메소드를 사용하여 리소스 상태를 조회하거나 업데이트한다.

강사님이 이해하기 쉽게 비유를 해주셔서 가려운 곳을 긁은 기분이었다..

데이터 "아무렇게나" 주고 받으면 되는 건가? 아니! 웹(=인터넷 망 속 가상 공간) 개발자는 인터넷을 돌아다니기 위한 규약을 지켜야만 한다. = HTTP를 지켜야 한다.

과거에는 HTTP 형식을 무시하고 비효율적으로 데이터를 교환했었지만, 2000년대 초반 HTTP 창시자들이 이 형식 따를 때 효율이 극대화된다고 강조한 이후, 이 규칙을 엄격히 지키기 시작했다.

• REST API : HTTP 규약을 따르면서 데이터 교환을 효율적으로 수행할 수 있도록 설계된 API
• RESTful API: HTTP 규약을 매우 철저히 준수하여 설계된 API, 통신의 표준화를 한층 더 높여준다.

따라서 인터넷 상에서 원활한 데이터 공유와 전달을 위해 모든 데이터는 HTTP 프로토콜의 규약에 따라 안전하게 전송되어야 한다.

+ REST API 특징

1. Stateless: 각 요청이 독립적으로 처리된다. 서버는 클라이언트의 상태를 저장하지 않는다.
2. Uniform Interface: 통일된 인터페이스를 통해 시스템 내부 구현을 숨기고, 각 요소가 서로 독립적으로 진화할 수 있게 한다.
3. Cacheable: 응답은 캐시 가능성이 명시되어야 하며, 적절한 관리를 통해 성능을 향상시킬 수 있다.

좋은 REST API 설계 규칙

• 소문자 사용: 대소문자 구별하기 때문에 일관성 유지하기 위해 소문자만 사용
• 하이픈(-) 사용: 가독성을 높이기 위해 언더바(_) 대신 하이픈(-) 사용
• 끝에 슬래시(/) 포함하지 않기: URI 끝에 슬래시(/) 포함하지 않음
• 행위를 포함하지 않음: 리소스에 대한 행위를 포함하지 않음. 행위는 HTTP 메소드(GET, POST, PUT, DELETE)로 표현함
• 파일 확장자 포함하지 않기: 리소스 표현은 HTTP 헤더를 통해 관리함
• 복수형 명사 사용: 리소스는 복수형 명사를 사용하여 표현함

URL+method 연습을 한 번 해보자!

• 상품 등록: POST /products
• 전체 상품 조회: GET /products
• 상품 개별 조회: GET /products/{id}
• 상품 수정: PUT /products/{id}
• 전체 상품 삭제: DELETE /products

ex. /product/1 ⇒ id=1인 데이터를 수정함

cf. 복수형으로 표현하면 좋은 이유

• 상품들 중에서 id값을 가지는 개별 데이터라는 의미를 이해할 수 있음
• 통일감 줄 수 있음

위와 같이 연습해본 것을 “API 설계”라고 부른다! 이제 나도 API 설계 해봤다!라고 말할 수 있다. 이러한 설계 원칙과 구조를 따름으로써 더욱 명확하고 효율적으로 데이터를 처리하고 사용자에게 서비스를 제공할 수 있다.

메인 페이지

앞서배운 <div>, <a>, <img> 등의 태그를 사용하여 테니스 마켓 메인 페이지를 구현해보았다. order list를 클릭하면 주문 내역 페이지로 이동하고, order 버튼을 클릭하면 해당 색상 라켓을 주문할 수 있도록 추후 데이터베이스와 연결할 예정이다.

백엔드

백엔드의 구조

백엔드는 클라이언트에서 발생한 요청이 웹 서버를 거쳐 웹 어플리케이션 서버로 이동하고, 이곳에서 처리 후 데이터베이스와 상호 작용을 통해 필요한 데이터를 조작한 뒤 응답을 반환하는 구조로 이루어져 있다.

• 요청 이동 경로 클라이언트 -> 웹 서버 -> 웹 어플리케이션 서버 -> 데이터베이스
• 응답 이동 경로 데이터베이스 -> 웹 어플리케이션 서버 -> 웹 서버 -> 클라이언트

웹 서버의 역할

웹 서버는 주로 정적 페이지를 처리한다. 동적 페이지에 대한 처리는 직접하지 않고, 웹 어플리케이션 서버에 위임한다.

• 정적 페이지: 화면의 내용/데이터 등 고정된 데이터를 보여주는 페이지
• 동적 페이지: 사용자의 요청에 따라 데이터 처리/연산을 통해 화면의 내용, 데이터가 변경되는 페이지

웹 어플리케이션 서버와 데이터베이스

웹 어플리케이션 서버는 동적 페이지를 처리한다. 필요한 데이터 연산을 위해 데이터베이스와 연결되어 있으며 데이터 조회, 수정, 삭제에 대한 처리를 요청한다.

• 데이터베이스: 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 말한다. 다음 시간에 더 자세히 다룰 예정!

Node.js의 이해

Node.js란?

JavaScript를 사용하여 서버 측 어플리케이션을 구축할 수 있게 하는 플랫폼이다. 이를 통해 JavaScript를 백엔드 프로그래밍에도 활용할 수 있다.

Node.js를 이용한 웹 서버 구축

HTTP 모듈 사용

Node.js의 http 모듈을 사용하여 HTTP 서버를 구축할 수 있다. require() 함수로 모듈을 불러와서 사용 가능하다.

HTTP 통신 구조

• 헤더(Head): 요청과 응답의 상태를 나타내는 정보를 포함 예: 200(성공) 404(찾을 수 없음) 500(서버 오류)
• 바디(Body): 클라이언트에게 전달될 실제 데이터

서버 모듈화

내가 구현한 서버 로직을 모듈화하여 다른 JavaScript 파일에서 재사용할 수 있다. module.exports를 사용하여 다른 파일에서 require()로 불러올 수 있게 한다.

URL 처리

• URL(Uniform Resource Locator): 인터넷 상에서 자원의 위치를 나타내는 주소(하나의 정보를 공유할 수 있는 공간), 쉽게 말해 웹 페이지 주소 예: htto://localhost:8888 로컬 호스트에서 포트 번호로 8888번을 사용하는 주소
• 포트 번호(port number): 클라이언트와 서버가 대화(연결)를 하고 싶다면, 같은 주파수를 맞춰야 한다.

CSS란?

CSS(Cascading Style Sheets)는 HTML로 작성된 웹 페이지를 꾸며주는 스타일 시트 언어. HTML 요소 각각에 스타일을 적용해서 세밀하게 디자인 할 수 있다. CSS를 활용하면 웹 페이지의 색상, 정렬, 폰트 등 다양한 시각적 요소를 손쉽게 조정할 수 있다. CSS를 HTML에 적용하는 방법은 크게 세 가지가 있다.

1. 인라인 스타일(Inline Style)

HTML 태그 내에 style 속성을 사용하여 직접 스타일을 적용하는 방법. 각 태그에 개별적으로 스타일을 적용할 수 있으나, 스타일 정보가 HTML과 혼합되어 관리가 복잡해질 수 있다.

<h1 style="color: cornflowerblue; text-align: center;">로그인</h1>

2. 내부 스타일 시트(Internal Style Sheet)

HTML 문서의 <head> 섹션 내에 <style> 태그를 사용하여 스타일을 정의하는 방법. 하나의 HTML 문서에만 적용되며, 문서 내에서 요소를 일괄적으로 스타일링 할 수 있다.

<style>
    h1 {
        color: cornflowerblue;
        text-align: center;
    }
    .login_input {
        font-size: 20px;
    }
    #btn_login {
        font-size: 20px;
        width: 100px;
        height: 30px;
    }
</style>

인라인보다 코드가 훨씬 깔끔하고 알아보기 편리함

3. 외부 스타일 시트(External Style Sheet)

CSS 코드를 별도의 파일로 작성하고 HTML 문서에서 링크를 통해 참조하는 방법. 여러 HTML 문서에서 동일한 스타일 시트를 재사용할 수 있어 유지보수가 용이하다.

<link rel="stylesheet" href="login.css">

각 방법은 사용 상황에 따라 장단점이 있으며, 큰 프로젝트에서는 주로 외부 스타일 시트를 사용하여 스타일을 관리하는 것이 일반적이다. 외부 스타일 시트를 사용하면 HTML과 CSS를 분리하여 관리할 수 있기 때문에, 코드의 가독성과 재사용성이 향상된다.

Javascript의 이해

Javascript란?

Javascript는 웹 페이지에서 사용되는 스크립트 언어로, 특정 HTML 요소를 선택하여 동적으로 제어할 수 있고 사용자와의 상호작용을 가능하게 한다.(예: 글자 변경, 버튼 비활성화, 색상 변경 등)

스크립트 언어란?

독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 (프로그램 내부의 구성 요소 중 하나로)프로그램을 제어하는 스크립트 역할을 하는 언어이다. 최근 빠르게 발전하는 런타임 환경 덕분에 스크립트 언어만으로도 충분히 프로그래밍이 가능해져 역할이 확장되고 있다.

HTML에 Javascript를 적용하는 방법

• 인라인(Inline): HTML 태그의 이벤트 속성에 직접 스크립트 코드를 작성한다. 예를 들어, 버튼에 클릭 이벤트를 추가할 때 사용한다.
• 내부 스크립트(Internal script): HTML 문서 내에 <script> 태그를 사용해 스크립트를 직접 삽입한다.
• 외부 스크립트(External script): 외부 .js 파일을 작성하고 HTML 문서에 연결한다. 이 방법은 유지보수가 쉽고, 여러 HTML 문서에서 재사용할 수 있다.

인라인 스크립트 예제

<input id="btn_login" type="button" value="Login" onclick="alert('clicked!')">

onclick 속성을 사용하여 사용자가 버튼을 클릭하면 경고창이 나타나게 한다.

함수(Function)

특정 기능을 수행하는 코드 블록. 필요할 때마다 호출하여 사용할 수 있다.

function 함수 이름(){
    // 함수가 수행할 작업
}

내부 스크립트 예제

태그를 찾고 이벤트를 처리하는 자바스크립트 함수를 내부 스크립트로 작성할 수 있다.

<script>
    /* ID란에 입력된 값을 팝업창에 띄우기 */
    function popId(){
        alert(document.getElementById('txt_id').value);     
    }

    /* 나만의 함수 만들고, 버튼 클릭하면 호출하기 */
    function myFunction(){
        alert('로');  
        alert('그');
        alert('인');
    }
</script>

HTML 요소(element) 찾는 방법

• ID로 찾기: document.getElementById('아이디')
• 클래스 이름으로 찾기: document.getElementByClassName(클래스 이름')
• 태그 이름으로 찾기: document.getElementByTagName('태그 이름')

document는 해당 문서를 뜻하고 .은 해당 문서 중에서 ~의(Of)란 뜻

조건문(if문)

조건문은 특정 조건에 따라 다른 행동을 하도록 프로그램을 지시하는 구문이다. JavaScript에서 if문은 주어진 조건이 참(true)일 때 코드 블록을 실행하고, 그렇지 않을 경우 다른 코드 블록을 실행할 수 있도록 한다.

if (조건) {
    // 조건이 참일 때 실행될 코드
} else {
    // 조건이 거짓일 때 실행될 코드
}

예를 들어, 사용자가 입력한 아이디가 비어 있는지 확인하고, 비어 있다면 경고 메시지를 표시하려고 한다면 아래와 같이 코드를 작성할 수 있다.

if (userId === '') {
    alert('아이디를 입력해주세요.');
} else {
    alert('입력된 아이디: ' + userId);
}

변수

변수는 데이터를 저장할 수 있는 저장공간이다.(데이터(값)을 담아놓는 상자) JavaScript에서 변수를 선언하는 키워드에는 let, var, const가 있다. 각각의 키워드는 변수의 사용범위와 수정 가능성에 따라 선택해서 사용한다.

• let: 블록 범위(scope) 지역 변수를 선언하며, 선언된 블록, 문 또는 표현식에서만 유효하다. 변수의 값이 변할 수 있다.
• var: 함수 범위(function scope) 지역 변수를 선언하며, 오래된 프로젝트나 구식 코드에서 주로 볼 수 있다.
• const: 값이 변경되지 않는 상수를 선언할 때 사용한다. let과 마찬가지로 블록 범위를 가지며, 한번 할당된 값은 변경할 수 없다.

변수를 사용하면 중복을 최소화하여 코드를 더욱 깔끔하고 관리하기 쉽게 만들 수 있으며, 데이터를 효율적으로 처리할 수 있다.

📦 변수는 쉽게 말해 상자라고 할 수 있다. 데이터(값)를 담아놓는 상자! 상자 안에 데이터를 담아두고, 뭐가 들어있는지 이름표를 달아주면 된다.

외부 스크립트

JavaScript 코드를 별도의 파일에 작성하고 HTML 문서에 연결하여 사용하는 방법. 이를 통해 HTML 문서와 JavaScript 코드를 분리함으로써 유지보수가 쉽고, 코드의 재사용성이 높아진다.

<script type="text/javascript" src="login.js"></script>

src 속성에는 외부 JavaScript 파일의 경로를 지정한다. 이렇게 하면 해당 JavaScript 파일의 코드가 HTML 문서에서 실행된다. 이 방식은 웹 페이지의 로딩 속도를 최적화하고, 스크립트 관리를 간편하게 할 수 있는 장점이 있다.

인터넷(Internet)

인터넷은 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가지며, International Networkd의 약어이다. 이는 "우리는 모두 연결되어 있다"는 개념을 상징한다. 여기서 인터넷과 웹은 같지 않다는 점을 느낄 수 있어야 한다.

웹(Web)이란?

월드 와이드 웹(World Wide Web), 줄여서 WWW, W3 또는 웹(Web)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간이다. 웹은 정보의 공유 수단으로서 기능한다.

웹(Web)의 시작

1980년대 스위스의 유럽 입자 물리 연구소(CERN)에서 근무하던 컴퓨터 과학자 팀 버너스-리에 의해 탄생되었다. 이는 연구원들 간 신속한 정보 교환을 목적으로 고안되었다. 페이스북의 탄생 배경과 비슷한 맥락을 가지고 있다.

웹(Web)의 특징

웹은 정보를 하이퍼텍스트 형식으로 표현하고, 사용자가 하이퍼텍스트(링크)를 통해 다양한 정보나 문서들을 서로 연결하며 접근할 수 있게 한다.

*하이퍼텍스트(Hypertext)란, 단순히 글자가 아닌 그 이상의 기능을 가진 텍스트로 주로 링크, 참조의 역할을 하는 기술을 말함

웹 페이지 vs 웹 사이트

웹 페이지와 웹 사이트는 다른 개념이다! 웹 페이지는 책의 한 페이지와 같고, 웹 페이지의 링크를 따라 다른 웹 페이지로 이동하는 것을 웹 서핑 혹은 웹 브라우징이라고 한다. 웹 사이트는 여러 웹 페이지가 모여서 만들어진 책과 같다.

웹 브라우저(Web brower)란?

웹 브라우저는 웹 페이지나 웹 상의 데이터를 찾거나 읽을 때 사용하는 도구이다. 사용자가 웹을 통해 정보를 검색하고 접근할 수 있게 해주는 소프트웨어로, 우리가 인터넷을 탐색할 때 필수적인 도구이다.

🏗️ 웹의 구조

클라이언트와 서버

현실 세계에서의 클라이언트와 서버 관계는 고객과 서빙하는 사람의 관계와 비슷하다. 고객(클라이언트)이 요청을 하고, 서빙하는 사람(서버)이 그 요청을 처리하여 서비스를 제공한다. 웹에서도 이와 유사한 구조를 이루고 있다.

• 클라이언트(Client): 서비스를 이용하며 요청을 하는 컴퓨터
• 서버(Server): 요청받은 서비스를 제공하는 컴퓨터

웹에서 클라이언트는 웹 브라우저를 통해 서버에 접속하여 웹 페이지나 기타 서비스를 요청하고, 서버는 이러한 요청을 처리하여 필요한 데이터를 클라이언트에게 전송한다.

프로토콜

클라이언트와 서버가 서로 정보를 주고 받을 때에는 특정한 규칙이나 약속, 즉 프로토콜을 지켜야 한다. 이 프로토콜은 데이터 교환의 기준을 정하며, 웹에서는 주로 HTTP(Hyper Text Transfer Protocol)가 사용된다.

웹 사용 방법

• 요청 사용자가 웹 브라우저에 웹 페이지의 주소(URL)를 입력한다. 웹 브라우저는 이 주소를 인터넷을 통해 해당 웹 서버에 전달하며, 웹 페이지를 요청한다.
• 응답 웹 서버는 요청받은 주소에 해당하는 웹 페이지나 데이터를 찾아서, 다시 인터넷을 통해 웹 브라우저로 보낸다. 웹 브라우저는 이 데이터를 받아 사용자에게 웹 페이지를 표시한다.

👩🏻‍💻 웹 개발 직무 이해

프론트엔드

웹 서비스에서 사용자의 측면(Client-side)에서 작동하는 그래픽 사용자 인터페이스를 말한다. 프론트엔드는 웹 페이지에서 발생하는 상호작용(예: 글자 입력, 버튼 클릭, 화면 출력)을 담당한다. 사용자가 보고 직접 다루는 모든 요소가 프론트엔드의 범위에 속한다.

백엔드

웹 서비스의 서버 측면(Server-side)에서 작동하며, 사용자 눈에는 보이지 않는다. 백엔드는 프론트엔드에서 보낸 데이터와 요청을 받아 내부 데이터베이스와의 연산을 통해 처리하고, 그 결과를 다시 프론트엔드로 전달한다. 이 과정을 통해 웹 페이지의 기능이 실행된다.

프론트엔드와 백엔드 상호작용

예를 들어 로그인 과정에서 사용자가 프론트엔드에서 로그인 요청을 하면 백엔드는 데이터베이스에서 해당 아이디를 찾는다. 아이디가 존재하면 비밀번호를 비교하여 맞다면 "환영합니다" 페이지를, 틀리다면 "로그인 실패" 메시지를 프론트엔드로 보낸다. 이와 같은 과정을 통해 사용자 인증이 이루어진다.

프론트엔드 3대 요소

웹은 주로 HTML+CSS+Javascript 세 가지 기술로 구성된다.

• HTML(HyperText Markup Language): 웹 페이지의 기본 구조를 정의함. 각 웹 페이지 요소의 위치와 역할을 설정함
• CSS(Cascading Style Sheets): 웹 페이지의 디자인과 스타일을 담당함. 색상, 레이아웃, 폰트 등 시각적 요소를 꾸며 사용자에게 보여지는 외관을 조정함.
• Javascript: 웹 페이지에 동적인 기능을 추가함. 사용자의 입력에 반응하거나, 서버로부터 데이터를 받아 웹 페이지에 실시간으로 반영하는 등의 기능을 수행함. 구성 요소들에 생명력을 불어넣음!

🔑 첫 HTML 파일 만들기

HTML이란?

HTML(HyperText Markup Language)은 웹 페이지의 구조를 명시하는 언어로, 하이퍼텍스트 즉, 웹 페이지들을 서로 연결하는 기능을 가진 텍스트. HTML은 <와 > 괄호를 사용하는 태그를 통해 웹 페이지의 각 요소를 정의한다. 태그는 보통 여는 태그(<태그>)와 닫는 태그(</태그>)의 쌍으로 구성되며, 일부 태그는 닫는 태그 없이 단독으로 사용된다(예: <br>).

자주 쓰는 HTML 태그

• <html> HTML 문서의 루트 요소를 정의함. 모든 다른 요소는 이 요소 내부에 위치해야 함.
• <head> 문서의 메타데이터(문서 제목, 문자 인코딩, 스타일 시트 링크 등)를 포함하는 부분.
• <body> 웹 페이지의 모든 내용을 포함하는 부분으로, 텍스트, 하이퍼링크, 이미지, 동영상 등이 이 안에 위치함.
• <title> 브라우저 탭에 표시되는 문서의 제목을 정의함.
• <meta> 문서의 메타데이터(예: 문자 집합, 페이지 설명, 키워드 등)를 설정하는 태그.
• <div> 플로우 컨텐츠를 위한 컨테이너로, 주로 문서를 섹션으로 나누는 데 사용됨.
• <a> 하이퍼링크를 정의하며, 다른 페이지, 파일, 이메일 주소, 위치 등으로 연결할 수 있음.
• <script> 클라이언트 사이드 스크립트, 주로 JavaScript를 문서에 포함시킬 때 사용됨.
• <link> 외부 리소스를 문서와 연결할 때 사용되며, 주로 스타일 시트를 연결하는데 사용됨.
• <span> 인라인 요소로, 텍스트의 일부분에 스타일을 적용하거나, 문서 내에서 특정 그룹을 지정하는 데 사용됨.
• <br> 줄바꿈을 생성하는 데 사용되며, 닫는 태그 없이 사용하는 태그.

로그인 페이지 만들기

HTML을 사용하여 로그인 폼을 만드는 기본적인 구조!

• <form> 사용자 입력을 웹 서버로 제출하기 위한 폼을 정의함
• <input> 사용자로부터 데이터를 입력받기 위한 입력 필드를 생성함. 'type' 속성을 통해 다양한 형태의 입력 필드(텍스트, 비밀번호, 버튼 등)를 정의할 수 있음.

아주 기본적인 구조를 만들었다보니 디자인도 적용시키고 싶고, 기능들도 추가시키고 싶었는데 강사님이 욕심으로부터 개발이 시작되는 것!이란 말씀을 해주셔서 너무 와닿았다. 욕심이 생기면 더 잘하고 싶고, 그 과정 속에서 발전해나가는 모습을 발견해나갈 수 있겠지! 이제 욕심을 많이 부려보자.