트랜잭션이란?데이터베이스에서 논리적 기능을 수행하기 위한 작업의 최소 단위여러 쿼리를 묶어 하나처럼 처리 트랜잭션 ACID 속성원자성(Atomicity)트랜잭션 내에서 실행한 작업들은 모두 성공하거나 모두 실패해야 한다 (하나의 작업처럼 처리)모두 성공 시 커밋, 하나라도 실패 시 롤백 일관성(Consistency)모든 트랜잭션은 일관성 있는 데이터베이스 상태를 유지해야 한다트랜잭션이 진행되는 중간에 데이터베이스가 변경되더라도 변경된 데이터베이스로 트랜잭션이 진행되는게 아니라 처음에 트랜잭션을 진행하기 위해 참조한 데이터베이스로 진행됨→ 사용자는 일관성 있는 데이터를 볼 수 있게 됨 격리성(Isolation)동시에 실행되는 동작들이 서로에게 영향을 미치지 않도록 격리해야 한다ex. 동시에 같은 데이..

Hyper Text Transfer Protocol의 약자로, HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층의 프로토콜이다. 쉽게 말해 서버와 클라이언트 간에 데이터를 주고 받기 위해 사용되는 통신 규약이라고 이해하면 된다.  문서뿐 아니라 이미지, 영상, 파일, JSON, XML 등 거의 모든 형태의 데이터를 전송할 수 있어 대부분 HTTP 프로토콜을 사용하여 통신을 한다.  HTTP 통신은 클라이언트(Frontend)와 서버(Backend)로 단이 나뉘어 클라이언트가 요청(request)을 하면 서버가 이에 대한 응답(response)을 보내주는 방식으로 동작한다. 💡 URL에서의 http예를 들어 http://www.cotato.kr 라는 인터넷 주소가 있다면, www.cot..

브라우저 저장소는 브라우저에서 데이터를 클라이언트 측에 저장하기 위한 기술이다. 이를 통해 웹 애플리케이션은 서버와 상호작용하지 않고도 데이터를 저장하고 관리할 수 있다. 브라우저 저장소의 종류는 Web Storage와 Cookie 두 가지로 나뉘고, Web Storage는 Local Storage와 Session Storage로 나눌 수 있다.  Web Storage웹 데이터를 클라이언트에 저장하기 위한 key-value 형태의 저장소로, Cookie의 단점을 보완하고자 HTML5에 추가된 스펙이다.저장된 데이터는 클라이언트(브라우저)에 존재할 뿐 서버로 전송되지 않는다. 따라서 네트워크 트래픽에 영향을 주지 않는다.쿠키에 비해 용량 제한이 넉넉하다. (서버로 전송되지 않고 그저 클라이언트 측에 데이터..

MPA와 SPAMPA(Muliple Page Application)새로운 페이지를 요청할 때마다 서버에 정적 리소스를 요청ex.JSP, PHP SPA(Single Page Application)모든 정적 리소스를 최초 한 번에 다운로드ex. React, Vue, Next, Nuxt 🤷🏻‍♂️ MPA는 SSR, SPA는 CSR?일반적으로 MPA는 SSR, SPA는 CSR 방식을 많이 사용하나, 고정된 규칙은 아니다. 예외가 되는 사례들을 살펴보자. - SSR을 사용하는 SPANext.js는 기본적으로 SPA임에도 불구하고, SSR과 CSR을 혼합한 하이브리드 렌더링 방식을 사용한다. - CSR을 사용하는 MPA일부 MPA는 초기 HTML을 서버에서 제공하고, 나머지 상호작용을 위해 JavaScript를..

Reflow와 Repaint 브라우저의 렌더링 과정에서 렌더 트리가 생성된 후, 뷰포트를 기반으로 요소(노드)들의 위치, 크기 등을 계산하는 과정을 Layout 단계, 이를 바탕으로 화면에 요소들을 픽셀화하여 그리는 과정을 Paint 단계라고 한다.(브라우저의 렌더링 과정에 대해 더 자세히 알고 싶다면 여기를 참고) Reflow는 Layout과,Repaint는 Paint와 연관되어 있는데, 쉽게 말해 Reflow는 레이아웃이 변경되었을 때, 각 요소들의 위치나 크기 등을 다시 계산하는 과정이고, (변경 시 영향을 받은 모든 노드의 수치를 계산 -> 렌더트리 재생성) Repaint는 Reflow가 일어나고 화면을 다시 그리는 과정을 말한다.  Reflow와 Repaint가 발생하는 시점Reflow 발생 예..

브라우저가 웹 페이지를 불러올 때는 웹킷(Webkit), 게코(Gecko) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지를 이루는 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 이 과정은 크게 DOM, CSSOM, 렌더트리 그리고 레이아웃을 포함하며 이러한 프로세스를 CRP(Critical Rendering Path)라고 한다. ✅ CRP(중요 렌더링 경로)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킨다.  1. DOM 생성브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성한다.✅ DOM(Document Object Model..