스트림 데이터를 조금씩 저장하며 처리하고 비우기를 반복하는 메모리 공간으로 이러한 행위를 버퍼링이라고합니다
📝스트림 + 버퍼
동영상의 경우 전부 다운 받은 후에 영상을 재생시킨다면 엄청나게 오래 기다려야할 수도 있다 이럴 경우 스트림을 이용하며 버퍼에 처리된 걸 담은 후에 사용자에게 보내주면 사용자는 모든 영상이 로드될 때까지 안 기다려도 볼 수 있다
📝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로 어렵게 보내는 것보다는 아래에 설명하는 방법으로 하는게 더 적합하다
클라이언트 요청 → 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에 가까워진다
몇개의 글씨를 이용해서 축약시켜 놓고 사용하는 것을 코드 조각(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(교차 사이트 스크립팅), 클릭재킹 및 기타 코드 삽입 공격과 같은 다양한 보안 위협으로부터 애플리케이션을 보호하는 것
지시문
설정
default-src
디폴트 설정을 바꾼다
connect-src
연결 설정을 바꾼다
script-src
스크립트 권한 설정을 바꾼다
child-src
iframe 태그에 들어가는 src에 대한 설정을 바꾼다
style-src
style sheet에 관련된 설정을 바꾼다
font-src
font출처와 관련된 설정을 바꾼다
img-src
img 주소 설정 바꾼다
report-url
CSP를 위반할때 보고서를 보낼 출처를 지정한다
src- 옵션
설명
none
사용 안 하겠다
특정 도메인
해당 도메인만 허용
self
현재 도메인만 허용
unsafe-inline
모두 허용
nonce-암호화된 문자
특정 암호화 값을 이용해 검증
Apache 예제
<IfModule mod_headers.c>
Header set Content-Security-Policy "directives here"
</IfModule>
em은 font-size와 밀접한 관련이 있는데 상위 태그의 font-size 기준으로 px이 계산 된다
parent가 20px이기 때문에 child는 40px이 되게 된다 이런식으로 계산하면 상위 태그의 px에 따라서 동적으로 변하기 때문에 상위가 바뀌면 하위를 건드릴 필요 없이 비율로 맞게 줄어들게 된다
이러한 em 계산은 복잡하기 때문에 rem이라는 게 나온다 rem의 경우 기준이 상위태그가 아니라 HTML 전체에 적용된 px 기준으로 부모만 바꾸면 알아서 기준에 따라 조절이 됩니다
📝가변 폰트(글꼴)
기존의 가변 폰트는 em, rem 단위를 사용하여 브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드는 폰트였는데 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 스타일마다 별도의 다른 파일을 사용하는 기존 폰트 대신 다양한 유형의 폰트를 단일 파일에 통합할 수 있는 OpenType 폰트 사양을 발전시킨 것으로 가변 폰트는 width(너비), weight(두께), slant(기울기) 등 폰트 별로 다양한 축을 가지고 있으며 이 축을 수치로 조정하여 원하는 스타일을 지정하고 조합할 수 있습니다
Noto+Sans+KR:wght@200, Noto+Sans+KR:wght@200;300;500처럼 폰트나 폰트 굵기에 따라 파일을 여러개 다운 받는게 아닌 하나의 파일에다가 옵션을 줌으로 해당 폰트들을 사용할 수 있습니다
📝Sass, Scss
Sass는 CSS의 확장된 문법을 제공하는 스타일 시트 언어입니다
Sass는 기본적으로 Ruby 언어로 작성되었으며, Sass 파일은 .sass 확장자를 가집니다
하지만 Sass의 문법은 초기에 채택하기 어려운 부분이 있었기 때문에, 이에 대한 대안으로 SCSS(Sassy CSS)가 나왔습니다
Content-Type은 HTTP 헤더의 일종으로, HTTP 메시지의 본문이 어떤 유형의 데이터인지를 나타내는 역할 어떤 데이터 형식으로 인코딩되어 있는지를 정의하며, 이를 통해 수신자(클라이언트 또는 서버)는 데이터를 올바르게 해석하고 처리할 수 있습니다 → Content-Type에 선언되는 MIME-TYPE인 것이다
📝MIME-TYPE
MIME Type은 데이터의 형식을 나타내는 식별자로, 주로 파일 확장자와 연관되어 사용 "text/plain"은 일반 텍스트 데이터를 나타내며, "image/jpeg"는 JPEG 형식의 이미지를 나타냅니다 MIME Type을 사용하여 클라이언트와 서버 간의 데이터 형식을 명시하는 데 사용되는 헤더입니다. 일반적으로 Content-Type 헤더는 MIME Type 정보를 담고 있습니다
📝application/x-www-form-urlencoded
HTML 폼(Form 태그) 데이터를 전송할 때 사용되는 기본적인 Content-Type이다
📝multipart/form-data
파일 데이터와 MIME타입을 같이 전송하는 방법으로 주로 사용되는 유형 → 파일 업로드에 많이 사용
form-data는 텍스트 데이터와 파일(이진데이터)를 모두 포함해서 보낼 수 있다 → <form enctype="multipart/form-data">
📝application/json
JSON 형식의 데이터를 전송할 때 사용
📝text/plain
텍스트 데이터를 전송할 때 사용됩니다. 주로 간단한 문자열이나 텍스트 문서를 전송할 때 활용
📝application/octet-stream
바이너리 데이터를 전송할 때 사용됩니다. 이미지나 동영상과 같은 바이너리 파일을 전송할 때 주로 사용
