클라이밍하는 개발자

🍪 [1일 1CS] 서버는 어떻게 내가 로그인한 걸 알까? (쿠키 vs 세션)

1. HTTP의 치명적 단점: Stateless (무상태)HTTP는 기본적으로 무상태 프로토콜입니다.즉, 요청(Request)과 응답(Response)이 끝나면 서버는 과거를 기억하지 않습니다.서버: "누구세요?"나: "방금 로그인한 철수라니까요!"서버: "전 과거를 기억하지 못합니다. 증거를 보여주세요."매번 페이지를 옮길 때마다 아이디와 비밀번호를 입력할 수는 없겠죠?그래서 등장한 해결책이 바로 쿠키(Cookie)와 세션(Session)입니다.2. 손목에 도장 쾅! : 쿠키 (Cookie)서버가 기억을 못 하니, 클라이언트(브라우저)가 기억을 가지고 다니는 방식입니다.🎡 비유: 놀이공원 자유이용권 손목 밴드놀이공원 직원(서버)은 여러분의 얼굴을 기억하지 않습니다.대신 손목에 있는 밴드(쿠키)를 보고..

📌 1. Dockerfile 핵심 문법 4가지도커 레시피의 90%를 차지하는 기본 문법은 딱 4가지입니다.FROM – 베이스 이미지 지정FROM node:20 → Node.js 20 버전 환경에서 시작FROM python:3.9 → Python 3.9 환경에서 시작WORKDIR – 작업 폴더 지정WORKDIR /app → 컨테이너 안의 /app 폴더에서 모든 작업 수행COPY – 파일 복사COPY . . → 현재 폴더의 모든 파일을 컨테이너 /app 폴더로 복사CMD – 실행 명령어 지정CMD ["npm", "start"] → 컨테이너 실행 시 npm start 실행🛠️ 2. 실습: 나만의 웹 서버 만들기간단한 예제로 "Hello My Docker" 문구를 보여주는 웹 서버 이미지를 직접 만들어봅시다..

⚡ 1. 웹 서버 실행하기 (docker run)docker run -d -p 8080:80 nginx-d (Detached): 백그라운드 모드 실행. 터미널을 계속 사용할 수 있음.-p 8080:80 (Port): 호스트의 8080 포트 ↔ 컨테이너의 80 포트 연결.👉 브라우저에서 localhost:8080 입력 → "Welcome to nginx!" 화면 확인 가능.👀 2. 실행 중인 컨테이너 확인 (docker ps)docker ps현재 실행 중인 컨테이너 목록 확인.docker ps -a: 종료된 컨테이너까지 모두 표시. (hello-world도 여기서 확인 가능)🛑 3. 컨테이너 멈추기 (docker stop)docker stop [컨테이너ID]docker ps에서 확인한 CONTAINE..

🐳 1. 도커 설치하기 (Docker Desktop)도커를 가장 쉽게 시작하는 방법은 Docker Desktop을 설치하는 것입니다. 윈도우와 맥 모두 지원하며, GUI(그래픽 화면)까지 함께 제공되니 초보자도 부담 없이 사용할 수 있습니다.다운로드: Docker 공식 홈페이지에서 OS에 맞는 버전을 다운로드하세요.실행: 설치가 끝나면 고래 모양 아이콘의 Docker Desktop을 실행합니다.초기 실행 시 로그인이나 설정 화면이 나올 수 있는데, 기본값으로 진행해도 무방합니다.윈도우 사용자는 WSL2 설정을 권장하는 메시지가 뜰 수 있습니다. 성능 향상을 위해 ‘Yes’를 눌러주세요.🖥️ 2. 설치 확인하기설치가 잘 되었는지 확인해봅시다. 터미널(맥은 Terminal/iTerm, 윈도우는 Power..

🍳 도커 핵심 개념 3대장: Dockerfile · Image · Container도커를 배우다 보면 반드시 마주치는 세 가지 단어가 있습니다. 바로 Dockerfile, Image, Container.이 세 가지만 확실히 구분할 줄 알면 도커의 기본 이론은 끝났다고 해도 과언이 아닙니다.개발자 관점(Next.js 등)과 요리 비유를 함께 들어 이해해봅시다.1️⃣ Dockerfile (도커파일)요리 비유: 레시피(요리법)가 적힌 종이개발 비유: 설계도, 설정 스크립트설명: 어떤 운영체제를 쓰고, 어떤 언어를 설치하고, 내 코드를 어디에 복사할지 등을 텍스트로 적어둔 파일.→ 아직 실행되는 건 아무것도 없는 순수한 텍스트 파일입니다.2️⃣ Image (이미지)요리 비유: 레시피대로 준비해 얼려둔 밀키트(..

🐳 도커(Docker), 대체 왜 써야 할까?개발자들이 도커를 극찬하는 이유는 단순한 유행이 아닙니다. 그 배경에는 오랜 시간 개발자들을 괴롭혀온 문제, 바로 “내 컴퓨터에선 되는데 왜 서버에선 안 돼?”라는 고질병이 있습니다.1️⃣ 환경 설정 지옥에서 탈출하기예전엔 프로그램을 다른 컴퓨터로 옮기는 일이 마치 이사처럼 복잡했습니다.내 컴퓨터: 윈도우 + 파이썬 3.9 + 라이브러리 A v1.0서버: 리눅스 + 파이썬 3.8 + 라이브러리 A v0.9이런 사소한 차이 때문에 잘 돌아가던 코드가 서버에선 에러를 뿜어냅니다. 개발자는 억울하고, 서버 관리자는 답답하죠.✅ 도커의 해결책: 컨테이너도커는 단순히 코드를 옮기는 게 아니라, 코드가 실행되는 환경 전체를 하나의 상자(컨테이너)에 담아 함께 옮깁니다...

🔍 1. 계속 된 실패무한 로그인 실패비밀번호를 정확히 입력해도 Invalid email or password 에러 발생.네트워크 미아Unexpected Error 메시지와 함께 브라우저와 서버 간 통신 불가.→ extra_hosts와 포트 설정을 수정하며 해결 시도.유령 계정 현상 (가장 지독했던 문제)curl과 SQL로 계정을 만들고 권한(supabase_admin)까지 부여했지만, 로그인 시도만 하면 계정이 DB에서 사라짐.→ 원인은 서버(Gotrue)가 실행될 때마다 설정 파일과 DB를 비교하여, 설정에 없는 계정을 자동 삭제하는 로직 때문.🕵️ 2. 범인 검거: .env 파일우리는 계속 docker-compose.yml만 수정했지만, 진짜 주인은 숨겨져 있던 .env 파일이었습니다.Docke..

웹 브라우저는 단순히 HTML 텍스트를 받아오는 것에서 끝나지 않습니다. 우리가 보는 네이버, 구글 같은 멋진 화면은 브라우저 렌더링(Browser Rendering)이라는 복잡한 과정을 통해 만들어집니다. 이 과정을 전문 용어로 CRP (Critical Rendering Path)라고 부르며, 프론트엔드 개발자에게는 성능 최적화의 핵심 포인트이기도 합니다.🏗️ 1. 설계도 분석 (Parsing: DOM & CSSOM)브라우저는 HTML과 CSS를 읽어 트리(Tree) 구조로 변환합니다.DOM (Document Object Model): HTML 태그들을 분석해 페이지의 뼈대를 만듭니다.예: 안에 가 있고, 그 안에 가 있구나. (집의 구조)CSSOM (CSS Object Model): CSS를 분석..

AppFlowy Cloud를 직접 서버에 올리면서 겪었던 시행착오를 정리했습니다.처음엔 단순히 컨테이너만 띄우면 될 줄 알았는데, 실제로는 DB, SMTP, Nginx, WebSocket, DNS 등 다양한 문제들이 꼬리에 꼬리를 물며 발생했습니다.1. 초기 DB 접속 오류 (FATAL Error)증상: gotrue 컨테이너가 무한 재시작하며 FATAL: password authentication failed 발생원인: .env 파일의 비밀번호와 실제 DB 볼륨에 저장된 비밀번호 불일치해결: PostgreSQL에 접속하여 비밀번호 강제 통일sudo docker compose exec postgres psql -U postgres -c "ALTER USER postgres WITH PASSWORD 'pas..

웹 브라우저가 주소창에 www.google.com을 입력했을 때 어떤 일이 벌어질까요?DNS로 서버 위치를 알아내고, TCP로 연결을 맺은 뒤, 이제 본격적인 대화가 시작됩니다. 바로 HTTP 통신입니다. 🍽️ 식당에 비유하는 HTTPHTTP(HyperText Transfer Protocol)는 브라우저와 서버가 서로 대화하는 약속된 언어입니다.마치 식당에서 손님(브라우저)이 주문서를 내밀고, 서버(주방)가 음식을 만들어 내어주는 과정과 똑같습니다. 1. 주문서 넣기: HTTP 요청 (Request)브라우저는 원하는 것을 아주 구체적으로 적어 서버에 전달합니다. 이것이 Request Message입니다.GET / HTTP/1.1Host: www.google.comUser-Agent: Mozilla/5...