이번에 고급 프로젝트를 진행하면서 새로 알게된 Type에 대해서 몇 줄 작성하려고 한다.

원화(₩)는 10원이 현금으로 가장 작은 단위이고, 인터넷 결제 혹은 이자를 받다보면 1원 단위도 볼 수 있다. 하지만 달러($)의 경우에는 달러를 기준으로 $1.2 여기서 소수점 단위는 센트이다.

지금 우리는 한국에서만 결제를 유도하는 시스템을 만들지만, 비지니스의 영역이 확장되어서 혹은 한국 고객 뿐 아니라 해외 고객 유치가 가능하다면? 전세계 공용으로 통용되는 달러 결제 시스템을 준비해야 한다.

여기서 적용해 볼 수 있는 type이 바로 Deciml이다.

1. 영어로 보는 숫자 타입

정수: integer(1,2,3,0,-1,-2) 실수: real number(-2.5, 0, 3.14) 분수: fraction(1/2, 3/4) 소수: decimal(0.2, 2.718) 자연수: natural number(1,2,3)

위의 내용을 보았을 때 decimal은 0이상의 소수를 나타낼 수 있는 타입이라는 것을 알 수 있다.

그러면 왜 소수 뿐 아니라 금융 데이터를 다룰 때는 decimal을 사용해야 할까?

일반적으로 사용하는 부동 소수점(float, double)은 계산 과정에서 미세한 오파가 발생 할 수 있어서 돈과 관련된 계산에는 적합하지 않기 때문이다.

2. Decimal 타입에 대한 이해

DECIMAL(P,S) 타입은 고정 소수점 숫자를 저장할 수 있다.

• P(Precision, 정밀도): 숫자의 총 자릿수를 의미. 소수점 왼쪽과 오른쪽을 모두 포함한 자릿수 -> 1-65까지 지정 가능하지만 데이터 베이스마다 다를 수 있음
• S(Scale, 스케일): 소수점 이하의 자릿수를 의미. -> 0~P까지 가능

example. DECIMAL(10, 2): 총 10자리 숫자 중 소수점 이하 2자리를 저장합니다. 표현 가능한 범위는 -99999999.99부터 99999999.99까지입니다. (총 8자리 정수부 + 2자리 소수부)

3. Prisma 적용 및 활용

model Order {
  id        String   @id @default(uuid())
  userId    String
  totalAmount Decimal @db.Decimal(19, 4)
  createdAt DateTime @default(now())
}

• Decimal: Prisma 내부에서 사용하는 타입 이름
• @db.Decimal(P, S): 데이터베이스에 실제 생성될 컬럼의 타입을 지정
• P (Precision): 숫자의 총 자릿수 (소수점 왼쪽 + 소수점 오른쪽).
• S (Scale): 소수점 이하 자릿수. 이 값들은 사용하려는 데이터베이스의 DECIMAL 타입 규칙을 따르기(예: MySQL은 최대 65, 30)

4. 타입스크립트 Type 지정 Prisma는 Decimal 타입 필드를 처리할 때, JavaScript의 기본 number 타입이 아닌, Decimal.js 라이브러리의 Decimal 객체를 사용하도록 타입 정의를 생성한다.. 따라서 TypeScript 코드에서는 Decimal.js의 Decimal 타입을 import.

1) decimal 라이브러리 이용

a) decimal.js 라이브러리 설치

pm install decimal.js
npm install -D @types/decimal.js

b) TypeScript 코드에서 사용하기 Decimal 타입의 값을 다룰 때는 항상 Decimal.js 객체로 생성하고, 계산하며, 문자열로 변환하여 사용

import { PrismaClient, Prisma } from '@prisma/client';
import Decimal from 'decimal.js'; // Decimal.js 라이브러리 임포트


const prisma = new PrismaClient();

async function createAndGetProduct() {
  // 1. Prisma에 데이터 생성/업데이트 시 Decimal 값 처리
  // Decimal 값을 넘겨줄 때는 문자열 또는 Decimal.js 객체로 넘겨줘야 합니다.
  const newProduct = await prisma.product.create({
    data: {
      name: 'Smart Watch',
      price: new Decimal('199.99'), // Decimal.js 객체로 생성하여 전달 (가장 안전)
      // price: '199.99', // 문자열로 전달해도 Prisma가 Decimal.js 객체로 변환해줍니다.
    },
  });

  console.log('Created Product:', newProduct);
  // newProduct.price는 Decimal.js의 Decimal 객체 타입입니다.
  // console.log(typeof newProduct.price); // object
  // console.log(newProduct.price instanceof Decimal); // true

  // 2. Prisma에서 Decimal 값을 가져왔을 때
  const product = await prisma.product.findUnique({
    where: { id: newProduct.id },
  });

  if (product) {
    // product.price는 Decimal.js의 Decimal 객체입니다.
    console.log('Product Price (Decimal object):', product.price);

    // 3. Decimal 값으로 계산 수행 시 (반드시 Decimal.js 메서드 사용)
    const taxRate = new Decimal('0.10'); // 10%
    const priceWithTax = product.price.t
```imes(taxRate).plus(product.price);

    console.log('Price with Tax (Decimal object):', priceWithTax);

    // 4. Decimal 값을 문자열로 변환하여 출력하거나 API 응답으로 보낼 때
    console.log('Price with Tax (string, 2 decimal places):', priceWithTax.toFixed(2)); // "219.99"
    console.log('Price with Tax (full string):', priceWithTax.toString()); // "219.989" (정확한 값)

    // 5. 숫자로 변환해야 할 경우 
    // 필요한 경우가 아니라면 Number()로 변환하지 마세요.
    // console.log('Price with Tax (number - potentially imprecise):', Number(priceWithTax.toString()));
  }
}

2) prisma - decimal 끌어오기

 import { Decimal } from "@prisma/client/runtime/library";

export const buyerUser = {
  id: "user_buyer_001",
  email: "buyer@example.com",
  name: "파는사람",
  password: "password1234",
  type: UserType.BUYER,
  point: 0,
  totalAmount: new Decimal(0),
  createdAt: new Date(),
  updatedAt: new Date(),
};

-> prisma 라이브러리를 활용한 Decimal 타입을 참조

(1) Prisma의 타입 정의와 일치 Prisma는 schema.prisma 파일에 Decimal 타입으로 정의된 필드를 가져오거나 생성할 때, JavaScript의 기본 number 타입이 아닌 decimal.js 라이브러리의 Decimal 객체로 변환하여 처리 -> totalAmount: new Decimal(0)은 Prisma가 예상하는 타입(Decimal.js의 Decimal 객체)에 맞춰 데이터를 제공하는 것입니다.

(2) 부동 소수점 오차 방지 JavaScript의 기본 number 타입은 64비트 부동 소수점(float)으로 표현되기 때문에, 0.1 + 0.2가 0.30000000000000004와 같이 미세한 오차를 가질 수 있다. 돈과 관련된 계산에서는 이러한 작은 오차도 허용되지 않기에 new Decimal(0)을 사용함으로써 0이라는 값을 정확한 십진수로 표현하고, 앞으로 이 totalAmount 필드에 대한 모든 계산(덧셈, 뺄셈 등)도 Decimal.js의 메서드(plus(), minus(), times() 등)를 사용하여 오차 없이 이루어지도록 준비하는 것입니다.

(3) 일관된 데이터 처리

데이터베이스에서 Decimal 타입으로 관리하기로 했다면, 애플리케이션 계층에서도 일관되게 관리해야 하는데 new Decimal(0)은 이러한 일관된 처리 방식의 시작점

이번에 진행하는 고급 프로젝트에서는 로그인한 유저 뿐 아니라 로그인하지 않은 유저도 접속하여 내용을 볼 수 있도록 구현해야 하는 부분이 몇 있다.

• 로그인 시에는 해당 유저에 맞춤형으로 변환
• 로그인을 안할 경우 일반 페이지 보여줌

그러면 로그인을 할 때는 header에 있는 토큰을 확인 -> 로그인 id 추출 -> 사용자 정보 반영과 같은 로직으로 갈 수 있다.

하지만 로그인 하지 않은 유저가 접속했을 때는 토큰이 없기에 토큰을 확인하는 미들웨어를 통과 할 수 없다. UnauthError가 발생할 수 있기에 로그인을 진행하여 토큰이 있다면 토큰을 확인하여 유저 정보를 반환하도록, 토큰이 없다면 일반 페이지가 보이도록 optional이 필요하였다.

원래 로그인한 유저만 접근 가능한 페이지에서는

const extractToken = (req: Request): string | null => {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith("Bearer ")) {
    return null;
  }
  return authHeader.split(" ")[1];
};

export const authMiddleware = async (
  req: Request,
  res: Response,
  next: NextFunction
) => {
  try {
    const token = extractToken(req);
    if (!token) {
      throw new UnauthError();
    }

    const { id } = verifyAccessToken(token);
    const user = await userService.getById(id);
    if (!user) {
      throw new UnauthError();
    }

    req.user = user;
    next();
  } catch {
    next(new UnauthError());
  }
};

이와 같이 토큰 정보가 없다면 "당신은 이 페이지에 접근할 수 없습니다. 로그인 상태를 확인해주세요" 의 의미의 error를 뱉으며 status = 401이 되어야 한다.

그러면 이제 이것을 로그인하지 않은 유저 또한도 접근하게 하려면 어떻게 해야할까?

export const optionalAuthMiddleware = async (
  req: Request,
  res: Response,
  next: NextFunction
) => {
  try {
    const token = extractToken(req);
    if (!token) {
      return next();
    }
    const { userId } = verifyAccessToken(token);
    const user = await userService.getById(userId);
    if (user) {
      req.user = user;
    }
  } catch {
  } finally {
    next();
  }
};

위와 같이 토큰이 없을 경우에는 이 미들웨어를 그냥 통과하도록 next()로 다른 로직으로 넘겨주면 된다.

하지만 위의 코드만 보았을 때 맥락은 맞지만 틀린 부분이 있었다.

1. 유저 정보 찾을시, next() 누락

만약에 로그인을 한 유저인 경우,

    const user = await userService.getById(userId);
    if (user) {
      req.user = user;
    }

유저의 정보를 가져왔지만, 미들웨어에서 가져온 정보이기에 다음 로직으로 넘겨줘야 하는데 next()가 누락되어 넘겨주지 못하고 미들웨어에 남아있는다.

2. error 미처리

해당 미들웨어에서는 try-catch문을 통해서 에러가 생기면 잡아서 전역 error 함수로 넘겨주도록 설계하였다.

  } catch {
  } finally {
    next();
  }
};

하지만 코드를 다시 보니 정작 error를 잡아줘야 하는 catch에는 next가 없어서 error를 넘겨주지 못하고 있다. 이렇게 되면

1) verifyAccessToken에서 토큰이 있지만 유효하지 않은 경우 2) 토큰은 유효하지만 userId를 통해서 유저를 찾으려고 할때 해당 유저가 데이터 베이스에 없는 경우

위와 같은 상황에서는 에어가 잇음에도 이를 무시해버리게 된다. 다음 서비스에서는 중복 에러 코드를 피하기 위해서 만약에 에러를 잡는 조건문을 넣지 않았다면 에러가 발생해도 정확한 원인 및 위치를 확인하기 힘들 것이다.

3. finally next() 중복 호출

    if (!token) {
      return next();
    }

토큰이 없을 때는 원래 해당 미들웨어를 종료하고, 다음 서비스 로직으로 넘어가는 것이 이 미들웨어의 특징이기에 여기서의 next() 무조건 위치되어야 합니다.

하지만,

  } catch {
  } finally {
    next();
  }
};

try 블록 내부가 아닌 끝인 finally에서 next가 호출된다면 어떻게 될까? try 내부에 next가 존재하지 않고 만약 에러가 있다고 해도 catch 문 안에서는 아무것도 없어서 에러를 찾을 수 없기에 finally에서의 next()는 무조건 호출이 될 것입니다.

[예상 사고 상황]

1. 토큰이 존재하여 if(!token)을 통과
2. verfyAccessToken(token)에서 유효하지 않은 토큰으로 인한 에러 발생
3. catch에서는 아무것도 잡을 수 없음
4. finally 블록으로 와서 next() 호출
5. optionalAuthMiddleware 함수 종료 -> next() 호출

만약에 이 미들웨어 다음에 또 다른 미들웨어나 라우트 핸들러가 next()를 호출하는 로직을 가지고 있다면, next()가 한 요청에 대해 두 번 이상 호출될 수 있다. 혹은 라우트에서 클라이언트로 정보를 보낸다면 res.status.send 이러한 상황에서는 아래와 같은 error 메시지를 마주할 수 있다.

Cannot set headers after they are sent to the client 오류 -> 이미 클라이언트에게는 응답이 전송되었지만 다시 응답을 보내려고 시도할 때 발생하는 에러

이외에도 요청 처리 흐름이 꼬여서 의도치 않은 미들웨어가 실행되거나, 데이터베이스 작업이 중복으로 발생하거나 서버가 불안정해질 수 있다.

finally은 try안에서 실행이 되든 catch로 에러를 넘기든 실행되는 블록이기에 try 안에서 해결되어 클라이언트로 응답을 보내게 되고 -> next()가 한 번 더 실행이 된다. 이럴 경우 중복 호출로 이미 응답이 완료된 다음 또 다시 헤더를 설정하거나 응답을 보내려고 시도하게 된다.

꼭 미들웨어에서 사용할 시에는,,, catch까지만 작성 + try 안에서 return next()를 통해서 이후 불필요한 코드 실행을 막아주자!

HTTP는 암호화되지 않은 방식으로 데이터를 주고받기 때문에 민감한 정보 유출 위험이 큽니다. 이를 해결하기 위해 등장한 것이 바로 HTTPS(Hypertext Transfer Protocol Secure) 입니다.

🌐 HTTPS란 무엇인가요?

HTTPS = HTTP + SSL/TLS

• 데이터를 암호화하여 기밀성(Confidentiality) 확보
• 위/변조 방지로 무결성(Integrity) 보장
• 인증서를 통해 서버 인증(Authentication) 수행

💡 왜 HTTPS를 사용해야 하나요?

• 🔐 데이터 암호화: 제3자가 볼 수 없도록 보호
• 🧱 무결성 보장: 중간에서 데이터가 변경되는 것을 방지
• ✅ 서버 인증: 위조 서버에 접속하는 것을 방지
• 📈 SEO 향상: 구글 등 검색 엔진에서 가산점
• 👥 사용자 신뢰 증가: 자물쇠 아이콘이 보안 신뢰도 상승

📜 SSL/TLS 인증서란?

HTTPS 적용에 가장 핵심적인 요소는 바로 SSL/TLS 인증서입니다.

🔐 대표적인 인증서 발급 기관 (CA)

⚙️ HTTPS 적용 단계

1️⃣ 도메인 준비 & DNS 설정

• 도메인 이름 구입 (예: example.com)
• 해당 도메인이 웹 서버의 IP 주소를 정확히 가리키도록 설정

2️⃣ SSL/TLS 인증서 발급

# CSR 생성 예시 (OpenSSL)
openssl req -new -newkey rsa:2048 -nodes -keyout your_private.key -out your_domain.csr

• CSR(Certificate Signing Request) 생성
• CA에 제출 및 도메인 소유권 검증
• 서버 인증서(.crt) + 중간 인증서(Chain) 발급

3️⃣ 웹 서버 설정 (Apache/Nginx)

✅ Apache 설정 예시

<VirtualHost *:80>
    ServerName your_domain.com
    Redirect permanent / https://your_domain.com/
</VirtualHost>

<VirtualHost *:443>
    ServerName your_domain.com

    SSLEngine on
    SSLCertificateFile /path/to/your_certificate.crt
    SSLCertificateKeyFile /path/to/your_private.key
    SSLCertificateChainFile /path/to/your_chain.crt

    DocumentRoot /var/www/your_website
</VirtualHost>

✅ Nginx 설정 예시

server {
    listen 443 ssl;
    server_name your_domain.com;

    ssl_certificate /path/to/your_certificate.crt;
    ssl_certificate_key /path/to/your_private.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:...';
    ssl_prefer_server_ciphers on;

    location / {
        root /var/www/your_website;
        index index.html;
    }
}

server {
    listen 80;
    server_name your_domain.com;
    return 301 https://$host$request_uri;
}

4️⃣ 방화벽 포트 개방

# HTTPS 포트 허용 (UFW 기준)
sudo ufw allow 443/tcp

5️⃣ 웹 서버 재시작

sudo systemctl restart nginx

또는

sudo systemctl restart apache2

6️⃣ HTTPS 적용 확인

• 웹 브라우저로 https://your_domain.com 에 접속
• 주소창에 🔒 자물쇠 모양이 나타나는지 확인
• 인증서 정보를 클릭하여 정상적으로 발급된 인증서인지 확인

🔧 SSL Labs의 SSL Server Test를 이용해 SSL/TLS 설정의 보안 점수 및 취약점을 점검할 수 있다.

🛠️ Node.js (Express) 서버에서의 HTTPS 적용 예시

Node.js 환경에서 Express 앱을 직접 HTTPS로 실행할 수 있습니다. 다만 실제 운영환경에서는 Nginx, Apache를 리버스 프록시로 사용하는 방식이 더 일반적입니다.

// server.js
const express = require('express');
const https = require('https');
const fs = require('fs');

const app = express();

// SSL/TLS 인증서 파일 경로
const privateKey = fs.readFileSync('/path/to/your_private.key', 'utf8');
const certificate = fs.readFileSync('/path/to/your_certificate.crt', 'utf8');
const ca = fs.readFileSync('/path/to/your_chain.crt', 'utf8'); // (선택 사항)

const credentials = { key: privateKey, cert: certificate, ca: ca };

// HTTP 서버 (옵션: HTTPS로 리다이렉트)
app.listen(80, () => {
  console.log('HTTP Server running on port 80');
});

// HTTPS 서버
const httpsServer = https.createServer(credentials, app);

httpsServer.listen(443, () => {
  console.log('HTTPS Server running on port 443');
});

🌐 로드 밸런서(Load Balancer)란?

로드 밸런서는 트래픽을 여러 서버에 분산하여 시스템의 성능, 안정성, 확장성을 높이는 핵심 구성 요소입니다.

💡 주요 역할

• 📶 트래픽 분산
• 🚀 성능 최적화
• ⚙️ 고가용성 (High Availability)
• 📈 확장성 (Scalability)
• 🔐 보안 강화 (SSL Offloading, DDoS 방어 등)

🔁 로드 밸런싱 알고리즘

⚙️ 로드 밸런서 종류

✅ 하드웨어 기반

• F5 BIG-IP, Citrix NetScaler 등
• 고성능/고신뢰성, 높은 비용과 복잡한 관리

✅ 소프트웨어 기반

• 오픈소스: Nginx, HAProxy 등
• 클라우드형:
  • AWS ELB (ALB, NLB)
  • Azure Load Balancer
  • Google Cloud Load Balancer

☁️ 클라우드 로드 밸런서의 작동 방식 (예: AWS ALB)

1. DNS 등록: 도메인이 로드 밸런서를 가리킴
2. 클라이언트 요청: 도메인 접속 시 로드 밸런서로 전달
3. 리스너: 80/443 포트 등에서 요청 수신
4. 대상 그룹(Target Group): 연결된 백엔드 서버 모음
5. 헬스 체크: 비정상 서버는 자동 제외
6. 라우팅 규칙: 경로, 호스트, 헤더 기반 분배
7. 응답: 결과를 클라이언트에게 전달

🔐 로드 밸런서 + HTTPS = SSL/TLS 오프로딩

SSL/TLS 오프로딩(Offloading): 로드 밸런서가 HTTPS 암호화를 처리하고, 백엔드 서버에는 복호화된 평문 요청을 전달하는 방식.

• 클라이언트 ↔ 로드 밸런서: HTTPS
• 로드 밸런서 ↔ 백엔드 서버: HTTP
• 장점: 백엔드 서버의 부하 감소, 암호화 비용 분산
• 보안: VPC 내부 통신으로 HTTP 사용에도 안전

🇶 어떤 기능을 구현할 때 WebSocket을 사용하는 것이 적절한가요?

🇶 실시간 서비스 구현에 사용되는 WebRTC와 gRPC에 대해 설명해 주세요.

💡 관계형 데이터베이스: 무결성 (Integrity)

✅ 데이터의 무결성이란?

• 정확성, 일관성, 유효성이 유지되는 상태를 의미합니다.
• 데이터의 연산이나 입력에 제한을 두어 무결성을 유지합니다.

🔒 무결성의 종류

💡 관계형 데이터베이스: 마이그레이션 (Migration)

관계형 데이터베이스 마이그레이션은 한 DB 시스템에서 다른 시스템으로 데이터 및 구조를 이전하는 과정을 말합니다.

필요성

• 업데이트: 구버전 DBMS의 지원 중단
• 성능 향상: 더 빠르고 효율적인 DBMS로 이동
• 클라우드 이전: 클라우드로 이동하여 관리 용이성 확보
• 데이터베이스 통합: 여러 시스템을 하나로 통합
• 구조 변경: 스키마나 모델 변경 필요 시

과정

1. 계획 및 분석

   • 기존 시스템과 대상 시스템 파악
   • 데이터 양, 구조, 스키마 분석

2. 데이터 추출 및 변환

   • 데이터를 추출하고, 새 시스템에 맞게 변환

3. 스키마 변환

   • 기존 스키마 → 새로운 DBMS에 맞는 스키마로 변환

4. 데이터 로드

   • 변환된 데이터를 새 DB에 로드

5. 테스트 및 검증

   • 정확성, 일관성, 성능 테스트

6. 최종 전환

   • 새 시스템으로 완전 전환하고 기존 시스템 종료

💡REST

1. 의미

• REspresentational Status Transfer
• 자원의 상태를 주고받는 모든 것을 의미
• HTTp URI를 통해서 자원(Resource)를 명시하고, HTTP Method를 통해서 해당 자원에 대한 CRUD Operation을 적용하는 것

2. 구성요소

1) Resource

: 서버는 Unique한 ID를 가지는 Resource를 가지고 있으며, 클라이언트는 이러한 Resource에 요청을 보내고 이러한 Resource는 URL에 해당한다.

2) 행위(Verb)

• HTTP 프로토콜의 Method를 사용
• HTTP 프로토콜은 GET/POST/PUT/DELETE와 같은 메서드를 제공

  3) 표현(Representation of Resource)

  : 클라이언트와 서버가 데이터를 주고받는 형태로 json, xml, text, rss 등이 있다. 최근에는 Key, Value를 활용하는 json을 주로 사용

3. 특징

1) Server-Client(서버-클라이언트 구조)

• 클라이언트에서 자원이 있는 서버에 자원을 요청하는 구조

• REST Server: API를 제공하고 비즈니스 로직 처리 및 저장

• Client : 사용자 인증이나 context(세션, 로그인 정보) 등을 직접 관리

  2) Stateless(무상태)

• HTTP 프로토콜은 Stateless Protocol이므로 REST 역시 무상태성을 갖음

• Client의 context를 Server에 저장하지 않음 -> 세션/쿠키와 같은 context 정보를 신경쓰지 않아도 되서 구현이 단순

• Server는 각각의 요청을 완전히 별개의 것으로 인식하고 처리 -> 이전의 요청이 다음 요청의 처리에 연관되어서는 안됨

• Server의 처리 방식에 일관성을 부여하고 부담이 줄어들며, 서비스의 자유도가 높아짐

  3) Cacheable(캐시 처리 기능)

• 웹 표준 HTTP 프로토콜을 그대로 사용하므로 웹에서 사용하는 기존의 인프라를 그대로 활용할 수 있기에 캐싱 기능을 적용 가능

• Last-Modified 태그나 E-Tag를 이용하면 캐싱 구현이 가능하므로 대량의 요청을 효율적으로 처리 가능

• 캐시 사용을 통해 응답시간이 빨라지고 REST Server 트랜잭션이 발생하지 않기 때문에 전체 응답시간, 성능, 서버의 자원 이용률 향상 가능

  4) Layeres System(계층화)

• Cilent 는 RESt Server만 호출 -> REST Server는 다중 계층으로 구성 가능

• API Server는 순수 비즈니스 로직을 수행하고 그 앞단에 보안, 로드밸런싱, 암호화, 사용자 인증 등을 추가하여 구조상의 유연성 부여 + 로드밸런싱, 공유 캐시등을 통해서 확장성과 보안성을 향상 가능

• RROXY, 게이트웨이 같은 네트워크 기반의 중간 매체 사용 가능

  • 로드밸런싱 : 서버가 처리해야할 업무 혹은 요청(Load)를 여러 대의 서버로 나누어 (Balancing) 처리하는 것을 의미
  • PROXY('대신'의 의미를 가짐): 중계 기능을 하는 것 -> 보안 상의 문제로 직접 통신 할 수 없을 때 중계해주는 서버를 프록시 서버라고 부름
    • 게이트웨이 : 한 네트워크(segment)에서 다른 네트워크로 이동하기 위하여 거쳐야 하는 지점. 서로 다른 네트워크를 연결함

  5) Code-On-Demand(optional)

• Server로부터 스크립트를 받아서 Cilent 에서 실행

  6) Uniform Interface(인터페이스 일관성)

• URI로 지정한 Resource에 대한 조작을 통일되고 한정적인 인터페이스로 수행

• HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용 가능

• 특정 언어나 기술에 종속되지 않음

4. 설계 규칙

1) URI는 명사를 사용 2) 슬래시(/)로 계층 관계를 표현 3) URI의 마지막에는 슬래시(/)를 붙이지 않음 4) URI는 소문자로만 구성 5) 가독성이 떨어지는 경우 하이픈을 사용 6) 대문자와 소문자로 URI를 정의하면 기억하기 어려우며 잘못 적을 가능성이 높아짐

RESTful

• REST라는 아키텍처를 구현하는 웹 서비스를 나타내기 위해 사용되는 용어
• 이해와 사용이 쉬운 REST API를 만드는 것

💡무상태성(Stateless)

: 서버와 클라언트 간의 요청이 독립적이라는 것을 의미 -> 각 요청은 서버가 클라이언트의 상태를 저장하지 않아 이전 요청의 상태에 의존 ❌

사용의 필요성

1) 서버의 확장성을 높임

서버는 각 요청을 독립적으로 처리할 수 있기 때문에, 여러 서버에 요청을 분산시킬 수 있음

2) 클라이언트와 서버 간의 통신을 단순화

클라이언트는 각 요청에 필요한 모든 정보를 포함시켜야하며, 서버는 이를 기반으로 요청을 처리

3) 서버의 복잡성 완화

서버가 클라이언트의 상태를 저장하지 않기 때문에 서버의 상태를 관리할 필요성 없어짐

4) 클라이언트와 서버를 독립적으로 개발하고 배포 가능

클라이언트와 서버 간의 통신이 독립적

유지 방법

1) 각 요청에 필요한 모든 정보 포함

클라이언트는 각 요청에 인증 정보를 포함

2) 서버는 요청을 모두 독립적으로 처리

서버는 클라이언트의 상태를 저장하지 않으며 각 요청을 독립적으로 처리

3) 클라이언트와 서버 간의 통신 단순화

클라이언트는 각 요청에 필요한 모든 정보를 포함시켜야하며, 서버는 이를 기반으로 요청을 처리

💡 CORS

• 교차 출처 리소스 공유(Cross-Origin Resource Sharing)
• 브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가해주는 HTTP 헤더 기반 메커니즘
  • 도메인(Hostname): naver.com
  • 출처(Origin): https://www.naver.com

    Example. https://domain-a.com 에서 제공되는 프론트엔드JavaScript 코드가 fetch()를 사용하여 http://domain-b.com/data.json에 요청하는 경우

CORS 에러 대응

1. 서버에서 Access-Control-Allow-Origin 헤더 설정 -> 수락할 출처 명시적 지정 가능

'Access-Control-Allow-Origin': <origin> | * // 출처상관 없이 리소스 접근 가능
'Access-Control-Allow-Origin': <origin> | https://naver.com // 네이버만 접근 가능

** 2. 프락시 서버 사용하기**

• 웹 애플리케이션이 리소스와 동일한 출처에서 요청을 보내는 것처럼 보여서 CORS 에러 방지 가능

출처 https://velog.io/@gomuzom/RESTful-Api https://f-lab.kr/insight/understanding-restful-api-20240617 https://developer.mozilla.org/ko/docs/Web/HTTP/Guides/CORS https://docs.tosspayments.com/resources/glossary/cors#%EC%84%9C%EB%B2%84%EC%97%90%EC%84%9C-access-control-allow-origin-%EC%9D%91%EB%8B%B5-%ED%97%A4%EB%8D%94-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

세션 기반 인증 vs 토큰 기반 인증

세션 기반 인증 (Session-based Authentication)

개념:

• 서버 측에서 사용자의 인증 정보를 저장하고 관리하는 방식입니다.
• 사용자가 로그인하면 서버는 세션(Session)이라는 고유한 정보를 생성하여 저장합니다.
• 이 세션 ID를 클라이언트(웹 브라우저 등)에 쿠키 형태로 전달합니다.
• 클라이언트는 이후 요청 시마다 이 쿠키를 서버에 함께 전송하여, 서버는 쿠키에 담긴 세션 ID를 통해 사용자를 식별하고 인증 상태를 유지합니다.

작동 방식:

1. 로그인 요청: 사용자가 아이디와 비밀번호 등 인증 정보를 서버에 전송합니다.
2. 인증 및 세션 생성: 서버는 받은 정보를 검증하고, 유효한 경우 세션을 생성하여 서버의 저장소 (메모리, 데이터베이스 등)에 저장합니다. 이 세션에는 사용자 정보, 로그인 시간, 만료 시간 등이 포함될 수 있습니다.
3. 세션 ID 전달: 서버는 생성된 세션의 고유한 ID를 쿠키에 담아 클라이언트에게 응답으로 보냅니다.
4. 쿠키 저장 및 전송: 클라이언트는 받은 쿠키를 저장하고, 이후 서버에 요청을 보낼 때마다 해당 쿠키를 HTTP 헤더에 담아 함께 전송합니다.
5. 세션 ID 확인 및 인증 유지: 서버는 요청에 포함된 쿠키에서 세션 ID를 추출하여 서버에 저장된 세션 정보와 비교합니다. 일치하는 세션이 있다면 해당 사용자를 인증된 것으로 간주하고 요청을 처리합니다.
6. 로그아웃: 사용자가 로그아웃하면 서버는 해당 세션을 무효화하거나 삭제하고, 클라이언트 측의 쿠키를 삭제하거나 만료시킵니다.

장점:

• 간단한 구현: 비교적 구현이 간단하고 직관적입니다.
• 중앙 집중식 관리: 서버에서 사용자 세션을 중앙에서 관리하므로 보안 정책 적용 및 사용자 정보 관리가 용이합니다.
• 세션 제어 용이: 서버에서 세션의 만료 시간을 설정하거나 강제로 로그아웃시키는 등 세션 관리가 용이합니다.
• 상태 유지 (Stateful): 서버가 세션 정보를 기억하므로 각 요청마다 사용자 정보를 다시 확인할 필요가 없습니다.

단점:

• 서버 자원 사용 증가: 많은 사용자의 세션 정보를 서버가 저장하고 관리해야 하므로 서버 부하가 증가할 수 있습니다.
• 확장성 문제: 여러 대의 서버를 사용하는 환경 (로드 밸런싱)에서 세션 동기화 문제가 발생할 수 있습니다. 이를 해결하기 위해 세션 공유 메커니즘 (예: Redis, Memcached)이 필요합니다.
• CORS (Cross-Origin Resource Sharing) 문제: 쿠키 기반 인증은 다른 도메인 간 요청에서 제약이 있을 수 있습니다.
• CSRF (Cross-Site Request Forgery) 공격에 취약: 쿠키를 이용하므로 CSRF 공격에 취약할 수 있으며, 이를 방지하기 위한 추가적인 보안 대책 (예: CSRF 토큰)이 필요합니다.

토큰 기반 인증 (Token-based Authentication)

개념:

• 클라이언트 측에서 토큰을 저장하고 사용하여 사용자를 인증하는 방식입니다.
• 사용자가 로그인하면 서버는 인증 성공 시 클라이언트에게 토큰 (일반적으로 JWT - JSON Web Token)을 발급합니다.
• 이 토큰은 클라이언트 측 (로컬 스토리지, 쿠키 등)에 저장됩니다.
• 클라이언트는 이후 요청 시마다 이 토큰을 HTTP 헤더 (Authorization 헤더에 Bearer 스키마를 사용하여 포함)에 담아 서버에 전송합니다.
• 서버는 토큰의 유효성을 검증하여 사용자를 인증합니다. 서버는 토큰 정보를 저장하지 않는 Stateless 방식입니다.

작동 방식:

1. 로그인 요청: 사용자가 아이디와 비밀번호 등 인증 정보를 서버에 전송합니다.
2. 인증 및 토큰 생성: 서버는 받은 정보를 검증하고, 유효한 경우 접근 토큰 (Access Token)을 생성하여 클라이언트에게 응답으로 보냅니다. 필요에 따라 갱신 토큰 (Refresh Token)도 함께 발급될 수 있습니다.
3. 토큰 저장: 클라이언트는 받은 토큰을 안전한 저장소 (예: Local Storage, HttpOnly 쿠키)에 저장합니다.
4. 요청 시 토큰 전송: 클라이언트는 보호된 리소스에 접근할 때마다 HTTP 요청 헤더의 Authorization 필드에 Bearer 스키마와 함께 토큰을 담아 전송합니다 (예: Authorization: Bearer <token>).
5. 토큰 검증: 서버는 요청 헤더에서 토큰을 추출하여 서명 (Signature)을 검증하고, 만료 여부 등을 확인하여 토큰의 유효성을 검증합니다.
6. 인증 및 권한 부여: 토큰이 유효하면 토큰에 포함된 정보 (Payload)를 기반으로 사용자를 식별하고 권한을 확인하여 요청을 처리합니다.
7. 로그아웃 (선택적): 토큰 기반 인증은 Stateless하므로 명시적인 로그아웃 과정이 필수는 아닙니다. 클라이언트 측에서 토큰을 삭제하면 더 이상 인증된 요청을 보낼 수 없습니다. 서버 측에서 토큰을 무효화하는 메커니즘 (예: 블랙리스트 관리)을 구현할 수도 있습니다.
8. 토큰 갱신 (Refresh Token 사용 시): 접근 토큰이 만료되면 클라이언트는 갱신 토큰을 서버에 보내 새로운 접근 토큰을 발급받을 수 있습니다.

장점:

• 확장성: 서버가 토큰 정보를 저장하지 않으므로 여러 대의 서버를 사용하는 환경에서 확장성이 뛰어납니다 (Stateless).
• 다양한 플랫폼 지원: 토큰은 쿠키에 의존하지 않으므로 웹 브라우저뿐만 아니라 모바일 앱, 데스크톱 앱 등 다양한 플랫폼에서 사용 가능합니다.
• CORS 문제 해결 용이: HTTP 헤더를 통해 토큰을 전달하므로 CORS 제약에서 비교적 자유롭습니다.
• 보안성: JWT는 서명을 통해 위변조를 방지할 수 있으며, 필요한 정보만 토큰에 담아 전송하여 보안성을 높일 수 있습니다.
• API 서버에 적합: RESTful API와 같은 Stateless 환경에 적합합니다.

단점:

• 구현 복잡성: 세션 기반 인증에 비해 구현이 다소 복잡할 수 있습니다.
• 토큰 탈취 위험: 토큰이 클라이언트 측에 저장되므로 토큰이 탈취될 경우 보안에 취약해질 수 있습니다. 토큰의 유효 기간을 짧게 설정하고 안전한 저장 방식을 사용하는 것이 중요합니다.
• 토큰 무효화의 어려움: 일단 발급된 토큰은 만료될 때까지 유효하므로, 서버 측에서 강제로 특정 토큰을 무효화하기 어려울 수 있습니다. 이를 해결하기 위해 추가적인 메커니즘 (예: 블랙리스트 관리)이 필요합니다.
• 토큰 크기: 토큰에 많은 정보를 담을 경우 크기가 커져 네트워크 트래픽을 증가시킬 수 있습니다.

요약 비교

🔖 웹 서비스에서 관계형 데이터베이스를 사용하는 이유 중 하나를 설명해 주세요.

DataBase(DB)

• 데이터를 담아두는 저장소

  1) SQL 방식

• 데이터들을 엑셀과 비슷한 표에 정리해두는 방식
• 표 사이에 관계성을 부여 가능 -> 관계성을 mapping해주는 ORM 사용
• Oracle, MySQL, Postgres

  2) NoSQL

• 서류 봉투에 문서를 모아두는 방식
• 서류봉투 = 컬렉션 -> ODM
• MongoDB, FireBase

관계형/비관계형 데이터베이스

1. 관계형 데이터베이스(RDBMS)

• 테이블과 로우, 칼럼으로 구성
• 정해진 틀 안에서 데이터를 저장하고 관리
• 데이터들 사이의 관계를 정의
• 데이터가 중복되거나 잘못된 데이터가 저장되는 것 방지 가능
• 여러 데이터 포인트 간의 관계를 쉽게 이해하고 유효한 정보 확인 가능

1) 장점

• 직관적인 데이터 표현 방법을 제공하고, 관련 데이터 포인트에 쉽게 액세스 가능
• 인벤토리 추적, 트랜잭션 데이터 처리, 애플리케이션 로깅 등 대량의 정형 데이터를 관리하는 조직에서 많이 사용
• 유연성: 전체 데이터베이스 구조를 변경하거나 기존 애플리케이션에 영향을 주지 않고 필요할 때마다 건편하게 테이블 추가, 관계 추가, 업데이트 및 삭제, 데이터 변경 용이
• ACID 규정 준수: ACID(원자성, 일관성, 격리, 내구성) 성능을 지원하며 오류, 실패 또는 기타 잠재적 오작동에 관계없이 데이터 유효성 보장
• 사용 편의성: 기술자가 아닌 사용자도 데이터 베이스와 상호작용하는 방법을 배울 수 있는 SQL을 사용하여 복잡한 쿼리를 쉽게 실행 가능
• 데이터베이스 정규화: 데이터 중보성을 줄이고 데이터 무결성을 향상시키는 정규화라고 하는 설계 기법 사용

2) 단점

• 대용량 데이터 처리에 한계가 있음
• 복잡한 데이터 구조 처리가 어려움
• 테이블 간의 관계가 복잡해질수록 성능이 저하될 수 있음
• 테이터 베이스 모델링이 개발 전에 완료되어야해서 개발속도가 더뎌짐

2. 비관계형 데이터베이스

• 규칙 기반의 테이블 형식 방식으로 데이터를 구성XX
• 데이터를 연결되지 않은 개별 파일로 저장하며 문서 또는 리치 미디어 파일과 같은 복잡한 비정형 데이터 유형에서 사용 가능

1) 장점

• 스키마가 없기 때문에 훨씬 유연하여 데이터 조정에 용이함
• 가변성 있는 데이터의 저장이 쉬움
• 데이터베이스 모델링이 완료되기 전에도 테스트 데이터 조회 가능
• 응용프로그램이 요구하는 형식으로 저장되어 데이터를 읽는 속도가 빠름
• 수직적/수평적 확장이 모두 가능

2) 단점

• 유연성으로 인해 데이터 구조 결정이 어려울 수 있음
• NoSQL마다 쿼리 언어를 다르게 사용하는 경우가 많아 이식성이 낮음
• 데이터베이스의 컬렉션이 다양한 경우 수정시 모든 컬렉션의 데이터를 수정해야함
• 문서 저장에 단위 요소 수준에서 세밀한 보안을 제공하지 않음

🔖 Primary Key와 Foreign Key에 대해 설명해 주세요.

1. Primary Key(PK) 기본키

• 데이터베이스 테이블 내의 모든 레코드에서 고유한 아이디를 제공
• 테이블에서 각 로우를 식별할 수 있는 칼럼
• 모든 레코드가 서로 다른 값을 가지고 있어 각 레코드를 식별할 수 있다
• Null 값이 존재할 수 없음
• 중복이 불가능
• 테이블에서는 하나의 기본키만 가질 수 있지만 경우에 따라 1개 이상의 기본키를 정의 가능

  2. Foreign Key(FK) 외래키

• 다른 테이블의 PK를 참조하는 컬럼 -> 관계를 만드는 작업
• 데이터가 일관될 수 있도록 돕는 역할
• 외부 키는 한 테이블의 필드로, 다른 테이블의 기본을 나타냄
• 외래 키를 가지고 있는 테이블을 하위 케이블, 기본 키를 가지고 있는 테이블을 참조 테이블또는 상위 테이블이라고 함
• 각 외부키와 기본 키는 1:1 관계로 매칭 -> 기본 키에 존재하지 않는 값이 외부키에 존재할 수 없음

출처 https://cloud.google.com/learn/what-is-a-relational-database?hl=ko https://excited-hyun.tistory.com/112 https://velog.io/@hiy7030/DB-Primary-key%EC%99%80-foreign-key

1. 프로세스(Process)란?

: 프로세스는 실행 중인 프로그램을 의미하며, 운영체제(OS)에서 자원을 할당받아 독립적으로 실행되는 단위

✅ 특징

•    운영체제로부터 독립적인 메모리 공간(코드, 데이터, 힙, 스택 등)을 할당받음
•    하나의 프로세스는 여러 개의 스레드를 가질 수 있음
•    프로세스 간에는 메모리를 공유하지 않음 (통신 시 별도의 방법이 필요함: IPC(Inter-Process Communication))

✅ 구성 요소

•    코드(Code) 영역: 실행할 명령어가 저장됨
•    데이터(Data) 영역: 전역 변수, 정적 변수 등이 저장됨
•    힙(Heap) 영역: 동적으로 할당된 메모리 공간
•    스택(Stack) 영역: 함수 호출 시 생성되는 지역 변수, 매개변수 저장

✅ 예시

•    Chrome 브라우저를 실행하면 여러 개의 프로세스가 생성됨 (탭마다 독립된 프로세스일 수도 있음)
•    VS Code를 실행하면 하나의 프로세스가 생성됨

2. 스레드(Thread)란?

: 스레드는 프로세스 내에서 실행되는 작업의 단위야. 하나의 프로세스 안에서 여러 개의 스레드가 실행 될 수 있음

✅ 특징

•    같은 프로세스 내에서 메모리(코드, 데이터, 힙)를 공유함
•    독립적인 실행 흐름(Stack을 따로 가짐)
•    프로세스보다 가볍고 빠르게 생성 및 종료됨
•    동기화 문제(데이터 충돌)가 발생할 수 있음

✅ 구성 요소

•    PC(Program Counter): 실행할 명령어 주소 저장
•    레지스터: 연산에 필요한 데이터 저장
•    스택(Stack): 함수 호출 시 지역 변수, 매개변수 저장 (스레드마다 독립적)

✅ 예시

•    웹 브라우저에서 여러 개의 탭이 동시에 실행 (각 탭이 다른 스레드일 수 있음)
•    게임에서 화면 렌더링, 입력 처리, 네트워크 통신이 동시에 수행

3. 프로세스와 스레드의 차이점

4. 멀티 프로세스 vs. 멀티 스레드

✅ 멀티 프로세스(Multi-Process)

•    여러 개의 프로세스를 실행하는 방식
•    장점: 독립적 실행 (한 프로세스가 죽어도 다른 프로세스에는 영향 없음)
•    단점: 프로세스 간 통신이 어렵고, 메모리 사용량이 많음

✅ 멀티 스레드(Multi-Thread)

•    하나의 프로세스 내에서 여러 개의 스레드를 실행하는 방식
•    장점: 메모리 공유로 인해 자원 사용 효율이 높음, 빠른 데이터 공유 가능
•    단점: 동기화 문제 발생 가능 (하나의 스레드가 문제를 일으키면 전체 프로세스에 영향을 줄 수 있음)

5. 언제 멀티 프로세스 vs. 멀티 스레드를 사용할까?

✅ 멀티 프로세스가 유리한 경우

•    독립적인 작업을 수행할 때 (크롬 브라우저의 각 탭)
•    자원 공유가 필요 없는 경우
•    하나의 작업이 실패해도 다른 작업에 영향을 주지 않아야 할 때

✅ 멀티 스레드가 유리한 경우

•    같은 데이터를 여러 개의 작업이 동시에 처리해야 할 때
•    프로세스 간 통신 비용을 줄이고 싶을 때
•    빠른 응답 속도가 필요한 경우 (게임, 실시간 채팅)

➡️ 정리

•    프로세스: 실행 중인 프로그램, 독립적인 메모리 공간을 가짐
•    스레드: 프로세스 내에서 실행되는 작업 단위, 메모리를 공유함
•    멀티 프로세스: 독립적인 작업을 여러 개 실행할 때 사용
•    멀티 스레드: 같은 데이터를 동시에 처리할 때 사용

🔹프레임워크와 라이브러리의 차이에 대해 설명해주세요.

1. 라이브러리(Library)란?

✅ 정의:

•    특정 기능을 수행하는 재사용 가능한 코드 묶음
•    개발자가 필요할 때 직접 호출해서 사용하는 방식

✅ 특징:

•    필요한 기능만 골라서 사용 가능
•    애플리케이션의 흐름을 개발자가 직접 제어
•    보통 함수, 클래스의 집합 형태

✅ 예시:

•    NumPy, Pandas (데이터 분석)
•    Lodash (JavaScript 유틸리티)
•    Matplotlib (파이썬 그래프 그리기)
•    jQuery (JavaScript DOM 조작)

2. 프레임워크(Framework)란?

✅ 정의:

•    애플리케이션 개발을 위한 전체 구조를 제공하는 틀
•    개발자가 그 틀에 맞춰 코드를 작성해야 함

✅ 특징:

•    기본적인 코드 구조가 미리 제공됨
•    개발자는 프레임워크의 규칙을 따라야 함
•    프레임워크가 애플리케이션의 흐름을 제어 (“제어의 역전” 원칙)

✅ 예시:

•    Spring (Java 웹 개발)
•    Django, Flask (Python 웹 개발)
•    React, Angular, Vue.js (JavaScript 프론트엔드)
•    Express.js (Node.js 백엔드)

3. 프레임워크와 라이브러리의 가장 큰 차이점: “제어의 흐름”

✅ 라이브러리: 개발자가 직접 호출해서 사용함

✅ 프레임워크: 프레임워크가 개발자의 코드를 호출함 (제어의 역전, Inversion of Control)

예를 들어: • jQuery (라이브러리): 개발자가 $('#button').click() 같은 코드를 직접 호출해서 사용 • React (프레임워크): React가 useEffect() 같은 함수를 알아서 호출

4. 프레임워크 vs. 라이브러리 비교 정리

5. 언제 프레임워크 vs. 라이브러리를 사용할까?

✅ 프레임워크를 선택해야 할 때 • 프로젝트의 구조를 잡아야 할 때 • 확장성과 유지보수가 중요한 경우 • 일관된 개발 방식이 필요한 경우

✅ 라이브러리를 선택해야 할 때 • 특정 기능만 필요할 때 • 프로젝트 구조에 큰 영향을 주지 않고 사용하고 싶을 때

6. 한 프로젝트에서 프레임워크와 라이브러리를 함께 사용 가능

예를 들어: • React (프레임워크) + Lodash (라이브러리) • Django (프레임워크) + NumPy (라이브러리)

➡️ 프로젝트의 큰 틀을 잡아주고, 라이브러리는 필요한 기능을 추가할 때 사용

부트캠프를 수강하는 같은 팀원들끼리 나중의 면접, 수업에 대한 깊은 이해를 위해서 ⌜모던 자바스크립트 Deep Dive⌟ 를 특정 장까지 읽고 설명하는 Study를 진행하기로 했습니다.

수업을 진행하는 7개월 남짓의 시간동안 1독 할 수 있기를...! 그리고 이 내용이 프로그래밍을 시작하는 저와같은 초보들에게도 도움이 될 수 있는 글이 될 수 있도록 잘 기록으로 남겨보겠습니다.

오늘 정리해 볼 장은 1-5장까지의 내용을 정리해보겠습니다.

** 주요 내용** 1장 프로그래밍 2장 자바스크립트란? 3장 자바스크립트 개발 환경과 실행 방법 4장 변수 5장 표현식과 문

1. 프로그래밍

• 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션
• 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업 -> "코드"
• Computational thinking(컴퓨팅 사고)

1) 컴파일러(Compiler) / 인터프리터(Interpreter)

기계어로 직접 명령을 전달하는 것에 대한 대안으로 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된 "프로그래밍 언어"를 사용하여 프로그램을 작성한 후, 그적을 컴퓨터가 이해할 수 있는 기계로 변환하는 일종의 번역기

2) 구문과 의미

console.log("Hello World")

• 프로그래밍의 언어는 구문과 의미로 이뤄짐
• 프로그램을 할 때 올바른 문법을 준수하는 것도 맞지만 의미가 있어야 함
• 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것

2. 자바스크립트란

1) 자바스크립트의 변천사

(1) 시작

약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경향 프로그래밍 언어를 도입하기로 결정하고, 그래서 탄생한 것이 "브렌던 아이크"가 개발한 "자바스크립트"

(2) 이름의 변천사

1996년 3월, "모카 Mocha" 넷스케이프 커뮤니케이션즈의 웹 브라우저인 넷 스케이프 내비케이터2에 탑재 1996년 9월, "라이브스크립트" 1996년 12월, "자바스크립트"

(3) 표준화

1996년 8월, 마이크로소프트(MS)는 자바스크립트의 파생 버전인 "JScript"를 인터넷 익스플로어에 탑재.

넷스케이프 커뮤니케이션즈와 MS는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하여 표준화보다는 적당한 호환성을 갖춤

크로스 부라우징 이슈 브라우저에 따라 웹페이지가 정상적으로 동작하지 않음.

1996년 11월 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구인 ECMA 인터네셔널에 자바스크립트 표준화 요청

1997년 7월 ECMAScript ECMA-62라 불리는 자바스크립트 포반 사양이 완성되었으나, 상표권 이슈로 ECMAScript로 명명.

*1999년 ECMAScript3 * 정규 표현식, try... catch

2009년 ECMAScript 5(EC5)와 HTML5 공개 JSON, stirt mode, 접근자 프로퍼티, 프로퍼티 어트리뷰트 제어, 향상된 배열 조작 가능(forEach, map, filtter, reduce, some, every)

*2015년 ECMAScript 6 * let/const 키워드, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래미밍 언어로서 갖춰야 할 기능들을 대거 도입하는 큰 변화가 생기고, 이후 버전은 비교적 작은 기능을 추가하는 수준으로 매년 공개할 것 예고

2) 자바스크립트의 성장

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 활용되었는데 이전에는 어떤 것이 있었는지 살펴보겠습니다.

(1) Ajax

1999년, 자바스크립트를 이용해 서버와 브라우가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능으로 등장합니다.

이전의 웹페이지는 화면이 전활 될 때마다 서버로 새로운 HTML을 전송 받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 구동되어서 화면이 순간적으로 깜박이는 현상이 발생하고, 변경할 필요 없는 부분도 렌더링하여 불필요한 데이터 통신과 성능면에서도 불리했습니다.

Ajax는 서버로부터 필요한 데이터만 전송 받아 변경해야 하는 방식이 가능해졌습니다. 빠른 성능과 부드러운 화면 전환을 제공하였습니다.

2005년, 구글이 발표한 구글 맵스는 Ajax 기반으로 동작하는 대표적인 웹 애플리션 프로그래밍 언어로 자바스크립트의 가능성을 확인하는 계기를 마련하였습니다.

(2) jQuery

2006년, 다소 번거롭고 논란이 있던 DOM(Document Object Model)을 더욱 쉽게 제어하고,, 크로스 브라우징 이슈도 어느 정도 해결하였습니다. jQuery는 넓은 사용자 층을 순식간에 확보하고, 자바스크립트보다 직관적인 jQuery를 선호하는 개발자가 양성되기도 했습니다.

(3) V8 자바스크립트 엔진

2008년, 구글 맵스를 통해서 자바스크립트의 가능성을 확인하고, 더욱 빠르게 동작하는 자바스크립트의 엔진의 필요성이 대두될 때 이러한 요구를 만족하는 빠른 성을 보여주는 엔진으로 V8 자바스크립트 엔진이 등장하게 되었습니다. 데스크톱 애플리케이션과 유사한 사용자 경험(UX)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었습니다. 이 당시, 웹 서버에서 수행되던 로직이 대거 클라이언트(브라우저)로 이동했고, 웹 애플리케이션 개발 영역에서 프론트엔드 영역이 주목받는 계기로 작용하게되었습니다.

(5) Node.js

2009년, 라이언 달이 발표한 Node.js는 구글 V8자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 입니다. 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시키는 환경입니다. 다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP등 내장 API를 제공합니다. 프론트엔드와 백엔드 영역에서 자바스크립트를 사용할 수 있다는 동형성은 별도의 언어를 학습하기 위한 시간을 덜 수 있다는 장점이 있습니다. Node.js는 비동기I/O를 지원하며 단일 스레드 이벤트 루프 기반으로 동작함으로써 요청 처리 성능이 좋습니다. 데이터를 실시간으로 처리하기 위해 I/O가 빈번하게 발생하는 Single Page Application 에 적합하고, CPU 사용률이 높은 애플리케이션에는 권장하지 않습니다.

(6) SPA 프레임워크

모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색이 없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 더불어 개발 규모와 복잡도도 상승되었습니다. 이전의 개발 방식으로는 복잡해진 개발 과정을 수행하기 어려워졌고, 이러한 니즈에 따라서 많은 패턴과 라이브러리가 출현했습니다. 하지만, 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처의 구축을 어렵게 했고, 필연적으로 프레인워크가 등장하였습니다. Component Based Delvelopment 방법론을 기반으로 하는 SPA의 대중화가 시작되며, Angular, React, Vue.js, Sevlte등 다양한 프레임워크와 라이브러리 또한 많은 사용층을 확보하고 있습니다.

3) 자바스크립트의 특징

1) 웹 브라우저에서 동작하는 유일한 프로그래밍 언어

2) 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어

• 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장접을 겹합해 비교적 처리 속도가 느린 인터프리터의 단점 보완
• 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신 코드를 생성하고 최적화

  3) 멀티 패러다임 프로그래밍 언어

• 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍 지원

3. 변수

1) 변수의 필요성

10+20

위와 같은 연산이 있다고 했을 때, 자바스크립트 엔진은 + 연산을 수행하기 위해 먼저, 연산자의 좌변과 우변의 숫자 값(피연산자)를 기억합니다.

이 때 컴퓨터는 CPU를 통해서 연산, 메모리를 통해 데이터를 기억합니다.

메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이고, 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 셀의 크기 즉 1 바이트 잔위로 데이터를 저장하거나 읽습니다.

각 셀은 공유의 메모리 주소를 갖는데, 이 주소는 메모리 공간의 위치를 나타내며 0부터 시작해서 메모리의 크기만큼 정수로 표현됩니다.

ex. 4GB -> 0 ~ 4,294,967,295(0x00000000 ~ 0xFFFFFFFF)

컴퓨터는 모든 데이터(종류 상관 없이)를 2진수 처리하여, 2진수로 저장됩니다.

"10 + 20" 을 연연산해서 만들어낸 30을 재사용 할 수 없습니다. 계속 재사용을 하거 싶다면 결과 30이 저장된 메모리 주소에 집접 접근하는 방법 밖에 없습니다. 하지만 메모리 주소에 직접 접그하는 방법은 치명적인 오류를 발생시킬 가능성이 매우 높은 위험한 일입니다. 실수로 운영체제가 사용하고 있는 값을 변경하면 시스템을 멈추게 하는 치명적인 오류가 발생할 수 있기에 자바스크립트는 직접적인 메모리 제어를 하지 않습니다.

만약 개발자의 직접적인 메모리 제어를 허용해도 문제가 될 수 있는데, 메모리 주소는 코드가 실행될 때 메모리 상황에 따라 임의로 결정되어 동일한 컴퓨터, 동일한 메모리에서 실행을 해도 코드가 실행될 때마다 값이 저장될 메모리 주소도 변경됩니다.

위와 같은 상황에서 "변수"를 활용합니다.

(1) 변수

: 하나릐 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 -> 값의 위치를 가리키는 상징적인 이름

var result = 10+20;

위와 같이 코드를 작성하게되면, 30이라는 값을 result에 저장하려 재사용 할 수 있습니다.

• 변수 이름 : result
• 변수 값 : 30
• 할당(대입, 저장) : 변수에 값을 저장하는 것
• 참조: 변수에 저장된 값을 읽어 들이는 것

변수 할당을 통해서 메모리에 값을 저장하고, 재사용이 가능하며, 사람이 이해할 수 있는 언어로 명명한 변수 이름을 통해 변수에 저장된 값의 의미를 알고 가독성을 높일 수 있습니다.

(2) 식별자

• 어떤 값을 구별해서 식별할 수 있는 고유한 이름, 변수의 또 다른 이름

• 값이 아니라 메모리 주소를 기억하고 있어서 메모리 공간에 저장된 값에 접근 가능

• 변수, 함수, 클래스 등의 이름은 모두 식별자 -> 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식.별.자.

(3) var을 활용한 변수 선언

: 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것 -> 변수 생성하는것

1️⃣ var 키워드 선언

var score

키워드 : 자바스크립트 엔진은 키워드를 만나면 자신이 수행해야할 약속된 동작을 수행

2️⃣ 변수 이름을 등록하고 값을 저장할 메모리 공간 확보

• 아직 변수에 값을 할당하지 않아서 메모리 공간이 비어있을 것으로 생각할 수 있으나, 확보된 공간에는 undefined 이 암묵적으로 할당되어 초기화
• 초기화를 거치지 않을 경우 이전에 다른 애플리켕션이 사용했던 값이 남아있을 수 있는데 이러한 "쓰레기 값" 이 출력
• 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러) 발생

undefined : 원시 타입의 값 실행 컨텍스트 : 변수 이름을 비롯한 모든 식별자가 등록되는 곳. 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 활용을 제공하고 코드의 실행 결과를 실제로 관리하는 영역. key, velue의 형식인 객체로 등록되어 관리

3️⃣ 변수 실행과 호이스팅

console.log(score);
var score;

위와 같이 변수를 참조하는 코드가 먼저오고, 변수가 나중에 선언되면 선언되지 않는 변수로 인해 "참조에러"가 발생하는 것이 아니라 undefined 가 출력되는 것을 확인 할 수 있습니다.

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문입니다. 자바스크립트 엔진은 아래와 같이 실행됩니다.

• 소스코드 평가 과정 진행
• 선언문을 찾아내어 선언문 먼저 실행
• 평가 과정이 끝나면 변수 선언을 포함한 모든 선언문 제외 소스코드 실행

호이스팅 Variable Hoisting : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

(4) 값의 할당

var score; // 변수 선언
score = 80; // 변수 할당

var score = 80; // 변수 선언 + 할당

위의 코드는 동일하게 동작합니다. 자바스크립트 엔진은 변수 선언과 값의 하당을 2개의 문으로 나누어 각각 실행하기 때문입니다.

이때 주의할 점은 변수 선언과 값의 할당의 실행 시점이 다르다는 것입니다.

• 변수 선언 : 런타임 이전
• 값의 할당 : 소스코드가 순차적으로 실행되는 런타임에 진행

console.log(score); // undefined

var score = 80;

console.log(score); // 80

(5) 값의 재할당

var score = 80; 
score = 90;

위와 같이 나와져있으면, 자바스크립트 엔진은 80 받은 값을 초기화하여 undefined로 한 다음, 90이라는 값을 받는다.

상수 : 위와 같이 재할당을 받았을 때, 변수를 변경할 수 없는 값을 지칭 const : 재할당이 금지되어 변수를 상수로 표현 가능 -> 반드시 상수만을 위해 사용하지 않음

90이라는 값을 받았을 때, 90 이전의 값인 undefined, 80은 어떤 변수도 값으로 갖고 있지 않아 식별자와 연결이 안되어있습니다. 이러한 불필요한 값들은 가비지 콜렉에 의해 메모리에서 자동 해제 되지만, 언제 해제될지 예측할 수 없습니다.

가비지 콜렉터(garbage collector) : 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않는 메모리를 해제하는 기능. 이를 통해 메모리 누수를 방지

언매니지드 언어와 매니지드 언어 : 자바스크립트 같이 메모리의 할당과 해제를 담당하는 가비지 콜렉터가 있는 언어를 매니지드 언어라고 부릅니다. 개발자의 역량에 의존하는 부분이 적어져 어느 정도 일정한 생산성을 확보할 수 있다는 장점이 있지만 성능면에서 손실을 감수 할 수 밖에 없다는 단점이 있습니다. C언어의 경우, malloc(), free() 같은 메모리 제어 기능을 제공하는 언매니지드 언어의 경우 개발자의 역량에 따라서 최적의 성능을 확보할 수 있지만, 치명적인 오류를 생산할 가능성도 있습니다.

(6) 식별자 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 포함 가능
• 시작은 문자, 언더스코어(_), 달러기호($)로 가능
• 예약어(프로그래밍 언어에서 사용되고 있거나 사용될 예정의 단어)는 식별자로 사용 불가능
• 쉼표를 통해서 하나의 문에서 여러 개 한번에 선언 가능(가독성때문에 잦은 사용 ❌
• 알파벳 이외의 언어 사용 ❌
• 대소문자 구분 (아래의 예시는 각가의 별개의 변수로 인식)

  var firstname
  var fristName
  var FRISTNAME

[4가지 유형의 네이밍 컨벤션]
// 카멜 케이스 (일반적인 변수나 함수의 이름)
var firstName; 

// 스네이크케이스 
var first_name

// 파스칼 케이스 (생성자 함수, 클래스 이름)
var FirstName 

// 헝가리언 케이스 
var strFistName; // type + identifier
var $elem = document.getElementById('myId'); // DOM 노드 
var observable$ = fromEvent(document, 'click'); // RxJS 옵저버블

4. 표현식과 문

1) 값

: 식(표현식)이 평가되어 생성된 결과

var sum = 10+20 // 값: 30

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간을 식별하게 붙인 이름이고, 변수에 할되는 것은 값입니다. 위의 코드의 sum 변수에 할당되는 것은 "10+20"이 아니라 "30"입니다.

2) 리터럴

• 값에서 살펴본 예제와 같이 식을 생성할 수 있지만, 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
• 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호('', "", [],{})등으로 표기한 코드

  3 // 숫자 리터널 "3"

3) 표현식

: 값으로 평가될 수 있는 문. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조(리터널도 표현식)

// 리터널 표현식
10 
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum  = 20
sum != 10

// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

동치 : 표현식과 표현식이 평가된 값은 동등한 관계 1+2 =3에서 1+2 와 3은 동치

4) 문

: 프로그램을 구성하는 기본 단위이자 최소 실행 단위 (토큰으로 구성)

토큰(token): 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소

5) 세미클론(;)

• 문의 종료를 의미
• 자바스크립트 엔진은 세미클론을 통해서 문이 종료한 위치를 파악하고 순자적으로 하나씩 문을 실행
• 0개 이상의 문을 중괄호{} 로 묶은 코드 블록 뒤에는 ❌ -> 자체 종결성을 갖기에 안 붙임
• 세미콜론은 옵션, ASI(세미콜론 자동 삽입 기능)이 암묵적으로 수행하기에 생략 가능
  • 아직 논쟁중이나, 세미콜론이 자동으로 삽입시, 간혹 개발자의 예상과 다르게 삽입되어 다르게 동작

6) 표현식 구분 방법

• 표현식 : 값으로 평가 될 수 있는 문
• 표현식이 아닌 문 : 값으로 평가 될 수 없는 문
• • 값을 넣어보고 확인

// 표현식이 아닌 문
var num = 100;

// 표현식인 문
100 + num // 110

//할당문 
num = 100; //100

우리 개인이 가지고 있는 로컬 레포지토리에서 원격 서버 저장소로 보내기 위해서 터미널에서 사용하는 것이 "Git"입니다. Git을 통해서 소스 코드의 버전을 관리하고, 개발 과정에서의 변경 사항을 추적하고 여러 버전 간의 차이를 관리할 수 있습니다.

오늘은 이 Git을 통해서 Git Hub에 보내고 협업하는 과정을 "toss 오픈 소스 프로젝트"를 통해서 알아보도록 하겠습니다.

1. 공동 프로젝트 진행시 Process

1) 팀의 대표자가 공동 레포지토리, 브랜치를 생성

(1) git flow

: 개발과 릴리스의 과정을 명확하게 구분하고, 각 단계에서 필요한 작업을 체계적으로 진행할 수 있도록 관리

• 주 브랜치 : master, develop, feature, release, hotfix
• 각 개발자는 자신의 작업을 'feature'브랜치에서 진행 -> 작업이 완료되면 'develop' 브랜치로 풀 리퀘스트를 생성 -> 이때 코드 리뷰 과정을 거쳐, 다른 팀원들의 피드백을 받고 개선
• 'release' 브랜치를 통해 릴리스 준비 과정을 관리하고, master 브랜치에 merge. 버그가 생기면 'hotfix'를 통해서 관리.

2) 공동 레포지토리를 Fork

-> 공동 레포지토리를 복사하여 새로운 독립된 곳에 만드는 작업

3) 로컬 저장소에서 git을 통해서 clone 작업을 진행

(1) git init : 로컬 저장소를 변경 사항을 git으로 관리한다는 명령어 (2) git clone (Fork한 git hub의 https 주소) : 원격 저장소에 있는 것을 로컬 저장소에 복제하는 작업

4) 작업 후 commit 을 남기고 원격 저장소에 Pull Request(PR)

(1) git push -u origin (branch) : 원격 저장소로 내보내기 *(2) Git Hub에서 PR 진행 * : 원본 원격 저장소에 보내기

5) 작업 내용 확인 후 관리자가 merge request 진행

2. toss 오픈 소스 프로젝트 _ slash

1) Branches

: 각 기능이나 변경사항을 기준으로 나눠진 브랜치

2) Issues

: 토스에서 현재 개발하려는 작업들

3) PR

3. 결론

1) 효율적인 협업

• 여러 개발자가 하나의 프로젝트를 공동으로 작업해야하는 특성상, 가장 효율적으로 작업할 수 있도록 도움
• 원격 저장소를 통해서 커밋을 공유함으로 서로의 작업 내용 확인 가능

  2) 자동화 배포 가능

  3) 다양한 협업 가능

• 다양한 오픈소스가 존재하는만큼, 누구나 해당 프로젝트에 기여할 수 있음
• 이슈 및 질문을 통해서 좀 더 확장된 개발할 수 있음

  4) 버전 관리

• 현재 프로젝트가 진행된 버전 관리 용이
• 프로젝트의 버그 및 새로운 기능 요청 등을 관리함으로 해결해야하는 과제 등록 가능

출처 https://github.com/toss/slash/issues https://blog.naver.com/jryoun1/222051293142 https://y-oni.tistory.com/84 https://conanmoon.medium.com/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%9D%BC%EA%B8%B0-git-31219ccc9760 https://f-lab.kr/insight/understanding-git-and-github-collaboration https://aandi.tistory.com/71

개발자들의 이미지를 떠올리면 위의 사진과 같은 화면을 띄운채 영어로 뭔가 입력하고 있는 모습을 떠올릴 수 있습니다.

위의 사진과 같이 실제로 프로그래밍 코드를 짜는 경우도 있겠지만, 일반적으로 우리가 접근하는 것과 달리 개발자들이 파일을 보는 것, 폴더를 생성하는 법이 다른데 오늘은 그것이 어떤 것인지 왜 그렇게 사용하는지를 알아보려고 합니다 !

1. UI

: User Interface, 사용자가 보기에 가장 적은 동작을 통해서 접근할 수 있도록 만들어진 것을 의미합니다.

이 UI에는 크게 3가지 종류가 있습니다.

1) CLI(Command Line Inerface)

: 명령어를 입력하여 작업을 수행하는 방식입니다. 사용자가 명령어를 입력하여 파일 관리, 네트워크 설정, 시스템 관리 등등 다양한 작업을 수행할 수 있습니다. 그래서 마우스보다 키보드의 활용을 더 요구합니다. ex. 폴더 생성 시 "mkdir (폴더명)" 명령어 사용

2) GUI(Graphical User Interface)

: 그래픽을 사용하여 컴퓨터 시스템과 상호 작용하는 시스템입니다. CLI가 명령을 통해서 모든 것을 관리했다면, GLI를 이용하면 마우스를 통해서 아이콘을 클릭하는 작업 등 CLI의 명령어가 클릭을 통해서 진행되는 것입니다. ex. 폴더 생성 시 내가 원하는 위치에서 마우스 우클릭 -> 폴더 생성

3) NUI(Natural User Interface)

: 사용자의 동작을 통해서 시스템을 제어하는 방식입니다. 음성 인식, 제스처 인식, 시선 인식 등을 통해서 사용자가 요청하는 작업을 수행합니다.

⭐️ 이 중에서 개발할 때는 "CLI"를 사용합니다.

2. CLI를 사용하는 이유

1) 비용 절감

• GUI를 이용할 때 필요한 디자인적 요소에 대한 비용 절감

  2) 문제 해결

• 명령줄 인터페이스를 사용하여 기본 시스템을 더 깊이 이해하는데 도움. 다양한 도구와 유틸리티를 더 능숙하게 사용하고 오류 관리를 개선
• 시스템 로그를 보고 포괄적인 오류 메시지와 디버깅 정보를 빠르게 찾을 수 있음. 텍스트 기반 명령도 쉽게 문서화 가능

  3) 원격 액세스

• GUI에 비해 네트워크 리소스를 적게 소비하는 경우가 많음. 하드웨어 기능이 제한된 시스템이나 원격 서버 환경에서 적합

  4) 효율성

• 개별 파일을 찾아서 클릭하는 시간을 소비하는 대신, CLI에서 하나의 텍스트 명령으로 여러 파일에 대한 작업을 수행.
• 여러 명령을 수행하는 스크립트를 생성하여 단조롭거나 반복적인 작업 자동화 가능

출처 https://brunch.co.kr/@hnjnkm/7 https://namu.wiki/w/UI https://aws.amazon.com/ko/what-is/cli/

API를 통해 리퀘스트를 보내는 경우, 여러분은 fetch와 axios 어떤 것을 사용하시나요? 오늘은 둘을 비교 분석해보는 시간을 가져보겠습니다.

Fetch vs axios

Fetch

• 2015년부터 웹 브라우저에서 사용할 수 있는 내장 함수, 별도의 설치 없이 사용 가능
• promise 기반으로 비동기 통신을 지원

axios

• 2015년 첫 릴리즈된 HTTP 클라이언트 라이브러리
• promise 기반의 비동기 통신을 지원
• return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉬움
• 외장 모듈이라 npm을 통한 설치가 필요

두 가지 HTTP Request에 대해서 간단하게 정리해보았는데, 실제 Request 코드를 보면서 차이점에 대해서 알아보도록 하겠습니다.

GET

: API 서버의 등록된 데이터를 뽑아보자 !

Fetch

async function getProduct(id) {
  try {
    const res = await fetch(
      `https://panda-market-api-crud.vercel.app/products/${id}`
    );

    if (!res.ok) {
      throw new Error(`HTTP error! ${res.status}`);
    }

    const data = await res.json();
    return data;
  } catch (error) {
    console.log("Error!");
  } finally {
    console.log("Finished!");
  }
}

1) fetch는 status가 404 에러나 다른 HTTP 에러 응답을 받았다고 해서 promise를 reject 하지 않기에 별도로 "if(!res.ok)"와 같이 에러를 처리할 수 있는 코드가 필요함 2) json 핸들링을 위해 데이터를 return시 별도 작업 필요 3) get method가 기본 지정이라 별도 옵션을 지정하지 않아도 됨

axios

import axios from "axios";

const instance = axios.create({
  baseURL: "https://panda-market-api-crud.vercel.app/",
  timeout: 5000,
});

function getArticle(id) {
  return instance
    .get(`/articles/${id}`)
    .then((res) => {
      return res.data;
    })
    .catch((e) => {
      if (e.response) {
        console.log(e.response.status);
        console.log(e.response.data);
      } else {
        console.log("ID 조회에 실패하였습니다.");
      }
    });
}

1) axios는 외장 모듈이기에 별도 설치 및 import 명령어 필요 2) 반복되는 URL은 instance 생성을 통해서 코드 단축 가능 3) 네트워크 응답 시간 Request timeout 설정 가능 4) get method가 기본값이라 옵션 설정하지 않아도 되지만, .get() 와 같이 별도의 함수를 제공하기에 명시적으로 사용 5) 가져온 데이터는 data 프로퍼티를 통해서 접근 가능(json 핸들링 내장) 6) 리퀘스트 실패 혹은 상태 코드가 실패(4XX, 5XX)를 나타내면 Promise가 reject 하기에 별도의 에러 코드 생략 가능

POST

: 데이터 생성하기

Fetch

async function createProduct(name, description, price, tags, images) {
  try {
    const res = await fetch(
      "https://panda-market-api-crud.vercel.app/products",
      {
        method: "POST",
        body: JSON.stringify({
          name: name,
          description: description,
          price: price,
          tags: tags || [],
          images: images || [],
        }),
        headers: {
          "Content-Type": "application/json",
        },
      }
    );

    if (!res.ok) {
      throw new Error(`HTTP error! ${res.status}`);
    }

    const data = await res.json();
    return data;
  } catch (error) {
    console.log("Error!");
  } finally {
    console.log("Finished!");
  }
}

1) body 옵션을 통해서 데이터 전송 - 데이터 타입 : applcation/json - 문자 변환 : JSON.stringify

axios

function creatArticle(title, content, image) {
  return instance
    .post("/articles", {
      title,
      content,
      image,
    })
    .then((res) => {
      return res.data;
    })
    .catch((e) => {
      if (e.response) {
        console.log(e.response.status);
        console.log(e.response.data);
      } else {
        console.log("작성에 실패하였습니다.");
      }
    });
}

1) 데이터 전송을 data 옵션 사용 2) 자동으로 JSON 문자로 변환

PATCH

: 생성한 데이터 수정하기

Fetch

async function patchProduct(id, patchData) {
  try {
    const res = await fetch(
      `https://panda-market-api-crud.vercel.app/products/${id}`,
      {
        method: "PATCH",
        body: JSON.stringify(patchData),
        headers: {
          "Content-Type": "application/json",
        },
      }
    );

    if (!res.ok) {
      throw new Error(`HTTP error! ${res.status}`);
    }

    const data = await res.json();
    return data;
  } catch (error) {
    console.log("Error!");
  } finally {
    console.log("Finished!");
  }
}

axios

function patchArticle(id, data) {
  return instance
    .patch(`/articles/${id}`, data)
    .then((res) => {
      return res.data;
    })
    .catch((e) => {
      if (e.response) {
        console.log(e.response.status);
        console.log(e.response.data);
      } else {
        console.log("수정에 실패하였습니다.");
      }
    });
}

DELETE

: 생성 후 수정한 데이터 삭제하기!

Fetch

async function deleteProduct(id) {
  try {
    const res = await fetch(
      `https://panda-market-api-crud.vercel.app/products/${id}`,
      {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
        },
      }
    );

    if (!res.ok) {
      throw new Error(`HTTP error! ${res.ststus}`);
    }

    const data = await res.json();
    return data;
  } catch (error) {
    console.log("Error!");
  } finally {
    console.log("Finished!");
  }
}

1) id로 삭제할 데이터를 찾으니, 추가 필요한 데이터가 없어서 body 생략

axios

function deleteArticle(id) {
  return instance
    .delete(`/articles/${id}`)
    .then((res) => {
      return res.data;
    })
    .catch((e) => {
      if (e.response) {
        console.log(e.response.satus);
        console.log(e.response.data);
      } else {
        console.log("삭제에 실패하였습니다.");
      }
    });
}

결론

axios

장점

1. instance 생성을 통해 반복되는 코드 선언 및 객체 설정 가능
2. 네트워크 응답 timeout을 통해서 응답 시간 지정 가능
3. data 프로퍼티를 통해서 별도의 json 문자 변환 요청 없이 변환 가능
4. .get()/.post()/.patch()/.delete() 함수 제공
5. 네트워크 응답 실패 시(4xx, 5xx) reject (오류 코드 작성 필요 X)
6. 다양한 프로퍼티 제공을 통해 간결한 코드 작성 가능

단점

1. 외장 모듈이라 npm을 통한 설치 필요

fetch

장점

1. 내장 모듈이라 바로 사용 가능
2. 내용을 다 표시할 수 있어서 정보가 잘 표기되어있음

단점

1. 네트워크 응답 실패 시 reject가 안되어 오류 코드 넣어야 함
2. 문자 변환을 위해 json 핸들링 코드 작성 필요
3. 내용을 다 명시해야해서 코드가 길어짐

출처 https://www.heropy.dev/p/QOWqjV https://tlsdnjs12.tistory.com/26 https://velog.io/@eunbinn/Axios-vs-Fetch

하나의 웹페이지를 구성한다던가, 서버에 리퀘스트를 보는 작업 등을 할 때 코딩을 하다보면 무수히 많은 코드를 작성하게됩니다. 나중에 A라는 파일에 작성했던 기능이 유용해서 찾아보거나, 혹은 수정의 작업 등을 할 때 이 많은 코드를 일일이 찾아보기란 어려운 일입니다.

그래서 코딩을 할 때는 main 파일에 다 작성하는 것이 아니라, 기능에 따라 파일을 나눕니다. 로그인/회원가입/글쓰기/결제 등... 이런 과정을 통해서 얻을 수 있는 부분은

1) 코드의 가시화 2) 효율적인 코드 관리 3) 다른 프로그램에서 사용 가능

위의 세 가지의 이유를 꼽을 수 있습니다.

이렇게 기능에 따라 나누는 과정을 "모듈화"라고 합니다.

모듈(Module)

: 어플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각

• 외장 모듈 (local module) : 개발자들이 만들어 놓은 모듈(라이브러리), npm을 통해서 사용 가능
• 내장 모듈 (core module) : node.js에서 기본적으로 제공하여 npm 없이도 사용 가능

  오픈 소스(Open Source)

  : 개발자들의 커뮤니티는 서로가 만들어 놓은 모듈을 공유하는 문화가 있다. 누구나 코드를 확인하고 사용할 수 있는 문화를 지칭합니다.

서드파티 모듈(ThridParty Module)

: 다른 사람들 혹은 기업에서 만들어진 기능들이 많이 있습니다. 이를 제 3자가 만들었다고 하여 위와 같이 지칭합니다.

설치하기

: 모듈을 사용하는데 있어서 모듈이 돌아가게 하기 위해서 초기 설정이 필요합니다. 어떤 작업을 하느냐에 따라 방법이 달라 아래 두 가지 방법을 작성해두었습니다.

💡 모듈을 내가 만들 경우

: 파일의 확장자를 .mjs 로 설정

💡 서드파티 모듈을 사용할 경우

: npm install (모듈 이름) -> package.json 파일에서 ["type":"module"] 작성하기

위와 같이 내가 모듈을 만드느냐 사용하느냐에 따라 달라질 수 있어서 아래부터는 서드파티 모듈을 사용하는 방법에 대해 기술하겠습니다.

1. 모듈 설치하기

: 내가 진행하는 프로젝트 디렉토리(폴더)에 사용하고자 하는 모듈을 설치합니다. 저는 예시를 위해서 axios 모듈을 하나 설치하도록 하겠습니다.

터미널 -> 명령어: npm install axios

2. package.json

해당 명령어를 입력하면, package.json 파일이 생성되는데, 파일에 들어가서 아래와 같이 type을 작성해줍니다.

{
  "type": "module",
  "dependencies": {
    "axios": "^1.7.9"
}

이렇게 하면 내가 설치한 모듈을 원활하게 돌릴 수 있는 초기 작업이 완료됩니다.

사용법

일반적으로 모든 모듈은 비공개 상태입니다. 다시 말해, 모듈은 캡슐화가 되어 다른 모듈에서 접근할 수 없고, 개별적 존재로서 애플리케이션과 분리되어 존재합니다.

비공개 상태이기에 이 비공개를 가져오려면 특별한 명령어가 필요합니다. 그 명령에 대해서 알아보도록 하겠습니다.

export

: 공개가 필요한 부분에 한정하여 명시적으로 선택적 공개하는 것(지정된 모듈 내보내기)

import

: 지정된 모듈을 가져오기

위의 명령어를 통해서 내가 원하는 파일의 모듈을 가져오고, 내보낼 수 있습니다.

// 내가 만든 모듈
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

위에 작성된 코드는 사칙연산 함수를 만들어서 해당 파일 외 다른 파일에서도 사용이 가능할 수 있도록 내보내도록(export) 작성해두었습니다.

import { add, subtract, multiply, divide } from "./export.mjs";

console.log(add(3, 5));
console.log(subtract(3, 6));
console.log(multiply(3, 5));
console.log(divide(6, 2));

그러면 위와 같이 다른 파일에서 가져오고자 하는 모듈을 간단한 명령어를 통해서 경로를 입력하고 가져올 수 있습니다.

** 명령어 작성법 **

• export + 모듈
  • const, function, class 다 가능하지만, 최상위 항목에서만 사용
• import {가져오려는 모듈 이름} from "파일 경로"

추가 문법

1. named

1) as import

import 할 때, as 키워드를 붙이면 내가 원하는 이름으로 호출을 할 수 있습니다.

export const PI = 3.14;

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

import { PI, add as addNumbers } from './calculator.mjs';

console.log(addNumbers(1, 2));

export 된 이름 뒤에 as를 붙이고, 내가 부르고 싶은 이름을 적어서 명령어를 입력하면 이름을 바꿔서 import 할 수 있습니다.

2) as export

export 할 때부터 바꾸고 싶다면, export 할 때 동일하게 적어주면 됩니다.

export add as addNumbers

2. 한 번에 보내기

1) export default

const PI = 3.14;

function add(a, b) { 
  return a + b;
}

function subtract(a, b) { 
  return a - b;
}

function multiply(a, b) { 
  return a * b;
}

function divide(a, b) { 
  return a / b;
}

export { PI, add, subtract, multiply, divide };

위와 같이 내보내는 모듈이 많을 때는 위와 같이 중괄호{}로 묶는 방법도 있지만, 하나로 묶어서 보내는 방법도 있습니다.

const calculator = { PI, add, subtract, multiply, divide }; // 객체로 만들기
export default calculator; // 객체 내보내기

2) "*" import (namespace import)

"*" 문자를 사용하면, 지정 파일 내에서 export된 모든 모듈을 가져올 수 있습니다.

const PI = 3.14;

function add(a, b) { 
  return a + b;
}

function subtract(a, b) { 
  return a - b;
}

function multiply(a, b) { 
  return a * b;
}

function divide(a, b) { 
  return a / b;
}

export { PI, add, subtract, multiply, divide };

import * as calculator from './calculator.mjs';

console.log(calculator.PI);
console.log(calculator.add(1, 2));
console.log(calculator.subtract(1, 2));
console.log(calculator.multiply(1, 2));
console.log(calculator.divide(1, 2));

* 사용법 ** import as (통칭하여 부를 모듈명) from '경로' -> (통칭하여 부를 모듈명).(실제 모듈명) ** 해당 방법은 정말 필요할 때만 사용

출처 ⌜모던 자바스크립트 deep dive⌟ 저자 이웅모 p891 https://html-jc.tistory.com/503 https://medium.com/@su_bak/node-js-module-%EC%9D%B4%EB%9E%80-b1dd9224687f

: 자바스크립트에서 비동기 함수는 Promise 객체를 리턴

Promise의 3가지 상태

1) Pending(대기) : 비동기 작업을 진행중 2) Fulfilled(이행) : 비동기 작업이 성공적으로 끝남 3) Rejected(거부) : 비동기 작업이 실패함

1. 절차지향 프로그래밍(POP)이란?

: 기능을 작은 함수로 나누고, 각가의 함수가 데이터를 매개변수로 전달받아 작업을 수행. 코드의 재사용성과 모듈화에 유리하지만, 프로그램이 커지면 복잡해질 위험성 존재

1) 장점

• 컴퓨터의 처리구조와 유사해 실행속도가 빠름

2) 단점

• 유지 보수가 어려움
• 실행 순서가 정해져있어서 코드의 순서가 바뀌면 동일한 결과를 보장하기 어려움
• 디버깅이 어려움

2. 객체지향 프로그래밍이란(OOP)?

: 데이터를 속성과 메서드로 묶어 객체 단위로 프로그램을 구성하고, 객체 간의 메시지를 통해 작업을 수행하며 추상화 캡슐화 상속 다형성 등의 특징을 갖게 됨

1) 장점

• 코드의 재활용성이 높음
• 코딩이 절차지향보다 간편
• 디버깅이 쉬움

2) 단점

• 처리 속도가 절차지향보다 느림
• 설계에 많은 시간 소요가 필요

3) 특성

** (1) 캡슐화** : 객체를 캡슐로 싸서 그 내부를 보호하고 볼 수 없게 하는 것 ** (2) 상속** : 상위 개체의 속성을 하위 개체에 물려줘 하위 개체가 상위 개체의 속성을 모두 가지는 관계

** 슈퍼클래스에 만들어진 필드와 메소드를 물려받음으로써 코드의 중복 작성을 방지하고, 코드를 재사용함으로써 코드 작성에 드는 시간과 비용을 줄여줌

** (3) 다형성** : 같은 이름의 메소드가 클래스 혹은 객체 따라 다르게 구현되는 것

이 프로그램은 소프트웨어를 쉽게 설치하고 관리할 수 있는 패키지 관리자이고, Brew를 이용하면 터미널에서 간단한 명령어로 다양한 개발 도구와 프로그램이 설치 가능합니다.

1. brew 설치 여부 확인

1) Mac -> 터미널 접속 -> brew 검색

MacBookAir ~ % brew    
zsh: command not found: brew

2) 위와 같이 뜨면 설치 진행

2. Home Brew 접속

URL: https://brew.sh/

3. Install Homebrew 복사

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

4. 터미널에 입력

5. 맥북 비밀번호 입력

MacBookAir ~ % /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
==> Checking for `sudo` access (which may request your password)...

6. Enter 키 입력

==> This script will install:
/opt/homebrew/bin/brew
/opt/homebrew/share/doc/homebrew
/opt/homebrew/share/man/man1/brew.1
/opt/homebrew/share/zsh/site-functions/_brew
/opt/homebrew/etc/bash_completion.d/brew
/opt/homebrew
==> The following new directories will be created:
/opt/homebrew/bin
/opt/homebrew/etc
/opt/homebrew/include
/opt/homebrew/lib
/opt/homebrew/sbin
/opt/homebrew/share
/opt/homebrew/var
/opt/homebrew/opt
/opt/homebrew/share/zsh
/opt/homebrew/share/zsh/site-functions
/opt/homebrew/var/homebrew
/opt/homebrew/var/homebrew/linked
/opt/homebrew/Cellar
/opt/homebrew/Caskroom
/opt/homebrew/Frameworks
==> The Xcode Command Line Tools will be installed.

Press RETURN/ENTER to continue or any other key to abort:

7. 에러메시지

: 아래와 같이 문구 속에 적혀있을 때 하단의 명령어 1,2를 순서대로 입력하시면 됩니다.

Warning: /opt/homebrew/bin is not in your PATH.

• 명령어 1 : echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc
• 명령어 2 : source ~/.zshrc

8. 설치 완료

: "brew" 검색 시 아래와 같은 문구가 나오면 나오면 완료 !

  brew search TEXT|/REGEX/
  brew info [FORMULA|CASK...]
  brew install FORMULA|CASK...
  brew update
  brew upgrade [FORMULA|CASK...]
  brew uninstall FORMULA|CASK...
  brew list [FORMULA|CASK...]

Troubleshooting:
  brew config
  brew doctor
  brew install --verbose --debug FORMULA|CASK

Contributing:
  brew create URL [--no-fetch]
  brew edit [FORMULA|CASK...]

Further help:
  brew commands
  brew help [COMMAND]
  man brew
  https://docs.brew.sh

9. 내가 설치한 brew 버전 조회 명령어

   brew --version

웹에서 클라이언트와 서버 간의 요청 및 응답을 주고받는 프로토콜이라고 말씀드렸는데, 이번 글에서는 이 http가 어떤 것인지 좀 더 알아보는 글을 작성하려고 합니다.

HTTP는 클라이언트와 서버 간에 요청과 응답을 주고받는 방식으로 동작하는 애플리케이션 계층 프로토콜입니다.

HTTP 메시지

클라이언트와 서버들은 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 "요청(requests)"이라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지 "응답(responses)"이라고 부릅니다.

요청(Requests)

시작 줄

(1) HTTP Method

: 서버가 수행해야 할 동작을 나타냄

• GET: 리소스를 클라이언트로 가져다달라는 것을 의미

• POST: 데이터가 서버로 들어가야 하는 것을 의미

• PUT: 리소스를 대체(전체), 해당 리소스가 없으면 생성

• PATCH: 리소스 부분 변경

• DELETE: 리소스 삭제

• PUT은 리소스를 완전히 교체하는 반면, PATCH는 리소스의 일부만 수정

GET /index.html HTTP/1.1 POST /submit-form HTTP/1.1 PUT /update-item/123 HTTP/1.1 PATCH /edit-profile HTTP/1.1 DELETE /delete-item/123 HTTP/1.1

(2) 요청 타겟

: 요청 타켓은 URL, 프로토콜, 포트, 도메인, 쿼리문자열 등을 포함 할 수 있다.

• 가장 일반적인 형식이자, "origin 형식"으로 알려진 절대 경로입니다. 이 형식은 끝에 "?"와 쿼리 문자열이 따라옵니다.

GET / POST / HEAD / OPTIONS 메서드와 같이 사용됩니다.

POST / HTTP/1.1 GET /background.png HTTP/1.0 HEAD /test.html?query=alibaba HTTP/1.1 OPTIONS /anypage.html HTTP/1.0

(3) 상태코드

: 요청에 대한 성공여부를 나타내는 코드

• 1XX(조건부 응답): 요청을 받았으며 작업을 계속 진행
• 2XX(성공): 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리했음을 의미
• 3XX(리다이렉션 완료): 클라이언트는 요청을 마치기 위해 추가 동작을 취해야함을 의미
• 4XX(요청 오류): 클라이언트에 오류가 있음을 의미
• 5XX(서버 오류): 서버가 유효한 요청을 명백하게 수행하지 못함을 의미

2XX: 200OK 4XX: 404 Not Found 5XX: 500 Internal Server Error

Headers

: 대소문자 구분하지 않으며,"Key:value"형식으로 전송

• User-Agent(브라우저 정보), Accept(서버에서 원하는 형식 응답) 와 같은 request 헤더는 요청의 내용을 좀 더 구체화 시키고, 컨텍트를 제공하기도 하며, 조건에 따른 제약 사항을 주기도 하면서 요청 내용을 수정
• 메시지 데이터의 원래 형식과 적용된 인코딩을 설명하는 Content-Type 있음

> Content-Type: application/json // 클라이언트나 서버가 보내는 데이터 형식

Body(본문)

: 모든 요청에 본문이 들어가지는 않음(GET, HEAD, DELETE, OPTIONS 처럼 리소스를 가져오는 요청은 보통 본문이 필요 없음)

일부 요청은 업데이트를 하기 위해 서버에 데이터를 전송하고, 보통(HTML 폼 데이터를 포함하는) POST 요청일 경우.

PUT 요청은 리소스를 교체하기 위해 본문을 포함

응답(response)

• 서버의 메타 정보로, 요청을 처리한 서버가 어떻게 응답할지에 대한 내용을 담고 있음

첫 게시글로 URL은 어떤 것인지, 저 긴 영어 블라블라에 어떤 정보들이 포함되어있는지 오늘 한 번 알아보겠습니다.

Uniform Resource Locator

흔히 우리가 물건을 온라인으로 물건을 주문하면, 이 물건을 어디에 가져다둬야하는지 "주소"를 입력해야 합니다.

물건의 위치를 정확하게 표기하기 위해서는 '서울시 종로구 사직로161 경복궁' 와 같이 시/구/도로명/건물명 이 들어가고, 아파트나 빌라의 경우 동/호수와 또 물건을 어디에 위치시킬지(문 앞/ 소화전 안) 지정까지 하겠죠.

URL도 웹페이지의 주소의 역할을 합니다. 어떤 URL을 입력하느냐에 따라서 메인 페이지로 들어갈지, 가입하는 페이지로 들어갈지, 로그인 페이지로 들어갈지 달라지게 됩니다.

그래서 우리는 URL을 "웹 페이지를 찾기 위한 주소"라고 부릅니다.

Ex. https://www.naver.com

URL 구성요소

URL에서 위치별로 어떤 의미를 가지고 있는지 알아보도록 하겠습니다.

1. 프로토콜(Protocol)

리소스에 접근하는 방법을 정의하는 부분으로 주로 http, https 등을 사용합니다. 웹에서 데이터를 주고 받는 프로토콜이고, https는 http에서 보안이 강화된 형태입니다. 이 외에도 smtp/pop3,dns, tcp/ip와 같은 형태도 있습니다.

2. 도메인(IP 주소)

IP주소는 169.143.5.432와 같이 표현되는데, 가시성이 떨어져서 이를 www.naver.com과 같은 문자로 표기합니다. 이 문자로 표기되는 것을 도메인이라고 합니다. 서버에서는 도메인(en.dict.naver.com)이 검색되면 이에 해당하는 IP(210.89.168.68)로 DNS 서버가 변환하여 주소를 전달합니다.

3. 경로(Path)

서버 내에서의 자원의 위치를 지정하는 역할을 하고 잇습니다. 위와 같이 도메인의 바로 다음에 위치하고 있습니다. 여기서는 #/search 가 이에 해당된다.

4. 프래그먼트(Fragment)

URL 안에서 특정 위치를 지정하는 용도로 사용합니다. "#"으로 시작하며 특정 이름을 참조합니다.

5. 퀴리 문자열(Query String)

URL에서 추가 정보를 전달하기 위해 사용되는 부분입니다. "?" 뒤에 있는 값을 의미하고 여기서는 "query=apple"은 검색 쿼리를 의미합니다. 여기서 사용자가 검색한 값이 "apple"이라는 값을 가진다는 의미입니다.

여러개의 파라미터는 & 기호로 구분이 됩니다. key=value 형태를 띄는 특징이 있습니다.

Ex. ?q=hello&hi=ko 검색어와 언어설정 ?page=2&sort=asc 페이지 번호와 정렬 방식 설정

웹 브라우저가 작동하는 방식

1. DNS 조회

웹 브라우저가 DNS 서버를 통해 도메인(호스트명)을 IP 주소로 변환 www.naver.com -> 210.89.168.68

2. HTTP 요청 메시지 생성

변환된 IP 주소를 바탕으로 요청 메시지를 생성하는데, 이때 요청 헤더와 메소드(GET, POST등)를 포함

• 메소드 : GET, POST, PUT 등 어떤 작업을 요청할지 명시

• 헤더 : 요청에 대한 추가적인 정보 Ex. User-Agent(브라우저 정보), Accept-Language(언어 정보)
• URL 경로 : 요청할 리소스

3. 소켓을 통한 연결

웹 브라우저는 소켓 라이브러리를 이용해 TCP/IP 연결을 요청 이 과정에서 3-Way Handshake(3단계 핸드쉐이크)를 통해 서버와 연결

• TCP(Teansmission Control Protocol): 전송 제어 프로토콜, 데이터를 전송하는 방식에 대한 규칙을 정함

• 3-Way Handshake: TCP 연결을 할 때 필요한 과정, 두 컴퓨터가 소통할 준비가 되었는지 확인하는 과정

1) SYN(클라이언트 → 서버): 클라이언트는 연결을 시작하는 패킷 전송 2) SYN-ACK(서버 → 클라이언트): 서버는 연결 요청을 수락했다는 응답 전송 3) ACK(클라이언트 → 서버): 클라이언트가 연결 준비 완료를 서버에 알림

4. 서버로 패킷 전송

연결에 성공하면 http 메시지를 포함한 TCP/IP 패킷을 생성하여 전송 이때, HTTP 메시지(Ex. GET /index.html HTTP/1.1)가 포함되어 서버가 어떤 리소스를 요청하는지 알림

• 패킷: 데이터를 작은 조각으로 나눔. 네트워크에서 데이터를 전송할 때 효율적이고 안정적인 전송과 네트워크 속도 향상을 위해서 사용

5. 서버의 응답 처리

서버는 패킷을 받고 나서 http 메시지를 해석 이 후 HTML 데이터를 포함한 응답 메시지를 만들어 클라이언트 반환

• 상태코드: 200 Ok 는 성공적으로 요청을 처리했음을 의미하고, 400 Not Found는 요청한 리소스를 찾을 수 없다는 뜻

• 헤더: 응답에 대한 추가적인 정보(Content-Type, Date 등)
• 본문(Body): 실제 요청한 콘텐츠(HTML 파일, 이미지 등)

6. 응답 메시지 렌더링

클라이언트는 응답 메시지를 받아 화면에 콘텐츠를 렌더링해서 사용자가 볼 수 있도록 표시