푸른영혼의별

https://youtube.com/shorts/hFlx1tzeZJg?si=1WL1XapBVj-Jq8HH 웹개발 필수1. 컴퓨터로 서버 만들어서 http통신해보기2. 와이어샤크로 패킷보기

Flexbox와 Grid는 페이지에서 레이아웃을 구성할 때 자주 사용되는 CSS 속성입니다. 두 속성 모두 화면 요소를 배치하고 정렬하는 데에 사용되지만 몇가지 차이점이 존재합니다.첫번째로 Flexbox는 1차원 레이아웃이지만, Grid는 2차원 레이아웃입니다.Flexbox는 1차원 레이아웃 속성으로, row 또는 column 중 하나를 기준으로 요소를 정렬하고 배치하는 데 최적화되어 있습니다. 주로 행이나 열 중 하나의 방향으로 정렬해야 할 때 유용하며, 복잡한 행과 열을 모두 포함하는 레이아웃에서는 다소 한계가 있습니다.반면 Grid는 2차원 레이아웃 속성으로, 행과 열을 모두 사용해 요소를 배치할 수 있습니다. 따라서 복잡한 레이아웃을 구성하거나, 웹페이지의 전체적인 구조를 잡는 데 적합합니다.두번..

CORS(Cross Origin Resource Sharing)는 출처가 다른 곳의 리소스를 요청할 때 접근 권한을 부여하는 메커니즘입니다. 리소스를 주고받는 두 곳의 출처가 다르면 출처가 교차한다고 합니다. 이때 출처는 URL뿐만 아니라 프로토콜과 포트까지 포함됩니다. 만약 클라이언트의 출처가 허용되지 않았다면 CORS 에러가 발생할 수 있습니다.CORS는 왜 필요한가요?과거에는 크로스 사이트 요청 위조(CSRF, Cross-Site Request Forgery) 문제가 있었습니다. 피해자의 브라우저에서 다른 애플리케이션으로 가짜 클라이언트 요청을 전송하는 공격입니다.CSRF를 예방하기 위해 브라우저는 동일 출처 정책(SOP, same-origin policy)을 구현했습니다. SOP가 구현된 브라우저..

웹 접근성은 장애인과 고령자 등 신체적 제약이 있는 사용자를 포함해, 모든 사용자가 웹 페이지를 동등하게 이용할 수 있도록 보장하는 개념입니다. 마치 공공건물에 휠체어 경사로를 설치해 이동이 불편한 사람도 이용할 수 있게 하는 것처럼, 웹 페이지 역시 디지털 경사로를 마련해 누구나 접근할 수 있어야 합니다. 다만 접근성은 단순히 장애인만을 위한 것이 아닙니다. 네트워크 속도가 느리거나 밝은 햇빛 아래 화면을 보는 등 일상적인 제약 상황에서도, 모든 사용자가 제약 없이 웹을 사용할 수 있도록 하는 것이 웹 접근성의 궁극적인 목표입니다.웹 접근성 개선에는 다양한 방법이 있습니다. 우선, 단순하고 명확한 HTML 구조와 시맨틱 태그가 필요합니다. 여기서, 시맨틱 태그는 웹 페이지의 구조와 의미를 명확하게 전달..

대표적인 동시성 제어 방식으로 MVCC(Multi-Version Concurrency Control) 와 Lock-Based Concurrency Control이 있습니다.MVCC(Multi-Version Concurrency Control)MVCC는 데이터의 여러 버전을 유지하여 트랜잭션이 동시에 데이터를 읽고 쓸 수 있도록 하는 방식입니다. 각 트랜잭션은 자신만의 일관된 스냅샷을 기반으로 데이터를 읽어, 다른 트랜잭션의 변경 사항에 영향을 받지 않습니다.데이터의 각 버전을 유지하여 읽기 작업이 쓰기 작업과 독립적으로 이루어질 수 있습니다. 트랜잭션은 시작 시점의 스냅샷을 기반으로 데이터를 읽어, 다른 트랜잭션의 변경 사항을 보지 못합니다.또한 읽기 작업 시 잠금을 사용하지 않아 높은 동시성을 제공합니..

연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 멱등성이라고 합니다. HTTP 메서드의 멱등성은 동일한 요청을 한번 보내는 것과 여러번 보내는 것이 서로 동일한 효과를 지니며, 서버의 상태도 동일하게 남을 경우에 멱등하다고 이야기할 수 있습니다. 대표적으로 멱등한 메서드는 GET, HEAD, PUT, DELETE, TRACE, OPTIONS 가 있습니다.멱등성은 어떻게 활용될 수 있나요? 🤔모종의 이유로 전송 커넥션이 끊어졌을 때, 멱등성은 클라이언트가 다시 같은 요청을 해도 되는가에 대한 판단 근거가 될 수 있습니다. 멱등하다면 요청을 재시도할 때 같은 서버의 상태를 보장하기 때문에 문제가 없습니다. 반면, 멱등하지 않다면 재시도 요청시 중복 요청을 보내 문제를 발생 시킬 수 있습니다. 예를..

자바스크립트에서 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드를 실행하기까지 두 단계의 과정을 거치기 때문입니다.이 두 단계는 컴파일 단계와 실행 단계이며, 이 과정에서 호이스팅이 발생하게 됩니다. 구체적으로 말씀드려보겠습니다.첫번째로 컴파일 단계입니다.자바스크립트 엔진은 스크립트를 실행하기 전에 먼저 컴파일 단계를 거칩니다. 이 과정에서 함수 및 변수 선언을 한 부분이 메모리에 할당됩니다. 이때 변수와 함수 선언을 미리 메모리에 올려두기 때문에 실제 코드에서 선언된 위치보다 앞에서 접근이 가능해지는 것입니다.let, const가 아닌 var를 통해 선언되면, 컴파일 단계에서 변수가 메모리에 올라가며, 이때 값은 undefined로 초기화됩니다. 이후 실행 단계에서 코드가 진행되면서 실제 할당된 값이..

예를들어 사용자가 www.google.com을 입력하면, 브라우저는 HTTP 프로토콜을 사용해 구글 웹 서버와 통신하려고 합니다. HTTP는 OSI 7계층 중 애플리케이션 계층에서 동작하는 프로토콜입니다.이때 브라우저는 요청한 도메인 이름(www.google.com)에 대한 IP 주소를 알아야 하기 때문에 DNS(Domain Name System) 서버에 질의합니다. 이 질의 과정 또한 애플리케이션 계층에서 이루어지며, DNS 서버는 해당 도메인에 대한 IP 주소(예를 들어, 142.250.190.78)를 응답합니다.IP 주소를 얻은 후, 브라우저는 구글 서버와 통신을 시작합니다. HTTP는 TCP/IP를 기반으로 작동하므로, 데이터를 주고받기 전에 TCP 3-Way Handshake 과정이 필요합니다...

애플리케이션과 데이터베이스가 통신을 하기 위해서는 데이터베이스 커넥션이 필요합니다.데이터베이스 커넥션의 생애주기 :데이터베이스 드라이버를 사용하여 데이터베이스에 연결데이터 읽기/쓰기를 위한 TCP 소켓 열기소켓을 통한 데이터 읽기/쓰기연결 종료소켓 닫기커넥션 풀이 없다면 애플리케이션에서 데이터베이스에 접근해야하는 요청을 처리할 때마다 커넥션을 새로 생성하여 연결하고 해제하는 과정을 반복해야 합니다. 이 과정은 비용이 상당히 많이 들기 때문에 요청의 응답시간이 길어집니다.또 동시에 많은 요청이 들어올 경우 매번 새로운 커넥션을 생성하게 되는데, 데이터베이스의 최대 연결 수를 초과할 수 있습니다. 데이터베이스는 일반적으로 동시에 처리할 수 있는 요청 개수에 제한이 있는데, 이 제한을 초과하면 요청이 거부되어..

백엔드와 관련된 질문이에요.스레드, 프로세스, 코어의 수가 많을수록 시스템 성능이 향상된다고 생각할 수 있지만, 실제로는 그렇지 않을 확률이 큽니다.스레드가 많으면?스레드가 지나치게 많아지면 운영체제가 스레드 간 컨텍스트 스위칭을 자주 수행해야 하여 CPU 자원이 스레드 관리에 소모됩니다. 이로 인해 실제 작업 수행 효율이 떨어질 수 있으며, 많은 스레드가 동시에 실행될 경우 메모리나 캐시, 락 등의 자원을 경쟁하게 되어 성능 저하나 데드 락이 발생할 가능성이 높아집니다. 또한, 스레드가 많아지면 동기화와 상태 관리가 복잡해져 버그 발생 가능성도 커집니다.프로세스가 많으면?각 프로세스는 독립된 메모리 공간을 가집니다. 그래서 많은 프로세스가 동시에 실행되면 메모리 사용량이 급격히 증가할 수 있습니다. 또..