클라이밍하는 개발자

[1일 1CS] HTTP와 HTTPS

HTTP와 HTTPS30초 요약HTTP는 브라우저(클라이언트)와 서버가 요청 → 응답으로 대화하는 약속(규칙)이다.HTTP는 내용을 그대로(평문) 보내서 중간에서 훔쳐보거나 바꿀 수 있다.HTTPS = HTTP + TLS(암호화). 도청 방지, 위조 방지, 진짜 서버 확인 세 가지를 해 준다.📌 한 줄 정의HTTP (HyperText Transfer Protocol)웹에서 요청과 응답을 주고받는 약속클라이언트가 "이거 줘" 하고 요청하면서버가 "여기 있어" 하고 응답한다HTTPSHTTP 위에 TLS라는 보안 층을 얹은 것주소창의 🔒 자물쇠가 이 표시다기본 포트: HTTP는 80, HTTPS는 443프로토콜이 뭐지?프로토콜 = 대화 규칙"누가 먼저 말하고, 어떤 형식으로 말하고, 끝났다는 걸 어떻게 알..

[1일 1CS] 크롬은 탭 하나가 죽어도 왜 나머지는 멀쩡할까? 프로세스와 스레드

크롬에서 탭을 여러 개 열어 두고 쓰다 보면, 가끔 한 탭에만 "앗, 이런!" 오류 화면이 뜹니다. 그런데 다른 탭들은 아무 일 없다는 듯 멀쩡합니다. 반대로 엑셀에서 큰 파일을 열면 창 전체가 하얗게 변하고 "응답 없음"이 뜨기도 합니다.두 현상 모두 프로세스와 스레드로 설명할 수 있습니다. 오늘은 이 둘의 차이와, 실제 서비스에서 이 차이가 어떻게 드러나는지 정리해 보겠습니다.1. 프로세스와 스레드프로그램과 프로세스는 다릅니다. 프로그램은 하드디스크에 가만히 있는 파일(chrome.exe)이고, 프로세스는 그 파일을 실행해서 지금 돌아가고 있는 것입니다.프로세스: 실행 중인 프로그램 하나입니다. 운영체제가 자기만의 메모리 공간을 떼어 줍니다.스레드: 프로세스 안에서 실제로 일을 하는 실행 흐름입니다...

[1일 1CS] 0, 1, 2를 찍었는데 왜 3, 3, 3이 나올까? 클로저와 스코프

아래 코드는 무엇을 출력할까요?for (var i = 0; i console.log(i), 0);}0, 1, 2를 기대했다면 아쉽게도 결과는 3, 3, 3입니다. 그런데 var를 let으로 바꾸면 0, 1, 2가 나옵니다. 글자 하나 바꿨을 뿐인데 왜 결과가 달라질까요?이 문제를 이해하려면 스코프와 클로저를 알아야 합니다. 오늘은 두 개념을 정리하고 이 수수께끼를 풀어 보겠습니다. 1. 스코프: 변수가 보이는 범위스코프는 변수를 어디서부터 어디까지 볼 수 있는지를 뜻합니다. JavaScript에는 세 가지가 있습니다.전역 스코프: 어디서나 보입니다.함수 스코프: function 안에서만 보입니다. var는 함수 단위로 갇힙니다.블록 스코프: if, for의 { } 안에서만 보입니다. let과 const..

React로 만든 화면을 이리저리 오가다 보니 브라우저 탭의 메모리가 계속 올라갑니다. 분명 JavaScript에는 다 쓴 메모리를 알아서 치워 주는 가비지 컬렉터(GC)가 있다고 배웠는데 말입니다. GC는 꽤 똑똑하지만 마법은 아닙니다. GC가 무엇을 쓰레기로 보는지 알면 왜 메모리가 새는지도 보입니다. 오늘은 GC의 동작 원리와 GC가 있어도 생기는 메모리 누수를 정리해 보겠습니다. 1. 누가 메모리를 치우는가C나 C++에서는 개발자가 malloc으로 메모리를 빌리고 free로 직접 반납합니다. 반납을 잊으면 메모리가 새고, 두 번 반납하면 프로그램이 죽습니다.Java, JavaScript, Python, Go 같은 언어는 이 반납을 런타임이 대신 해 줍니다. 이것이 가비지 컬렉션입니다. 설거지를 직..

주문 합계를 보여 주는 화면을 하나 만든다고 해 보겠습니다. 처음에는 함수 하나에 다 넣는 게 제일 빠릅니다.// DB 조회, 계산, HTML 만들기를 한 함수가 다 한다app.get("/orders", async (req, res) => { const rows = await db.query("SELECT * FROM orders"); // 데이터 let total = 0; for (const r of rows) total += r.price * r.qty; // 규칙 res.send(`합계: ${total}`); // 화면});잘 돌아갑니다. 문제는 그다음입니다. 화면 디자인만 바꾸고 싶은데 같은 파일에 DB 코드가 있어서 손대기가 겁납니다. 합계 계산을 관..

서버를 새로 옮기고 도메인의 IP를 바꿨습니다. 내 컴퓨터에서는 새 사이트가 잘 뜹니다. 그런데 몇 시간이 지나도 "아직 예전 사이트가 보여요"라는 연락이 옵니다. DNS 설정을 잘못한 게 아닙니다. 세상 곳곳에 남아 있는 DNS 캐시 때문입니다. 지난 글에서 DNS가 도메인을 IP로 바꾸는 과정과 레코드 종류를 다뤘다면, 이번에는 캐시와 TTL, 그리고 실제로 자주 만나는 DNS 문제를 정리해 보겠습니다. 1. DNS는 매번 끝까지 물어보지 않습니다DNS(Domain Name System)는 naver.com 같은 이름을 IP 주소로 바꿔 주는 시스템입니다.브라우저 캐시를 봅니다.없으면 운영체제 캐시와 hosts 파일을 봅니다.그래도 없으면 리졸버(통신사 DNS나 8.8.8.8 같은 공용 DNS)에게 ..

"제 컴퓨터에선 잘 되는데요." 개발하면서 한 번쯤은 해 봤거나 들어 본 말입니다. 내 노트북에서는 테스트가 다 통과했는데, 합치고 나니 다른 사람 코드와 부딪히거나 배포 서버에서만 터지는 경우입니다. CI와 CD는 이런 일을 사람이 아니라 기계가 매번 같은 방식으로 확인하게 만드는 방법입니다. 오늘은 두 개념의 차이와 실제로 어떻게 쓰는지 정리해 보겠습니다. 1. CI는 합칠 때마다 자동으로 검사합니다CI(Continuous Integration, 지속적 통합)는 코드를 자주 합치고, 합칠 때마다 자동으로 빌드와 테스트를 돌리는 방식입니다.공장의 검수 라인을 떠올리면 쉽습니다. 부품이 들어올 때마다 컨베이어 벨트 위의 검수기가 검사하고, 불량이 나오면 벨트가 멈추고 경고등이 켜집니다. CI도 PR이 올..

새 버전을 배포했는데 누구는 바뀐 화면을 보고, 누구는 예전 화면을 본다는 연락을 받은 적이 있나요? 서버에는 분명 새 파일이 올라가 있는데?범인은 대부분 캐시입니다. 그중에서도 사용자와 내 서버 사이에 있는 CDN이 자주 원인이 됩니다. 오늘은 CDN이 어떻게 동작하는지, 그리고 왜 이런 일이 생기는지 정리해 보겠습니다.1. CDN은 동네마다 둔 복사본 창고입니다CDN(Content Delivery Network)은 이미지, CSS, JS, 영상 같은 파일을 전 세계 여러 서버에 복사해 두고, 사용자와 가장 가까운 서버가 대신 응답하게 하는 서비스입니다.오리진(Origin) 서버: 원본 파일이 있는 내 서버엣지(Edge) 서버: 사용자 가까이에 있는 CDN의 복사본 서버쇼핑몰로 치면 이렇습니다. 부산 ..

집 와이파이에 연결된 노트북이 공유기로 데이터를 보낸다고 해 보겠습니다. 노트북은 공유기의 IP 주소(192.168.0.1)를 알고 있습니다. 그럼 이것만으로 바로 보낼 수 있을까요?답은 "아니요"입니다. 같은 네트워크 안에서 바로 옆 장비에게 데이터를 넘길 때는 IP가 아니라 MAC 주소가 필요합니다. 오늘은 IP를 MAC으로 바꿔 주는 ARP와, 그 대상인 MAC 주소를 정리해 보겠습니다.1. MAC 주소는 기기에 붙은 번호입니다MAC 주소(Media Access Control address)는 랜카드나 와이파이 칩에 제조할 때 붙는 고유 번호입니다. AA-BB-CC-DD-EE-FF처럼 16진수 12자리, 48비트로 되어 있습니다. 앞 24비트는 제조사 코드, 뒤 24비트는 제조사가 매긴 일련번호입니..

AI로 옷 사진을 편집해 주는 프로젝트(QST)에서 겪은 일입니다. 사용자가 사진을 올리면 뒤에서 워커가 이미지를 만들고, 화면은 2초마다 "다 됐나요?" 하고 서버에 물어봅니다.그런데 어느 날 1분 36초 만에 끝난 작업이 화면에서는 28분 33초째 "만드는 중"이었습니다. 새로고침을 하니 결과물이 바로 떴습니다.서버 로그에도, 브라우저 콘솔에도 에러는 한 줄도 없었습니다. 에러가 없는 장애는 어디서부터 봐야 할까요? 오늘은 이 문제를 따라가면서 Next.js Server Action이 요청을 어떻게 처리하는지 정리해 보겠습니다. 1. 먼저 서버를 의심했습니다처음에는 당연히 서버 쪽 문제라고 생각했습니다.워커가 늦게 끝났나: 작업 기록에는 1분 36초에 완료로 찍혀 있었습니다.DB에 완료가 늦게 들어갔..