기록하는 개발자

React와 Vue

밍맹030 — Tue, 5 Mar 2024 16:07:37 +0900

나는 처음 프론트엔드를 공부할 때, 당시 vue, angular 보다 react의 생태계가 더 넓고 커뮤니티가 활성화 되어있기 때문에 react를 선택했다. vue의 점유율은 꾸준히 오르고 있는데 실제로 취업 공고에도 vue가 많이 보이고 카카오에서도 react와 vue, angular를 함께 사용한다.

2023 vue의 점유율이 치솟은 것은 오류라는 것이 학계의 정설,,

react와 vue의 github issue나 star수만 보면 사실 차이가 많이 나긴 한다.

react - issue 1.2k, start 220k

vue - issue 691, start 43.6k

그렇다면 react와 vue의 장단점, 공통점과 차이점을 알아보자.

React

React는 자바스크립트 라이브러리로 사용자 인터페이스를 만들기 위해 사용된다.

- SPA(Single Page Application)이나 모바일 애플리케이션 개발에 사용될 수 있다.

- 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가로 라이브러리를 사용해야 한다.

장점

•컴포넌트기반 프레임워크이며 가상 DOM 렌더링 방식을 사용한다.

•단방향 데이터 바인딩으로 안정성을 보장한다.

•React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.

•React-Native 를 통해 네이티브 모바일 애플리케이션 개발이 가능하다.

단점

•앱의 규모가 커지면 속도가 느려진다.

•다른 프론트엔드 기술스택에 비해 가파른 학습곡선을 가지고 있으며, 이는 일부 개발자들에게 장벽이 될 수 있다.

•View 이외의 데이터 모델링 등은 직접 구현하거나 라이브러리를 사용해야 하므로 javascript에 대한 지식이 필요하다.

•데이터 모델링, 라이팅, Ajax 등 기능 지원이 되지 않는다.

Vue

Vue는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 자바스크립트 프레임워크이다.

- 기존 프로젝트의 일부에 점진적으로 도입할 수 있다.

- 고성능의 싱글 페이지 애플리케이션(SPA)을 구축할 수 있다.

장점

•컴포넌트기반 프레임워크이며 가상 DOM 렌더링 방식을 사용한다.

•양방향 데이터 바인딩 방식

•HTML, CSS, JS만 알고 있어도 사용이 가능하여 배우기 쉽다

단점

•테스트가 어렵고 재구조화가 쉽지 않다.

•모바일 지원이 부족하다.

•커뮤니티 등의 자료가 React에 비해 많지 않다.

공통점

•컴포넌트기반 프레임워크로 가상 DOM 랜더링 방식을 사용한다.

•React는 Next를 통해, Vue는 Nuxt를 통해 Serverside rendering을 구현할 수 있다.

•코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리(react-router, react-router-dom, react-router-redux 등)가 있다.

차이점

•React에서 모든 컴포넌트는 JSX를 사용해 JSX의 툴을 이용해 Vue의 템플릿보다 진보된 기능을 사용할 수 있다.

•React는 JSX(JavaScript XML) 형태로 코드를 작성하며 JavaScript만을 사용해 UI 로직과 DOM을 구현한다.

•Vue의 가상 DOM구현이 React보다 빠르며 오버 헤드가 적게 발생한다.

•Vue는 템플릿을 사용해 쉽고 빠르게 제작이 가능하며 진입장벽이 낮다.

ex)

•React는 단방향 데이터 바인딩이고 Vue는 양방향 데이터 바인딩 방식을 이용한다.

→ 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽을 변경하면 다른 한쪽도 자동으로 변경된다.

ex)

<input v-bind="textValue">
<script setup>
  const textValue = ref();
  textValue.value = "let's test vue!";
</script>

input 태그에 data를 사용자가 입력할 때, 실제로 textValue 의 값이 변경 되게 하려면

textValue = event.target.value 를 통해 이벤트 처리를 해줘야한다.

이렇게 단방향으로만 데이터가 흐르는 방식이 React에서 사용되는 단방향 데이터 바인딩이다.

그러나 vue에서는 v-model을 사용해 양방향 데이터 바인딩을 할 수 있다.

<input v-model="textValue" />

위와 같이 v-model을 사용하면 input 창에 사용자가 입력한 값이 textValue에 바인딩되어

사용자가 input을 변경하면 textValue값이 함께 변경되는 것을 볼 수 있다.

참고

https://github.com/facebook/react

https://github.com/vuejs/core

https://npmtrends.com/angular-vs-react-vs-vue

https://medium.com/@zero86/%EB%B2%88%EC%97%AD-react-js-vs-vue-js-in-2023-5118ae2e1454

https://velog.io/@falling_star3/Vue.js-%EC%96%91%EB%B0%A9%ED%96%A5-%EB%B0%94%EC%9D%B8%EB%94%A9v-model

https://codingapple.com/unit/why-use-vue-over-react/

CSS 방법론 - BEM, OOCSS, SMACSS

밍맹030 — Sun, 3 Mar 2024 17:58:57 +0900

내가 지금까지 무심코 써왔던 CSS 스타일링 방법이 사실은 CSS 방법론이라는 이름하에 여러 개로 나눠지고 있었다.

가장 유명한 BEM, OOCSS, SCACSS 세 가지 중 무엇을 쓰는 것이 효율적인가에 대해 많은 이야기가 있는데

알고 보니 나는 이 3가지를 모두 섞어서 쓰고 있었다

더 놀라운 점은 실제로 한 가지만 쓰는 것보다는 두 가지 이상을 섞어 쓰면서 개별적인 단점을 보완하는 것이 더 유리하다는 것이다

그렇다면 세 가지 방법론에 대해 알아보자

1. BEM

블록(Block), 요소(Element), 상태(Modifier)로 구분하여 클래스 이름을 작성하는 방법론이다. 각 부분을 __와 --로 구분하여 클래스명을 짓게 된다. Ex) Block__Element—Modifier

1. Block

- block의 속성을 가지고 재사용할 수 있는 독립적인 영역에 적용한다.

- block은 여백, 위치, 색상 등 상태에 대한 내용은 담지 않는다.

- 클래스명이 길어질 경우엔 하이픈(-) 으로 구분한다.

<!-- right way -->
<div class="header"></div>
<div class="btn-container"></div>

<!-- wrong way -->
<!-- fixed, white 같이 상태에 대한 내용은 클래스로 담지 않는다. -->
<div class="header-fixed"></div>
<div class="btn-container-white"></div>

2. Element

- Block 안에 적용되는 내용들로 클래스명도 블록과 맥락이 이어져야한다.

- 클래스명은 언더바 2개(__) 로 작성한다.

<div class="nav">
  <div class="nav__logo">
  	<img class="nav__logo--small" src="/logo"></img>
  </div>
  
  <div class="btn-container">
  	<button class="btn-container__btn"></button>
  	<span class="btn-container__btn-text"></span>
  </div>

</div>

3. Modifiers

- block 혹은 element의 모양(color, size), 상태(position, disabled, checked)를 정의한다.

- 클래스명은 하이픈 2개(--)로 작성한다.

<div class="nav">
  <div class="nav__logo">
  	<img class="nav__logo--small" src="/logo"></img>
  </div>
</div>

장점

- 직관적인 클래스 사용을 통해 여러사람이 함께 작업을 진행하더라도 클래스를 알아보기 쉽게한다.

- 코드의 재사용성이 용이하다.

단점

- 직관적인 클래스명을 사용하다보니 클래스명이 지나치게 길어져 복잡해지는 경우가 있다.

2. OOCSS(Object Oriented Css)

CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법론으로, 실제로 가장 많이 쓰인다.

특징

- css를 모듈 방식으로 적용해서 중복을 최소화 하는 것을 추구한다.

- id 선택자를 사용하지 않는다.

- 각 단어별 하이픈(-)으로 구분한다.

1. 구조와 외형을 분리

반복되는 기본 구조 및 외형과 관련된 내용을 공통 스타일화 하여 정의한다.

<style>
   /* 구조 스타일 */
  .button{
    width : 80px;
    height : 40px;
    text-align : center;
  }
  
  /* 외형 스타일 */
  .button-black{
    background : black;
    color : white;
  }
</style>

<span class="button button-black">click</span>

2. 컨텐츠와 컨테이너를 분리

- 어떤 요소(element)에 적용되어 있는게 중요한 것이 아니라 클래스를 적용한 컨텐츠 자체에 의미를 부여하고 사용한다.

- 태그가 변경되어도 적용한 클래스가 같다면 css를 바꿀 필요가 없다.

- 태그에 영향없이 클래스 자체에 스타일이 부여되기 때문에 재사용이 용이하다.

<h2 class="title"></h2>
<p class="title"></p>

장점 : 공통된 부분을 찾아 어디서나 재활용 할 수 있다.

단점 : 다중 클래스 사용으로 유지보수의 어려움과 가독성 저하의 가능

3. SMACSS(Scalable and Modular Architecture for CSS)

CSS를 범주화(Categorization)로 패턴화 하고자 하는 방법론

작성할 CSS를 비슷한 종류끼리 모아 5가지 스타일로 나누고 각 유형에 맞는 선택자와 작명법, 코딩 기법을 제시한다. 기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme) 다섯 가지의 범주를 제시한다.

1. Base (기본)

각 브라우저의 스타일 초기화를 위해 reset 등 페이지 전체에 기본 스타일을 적용하며 !important는 사용하지 않는다.

2. Layout (레이아웃)

- 페이지 큰 틀을 잡아주는 레이아웃과 관련된 스타일을 정의한다.

- header, footer, container, aside 등 주요 컴포넌트들과 그 하위 컴포넌트에 규칙을 적용한다.(nav, form...)

- 주요 요소(id)와 하위 요소(class)로 구분하고 접두사를 사용한다.

- 특정 상태에 따른 레이아웃을 변경하는 내용을 다루는 css 작성시 l- 혹은 layout- 클래스를 접두사로 붙인다.

#header{
    width:100%
}

#header .nav{
    overflow:hidden;
}

/* ex) fixed: 고정된 크기의 #header를 명시 */
.l-fixed #header{
    width:1200px;
}

/* ex) flipped: floating된 .nav를 명시 */
.l-flipped #header .nav{
    float:left
}

3. Module (모듈)

- 재사용성이 높은 구성 요소를 정의한다.

- 재사용을 위해서 id 선택자, 태그(element) 선택자를 사용하지 않는다.

(단순 태그 선택자를 사용하게 된다면 .side_button > a 와 같이 '>' 직계자손 선택자를 사용한다.)

<style>
  .buttons{absolute; top:0; right:0}
  .buttons > a{display:block; border:1px solid blue;}
</style>

<div class="buttons">
  <a href="#">버튼</a>
</div>

4. State (상태 규칙)

- 요소의 상태 변화를 표현하며, 주로 접두사 .is- 클래스를 사용한다(ex) .is-disabled, .is-checked).

- 클래스 적용은 javascript를 통해(element.classList.add) 특정 이벤트에 따라 적용한다.

.is-error { ... }
.is-hidden { ... }
.is-disabled { ... }

5. Theme (테마)

- 사용자가 선택 가능하도록 스타일을 재선언하여 사용한다.

- 주의 할 점은 메인 css 뒤에 테마용 css를 선언해야 한다는 점이다.(main이 나중에 오면 theme이 덮어씌워짐)

/* main.css */
.button{background:black;}

/* theme.css */
.button{background:white;}

SMACSS 사용 시 유의사항

파생된 CSS 선택자(후손 선택자, 자식 선택자, 필터 선택자, 형제 선택자 등)사용금지
Id 선택자 사용금지
!Important 사용금지
다른 개발자들이 이해할 수 있도록 class 이름을 의미 있게 지어야 한다.

내가 사용하는 방식을 소개해볼까 한다

우선 나는 css가 아닌 scss를 사용한지는 꽤 됐다. scss는 css 전처리기로 아래와 같은 장점이 있다.

css 전처리기(preprocessor) 장점
재사용성 - 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체
시간적 비용 감소 - 임의 함수 및 Built-in 함수로 개발 시간적 비용 절약
유지 관리 - 중첩, 상속 등의 기능으로 구조화된 코드로 유지 및 관리 용이

Sass(Scss)의 장점(특징)
- 변수 사용 가능 / - 수학 연산자(+ - / * % == !=)를 사용할 수 있다.
- nesting 기능 : 중첩해서 선언 가능. 상위 요소 참조 시 문자 & 사용
- import를 통해 다른 scss 파일을 import 가능
- extend를 통해 특정 선택자의 속성을 상속받기 가능
- mixin을 통해 공통적으로 쓰이는 css 속성을 묶어 선언 후 @include를 통해 재사용 가능
- 커스텀 함수를 사용 가능. @function으로 정의, @return이 리턴값
- @if, @else, @for, @each, @while을 통해 흐름을 제어할 수 있다.

글의 시작에서 알고 보니 내가 방법론 3가지를 모두 섞어서 쓰고 있었다고 했다. 세 가지를 엄격하게 적용한 것은 아니고, 어떻게 보면 편리하게 필요한 부분만 가져와서 사용한 것 같다. 가장 최근 프로젝트에서는 아래와 같은 방법으로 스타일링을 적용했다.

0. 전역으로 사용하는 색상은 변수로, 재사용 되는 스타일(헤더나 본문폰트, 버튼 스타일 등)은 mixin으로 지정해두고 필요할 때 include 해서 사용한다. 아래는 실제 내가 프로젝트에서 작성한 variable.scss 파일의 일부이다.

// variable.scss

// 전역으로 사용하는 색상
$color-disabled: #bdc8d6;
$color-error: #EE0D0D;
$color-focus: #2a82f0;
$color-toast-background: rgba(0, 0, 0, 0.8);

$color-text-white: #fff;
$color-text-black: #000;
$color-text-gray: #a0a0a0;
$color-text-darkgray: #646464;
$color-placeholder: rgba(0, 0, 0, 0.3);

// 전역으로 사용하는 폰트 스타일
@mixin text-h1 {
    font-weight: 400;
    font-size: 6rem;
    line-height: 6.5rem;
}

@mixin text-body1 {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0.5px;
}

@mixin button-white {
    color : $color-text-white;
    border : $border-button;         
    border-radius: $border-radius-button;
    background-color: $color-surface-white;
}

@mixin button-hover-black {
    background-color: $color-hover;
    color:$color-text-white;
    border: $border-button-hover;
    box-shadow: $shadow-button-hover;
}

// 전역으로 사용하는 그림자 스타일
$shadow-bottom: 0 4px 4px rgba(0, 0, 0, 0.25);
$shadow-center: 0 0 5px rgba(0, 0, 0, 0.25);
$shadow-dropdown: 1px 2px 4px rgba(0, 0, 0, 0.25);
$shadow-button: 1px 3px 3px rgba(0, 0, 0, 1);
$shadow-button-hover: 1px 3px 3px rgba(204, 207, 209, 1);

// 전역으로 사용하는 버튼 스타일
$border-button: 3px solid #000;
$border-button-hover: 3px solid #e5e6e8;
$border-radius-button: 1.25rem;

1. SMACSS 방식으로 기본 html base를 reset한다. 아래는 내가 사용한 reset.scss 파일이다.

* Reset 하는 이유

- 각 브라우저마다 설정 되어있는 기본 스타일이 다 다르기 때문에, CSS를 작성할 때 초기화를 시킨다. 즉, 기본적으로 태그가 가지고 있는 간격, border, 색상 등을 통일 시키는 작업이다.

// reset.scss 
@import "./mixin.scss";

*{
    margin: 0;
    padding: 0;
    border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}

ol, ul {
  list-style-type: none;
}

button{
    cursor: pointer;
}

a {
  text-decoration: none; 
  outline: none;
}

2. scss(sass)를 사용해 클래스 이름은 BEM 방식으로 짓는다.

- 기존 BEM 방식은 modifier에 block 혹은 element의 모양(color, size), 상태(position, disabled, checked)를 정의 하는데, 이러한 부분은 취하지 않았다. 단지 이름을 지을 때 '__'와 '--"로 구분하는 방식만 가져와서 사용했다.

ex) 최상위-블럭__블럭-내-요소--개별요소

@import "../../../base/variable.scss";

.MyReview{
    min-width : 550px;
    max-height: 40rem;
    @include overflow-y-scroll();
}
.MyReview-card__container{...}

.MyReview-card__header{           
    .MyReview-card__header--col1{...}
    .MyReview-card__header--col2{
        .MyReview-card__header--row1{...}
    }
}

.MyReview-card__content{
    .MyReview-card__rating{...}
}

3. OOCSS를 기반으로 스타일을 적용한다.

- 아래와 같이, 두 container 내 button은 모두 동일한 mixin 'button-white'를 사용하지만 필요한 스타일링을 유동적으로 추가해서 사용한다.

.ReviewModal-btn__container{
    .ReviewModal-submitBtn{
        @include button-white;
        padding : 7px 20px;
        
        &:hover{
            @include button-hover-gray;
        }
    }
}

.userInfo-btn__container{
    button{
        @include button-white(); 
        cursor: pointer;  
        padding: 5px 0;
        width : 110px;
        font-size: 15px;
        margin : 5px;
        
        &:hover {
            @include button-hover-black();
        }
    }
}

참고

https://mine-it-record.tistory.com/655

https://abcdqbbq.tistory.com/75

[CSS] Display : none, opacity : 0, visibility : hidden 비교

밍맹030 — Tue, 19 Dec 2023 19:25:20 +0900

브라우저의 렌더링 과정

https://mingmeng030.tistory.com/316

브라우저의 렌더링 과정과 Reflow, Repaint

브라우저의 렌더링 과정 Parsing→Style→Layout→Paint→Composite Parsing(DOM Tree, CSSOM Tree 구성) HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. 브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 H

mingmeng030.tistory.com

Parsing(DOM Tree, CSSOM Tree 구성) → Style(Render Tree 구성)

→ Layout(Render Tree 배치 : Reflow) → Paint(Render Tree 그리기 : Repaint) → Composite

Display : none opacity : 0 visibility : hidden
위 세 가지 모두 화면에서 element를 보이지 않게 한다. 그렇다면 차이점은 무엇일까?

Display : none

Dom Tree에는 포함되지만 Render Tree에서 제외되어 Layout(Reflow)에 포함되지 않아 화면에서 자리를 차지하지 않는다.

그러나 Dom Tree까지는 해당 요소가 Node로 만들어 지기 때문에, Parsing 과정은 거쳐야 한다. 즉, 리렌더링에 따른 자원 소모는 피하지 못한다.

- 검색엔진이 접근하지 못한다.

- Reflow, Repaint를 하지 않는다.

visibility : hidden

Render 트리에 포함되어 Layout에 포함된다. 따라서 화면 상 자리를 차지하지만 눈에 보이지 않는다.

- javascript의 onClick 이벤트에 반응하지 않는다.

- Repaint 만 함

opacity : 0

Layout에는 포함되지만 눈에 보이지 않는다는 점에서 visibility : hidden과 동일하게 작동한다.

그러나 visibility : hidden과 달리 click event에 반응한다.

- javascript의 onClick 이벤트에 반응한다.

- Repaint 만 함

opacity와 visibility는 자리를 차지하지만 display는 자리를 차지하지 않는다.

코드 보기 ↓

<div class="container">
  <div class="background">
    <div class="opacity">Opacity</div>
    <div class="display">Display</div>
    <div class="visibility">Visibility</div>
  </div><br/>

  <div class="background">
    <div class="opacity">Opacity</div>  
    <div class="click-display">Display</div>
    <div class="visibility">Visibility</div>
  </div><br/>

  <div class="background">
    <div class="display">Display</div>
    <div class="click-opacity">Opacity</div>
    <div class="visibility">Visibility</div>
  </div><br/>

  <div class="background">
    <div class="display">Display</div>
    <div class="click-visibility">Visibility</div>
    <div class="opacity">Opacity</div>
  </div><br/>
</div>

.container {
  background-color: #f1f1f1;
  width: 100%;
}

div {
  display: inline-block;
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

.background{
  width : 500px;
  padding : 10px 0;
  border : 1px solid lightgray;
  margin : 10px 0;
}

.display, .opacity,.visibility {
  width: 100px;
  padding : 20px 0;
  text-align : center;
}

.display {
  background-color: #dd3;
}
.opacity {
  background-color: #259;
}
.visibility {
  background-color: #f12;
}

.click-display {
  display: none;
}
.click-opacity {
  opacity: 0;
}
.click-visibility {
  visibility: hidden;
}

collapses : 페이지 공간를 차지 하지 않음 / taborder : tab 키를 사용 시 포커스 여부

참고

https://mycodings.fly.dev/blog/2022-12-18-css-display-none-vs-visibility-hidden

브라우저의 렌더링 과정과 Reflow, Repaint

밍맹030 — Tue, 19 Dec 2023 18:39:09 +0900

브라우저의 렌더링 과정

Parsing→Style→Layout→Paint→Composite

Parsing(DOM Tree, CSSOM Tree 구성)

HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.

브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다. Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다. CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.

Style(Render Tree 구성)

Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면에 그려질 Tree이다.

Layout(Render Tree 배치 : Reflow)

Render Tree를 화면에 어떻게 배치해야 할 것인지 Node의 정확한 위치와 크기를 계산한다.

Root부터 노드를 순회 하면서 노드의 정확한 크기와 위치를 계산하고 Render Tree에 반영한다.

만약 크기 값을 %로 지정 하였다면, Layout 단계에서 % 값을 계산해서 픽셀 단위로 변환한다.

Paint(Render Tree 그리기 : Repaint)

Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다.

이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다. 스타일이 복잡할수록 Paint 시간도 늘어난다.

Ex)단색 배경은 시간과 작업이 적게 필요하지만 그림자 효과는 더 많이 소요됨

Composite

Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다. 우리는 화면에서 웹 페이지를 볼 수 있다.

Reflow와 Repaint

Reflow

Parsing → Style(RenderTree 생성)→ Reflow(Layout) → Repaint → Composite

생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등)가 변경되면 영향 받은 모든 노드의(자신, 자식, 부모, 조상(결국 모든 노드)) 수치를 다시 계산하여 렌더 트리를 재생성하는 과정

• DOM 엘리먼트나 css 스타일이 추가, 제거 또는 변경되었을 때

• User Interaction으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경 등이 발생할 때

Repaint

Parsing → Style(RenderTree 생성)→ Repaint → Composite

RenderTree가 탐색되고 paint 메서드가 호출되어 화면을 그리는 과정이다.

따라서, Repaint가 이루어지기 위해서는 RenderTree가 있어야 하고, Reflow 작업이 이루어진 후에 재생성된 렌더 트리를 다시 그리게 되는 과정인 Repaint 작업이 이루어진다.

즉, 화면의 구조가 변경이 될 때는 Reflow와 Repaint가 모두 발생한다.

Reflow가 발생하지 않고 Repaint만 발생하는 경우도 있는데, 화면의 가시성은 변하지만 레이아웃에 영향을 미치지 않는 요소의 외관을 변경할 때이다.

• Reflow가 실행된 후

• 가시성이 변경되는 순간 (opacity, background-color, visibility, outline)

Reflow를 최소화하는 방법

w3c에 소개된 Reflow를 최소화하는 방법 중 몇 가지를 가져와봤다.

1. 클래스 변화에 따른 스타일 변화를 원할 경우, 최대한 DOM 구조 상 끝단에 위치한 노드에 주어라.

<div className="Wrapper">
  <div className="list-Wrapper">
    <ul className="list-ul">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

클래스 변화로 인한 Reflow를 아예 피할 수는 없겠지만, 그 효과는 줄일 수 있다. DOM 트리에서 가급적 말단에 위치한 노드에 클래스 변화를 줄 경우, 이는 Reflow의 행동 반경을 전체 페이지가 아닌 일부 노드들로 제한할 수 있다. 따라서 전체 페이지를 감싸는 wrapper에 클래스를 수정하는 행위는 꼭 피해야 한다. 또한 OOCSS(Object Oriented CSS) 방식을 통해 클래스변화가 발생할 경우, 특정 엘리먼트에 대해 상당히 많은 클래스를 적용시키는 것 같지만, 실제로는 Reflow의 영향을 최소화함으로써 퍼포먼스적인 측면에서 큰 이득이 발생한다.

2. Inline Style을 최대한 배제하라.

DOM은 매우 느린 구조체이다. 게다가 inline으로 스타일이 주어진 경우, Reflow는 페이지 전체에 걸쳐 수차례 발생하게 된다. 만일 inline style이 없을 경우, 외부 style 클래스의 조합으로 단 한번만 Reflow를 발생시킨다.

3. 애니메이션이 들어간 엘리먼트는 가급적 position:fixed 또는 absolute 로 지정

일반적으로 JS(특히 jQuery)나 CSS3로 width/height 또는 위치이동을 구현한 애니메이션은 거의 초단위로 상당한 Reflow를 불러일으킨다. 이러한 경우에 해당 개체의 position 속성을 fixed 또는 absoute로 주게 되면 다른 요소들의 레이아웃에 영향을 끼치지 않으므로 페이지 전체의 Reflow 대신 해당 애니메이션요소의 Repaint만을 유발하므로 비용적인 측면에서 매우 효율적인 방법이다.

4. 테이블 레이아웃을 피하라

테이블로 구성된 페이지 레이아웃은 점진적(progressive) 페이지 렌더링이 적용되지 않으며, 모두 로드되고 계산된 후에야 화면에 뿌려진다. Mozilla에 따르면 테이블 레이아웃에서는 아주 작은 변화마저도 해당 테이블 전체 모든 노드에 대한 Reflow를 발생시킨다고 한다.

5. JS를 통해 스타일변화를 주어야 할 경우, 가급적 한번에 처리하라

특정 요소에 스타일변화를 주어야 할 경우 다음과 같이 시도해볼 수 있다.

var toChange = document.getElementById('elem');

toChange.style.background = '#333';
toChange.style.color = '#fff';
toChange.style.border = '1px solid #ccc';

이러한 접근은 여러번 중복된 Reflow와 Repaint를 유발시킨다. 때문에 아래와 같이 단 한번의 변화만 발생시키는 것이 더욱 효과적이다.

/* CSS */ 
#elem { 
	border:1px solid #000; color:#000; background:#ddd;
} 
.highlight { 
	border-color:#00f; color:#fff; background:#333; 
} 
 
/* js */
document.getElementById('elem').className = 'highlight';

참고

https://lists.w3.org/Archives/Public/public-html-ig-ko/2011Sep/att-0031/Reflow_____________________________Tip.pdf

https://velog.io/@young_pallete/Reflow-Repaint%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

https://devowen.com/463

https://ekimnida.tistory.com/45

[Javascript] React의 Virtual Dom

밍맹030 — Tue, 19 Dec 2023 17:35:29 +0900

DOM(Document Object Model 문서 객체 모델)

HTML 또는 XML 문서에 접근하기 위한 인터페이스로, HTML element들을 Tree 형태로 표현한 것이다.

우리의 IDE에서 작성한 HTML이 아닌, 작성 된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 Node Tree가 DOM이다. DOM tree안에는 각 element에 상응하는 Node가 들어있고, 이러한 DOM은 API(getElementById, querySelector 등)를 제공하여 Javascript로 해당 문서에 노드 추가, 삭제, 변경, 이벤트 처리, 수정 등을 가능하게 한다.

IDE에 HTML을 작성해도 최종적으로 결과 화면을 보기 위해서는 브라우저가 필요하다. IDE에 작성된 HTML은 단순한 문자열일 뿐이며, 브라우저가 이해하기 위해서는 Node(객체)로 변환해야 한다.

즉 DOM은 HTML과 Javascript를 이어주는 공간으로, 내가 작성한 HTML을 Javascript가 이해할 수 있도록 객체(object)로 변환하는 것이다.

Virtual Dom이란?

Virtual dom 은 실제 dom과 같은 내용을 담고 있는 복사본으로, dom과 내용을 공유한다. 그러나 실제 DOM과 달리 직접적으로 브라우저 화면의 UI를 조작할 수 있는 API(getElementById, querySelector 등)는 제공하지 않는다.

React는 렌더링 이전의 화면 구조를 나타내는 가상 돔과 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상 돔을 가지고 있다. 두 가상 돔을 비교하여 어떤 element가 변했는지 알아내는 과정을 Diffing 이라고 하고, 차이가 발생한 부분만을 실제 dom에 적용한다. 이 과정은 Reconciliation(재조정)이라고 한다.

이러한 Diffing과 Reconciliation 과정이 효율적인 이유는 batch update 방식을 사용하여 변경된 모든 element들을 집단화 시켜 실제 dom에 한 번에 적용하기 때문이다. 10개의 element가 변경된 경우, 10개의 element를 별개로 그리지 않고, 변경 내용을 한 번에 받아와 실제 dom에 한 번에 적용시켜준다는 점이 효율적이라는 것이다.

Virtual DOM을 사용하는 이유

- Virtual DOM을 조작 → DOM을 조작

- DOM을 조작

Virtual DOM의 작동 원리는 하나의 레이어를 더 거쳐가는 동작이기 때문에, DOM 조작이 아주 많지 않다면 DOM을 직접 조작하는 것보다 느리다. 실제로도 dom을 조작하는 일이 극단적으로 많지는 않기 때문에 virtual dom을 이용할 필요가 많지 않았다.

React가 나오기 전까진 말이다.

React의 등장(https://velog.io/@woohm402/virtual-dom-and-react)

Facebook 에는 페이스북 메시지가 오지 않았는데 메시지가 와 있다고 뜨는 심각한 버그가 있었고, 그들은 그 버그를 해결하지 못했다.

데이터 흐름을 파악하고 버그를 체크하는 데에 어려움을 겪던 이들은 아예 새로운 발상을 하게 된다.

"그냥 데이터가 바뀌면 싹 다 다시 그려 버리면 안돼?"

DOM에 변경사항을 직접 조작해서 집어넣지 말고 그냥 데이터가 바뀔 때마다 전부 다시 그려 버리면 버그가 생길 일이 없지 않냐는 질문이었다. 이를 통해 모든 변경사항을 Virtual DOM 에 새로 그리고, 기존에 비해 변경된 부분만 DOM에 한 번에 보내는 방법을 선택한다.

참고

https://www.howdy-mj.me/dom/what-is-dom

https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb

https://velog.io/@woohm402/virtual-dom-and-react

[운영체제] 프로세스와 스레드(프로그램, 멀티프로그래밍, 멀티태스킹, 멀티스레드)

밍맹030 — Mon, 18 Dec 2023 23:07:14 +0900

이번 하반기 면접을 준비할 때 java, javascript 위주로 준비하면서 cs 공부도 했는데

공부할수록 새록새록 기억이 나는게 뇌가 살아나는 느낌....

공부겸 정리겸 공부했던 cs 지식들을 기록하면 좋을 것 같다.

프로그램, 멀티프로그래밍, 멀티태스킹, 프로세스, 스레드, 멀티스레드, 멀티프로세스, 멀티프로세싱, etc...

이름 비슷한 녀석들의 종류가 참 많다..

헷갈리는 녀석들을 짚고 넘어가보자

프로그램(Program) & 프로세스(Process)

프로그램(Program)

사전적 의미로는 '어떤 작업을 위해 실행할 수 있는 파일'로 컴퓨터가 실행할 수 있는 명령어들의 집합이다.

프로세스(Process)

컴퓨터에서 실행 중인 프로그램으로 각각의 프로세스는 독립된 메모리 공간을 할당 받으며 명령어들과 데이터를 가진다.

사전전 의미로는 '컴퓨터에서 연속적으로 실행되고 있는 컴퓨터 프로그램'이다.

→ 프로세스는 프로그램을 메모리상에서 실행 중인 작업

*운영체제가 여러 개의 프로세스를 동시에 실행하는 것 : 멀티 태스킹(Multi-Tasking)

*어떤 작업을 하나 이상의 프로세서가 병렬로 처리하는 것 : 멀티 프로세싱(Multi-Processing)

멀티 태스킹(Multi-Tasking) & 멀티 프로그래밍(Multi-Programming)

멀티 태스킹(Multi-Tasking)

멀티 태스킹은 다수의 작업(Task)을 운영체제의 스케줄링에 의해 번갈아 가며 수행되도록 해주는 것을 의미한다.

멀티 태스킹의 스케줄링 방식은 멀티 프로그래밍 방식(Multi-programming), 시분할 방식(Time-sharing), 실시간 시스템 방식(Real-time)을 사용하여 수행된다.

- 프로세스는 한번 cpu를 사용할 때 아주 짧은 시간만 cpu에서 실행되도록하여 프로세스의 응답 시간을 최소화 시키는 것이 목적이다.

멀티 프로그래밍(Multi-Programming) 방식

여러 개의 프로그램을 메모리에 올려놓고 동시에 실행시킨다. 프로세서의 자원낭비를 최소화하기 위해 낭비되는 시간을 다른 프로그램 수행에 사용하여 여러 프로그램을 교대로 수행할 수 있게 한다.

→ 초기 컴퓨터는 한 번에 하나의 프로그램만 처리가 가능했는데, 입출력 작업에 시간이 많이 소요되면 프로세서는 해당 작업이 완료될 때까지 대기해야하고 이로 인해 프로세서의 자원을 낭비하게 되었다. 따라서 프로그램A의 입출력 작업을 할 때 프로그램B를 수행하는 멀티프로그래밍을 지원하게 되었다.

시분할 방식 (Time-Sharing)

여러 개의 프로그램을 메모리에 올려놓고 동시에 실행시킨다. 멀티 프로그래밍을 논리적으로 확장한 개념으로, 프로세서의 자원낭비를 최소화하기 위해 낭비되는 시간을 다른 프로그램 수행에 사용하여 여러 프로그램을 교대로 수행할 수 있게 한다.

- 특정 작업 시간 동안 CPU를 사용한 후에 다시 대기하고, 대기큐에 있는 작업을 꺼내와서 CPU를 사용하는 것을 반복한다.

- Round Robin 방식으로도 불린다.

특징

- 프로세스 스케줄링과 다중 프로그래밍을 사용해 각 사용자에게 컴퓨터의 CPU를 시간적으로 분할하여 나눠준다.

- 멀티 프로그래밍 환경에서 하나의 CPU를 나누어 쓰는 방식이다.

- 사용자와 시스템 간의 온라인으로 처리 상황을 알 수 있다.

- 사용자가 운영체제에 직접 명령을 주고 즉시 응답을 받는다.

- 사용자 혼자 컴퓨터를 사용하는 것과 같은 효과를 준다.

실시간 시스템 방식(Real-Time)

처리 요청이 오면 약속한 시간 내에서 즉시 처리하는 방식으로, 한정된 시간 제약 조건 상에서 작업을 처리해야 하는 시스템이다.

→ 시간제한성이 중요하며, 자동 항법 장치, 교환국 처럼 실시간으로 처리해야 하는 시스템에 사용된다.

장점 : 처리 시간이 짧고 처리 비용이 낮다

프로세스 & 스레드

프로세스

앞서 각각의 프로세스는 독립된 메모리 공간을 할당 받으며 명령어들과 데이터를 가진다고 했다.

프로세스의 특징

- 프로세스는 각각 code, data, stack, heap의 구조로 되어있는 독립된 메모리 영역을 가진다.

- 프로세스 당 최소 1개의 스레드(메인스레드)를 가지고 있다.

- 각 프로세스는 별도의 주소 공간에서 실행된다.

- 한 프로세스는 다른 프로세스의 변수 및 자료구조에 접근할 수 없다.

- 다른 프로세스의 자원에 접근하려면 프로세스 간 통신(IPC inter-process communication)을 사용해야한다.

스레드(Thread)

프로세스가 할당받은 자원을 이용하는 실행의 단위로, 프로세스는 한 개 이상의 스레드를 가질 수 있다.

사전적 의미로는 '프로세스 내에서 실행되는 여러 흐름의 단위'이다.

스레드의 특징

- 스레드는 프로세스 내의 stack을 제외한 code, data, heap, stack을 공유한다.

→ 같은 프로세스 내 스레드 간의 context switching은 프로세스끼리의 context switching보다 가볍다.

- 각각의 스레드는 별도의 레지스터와 스택을 갖고 있지만, 힙 메모리는 서로 읽고 쓸 수 있다.

- 한 스레드가 프로세스 자원을 변경하면, 다른 이웃 스레드(sibling thread)도 그 변경 결과를 즉시 볼 수 있다.

멀티 프로세스(Multi-Process) & 멀티 스레드(Multi-Thread)

단일 프로세스 시스템 : 한 번에 하나의 프로그램만 실행 됨. Cpu 사용률이 좋지 않다.

멀티 프로세스(Multi-Process)

두 개 이상의 프로세서나 코어를 활용하여 하나의 프로그램을 여러 개의 프로세스로 구성하여 각 프로세스가 하나의 작업을 처리하는 방식이다.

장점

- 각각 독립된 메모리 영역을 할당 받기 때문에 여러 개의 자식 프로세스 중 하나에 문제가 발생해도 다른 프로세스에 영향을 주지 않는다.

단점

- Context Switching(문맥 교환)에 많은 비용이 소모된다.

→ 프로세스는 각각의 독립된 메모리 영역을 할당받기 때문에 자식 프로세스 간에 공유하는 메모리가 없다. 따라서 Context Switching이 발생하면 캐시에 있는 모든 데이터의 리셋 후 다시 캐시 정보를 불러와야 하는 캐시 메모리 초기화 등 무거운 작업이 진행되어 많은 시간이 소모되는 오버헤드가 발생하게 된다.

Context Switching(문맥 교환)이란?
동작 중인 프로세스가 대기를 하면서 해당 프로세스의 상태(Context)를 보관하고, 대기하고 있던 다음 순서의 프로세스가 동작하면서 이전에 보관했던 프로세스의 상태를 복구하는 작업을 말한다.

이러한 멀티 프로세스의 단점으로 인해 멀티 스레드를 사용하는 것이 효율적이다.

멀티 스레드(Multi-Thread)

하나의 프로그램을 여러 개의 스레드로 구성하고, 각 스레드가 하나의 작업을 처리하는 방식이다.

장점
- 시스템 자원 소모 감소(자원의 효율성 증대)

→ 프로세스를 생성하여 자원을 할당하는 시스템 콜이 줄어들어 자원을 효율적으로 관리할 수 있다.
- 시스템 처리량 증가 (처리 비용 감소)
→ 스레드 간 데이터를 주고 받는 것이 간단해지고 시스템 자원 소모가 줄어들게 된다.
→ 스레드 사이의 작업량이 작아 Context Switching이 빠르다.
- 간단한 통신 방법으로 인한 프로그램 응답 시간 단축
→ 스레드는 프로세스 내의 Stack 영역을 제외한 모든 메모리를 공유하기 때문에 통신의 부담이 적다.

단점
- 스레드 하나가 프로세스 내 자원을 망쳐버린다면 전체 프로세스가 종료될 수 있다.

- 자원을 공유하기 때문에 필연적으로 동기화 문제가 발생할 수 밖에 없다. 교착상태가 발생하지 않도록 주의해야 한다.

- 주의 깊은 설계가 필요하며, 디버깅이 까다롭다.
- 다른 프로세스에서 스레드를 제어할 수 없다. (즉, 프로세스 밖에서 스레드 각각을 제어할 수 없다.)

Thread pool

병렬 작업 처리가 많아지면 스레드 개수가 증가하고, 그에 따른 스레드 생성과 스케줄링으로 인해 CPU가 바빠져 메모리 사용량이 늘어난다. 이는 애플리케이션의 성능 저하로 이어진다. 스레드의 폭증을 막으려면 스레드 풀을 사용해야 한다.

Thread pool

스레드 풀은 작업 처리에 사용되는 스레드를 제한된 개수만큼 정해 놓고 작업 큐에 들어오는 작업들을 하나씩 스레드가 맡아 처리한다.

생성된 스레드들은 작업을 할당 받기 위해 대기 상태에 있게 되는데, 작업이 발생하면 대기 중인 스레드 중 하나를 선택하여 작업을 수행한다. 작업이 완료되면 해당 스레드는 다시 대기 상태로 돌아가고, 새로운 작업을 할당 받을 준비를 한다.

장점
쓰레드 풀을 사용하면 스레드 생성 및 삭제에 따른 오버헤드를 줄일 수 있다.

특정 시점에 동시에 처리할 수 있는 작업의 개수를 제한하여이시스템의 자원을 효율적으로 관리하고 성능을 향상시킬 수 있다.

멀티 프로세싱(Multi-Processing) & 멀티 프로세스(Multi-Process)

프로세스(process)는 프로그램의 실행 단위이고 프로세서(processer)는 cpu 코어를 일컫는다.

이름만 보면 똑같은 것 같은데, 위 두 가지가 의미하는 바는 매우 다르다.

멀티 프로세스(Multi-Process)

앞서 스레드와 비교한 것이다. 하나의 응용 프로그램을 여러 개의 프로세스로 분리하여 실행하는 것으로, 프로세스(process)가 여러 개인 것이다. 여러 개의 프로세스가 동시에 실행되므로, 하나의 프로세스가 죽어도 프로그램이 죽지않아 프로그램 전체의 안정성이 높아지는 것에 목적을 둔다. 보통 멀티 프로세스는 부모 프로세스와 그의 여러 자식 프로세스로 이루어져 있다.

멀티 프로세싱(Multi-Processing)

멀티 프로세싱은 하나의 시스템에서 여러 개의 프로세서(CPU)를 사용하여 작업을 처리하는 것을 의미한다. 즉, 프로세서(CPU)가 멀티인 것이다. 여러 개의 프로세서가 동시에 작업을 처리하므로, 전체적인 처리 속도가 빨라지는 효과에 목적을 둔다.

멀티 프로세싱(Multi-Processing) & 멀티 태스킹(Multi-Tasking)

멀티 프로세싱 (Multi Processing)

여러 개의 CPU 코어가 동시에 작업을 처리하는 것을 의미한다. 여러 개의 프로세서가 병렬로 작업을 수행하므로, 단일 프로세스보다 빠른 처리 속도를 보장할 수 있다.

멀티 태스킹 (Multi Tasking)

단일 CPU에서 여러 개의 작업을 동시에 처리하는 것을 의미한다. 하나의 CPU가 여러 작업들을 번갈아가며 처리하므로, 여러 개의 작업을 동시에 수행하는 것처럼 보이게 된다.

따라서, 둘은 여러 작업에 대해서 동시에 처리하는 목적은 비슷하지만, 멀티 태스킹은 하나의 CPU에서 여러 개의 작업을 처리하는 반면, 멀티 프로세싱은 여러 개의 CPU가 각각의 작업을 처리하는 것이라는 차이점이 있다.

멀티 태스킹이 두 팔로 여러 작업을 빠르게 처리하는 것이라면 멀티 프로세싱은 팔이 6개라는 예시가 있다. ㄷㄷ..

4개 작업에 대한 멀티 프로세싱(2개 이상의 코어로 작업) + 멀티 태스킹(단일 코어 내 여러 작업)

하나의 작업을 멀티 프로세싱+멀티 태스킹

참고

https://sorjfkrh5078.tistory.com/56

https://gmlwjd9405.github.io/2018/09/14/process-vs-thread.html

https://inpa.tistory.com/entry/%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-multi-programming-tasking-processing#%EB%8B%A8%EC%9D%BC_%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4_single_process

https://velog.io/@woga1999/%EB%A9%80%ED%8B%B0-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8B%B1%EC%9D%B4%EB%9E%80

https://inpa.tistory.com/entry/%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-multi-process-multi-thread#multi_process

쿠키(cookie), 세션(session), 캐시(cache), 웹 저장소(localstorage, sessionstorage)

밍맹030 — Mon, 11 Dec 2023 19:23:23 +0900

cookie, session, cache , localstorage, sessionstorage

개발할 때 사용하는 저장소도 참 다양하다.

web storage 정도만 사용해봤는데 쿠키, 세션, 캐시는 개발을 하지 않아도 접해본 용어들일 것이다.

그렇다면 이 저장소들의 차이점은 뭘까?

그 전에, 저장소를 사용해야하는 이유는 뭘까?

HTTP (HyperText Transfer Protocol)

HTTP는 인터넷에서 데이터를 주고 받을 수 있는 프로토콜로, 클라이언트와 서버는 이 HTTP를 통해 통신한다.

이 HTTP의 특징에는 connectionless(비연결성), stateless(무상태)가 있다.

connectionless(비연결성)

실제 요청을 주고 받을 때만 연결을 유지하고, 요청 후 응답이 종료되면 연결이 끊어진다.

최소한의 자원으로 서버를 유지할 수 있다는 장점이 있다.

stateless(무상태)

HTTP는 서버가 클라이언트의 이전 상태를 보존하지 않는다. 즉, 사용자의 이전 요청을 기억하지 못한다.

따라서 클라이언트가 이전 요청과 같은 데이터를 원한다면 다시 서버에 동일한 요청을 시도 해야한다.

이러한 http의 특징으로 인해 사용자의 로그인 상태를 유지하기 위해서는 별도의 저장소가 필요하다.

먼저 쿠키와 세션에 대해 살펴보자

쿠키(Cookie)

쿠키는 클라이언트(브라우저) 로컬에 보관되는 데이터로, 서버에서 생성 후 응답과 함께 클라이언트에 전송한다.

- 브라우저에 저장되어 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효기간 이후 자동으로 삭제된다.

- key-value 형태로 쿠키 저장소에 저장된다.

- String형태로 이루어져있으며 아스키코드의 알파벳과 숫자만 저장할 수 있다.

- 서버로부터 쿠키를 전달받은 웹 브라우저는 이후 서버에 요청을 보낼 때 쿠키를 헤더에 실어서 함께 전송한다.

- 클라이언트에서 쿠키를 수정할 수 있기 대문에 위변조 위험 존재. 따라서 쿠키값을 암호화하거나 중요한 정보를 담지 않도록 해야한다.

용량

- 클라이언트에 300개, 하나의 도메인 당 20개 쿠키 저장 가능.

- 하나의 쿠키 당 4KB(4096byte(2^12))까지 저장 가능하다.

쿠키 동작 방식

클라이언트가 페이지 요청
서버에서 쿠키를 생성
HTTP 헤더에 쿠키를 포함 시켜 응답
브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
동일 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답

세션(Session)

세션은 쿠키를 기반하고 있지만, 사용자 정보를 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.

- 쿠키를 이용하여 세션id를 저장하고, 이를 통해 구분해서 서버에서 처리한다.

- 서버에 저장되므로 사용자가 많아질 경우 서버 부하가 발생할 수 있다.

용량

- server의 리소스로 클라이언트에서 제한 없음

세션 동작 방식

클라이언트가 서버에 정보 요청
서버에서는 요청 유효성 확인 후 세션 ID 생성, 저장
서버가 클라이언트에 응답 시, 응답헤더에 쿠키에 추가하고, 쿠키에 세션 ID를 넣어 응답한다.
클라리언트는 이후 세션 ID를 요청헤더에 추가하여 서버에 요청한다.
서버에서는 요청 헤더의 세션 ID 값을 저장된 세션 저장소에서 찾아보고 유효성 확인 후 요청 처리 및 응답 한다.

쿠키 vs 세션

- 서버에서 관리되는 세션이 로컬에 저장되는 쿠키보다 보안적으로 우수하다.

- 쿠키는 로컬에 저장되기 때문에 서버의 처리가 필요한 세션에 비해 요청 속도가 빠르다.

- 세션은 세션이(브라우저가) 종료되면 삭제된다.

쿠키와 세션의 적절한 이용

세션이 쿠키에 비해 보안성은 좋지만 서버 자원에 한계가 있고, 속도가 느려질 수 있다는 단점이 있다.
따라서 자원 관리 차원에서 쿠키와 세션을 병행 사용하여 서버 자원의 낭비를 방지하며 웹사이트의 속도를 높일 수 있다.

캐시(Cache)

웹 페이지 요소를 저장하기 위한 임시 저장소.

- 이미지, 파일, css, js 등 변경 사항이 크지 않고 용량이 큰 데이터를 저장하고 재사용한다.

- 사용자 인증을 도와주는 쿠키와 달리 캐시는 전송량을 줄여 웹 페이지의 렌더링 속도를 높이는 것이 목적이다.

단점

자주 변경되는 데이터를 캐시 방식으로 저장한다면 이전 캐시를 삭제하지 않는 한 변경된 데이터가 아닌 이전 데이터가 출력될 수 있다.

Web Storage : Local Storage와 Session Storage

Web Storage

쿠키의 문제점을 보완하기 위해 HTML5에 포함된, 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조.

웹 브라우저 자체에 있는 저장 공간으로, key : value 형태로 저장된다.

영구저장소(Local Storage)와 임시저장소(Session Storage)를 따로 두어 데이터의 지속성을 구분할 수 있어 환경에 따라 선택이 가능하다.

로컬 스토리지(Local Storage)

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.

- 도메인마다 별도로 생성된다.

세션 스토리지(Session Storage)

데이터가 지속적으로 보관되지 않는다.

- 앞서 언급한 'Session'과 성질이 비슷한데, 브라우저가 종료되면 Session Storage도 삭제된다.

- 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. 브라우저 컨텍스트가 다르기 때문이다.

ex) 탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행하는 경우

Session Storage: 두 페이지의 Session Storage는 각각 별개의 영역으로 서로 침범하지 못한다,

Local Storage : 도메인만 같으면 전역적으로 공유가 가능하다.

참고

https://devuna.tistory.com/23

https://velog.io/@octo__/%EC%BF%A0%ED%82%A4Cookie-%EC%84%B8%EC%85%98Session

https://velog.io/@gwanuuoo/%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%EC%BA%90%EC%8B%9C%EB%9E%80

https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

[프로그래머스][java] 연속된 부분 수열의 합

밍맹030 — Tue, 29 Aug 2023 16:06:56 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/178870

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

전체 코드

class Solution {
    public int[] solution(int[] sequence, int k) {
        int[] answer = new int[2];
        int resultLen = sequence.length+1;

        int min = 0, max = 0, sum = 0;
        while(true){
            if(sum >= k) sum -= sequence[min++];
            
            // sequence[max++] 전에 조건 검사
            else if(max == sequence.length) break;
           
            else if(sum<k) sum+= sequence[max++];
            
            if(sum == k && max-min<resultLen){
                answer[0] = min;
                answer[1] = max-1;
                resultLen = max-min;
            }
        }
        return answer;
    }
}

[프로그래머스][코딩테스트 고득점 Kit][java] 구명보트

밍맹030 — Tue, 22 Aug 2023 14:45:40 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/42885

프로그래머스

programmers.co.kr

전체 코드

import java.util.Arrays;
import java.util.ArrayList;
import java.util.Collections;
class Solution {
    public int solution(int[] people, int limit) {
        int answer = 0, minIndex = 0;
        // 오름차순 정렬
        Arrays.sort(people);
        
        for (int maxIndex = people.length-1; minIndex <= maxIndex; maxIndex--){
            if(people[maxIndex] + people[minIndex] <= limit){
                minIndex++;
            }
            answer++;
        }
        return answer;
    }
}

[프로그래머스][코딩테스트 고득점 Kit][java] 큰 수 만들기

밍맹030 — Mon, 21 Aug 2023 17:44:49 +0900

https://school.programmers.co.kr/learn/courses/30/lessons/42883

프로그래머스

programmers.co.kr

전체 코드

class Solution {
    public String solution(String number, int k) {
        StringBuilder sb = new StringBuilder();
        int index = 0, now = 0;
        
         for(int i=0; i<number.length()-k; i++){
            now = 0;
            for(int j=index; j<=i+k; j++){ 
                if(now < number.charAt(j)-'0'){
                    now = number.charAt(j)-'0';
                    index = j+1;
                }    
                // System.out.println("now : "+now+"   i : "+ i + "   j : "+ j+ "   index : "+ index);
            }
            sb.append(now);
            // System.out.println("[ sb : "+sb+" ]");

        }
        return sb.toString();
    }
}

testcase의 now, i, j , index, sb 출력 결과