글 쓰는 시간

오개념 바로잡기

최근 CS 스터디를 하면서 기존에 알고 있던 CSR, SSR 지식이 잘못 됐음을 깨달았다.

처음 생각한 CSR과 SSR 방식은 아래와 같았다.

CSR

1. 클라이언트 측에 HTML 뼈대는 바로 와서 일단 렌더링 됨

2. 이후 필요한 자바스크립트가 실행 되어 추가 데이터가 뼈대의 살을 채움

(createElement 로 태그 추가하는 식으로)

SSR

1. 일단 하얀 화면으로 대기

2. 서버에서 HTML, JS, CSS 입혀서 완성된 HTML 을 만들어서 클라이언트로 제공

하지만 CS 스터디를 진행하면서 공부해본 결과 잘못 알고 있었고, 이에 대해 정리해보려고 한다.

CSR, SSR 에 대한 설명

CSR (Client Side Rendering)

이름대로 렌더링이 클라이언트 측에서 일어난다.

위 그림에서 빨간 박스 영역은 빈 화면이라고 생각해도 좋다.

렌더링 과정은 아래와 같다.

1. 클라이언트가 서버로 요청을 보낸다.
2. 서버에서 응답으로 빈 HTML 페이지와 필요한 CSS, JS 파일들을 받는다.
3. 브라우저는 받은 HTML 을 해석하고, 초기 화면을 렌더링한다. (빈 화면)
4. 브라우저는 필요한 CSS, 이미지 등의 자원 및 JS 파일들을 다운로드하고 실행한다.
5. JavaScript가 실행되면 클라이언트는 서버에 데이터를 요청한다.
6. 받은 데이터를 사용하여 동적으로 페이지를 완성하고, 화면을 갱신한다.

SSR (Server Side Rendering)

이름대로 서버에서 렌더링 준비를 마친 상태의 HTML 을 클라이언트로 내려준다.

위 그림에서 빨간 박스 영역은 빈 화면이라고 생각해도 좋다.

렌더링 과정은 아래와 같다.

1. 클라이언트가 서버로 요청을 보낸다.
2. 서버에서 응답으로 렌더링 준비를 마친 HTML 페이지를 받는다.
3. 브라우저는 받은 HTML을 해석하고, 초기 화면을 렌더링한다. (기본 뼈대, JS 같은 동작은 안함)
4. 브라우저는 필요한 CSS, 이미지 등의 자원 및 JS 파일들을 다운로드하고 실행한다.
5. JavaScript가 실행되면 클라이언트는 초기에 받은 HTML에 이미 포함된 데이터를 사용하므로,
   데이터를 서버에 요청하지 않고 화면을 갱신한다.

CSR, SSR 의 차이점 비교

1. 웹 페이지 로딩 시간

페이지 로딩 시간은 첫 화면 로딩과 페이지 이동 시의 로딩 시간으로 나눌 수 있다.

첫 페이지 로딩 시간

CSR은 HTML, CSS와 모든 페이지의 JS 파일들을 한 번에 불러온다. 

반면 SSR은 필요한 부분의 HTML과 스크립트만 불러오므로 상대적으로 SSR 의 속도가 더 빠르다.

페이지 이동 시의 로딩 시간

CSR은 이미 첫 페이지 로딩할 때 나머지 페이지를 구성하는 코드를 받아왔기 때문에 페이지 이동 시 속도가 빠르다.

반면 SSR은 모든 페이지에서 위에서 설명한 로딩 과정을 거치므로 더 느리다.

2. SEO 최적화

CSR 의 초기 HTML에는 제한된 내용만 포함되어 있어 SEO에 취약하다.

반면 SSR 은 초기에 서버에서 완전한 HTML을 제공하므로 SEO에 유리하다.

3. 서버 자원 사용

CSR 은 클라이언트에서 페이지를 렌더링하므로 서버의 부하가 적다.

반면 SSR 은 서버에서 매 요청마다 렌더링 가능한 HTML 을 만들어야 하므로 서버 자원을 더 많이 소모한다.

프로세스와 쓰레드

프로그램은 어떤 작업을 위해 실행할 수 있는 파일이다.

실행한 프로그램 하나하나가 프로세스라고 할 수 있다. 아래 그림을 참고하자.

전용 공간

프로세스가 OS로 부터 할당 받은 메모리

프로세스

프로세스는 메모리 상에서 실행중인 프로그램이며, OS로 부터 자신만의 메모리와 자원을 할당받아 사용한다.

쓰레드

쓰레드는 한 프로세스 안에서 실행되는 각각의 흐름 단위를 말한다.
프로세스가 할당받은 메모리와 자원으로 다른 쓰레드들과 이를 공유하면서 사용한다.

프로세스와 쓰레드의 비교

위 그림을 보면 프로세스는 가족이고 할당받은 메모리 및 자원은 집이고 쓰레드는 가족 구성원이다.

• 가족(프로세스) 내부에는 구성원(쓰레드)들이 들어있고 이 구성원(쓰레드)들은 개별적으로 활동한다.
• 가족(프로세스)은 구성원(쓰레드)끼리 집 내부 공간(메모리 및 자원)을 공유한다.
• 하지만 서로 다른 가족(프로세스)끼리는 집 내부 공간(메모리 및 자원)을 공유하지 않는다.

프로세스와 스레드의 가장 큰 차이점은 프로세스끼리는 자원을 공유하지 않지만 스레드끼리는 자원을 공유한다는 점이다.

참고자료)

널널한 개발자님 유튜브

클라이언트와 서버 개념

공부를 하면서 클라이언트와 서버라는 단어를 자주 접하곤 한다.

하지만 딱 들었을때 생각보다 자주 헷갈려서 이번에 정리를 해보려고 한다.

마침 영한님의 좋은 답변이 있었다.

클라이언트와 서버라고 하면 클라이언트는 '인터넷 브라우저'로, 서버는 백엔드 단이라고 좁게 생각하는 경향이 있었다.

앞으로는 클라이언트를 호출하는 주체로, 서버를 호출받는 객체라고 넓게 생각하자.

참고자료

MSA(Microservice Architecture) 란

모듈화 되어 작고, 독립적으로 배포 가능한 각각의 기능을 수행하는 서비스로 구성된 프레임워크이다.
하나로 통합된 프로그램인 '모놀리식 아키택쳐'에서 서비스가 커져감에 따라 부분적인 Scale-out이 어렵고,

부분 장애가 서비스 전체 장애로 이어질 수 있는 등의 문제점이 발생하면서 떠오르는 서비스 아키택쳐이다.

장점

• 각각의 서비스 모듈끼리는 API로 통신하기 때문에 다양한 언어와 기술로 서비스를 구축할 수 있다.
• 서비스의 부하에 따라 개별적으로 Scale-out이 가능하다.

단점

• 모놀리식에 비해 통합테스트가 어렵고 개발환경과 실제 운영환경을 동일하게 가져가기가 어렵다.
• 서비스가 분산돼 있기 때문에 내부 시스템의 통신을 어떻게 가져가야 할지 정해야 해서 복잡하다.
• 통신 장애나 서버의 부하 등이 있을 경우 어떻게 transaction을 유지할지 정하고 구현해야 한다.

참고 자료

의존성 주입(DI, Dependency Injection) 이란

애플리케이션 실행 시점(런타임)에 외부에서 실제 구현 객체를 생성하고 클라이언트에 그 참조값을 전달하여

클라이언트와 서버의 실제 의존 관계가 연결 되는것이다.

여기서 클라이언트란 인터넷 브라우저를 뜻하는게 아닌 DI를 주입받는 객체를 의미한다.

의존성 주입의 장점

DI를 사용하면 구현체가 아닌 추상화에 의존하여 클라이언트의 코드를 변경하지 않고

클라이언트가 호출하는 대상의 타입 인스턴스를 변경할 수 있어서 유지보수에 유리하다

의존성 주입의 방법

필드, getter/setter, 생성자 주입이 있다

객체 지향 설계 5원칙(SOLID)

1. 단일 책임 원칙 (SRP, Single Responsibility Principle)

• 하나의 클래스는 단 하나의 책임만 가져야 한다.
• 변경을 기준으로 변경 시 파급효과가 적으면 단일 책임 원칙을 잘 따르는 것이다.

2. 개방-폐쇄 원칙 (OCP, Open/Closed Principle)

• 소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다.
• 기능을 변경하거나 확장할 수 있으면서 기능을 사용하는 코드는 수정하지 않는다.
• 다형성을 활용하여 구현체가 아닌 추상화에 의존한다.
  

3. 리스코프 치환 원칙 (LSP, Liskov Substitution Principle)

• 프로그램 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 한다.
• 상위 타입의 객체를 하위 타입의 객체로 치환해도, 상위 타입을 사용하는 프로그램은 정상적으로 동작해야 한다.
• 엑셀을 바꿨는데 엑셀 밟을때 앞으로 가야지 발 뗐을때 가서는 안된다.

4. 인터페이스 분리 원칙 (ISP, Interface Segregation Principle)

• 범용 인터페이스 하나보다 특정 클라이언트를 위한 여러 개의 인터페이스로 구성하는 것이 좋다.
• 범용 인터페이스를 클라이언트가 필요로 하는 개별의 인터페이스로 분리함으로써 각 클라이언트가 사용하지 않는 인터페이스에 변경이 있어도 영향을 받지 않도록 만들어야 한다.
• 읽기와 쓰기 전용 인터페이스를 분리한다면 변경에 대한 영향을 더욱 세밀하게 제어할 수 있다.

5. 의존관계 역전 원칙 (DIP, Dependency Inversion Principle)

• 추상화에 의존해야지 구체화에 의존하면 안된다.
• 고수준 모듈은 저수준 모듈의 구현에 의존해서는 안되고 저수준 모듈은 고수준 모듈에서 정의한 추상 타입에 의존해야 한다.
• 비즈니스와 관련된 부분이 세부 사항에 의존하지 않는 설계 원칙

객체 지향 설계 5원칙인 SOLID가 얘기하는 핵심은 결국 추상화와 다형성이다. 구체 클래스에 의존하지 않고 추상 클래스(또는 인터페이스)에 의존함으로써 우리는 유연하고 확장가능한 애플리케이션을 만들 수 있는 것이다.

참고 자료

객체 지향 프로그래밍의 특징

1. 추상화

• 객체에서 공통된 속성과 행위를 추출 하는 것
• 추상화는 불필요한 정보는 숨기고 중요한 정보만을 표현함으로써 프로그램을 간단하게 만드는 것

생성일자 ,수정일자 ,생성자, 수정자는 대부분의 엔티티에 필요한 'BaseEntity'에 해당된다. BaseEntity 라는 추상화 집합을 만들어두고 BaseEntity가 가진 공통적인 특징들을 만들어서 활용한다.

추상화가 왜 필요할까?

• 개발을 하면서 추가 기능이 요구되어 엔티티가 추가될 수도 있다. 이때 추상화로 'BaseEntity'를 구현 해놓았다면 추상화 된 공통된 정보 외에 추가할 정보만 입력해주면 된다.
• 중복 코드의 양을 줄일 수 있다.

2. 캡슐화

• 데이터 구조와 데이터를 다루는 방법들을 결합 시켜 묶는 것 (변수와 함수를 하나로 묶는 것을 뜻함)
• 낮은 결합도를 유지할 수 있도록 설계하는 것

접근제어자를 활용하면 getter/setter 혹은 객체의 내부 메서드를 통해서만 외부에서의 접근이 가능하도록 제한하여 정보은닉을 활용 할 수도 있다. 

(무분별하게 Setter를 열어두는건 좋지 않지만 예시로 사용하고자 한다.)

@Entity
@Table(name = "orders")
@Getter @Setter
@NoArgsConstructor(access = AccessLevel.PROTECTED)  
public class Order {

==============================윗부분 생략==============================

//==생성 메서드==//  여기서 주문 생성 관련을 완결해놔서 나중에 추가할게 생겨도 이 부분만 바꾸면 됨
    public static Order createOrder(Member member, Delivery delivery, OrderItem... orderItems) {
        Order order = new Order();
        order.setMember(member);
        order.setDelivery(delivery);
        for (OrderItem orderItem : orderItems) {
            order.addOrderItem(orderItem);
        }
        order.setStatus(OrderStatus.ORDER);
        order.setOrderDate(LocalDateTime.now());
        return order;
    }

    /**
     * 주문 취소
     */
    public void cancel() {
        if (delivery.getStatus() == DeliveryStatus.COMP) {
            throw new IllegalStateException("이미 배송완료된 상품은 취소가 불가능합니다.");
        }
        this.setStatus(OrderStatus.CANCEL);
        for (OrderItem orderItem : orderItems) {
            orderItem.cancel();
        }
    }

Order 엔티티 내에서 createOrder나 cancel과 같은 내부 메서드를 만들어서

객체 내부의 동작을 외부로의 노출을 최소화하여 각 객체의 자율성을 높이고, 객체 간 결합도를 낮추어 변경이 용이한 객체 지향의 핵심적인 이점을 잘 살리는 방법으로 프로그램을 설계할 수 있다.

3. 상속

• 클래스의 속성과 행위를 하위 클래스에 물려주거나 하위 클래스가 상위 클래스의 속성과 행위를 물려받는 것을 말한다
• 새로운 클래스가 기존의 클래스의 데이터와 연산을 이용할 수 있게 하는 기능

상속을 하게 된다면 장단점이 존재하는데 이는 다음과 같다.

장점                                                                               단점

4. 다형성

• 하나의 변수명, 함수명이 상황에 따라 다른 의미로 해석 될 수 있는 것
• 어떠한 요소에 여러 개념을 넣어 놓는 것

객체 지향 프로그래밍은 하나의 클래스 내부에 같은 이름의 행위를 여러개 정의하거나 상위 클래스의 행위를 하위 클래스에서 재정의하여 사용할 수 있기 때문에 다형성이라는 특징을 갖는다.

오버라이딩

• 상위 클래스가 가지고 있는 메소드를 하위 클래스가 재정의해서 사용하는 것

오버로딩

• 같은 이름의 메서드가 인자의 개수나 자료형에 따라 다른 기능을 하는 것
• 생성자 오버로딩을 생각하면 쉽다

다형성의 본질

• 인터페이스를 구현한 객체 인스턴스를 실행 시점에 유연하게 변경할 수 있다
• 클라이언트를 변경하지 않고, 서버의 구현 기능을 유연하게 변경할 수 있다

객체 지향 프로그래밍

OOP(Object-Oriented Programming)란 프로그램 설계방법론이자 개념의 일종이다.

프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라,

프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다.

객체

객체는 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며

하나의 역할을 수행하는 '메소드와 변수(데이터)'의 묶음이라고 할 수 있다.

레고에 빗대 표현하자면 객체는 레고의 조각이고 레고를 조립해서 무언가를 만들어 내는 것이 객체 지향 프로그래밍이라고 할 수 있다.

객체 지향 프로그래밍의 특징

객체 지향 프로그래밍은 크게 추상화, 캡슐화 ,상속 ,다형성 의 네가지 특징을 가진다.

SOLID (객체 지향 설계 원칙)

객체 지향적으로 설계하기 위해 SOLID 라 불리는 다섯 가지 원칙이 있다.

1. 단일 책임 원칙 (SRP, Single Responsibility Principle)

2. 개방-폐쇄 원칙 (OCP, Open/Closed Principle)

3. 리스코프 치환 원칙 (LSP, Liskov Substitution Principle)

4. 인터페이스 분리 원칙 (ISP, Interface Segregation Principle)

5. 의존관계 역전 원칙 (DIP), Dependency Inversion Principle)