플레이스토어 병아리게임 출시!!!~~ [많은 이용 부탁드립니다!]

📝HTTP 1.1

HTTP 요청은 TCP 프로토콜을 이용하기 때문에 요청을 전송하기 위해선 3-way-handshake 과정을 거쳐 연결을 설정하고 연결과 끊기를 반복합니다 이걸 개선 시켜서 keep-alive라는 기능으로 일정시간동안 커넥션을 유지할 수 있도록 할 수 있어서 자원 낭비를 최소화 시킵니다

📝HTTP 2.0

HTTP 2.0은 기존 HTTP 1.1 버전의 성능 향상에 초점을 맞춘 프로토콜로 HTTP 1.1의 성능 저하 부분과 비효율적인 것들이 개선되어 탄생한 것이라고 생각하면 된다

HTTP 1.1까지는 한번에 하나의 파일만 전송이 가능했고 여러 파일을 전송할 경우 지연시간이 생기기 시작했다 HTTP 2.0에서는 문제 해결을 위해 여러 파일을 한번에 병렬로 전송한다

📝HTTP 1.1 vs HTTP 2.0

그림을 보면 얼마나 속도 차이가 있는 지 알 수 있다 → 실제로 적용시켜보면 눈에 보일정도이다

📝RPC

RPC의 경우 자신과 다른 주소공간에서 동작하는 프로세스의 함수를 실행할 수 있게 해주는데 이는 네트워크를 통한 메시징을 수행한다 즉, Client와 Server는 각각 일반 메소드를 호출하는 것처럼 원격지의 프로시저를 호출할 수 있다

• Stub
  • 프로시저 호출을 추상화하는 작은 코드 조각

Stub Interface

import java.rmi.Remote;
import java.rmi.RemoteException;

public interface Calculator extends Remote {
    int add(int a, int b) throws RemoteException;
}

Stub 구현체

import java.rmi.RemoteException;
import java.rmi.server.UnicastRemoteObject;

public class CalculatorImpl extends UnicastRemoteObject implements Calculator {
    protected CalculatorImpl() throws RemoteException {
        super();
    }

    @Override
    public int add(int a, int b) throws RemoteException {
        return a + b;
    }
}

서버 설정

import java.rmi.registry.LocateRegistry;
import java.rmi.registry.Registry;

public class Server {
    public static void main(String[] args) {
        try {
            Calculator calculator = new CalculatorImpl();
            Registry registry = LocateRegistry.createRegistry(1099); // RPC 런타임 생성
            registry.bind("CalculatorService", calculator); // RPC에 stub 적용
            System.out.println("Server is ready.");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

RPC를 생성하고 RPC에 stub(소스코드)를 적용시킵니다

클라이언트 설정

import java.rmi.registry.LocateRegistry;
import java.rmi.registry.Registry;

public class Client {
    public static void main(String[] args) {
        try {
            // RMI 레지스트리에서 CalculatorService 조회
            Registry registry = LocateRegistry.getRegistry("localhost", 1099); // RPC로 서버와 연결
            Calculator calculator = (Calculator) registry.lookup("CalculatorService"); // stub 코드를 호출시켜서 사용합니다
            
            // Stub을 통해 원격 메서드 호출
            int result = calculator.add(5, 3);
            System.out.println("Result: " + result);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

RPC로 서버와 연결한 뒤 stub 코드를 호출시켜서 사용합니다

📝RPC vs REST API

📝GRPC

gRPC는 Google이 개발한 오픈 소스 RPC 프레임워크로, 성능과 확장성을 염두에 두고 설계되었습니다

• HTTP/2 프로토콜 사용
• 데이터포맷은 Protocol Buffers (ProtoBuf)로 통신속도가 더 빠릅니다
• 다양한 언어(C++, Java, Python, Go 등)를 지원합니다
• HTTP/2로 양방향 통신이 가능(스트리밍)합니다

🔗 참고 및 출처

https://velog.io/@hoo00nn/HTTP1.1-vs-HTTP2.0

https://co-no.tistory.com/entry/%ED%86%B5%EC%8B%A0-RPCRemote-Procedure-Call%EC%9D%98-%EA%B0%9C%EB%85%90-%EB%B0%8F-%ED%8A%B9%EC%A7%95

https://inpa.tistory.com/entry/WEB-%F0%9F%8C%90-HTTP-20-%ED%86%B5%EC%8B%A0-%EA%B8%B0%EC%88%A0-%EC%9D%B4%EC%A0%9C%EB%8A%94-%ED%99%95%EC%8B%A4%ED%9E%88-%EC%9D%B4%ED%95%B4%ED%95%98%EC%9E%90

📝SCons

오픈 소스 소프트웨어 빌드 도구로 Python으로 작성되었으며, Python 스크립트를 사용해 빌드 파일을 정의합니다. 즉, 빌드 스크립트를 작성할 때 Python의 모든 기능을 사용할 수 있다는 뜻입니다. (C/C++, Python에서 자주 사용된다고 한다)

📝PL/SQL (Procedural Language/Structured Query Language)

CREATE OR REPLACE PROCEDURE UpdateSalary (emp_id IN NUMBER, new_salary IN NUMBER) IS
BEGIN
  UPDATE employees
  SET salary = new_salary
  WHERE employee_id = emp_id;
END;

SQL의 기능에 더해, 조건문(IF, ELSE), 반복문(LOOP, WHILE), 변수 선언, 예외 처리 등의 절차적 제어 구조를 추가로 제공합니다. 이를 통해 복잡한 논리나 데이터 처리 작업을 보다 효율적으로 수행할 수 있습니다. PS라고도 부르는데 PS로만 구성되어있는 백엔드의 경우는 유지보수가 어렵습니다. → 추천하지 않고 적재적소로 활용 해야함

📝Direct3D

• Direct3D는 마이크로소프트가 개발한 3D 그래픽 API로, 주로 윈도우 운영 체제에서 사용됩니다.
• 이는 게임 개발과 실시간 3D 애플리케이션을 위한 고성능 그래픽 및 비디오 처리를 목표로 합니다.
• DirectX의 일부로 통합되어 있으며, Xbox 게임 콘솔에도 사용됩니다.

📝Vulkan

• Vulkan은 크로스 플랫폼 3D 그래픽 API로, OpenGL의 후속 제품으로 개발되었습니다.
• 이는 고성능 및 고수준의 하드웨어 제어를 제공하여 개발자가 GPU(그래픽 처리 장치)를 더 효과적으로 활용할 수 있게 돕습니다.
• Vulkan은 다양한 플랫폼(윈도우, 리눅스, 안드로이드 등)에서 사용할 수 있으며, 특히 게임과 같은 리소스를 많이 요구하는 애플리케이션에 적합합니다.

📝OpenGL

• OpenGL은 널리 사용되는 크로스 플랫폼 3D 그래픽 API입니다.
• 이는 1992년에 처음 출시되어 비디오 게임, CAD(컴퓨터 지원 설계), 가상 현실 등 다양한 분야에서 사용되었습니다.
• OpenGL은 고수준의 추상화를 제공하여 다양한 하드웨어와 운영 체제에서의 호환성을 유지합니다.

📝 DOD

데이터 지향 디자인 (Data-Oriented Design, DOD)은 데이터의 구조와 효율적인 데이터 처리에 중점을 두는 프로그래밍 패러다임입니다. 이 방식은 특히 게임 개발과 같은 성능이 중요한 응용 프로그램에서 유용합니다. DOD는 데이터를 메모리에 연속적으로 배치하여 CPU 캐시 활용을 최적화하고, 데이터 처리를 병렬화하기 쉽게 만듭니다

전통적 객체지향 설계

class Entity {
public:
    float x, y; // 위치
    float vx, vy; // 속도

    void update(float dt) {
        x += vx * dt;
        y += vy * dt;
    }
};

int main() {
    std::vector<Entity> entities(1000);
    float dt = 0.016; // 가정: 60 FPS에 해당하는 시간 간격

    for (auto& e : entities) {
        e.update(dt);
    }
}

데이터 지향 설계

struct Position {
    std::vector<float> x, y;
};

struct Velocity {
    std::vector<float> vx, vy;
};

class EntityManager {
public:
    Position position;
    Velocity velocity;

    void update(float dt) {
        for (size_t i = 0; i < position.x.size(); ++i) {
            position.x[i] += velocity.vx[i] * dt;
            position.y[i] += velocity.vy[i] * dt;
        }
    }
};

int main() {
    EntityManager manager;
    manager.position.x.resize(1000);
    manager.position.y.resize(1000);
    manager.velocity.vx.resize(1000);
    manager.velocity.vy.resize(1000);
    float dt = 0.016; // 가정: 60 FPS에 해당하는 시간 간격

    manager.update(dt);
}

📝BI (Brand Identity)

특정 브랜드의 개성과 정체성을 시각적, 상징적 요소로 표현하는 것을 의미합니다. 브랜드가 어떤 가치를 지향하는지, 소비자들에게 어떻게 인식되기를 원하는지를 보여주는 시각적, 감정적 요소의 집합체입니다.

• 스타벅스
  • 녹색과 인어 로고는 커피와 편안한 라이프스타일을 상징.
• 나이키(Nike)
  • 로고인 스우시(swoosh)는 스피드와 역동성을 시각적으로 표현.

📝CI (Company Identity)

기업 자체의 정체성을 나타내는 시각적, 상징적 요소들을 말합니다. 기업이 갖고 있는 철학, 미션, 비전과 같은 근본적인 가치를 표현하는 방법이며, BI와 달리 기업 전체를 대상으로 한다는 점에서 차이가 있습니다.

• 삼성
  • 파란색 로고와 ‘Samsung’을 사용하여 세계적인 기술 혁신 기업으로의 이미지를 구축.

📝JIT(Just-In-Time), 

프로그램 실행 시 실행 중에 필요한 부분만 즉시 컴파일하는 방식입니다. 한번 변환된 코드는 캐시되어, 같은 부분이 다시 호출될 때는 재컴파일 없이 빠르게 실행됩니다. JIT 컴파일은 프로그램이 실행되는 동안 동적으로 이루어지며, 성능 최적화를 위해 실행 시간에 따라 코드의 특정 부분을 최적화할 수 있습니다.

💗장점

• 초기 실행 속도가 빠름
  • 필요한 부분만 실행 즉시 컴파일하므로 프로그램을 빨리 시작할 수 있습니다.

⚠️단점

• 초기 실행 속도가 느려질 수 있음
  • 실행 중간에 컴파일 작업이 추가되므로 일부 작업에서 오버헤드가 발생할 수 있습니다.

📝 AOT(Ahead-Of-Time)

실행하기 전에 미리 기계어로 변환하여 실행하는 방식입니다. JIT와는 반대로, 컴파일 과정이 실행 전에 완료됩니다. 정적인 데이터에 처리하기 좋습니다.

💗장점

• 코드가 미리 컴파일되어 있어 메모리 효율성이 높아질 수 있습니다.
• 실행 전에 모든 컴파일이 완료되기 때문에, 실행 시간 동안 성능이 매우 빠릅니다.
• 런타임전에 버그가 있으면 잡아낼 수 있습니다.

⚠️단점

• 컴파일된 코드는 실행 환경의 변화에 적응하지 못하기 때문에 JIT처럼 동적인 최적화는 어렵습니다.

📝 HashCode

객체를 고유하게 식별하기 위해 사용하는 숫자 값을 의미합니다. 주소값이 아닌 실제 객체의 값을 의미합니다.

📝MVC

MVC패턴은 Model + View + Controller를 합친 용어입니다

동작과정으로 Controller로 (url)요청이 들어오면 Model을 이용해 데이터를 가져오고 수정해서 Controller로 보내고 해당 데이터로 View를 업데이트합니다.

대표적으로 Spring MVC가 있습니다. 참고로 그림이 이해가 안 되는 건 Model하고 View 결합이 없을텐데 왜 결합이 있는 것처럼 표현된 건지입니다.

• Model
  • 데이터와 비즈니스 로직을 담는 공간입니다
• View
  • 사용자에게 제공하는 UI 부분입니다 (JSP, Thymeleaf)
• Controller
  • 들어온 데이터나 보내줄 데이터에 대한 로직처리하는 부분입니다

💗장점

• 역할이 잘 분리되어 있어서 협업에 유리하고 테스트 및 유지보수(분리가 잘 되어있어서)가 쉽습니다.

⚠️단점

• Controller가 여러개의 Model을 가지게 되고 그에 따라 연결된 View도 많아지기 때문에 복잡하다
  • DDD나 도메인으로 폴더구조를 잘 나누면 된다고 생각한다.

추후 Spring의 경우는 MVC에서 Model의 로직을 Service로 따로 분리했습니다. Model은 DTO, Entity가 이에 해당합니다. MVVM이 최신임에도 바뀌지 않는 이유는 이게 Spring 웹 프레임웨크에 가장 적합한 형태이기 때문입니다.

• 사용 프레임워크
  • Ruby On Rails
  • Django
  • Spring
  • Express.js

// Controller
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class GreetingController {
    
    @GetMapping("/greeting")
    public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name, Model model) {
        model.addAttribute("name", name);
        return "greeting";  // 뷰 이름 반환
    }
}

<!-- greeting.jsp -->
<html>
<body>
    <h1>Hello, ${name}!</h1>
</body>
</html>

📝MVP

사용자가 View에서 행동을 하면 Presenter에게 요청하고 Presenter가 Model을 이용해 데이터를 받아오고 수정해서 View에게 제공합니다 MVC랑 유사합니다만 View 하나당 1개의 Presenter를 가지고 있습니다.

• Model
  • 데이터 관리 및 비즈니스로직 처리
• View
  • 사용자에게 제공하는 UI 부분입니다. 
• Presenter
  
  • Model과 View 사이의 상호작용을 조정합니다. View로부터 입력을 받아 Model을 업데이트하고, Model의 상태 변경에 따라 View를 업데이트합니다.

💗장점

• MVC랑 동일하고 Presenter랑 View 1:1로 관리하기 때문에 더 유지보수에 용이해보입니다.

• 사용 프레임워크
  • GWT
  • Backbone.js
  • WinForms
  • Vaadin

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVP Example</title>
</head>
<body>
    <h1>MVP Example</h1>
    <div id="data-display">Click the button to load data</div>
    <button id="load-data-btn">Load Data</button>

    <script src="app.js"></script>
</body>
</html>

Javascript

// Model
class DataModel {
    constructor() {
        this.data = null;
    }

    // 비동기로 데이터를 받아오는 메소드
    fetchData() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                this.data = { message: "Hello, MVP Pattern!" };
                resolve(this.data);
            }, 1000);  // 1초 후에 데이터 반환 (모의 비동기 처리)
        });
    }

    getData() {
        return this.data;
    }
}

// Presenter
class DataPresenter {
    constructor(view, model) {
        this.view = view;
        this.model = model;

        this.view.bindLoadData(this.handleLoadData.bind(this));
    }

    async handleLoadData() {
        try {
            const data = await this.model.fetchData();
            this.view.displayData(data.message);
        } catch (error) {
            this.view.displayError('Failed to load data');
        }
    }
}

// View
class DataView {
    constructor() {
        this.dataDisplay = document.getElementById('data-display');
        this.loadDataBtn = document.getElementById('load-data-btn');
    }

    bindLoadData(handler) {
        this.loadDataBtn.addEventListener('click', handler);
    }

    displayData(data) {
        this.dataDisplay.textContent = data;
    }

    displayError(error) {
        this.dataDisplay.textContent = error;
    }
}

// 초기화 코드
document.addEventListener("DOMContentLoaded", () => {
    const model = new DataModel();
    const view = new DataView();
    const presenter = new DataPresenter(view, model);
});

MVP 패턴은 데스크톱 애플리케이션을 위해 개발되었기 때문에 서버 Presenter랑 클라이언트 Presenter랑 나뉘는 형태로 현재 HTML랑 JS로 설명하기 이상할 수 있지만 가장 많이 접해봤을 웹측면에서 설명했습니다. 해당 패턴을 써보진 못해서 말만 들어서는 뭐가 발전한 거에 대해서 정확히는 잘 모르겠습니다

📝MVVM

MVP를 발전시킨 패턴으로 데이터 바인딩을 이용해 뷰와 모델사이의 결합도를 더욱 낮췄습니다 현재는 Angular, Vue.js등 다양한 프론트엔드 프레임워크에서도 채용하고 있습니다

💗장점

• ViewModel에 비즈니스 로직이 집중되어 유지보수에 용이합니다.
• ViewModel이 뷰의 상태를 관리하기 때문에, 상태 유지가 필요한 복잡한 UI의 경우에 유리합니다.

• Model
  • 비즈니스 로직과 데이터를 관리합니다. 여기에서 로직이란 DB접근하던가 API통신 또는 계산 데이터처리등과 같은 로직이 해당합니다.
• View
  • 사용자에게 제공하는 UI 부분입니다.
• ViewModel
  
  • View와 Model의 중개자역할을 하며 View로부터 요청이 들어오면 Model로 처리후 필터링해 View에게 제공합니다. UI 관련 로직과 데이터를 관리합니다. 여기에서 로직이란 Model에서 데이터를 가져와 UI에 맞는 형태로 변환하거나 필터링 또는 UI 상태(로딩, 오류메시지)를 관리하고 유지하는 로직이 들어갑니다. 사용자가 버튼을 클릭하거나 입력하는 등에 대한 UI 이벤트 처리가 이에 해당합니다.
  • View와 1:N으로 연결되어서 중복을 제거하고 다른 곳에서 사용할 수 있다 → 개인적으로 DDD처럼 각각 하나씩 대응하는게 나은 거 같다 이거는 공통을 제대로 잘 뽑지 않는 이상은 의미가 없어보임 물론 MVP에서 아예 안 되는 내용이면 MVVM의 장점이라고 할수도 있을 것 같다.

• 사용 프레임워크
  
  • Android
  • iOS
  • Flutter

Flutter 내용 추가 필요

📝결론

프레임워크가 그 패턴을 사용하는 건 그걸 의도하고 만든 것이기 때문에 따라가면 좋고 그걸 보완할 좋은 방안이 있으면 적용시키면 됩니다. 딱딱한 사고는 안 하는게 좋은 거 같네요 MVC의 경우도 Service 레이어가 생겨나는 등 변화가 있었으니... 그리고 그 프레임워크가 추구하는 방향대로 해야한다. 왜냐하면 그에 맞게 라이브러리가 만들어진 게 많기 때문이다. 이념에 맞지 않아 개발에 고생할 수 있음

📝단방향 데이터 바인딩

모델에서 뷰로 보내는 데이터의 흐름이 자동처리 되어 Model이 변경되면 View가 변경되지만 그 반대는 적용되지 않습니다 단방향 데이터 바인딩 적용한 건 React가 있다고 합니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React One-way Data Binding</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        class App extends React.Component {
            constructor(props) {
                super(props);
                this.state = { name: "World" };
            }

            handleChange = (event) => {
                this.setState({ name: event.target.value });
            };

            render() {
                return (
                    <div>
                        <input 
                            type="text" 
                            value={this.state.name} 
                            onChange={this.handleChange}
                        />
                        <p>Hello, {this.state.name}!</p>
                    </div>
                );
            }
        }

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

React의 공식 예제를 살펴보면 State로 상태를 관리하며 setState로 상태에 변화를 감지해 부분렌더링하게 되는데 onChange에 접합시켜서 input에 변화가 있을 때 input 상태값을 변화시키는 즉, HTML에서의 수정이 JS로 이어지고 JS의 수정 즉, setState로 인한 수정도 HTML에 반영되기 때문에 양방향 데이터 바인딩처럼 동작합니다

하지만 진짜 양방향의 경우 이러한 작업이 자동처럼 처리 되어 코드가 줄어들고 컴포넌트간의 데이터 전달시 props로 하위 컴포넌트로 보낼 수 있지만 상위로 보낼 수 없다는 점에서 단방향이라고 부르는 것 같네요

📝양방향 데이터 바인딩

Model을 수정시 View에 적용되며 View 수정시에도 Model에 적용되어 동기화된 상태를 유지시킵니다 이를 활용한 기술은 Angular, Vue.js가 존재합니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Two-way Data Binding</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="name">
    <p>Hello, {{name}}!</p>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = "World";
        });
    </script>
</body>
</html>

Angular의 예제를 보면 React와 다르게 간결한 코드로 양방향으로 데이터 바인딩이 가능합니다

📝Back-End, Front-End

요즘은 Front-End랑 Back-End로 나누어서 작업하기 때문에 역할이 잘 분리되어있습니다 물론 Front-End쪽에서는 MVVM이고 BackEnd에서는 View를 제거한 API만 제공하는 Model과 Controller만 사용하는 형태 등 이런식으로 사용하게 됩니다

🔗 참고 및 출처

https://beomy.tistory.com/43

📝CommonJS

JavaScript를 브라우저 밖에서 즉, 서버에서 실행할 수 있게 하는 모듈화 표준입니다 → 간단히 JavaScript 문법이라 생각하세요

현재는 ECMAScript module에 사람들이 익숙하고 많이 쓰지만 태초에는 CommonJS 방식만 존재했습니다

const math = require('./math.js')
console.log(math.sum(1, 2))

지금은 import를 사용하지만 require로 외부 모듈을 불러오는 형식입니다

📝ECMAScript

자바스크립트 프로그래밍 언어의 표준화된 명세로 자바스크립트의 표준은 거의 여기에 맞춰서 개발되고 있습니다

처음에는 규범이라는 게 없고 Explorer 독점이였다가 Chrome이 나오면서 위협을 느끼고 웹브라우저를 가지고 있는 회사들은 열심히 개발했는데 서로 규범이 다르다보니 개발자는 여러개를 개발해야하는 거지같은 상황이 만들어졌습니다

그래서 다같이 모여서 규범을 정한 게 ECMAScript라고 생각하시면 됩니다

📝Flux패턴

웹 애플리케이션을 위해 Facebook에 의해 개발된 아키텍처 패턴입니다

React도 이걸로 처음에 만들어졌다가 현재는 Hook을 기반으로한 아키텍처를 채택했습니다

이 패턴을 기반으로 만들어진 Redux가 있고 Redux는 이걸 개선시켜서 현재는 사용되지 않는 패턴이라고 생각합니다

• Dispatcher
  • 모든 데이터 흐름을 관리하는 중앙 허브입니다
• Store
  • 애플리케이션 상태를 보유하고 로직을 관리하는 곳입니다 디스패처로부터 액션을 받아 상태를 업데이트하고 변경사항이 있을 때 뷰에 알립니다
• Actions
  • 뷰에서 사용자 상호작용에 응답하여 발생한 간단한 객체로 타입 속성을 포함합니다
• Views
  • React 컴포넌트 같은 사용자 인터페이스 요소로 스토어 변화 감지해 새로 고칩니다

📝JPEG

• 1986년 국제표준화기구(ISO)에서 출시 했다
• 1,680만 개의 색상 표현이 가능하다
• 사람 눈으로 볼 수 없는 시각적 데이터를 제거하고 색상 변형을 평균화 시킨 손실 압축의 기술 이용
• 전문 사진작가는 후처리 또는 인쇄를 위해 이미지의 세부 정보를 유지하기를 원하기 때문에 손실 압축 방식을 사용하는 JPEG 촬영을 꺼리는 경향
• 여담으로 옛날에는 OS에 따라 확장자 길이 제한이 있어 JPEG를 JPG라고 표현했다

📝GIF

• 1987년에 출시 되었다
• 256가지의 색상을 지원하며 애니메이션을 지원하기 때문에 밈에 많이 사용된다
• 무손실 압축 파일로 이미지 품질이 저하되지 않지만 색상 제한이 있어서 해상도가 낮거나 흐려질 수 있습니다

📝PNG

• 1995년에 IT 전문가 Oliver Fromme에 의해 PING이라는 이름으로 출시 되었다
• GIF 포맷의 차세대 버전으로 출시되었으며 1,600만 개의 색상 지원
• GIF와 달리 애니메이션을 지원하지 않고 손실 압축을 하지 않고 그냥 압축 방식을 사용하기 때문에 데이터 크기는 JPEG보다 크다
• 손실이 없고 투명 배경을 지원하기 때문에 디자이너들이 자주 애용

📝BMP

• 마이크로소프트에서 1990년대에 윈도우 운영 체제용 BMP 포맷을 개발했다
• 압축이 되지 않아 다른 확장자에 비해 용량은 큰 반면에 2D사진, 아이콘, 화면 캡처의 경우 BMP가 더 유용하다

📝SVG

• 1990년대 후반에 W3C에서 새로운 유형 벡터 그래픽 포맷을 개발했다
• 옛날에 개발되었던 반면 인기를 얻는데 까지는 시간이 걸렸다 (2017년까지 사용이 적었음)
• XML코드로 작성하기 때문에 정보를 텍스트로 가지고 있어 검색엔진 최적화에 도움이 된다
• 로고, 일러스트레이션 따위에 사용하기 좋고 고품질 이미지에는 픽셀이 부족해 표현하기 어렵다

📝WebP

• Google에서 2010년에 개발한 파일 포맷으로 고품질 이미지를 표현할 수 있으며 JPEG, PNG보다 파일 크기가 더 작아진다
• 손실압축 / 무손실압축을 지원한다 Google에서는 무손실로 PNG보다 최대 26%까지 줄어들 수 있다고 주장
• gif 형식 애니메이션도 지원한다
• 호환성 확인 → https://caniuse.com/webp

📝Avif

• Webp의 후계자격이며 2019년에 1.0버전이 나왔기 때문에 최근 이미지 포맷 기술이다
• AV1 기반(비디오 인코딩)으로 돌아가고 AV1은 구글, 마이크로소프트, 애플 등에서 같이 만든 비디오 코덱으로 문제가 없을 가능성이 높다
• 단순한 이미지 형식의 경우 무손실 Webp가 더 좋지만 고품질의 경우 Avif가 성능면에서 좋다
• 호환성 확인 → https://caniuse.com/avif

📝스트림

스트림은 데이터를 바이트 단위로 연속적으로 전달하는 일련의 데이터입니다

📝버퍼 / 버퍼링

스트림 데이터를 조금씩 저장하며 처리하고 비우기를 반복하는 메모리 공간으로 이러한 행위를 버퍼링이라고합니다

📝스트림 + 버퍼

동영상의 경우 전부 다운 받은 후에 영상을 재생시킨다면 엄청나게 오래 기다려야할 수도 있다 이럴 경우 스트림을 이용하며 버퍼에 처리된 걸 담은 후에 사용자에게 보내주면 사용자는 모든 영상이 로드될 때까지 안 기다려도 볼 수 있다

📝Blob (Binary Large Object)

이진 데이터를 저장하기 위한 데이터 형식으로 주로 이미지, 오디오, 비디오, 문서 등의 바이너리 데이터를 저장하는 사용됩니다

멀티미디어 파일들은 대다수 용량이 큰 경우가 많기 때문에, 이를 데이터베이스에 효과적으로 저장하기 위해 고안된 자료형으로 바이너리 데이터를 다루기 위해 객체(Object) 저장한다

📝ArrayBuffer

객체는 이미지, 동영상과 같은 멀티미디어 데이터 덩어리를 표준 자바스크립트(브라우저)에서 다루기 위해 도입됐다 즉, 자바스크립트에서 원시 데이터(바이너리 데이터)를 직접 다루는 수단이다

이러한 이진데이터를 직접 보거나 수정하기 위해서는 위해서는 TypedArray가 따로 필요하다

TypedArray에는 여러개가 있다

• Uint8Array
  • 0 ~ 255 범위를 다룬다
• Uint16Array
  • 0 ~ 65535 범위를 다룬다
• Uint32Array
  • 0 ~ 4294967295 범위를 다룬다
• Float64Array
  • 8바이트 단위로 부동 소수점 방식으로 접근 가능한 view 객체

let buffer = new ArrayBuffer(16);
let view = new Uint8Array(buffer);

view[0] = 255;

console.log(buffer);
console.log(view);

ArrayBuffer에 데이터 넣어서 확인해볼 수 있다 Unit8Array이기 때문에 255까지 표현이 가능하기 때문에 256이 들어오면 0이 된다

콘솔창에 메모리 아이콘을 누르면 바이너리를 확인할 수 있다 FF 즉 255가 들어간 걸 확인 가능

📝 ArrayBuffer로 데이터 보내기

<input type="file" id="fileInput">

document.getElementById('fileInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onloadend = async () => {
    const arrayBuffer = reader.result;

    // fetch API를 사용하여 서버로 데이터 전송
    const response = await fetch('your-backend-endpoint-url', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/octet-stream',
      },
      body: arrayBuffer,
    });

    // 서버로부터의 응답 처리
    const result = await response.text();
    console.log(result);
  };

  // File To ArrayBuffer
  reader.readAsArrayBuffer(file);
});

<input type="file">에서 등록된 파일의 정보를 읽어 ArrayBuffer로 바꾼 뒤 octet-stream이라는 이진형태로 보내겠다는 Content-Type을 설정하고 보내면 된다

문제사항은 얘가 이미지인지 텍스트인지 동영상인지 등에 대한 정보가 없기 때문에 Base64로 인코딩 및 MIME-TYPE을 Json에 담아서 보낸다 이럴 경우 ArrayBuffer로 못 보낸다 근데 굳이 ArrayBuffer로 어렵게 보내는 것보다는 아래에 설명하는 방법으로 하는게 더 적합하다

📝File로 파일 업로드

document.getElementById('uploadButton').addEventListener('click', function() {
  const fileInput = document.getElementById('fileInput');
  if (fileInput.files.length > 0) {
    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);

    fetch('your-backend-endpoint-url', {
      method: 'POST',
      body: formData
    }).then(response => {
      return response.text();
    }).then(data => {
      console.log(data);
    }).catch(error => {
      console.error(error);
    });
  }
});

<input type="file" id="fileInput">

<input type="file">의 경우 파일 업로드할 때 사용되는데 File 객체를 가진다 이건 Blob을 상속받아 만들어진 것이다

formData객체를 만들어서 보낼 경우 Content-Type 설정 안 해도 알아서 설정된다

📝FormData vs Json

FormData랑 Json이랑 키-값으로 이루어진 건 비슷하다 하지만 Json은 텍스트, 숫자, 배열, 객체 등 다양한 데이터 타입을 지원하지만, 이진 데이터(예: 파일)를 직접적으로 다루지는 않습니다 그에 반해 FormData는 이진데이터도 취급을 한다

🔗 참고 및 출처

https://curryyou.tistory.com/441

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-Base64-Blob-ArrayBuffer-File-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%EC%A0%95%EB%A7%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85#arraybuffer

📝데이터 네트워크 흐름

✅ OS, WAS, DB가 같은 서버에 설치되어있는 경우 (파일 읽기도 동일)

클라이언트 요청 → NIC Buffer → Socket Buffer → Application Buffer → 클라이언트 요청 정보 해석 (파일 읽기일 때) → OS에 파일읽기 요청 → Read Buffer 저장 → Application Buffer로 전송 → Socket Buffer로 전송 → NIC Buffer로 전송 → 네트워크를 이용해 클라이언트에게 전송

• Read Buffer
  • 파일 시스템이나 데이터베이스로부터 데이터를 읽을 때 사용됩니다
• Application Buffer
  • 보통 사용자가 HTTP로 데이터를 요청하기 때문에 WAS에 Read Buffer 내용이 들어가게 됩니다
  • 필요한 형식으로 변환하거나 추가 데이터 작업을 할 수 있습니다
• Socket Buffer
  • 네트워크에 전송되기 전에 임시적으로 저장됩니다
  • TCP/IP 프로토콜을 통해 데이터를 전송하기 전에 이곳에 저장되게 됩니다
• NIC Buffer
  • 데이터가 네트워크를 통해 전송되기 위해서는 먼저 NIC Buffer로 이동하게 됩니다
• DMA copy
  • DMA(Direct Memory Access Copy)로 CPU의 개입 없이 메모리간 데이터를 직접 선송할 수 있는 컴퓨터 시스템 기능입니다
  • OS 커널 영역에서는 DMA Copy를 한다
• CPU Copy
  • CPU를 이용해 데이터를 메모리에서 다른 메모리로 이동하는 방법으로 WAS로 읽어들이는 경우 사용된다

✅ OS, WAS, DB가 다른 서버에 설치되어있는 경우

클라이언트 요청 → NIC Buffer로 전송 → Socket Buffer로 전송 → Application Buffer로 전송 → DB 호출 → Socket Buffer에 DB 요청 정보 보내기 → NIC Buffer로 전송 → DB 설치 서버에 NIC Buffer로 접근 → Socket Buffer로 전송 → DB에서 처리 후 Socket Buffer로 전송 → NIC Buffer로 전송 → NIC Buffer에서 받기 → Socket Buffer로 전송 → WAS 추가 작업 진행  끝낸 후 Socket Buffer로 전송 → NIC Buffer로 전송 → 네트워크를 이용해 클라이언트에게 전송

✅ OS, WAS 같은 서버에 설치되어있는 경우 (DB Connection X)

클라이언트 요청 → NIC buffer → Application Buffer로 전송 → Socket Buffer로 전송 → NIC Buffer로 전송 → 네트워크를 이용해 클라이언트에게 전송

📝Zero Copy

맨 위에 설명한 OS, WAS, DB가 같은 서버에 있는 경우 WAS에서 따로 처리가 필요 없는 경우 Read Buffer를 바로 Socket Buffer를 이용하는게 좋다

굳이 Socket에 담을 필요 없이 NIC Buffer로 바로 보내면 더 성능에 이점을 가지게 된다 이럴 경우 Buffer에 담는 행위가 줄어들기 때문에 Copy의 과정이 Zero에 가까워진다

📝데이터 싸이언스 

데이터를 수집, 분석하고 이를 통해 의사 결정을 내리는 과정에 참여 → 통계, 머신 러닝, 데이터 시각화 등 다양한 기술과 도구를 사용하여 데이터를 이해하고 활용

📝풀스택 개발자

프론트엔드 및 백엔드 개발을 모두 다룰 수 있는 개발자를 의미하며 우리가 지향해야 한다

📝 DevOps (Development and Operations)

소프트웨어 개발과 운영을 통합하여 효율적이고 신속한 개발 및 배포 프로세스를 구축하는 역할을 수행 → 자동화, 지속적 통합 및 지속적 배포 (CI/CD), 인프라스트럭처 관리 등에 집중

📝임베디드 엔지니어

하드웨어와 소프트웨어를 결합하여 특정 장치나 시스템에 포함된 소프트웨어를 개발 → IoT 디바이스, 드론 등

📝알고리즘 엔지니어

복잡한 문제를 해결하기 위해 효율적이고 최적화된 알고리즘을 설계 및 구현

📝OS / LINUX 개발자

운영 체제 또는 리눅스 시스템의 커널, 드라이버 및 핵심 구성 요소를 개발

📝코딩언어 / Compiler 개발자

새로운 프로그래밍 언어를 설계하거나 기존 언어의 컴파일러를 개발 → 파이썬, C++ 개발 등

📝코드 스니펫

몇개의 글씨를 이용해서 축약시켜 놓고 사용하는 것을 코드 조각(Code Snippet)이라고 부르며 재사용 가능한 소스코드나 텍스트의 작은 부분이라고도 한다 간단히 말하자면 자동완성의 기능이다 요즘에는 우리가 사용하는 IntelliJ , Eclipse IDE 에 포함되어 있다 s라고만 쳐도 s로 시작되거나 중간에 포함된 자동완성 리스트들이 보여서 빠른 개발을 할 수 있게 해준다

📝Passport.js

회원가입과 로그인은 직접 구현할 수도 있지만, 세션과 쿠키 처리 등 복잡한 작업이 많으므로 검증된 모듈을 사용하는 것이 좋다. 서비스에 로그인할 때 아이디와 비밀번호(기본적인 로그인 방식) 이외에 구글, 페이스북, 카카오 같은 기존의 SNS 서비스 계정을 이용하여 로그인 하는데, passport모듈이 바로 여기에 사용되는 것 즉, 로그인을 구현하는데 도와주는 모듈이다

📝MDX

마크다운 파일에서 직접 JSX를 작성할 수 있는 마크다운의 상위 집합

📝Headless CMS

CMS란 Content Management System의 약자로, 콘텐츠 관리만을 위한 서비스이다. 

기존 CMS는 뷰와 콘텐츠가 결합되어 있지만 Headless CMS는 내가 원하는 기술스텍을 사이트로 구성 할 수 있다

대표적인 예로는 strapi라는 게 있는데 백엔드 구축를 쉽게 해주는 툴이다 (DB도 설치해주고 Rest API 생성 등...)

📝CSP (Content Security Policy)

XSS(교차 사이트 스크립팅), 클릭재킹 및 기타 코드 삽입 공격과 같은 다양한 보안 위협으로부터 애플리케이션을 보호하는 것

Apache 예제

<IfModule mod_headers.c>
    Header set Content-Security-Policy "directives here"
</IfModule>

Nginx 예제

add_header Content-Security-Policy "directives here";

Express 예제

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

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', 'directives here');
  next();
});

📝네트워크 워터폴

호출할 때 비동기적으로 호출되는게 아닌 순차적으로 폭포수가 흐르듯이 호출되는 걸 의미하는데 이럴 경우 소스에 따라 사용자가 화면을 볼 때까지 지연이 될 수 있다

🔗 참고 및 출처

https://velog.io/@seungchan__y/Suspense-%EB%8F%84%EC%9E%85%EA%B3%BC-Waterfall-%ED%98%84%EC%83%81-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0#:~:text=%EC%88%98%20%EC%9E%88%EA%B2%8C%20%EB%90%98%EC%97%88%EB%8B%A4.-,%F0%9F%9B%9D%20Waterfall%20%EB%B0%9C%EC%83%9D,%EC%88%9C%EC%B0%A8%EC%A0%81%EC%9C%BC%EB%A1%9C%20%EC%9D%B4%EB%A3%A8%EC%96%B4%EC%A7%84%EB%8B%A4%EB%8A%94%20%EA%B2%83%EC%9D%B4%EB%8B%A4.

https://velog.io/@dung002/CSP%EB%9E%80

https://choonsik-lab.tistory.com/entry/코드-스니핏-Code-Snippet-이란
https://kaki104.tistory.com/809

https://velog.io/@holicholicpop/Strapi-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-Headless-CMS