도입https://cloud.google.com/sql/docs/postgres/connect-instance-cloud-shell?hl=ko 빠른 시작: Cloud Shell에서 PostgreSQL용 Cloud SQL에 연결 | Cloud SQL for PostgreSQL | Google Cloud Documentati의견 보내기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Cloud Shell에서 PostgreSQL용 Cloud SQL에 연결 이 페이지에서는 PostgreSQL 인스턴스를 만들고 연결하는docs.cloud.google.com GCP 를 활용한 프론트-백엔드-DB 3계층 솔루션을 사용하여 제가 만든 웹앱 어플리케이션을 배포하는 과정에 관해 정리해..

📦 Multipart/form-data 직접 파서 만들며 원리 이해하기웹 개발을 하다 보면 파일 업로드 기능을 구현할 일이 많습니다. 보통은 Express에서 multer 같은 미들웨어를 쓰면 손쉽게 끝나는데요. 하지만 이번에는 라이브러리를 쓰지 않고, 직접 multipart/form-data를 파싱해보면서 동작 원리를 이해해고자 했습니다. 1. 왜 multipart/form-data인가?일반적인 HTML 은 기본적으로 application/x-www-form-urlencoded 방식으로 데이터를 보냅니다.하지만 파일 업로드처럼 대용량 이진 데이터가 포함되면 단순 URL 인코딩으로는 처리가 어렵습니다.이때 사용하는 방식이 바로 multipart/form-data입니다.여러 개의 파트를 하나의 요청에 담..

대용량 트래픽을 견디는 고성능 웹서버 구현하기Node.js는 단일 스레드 이벤트 루프 기반으로 동작합니다. 따라서 여태까지는 싱글 스레드에서 처리되는 HTTP 웹 서버를 다루었는데요. 그런데 만약 요청의 수가 급증한다면, 멀티 코어 CPU 환경에서 하나의 스레드만 사용해서 요청을 처리하는 것이 다소 아쉽게 느껴질 수 있습니다. 만약 멀티 스레드를 활용해서 커버할 수 있는 영역이라면 굳이 인스턴스를 수평 확장할 필요도 없기에 있는 자원을 최대한 효율적으로 활용하는 것이 중요합니다. 따라서 웹 서버를 각각 멀티 프로세스/ 멀티 스레드 방식으로 처리해보고 각 방식을 비교 분석하고자 하였습니다. 1. cluster 모듈을 활용해 CPU 코어 수만큼 워커 프로세스를 생성2. Worker Threads 기반 작업 ..

웹 애니메이션은 사용자 경험(UX)을 강화하는 핵심 요소입니다. 작은 버튼 호버 효과부터 데이터 기반 시각화까지, 상황에 따라 어떤 방식으로 구현하느냐에 따라 성능과 가독성이 크게 달라질 수 있습니다. 이번 글에서는 Transition/Transform/Opacity, Keyframes, requestAnimationFrame(rAF), Web Animations API(WAAPI) 네 가지 대표적인 접근법을 비교하고, 실제로 언제 어떤 걸 쓰면 좋은지 정리해보겠습니다. 1. CSS Transition + Transform / Opacity https://developer.mozilla.org/ko/docs/Web/CSS/CSS_transitions/Using_CSS_transitions CSS 트랜지..

net 모듈을 활용해 HTTP 요청 처리하기1. net 모듈 기반 HTTP 서버 생성 우선 가장 먼저 HTTP 요청을 처리할 웹서버를 만들어야합니다.net 모듈을 활용해 서버를 생성하고 server.listen 으로 지정된 PORT 에 들어오는 요청을 listen 하며socket.on 으로 데이터를 수신할 수 있습니다. import net from 'net';// 기본 HTTP 서버 설정const PORT = 80;const HOST = '0.0.0.0';/** * net 모듈 기반 HTTP 서버 * Express 등 외부 프레임워크 없이 순수 net 모듈로 HTTP 서버 구현 */const server = net.createServer((socket) => { console.log('클라이언트 연결됨..

브라우저가 서버로 요청을 보낼 때는 HTTP 요청 메시지(패킷) 형태로 전송됩니다. 이를 네트워크 계층 기준으로 뜯어보면 다음과 같이 구성됩니다.1. 패킷 구조 (네트워크 계층 관점)L2 (데이터링크 계층): Ethernet 헤더 (MAC 주소, CRC 등)L3 (네트워크 계층): IP 헤더 (출발지 IP, 목적지 IP 등)L4 (전송 계층): TCP 헤더 (출발지 포트, 목적지 포트, 순번, ACK 등)L7 (애플리케이션 계층): HTTP 메시지 (실제 요청)우리가 보통 "HTTP 요청 패킷"이라 말할 때는 L7 HTTP 메시지를 의미합니다.2. HTTP 요청 메시지 구성HTTP 요청은 크게 Request Line, Headers, Body 세 부분으로 나눌 수 있습니다. (1) Request Line..

트리셰이킹(Tree Shaking)트리셰이킹(Tree Shaking)은 프로젝트에서 사용되지 않는 코드를 제거하는 최적화 기법이에요. 마치 나무를 흔들어 불필요한 잎을 떨어뜨리듯, 실제로 사용하지 않는 코드(Dead Code)가 번들 파일에 포함되지 않도록 해요.예를 들어, 라이브러리에서 특정 함수 하나만 사용했는데도 전체 코드가 번들에 포함돼 파일 크기가 불필요하게 커지는 문제가 발생할 수 있어요. 이럴 때 트리셰이킹을 적용하면 실제로 사용하는 코드만 번들에 남기기 때문에 번들 크기를 크게 줄일 수 있어요. 번들 크기가 줄어들면 애플리케이션의 로딩 속도가 빨라지고, 사용자 경험도 개선할 수 있어요. 이제 트리셰이킹의 주요 특징에 대해 살펴볼게요.트리셰이킹이 동작하는 환경트리셰이킹은 정적 분석(Stati..

오늘은 Vanilia JS 를 활용한 SPA 프로젝트에서 Babel + TypeScript + Webpack 을 설정하는 법에 대해서 알아보려고 합니다. Babel이란? https://babeljs.io/ BabelCurrent Sponsors We're a small group of volunteers that spend their free time maintaining this project, funded by the community. If Babel has benefited you in your work, becoming a contributor or sponsoring might just be a great way to give back!babeljs.io 공식문서에는 다음과 같은 소개가 나와있..