전체 글

집이나 사무실에 보면 작은 상자들이 있습니다. 통신사에서 달아준 것, 랜선이 여러 개 꽂힌 것, 안테나가 달린 것. 이름은 들어봤는데 뭐가 뭔지는 헷갈립니다.네 가지만 알면 됩니다. 허브, 스위치, 라우터, 공유기입니다. 그리고 사실 집에서는 공유기 하나면 끝인데, 왜 그런지 알려면 나머지 셋을 알아야 합니다.먼저 — 네트워크와 인터넷은 다릅니다이 구분이 전부의 출발점입니다.네트워크 — 컴퓨터 몇 대를 선으로 이어 놓은 것. 우리 집 안, 우리 사무실 안인터넷 — 그런 네트워크들이 전 세계적으로 서로 연결된 것집 안에서 컴퓨터끼리 파일을 주고받는 건 네트워크만 있으면 됩니다. 유튜브를 보려면 인터넷으로 나가야 합니다. 이 둘을 이어주는 게 라우터이고, 집에서 그 역할을 하는 게 공유기입니다.집 인터넷의 ..

회의실 빔프로젝터에 노트북을 연결하려는데 케이블이 안 맞습니다. 본체를 모니터에 꽂으려는데 단자 모양이 다릅니다. 흔한 상황인데, 막상 뭘 사야 하는지는 헷갈립니다.케이블 종류는 많아 보이지만 실제로 쓰이는 건 네 가지입니다. 모양과 색만 알아두면 대부분 해결됩니다.1. 단자 모양으로 구분하기가장 빠른 방법은 색과 모양입니다. 제조사가 규격마다 색을 맞춰 놓았기 때문에, 외워두면 한눈에 구분됩니다.네 가지만 외우면 됩니다.파란색 사다리꼴에 나사 두 개 → VGA. RGB, D-sub라고도 부릅니다. 같은 단자의 다른 이름입니다.흰색 직사각형에 나사 두 개 → DVI검고 작고 나사가 없음 → HDMI한쪽 모서리가 비스듬히 깎임 → DisplayPort모니터 뒷면에 "RGB IN"이라고 쓰여 있다면 그게 V..

공정이나 설비 이야기를 하다 보면 "택트가 30초다", "CT가 30초 나온다" 같은 말이 거의 같은 뜻처럼 오갑니다. 하지만 택트타임(Takt Time)과 사이클타임(Cycle Time)은 출발점이 완전히 다른 숫자입니다. 이번 글에서는 두 개념의 차이를 정리하고, 계산 예시와 함께 실무에서 자주 놓치는 함정까지 짚어 보겠습니다.1. 한 줄 요약: 하나는 '요구', 하나는 '능력'구분택트타임 (Takt Time)사이클타임 (Cycle Time)기준고객 수요설비·공정의 실제 처리 능력의미수요를 맞추려면 몇 초마다 1개가 나와야 하는가 (목표 리듬)실제로 1개를 처리하는 데 몇 초 걸리는가 (반복 주기)바뀌는 조건수요량이나 가용 시간이 바뀔 때설비 개선, 동작 시퀀스 최적화 등 'Takt'는 독일어로 박자..

https://github.com/vercel-labs/portless GitHub - vercel-labs/portless: Replace port numbers with stable, named local URLs. For humans and agents.Replace port numbers with stable, named local URLs. For humans and agents. - vercel-labs/portlessgithub.com 한 줄 요약Portless는 localhost:3000처럼 외우기 어려운 로컬 개발 주소를 https://myapp.localhost처럼 이름이 있는 고정 URL로 바꿔주는 CLI 기반 로컬 프록시 도구다.GitHub: https://github.com/ver..

리플레이: https://hehee9.github.io/maze-bench/public/index.html리더보드: https://hehee9.github.io/maze-bench/public/leaderboard.htmlHugging Face Space: https://huggingface.co/spaces/Hehee-dev/maze-benchGitHub: https://github.com/hehee9/maze-bench (제작: hehee9, Apache 2.0)바로가기 Maze Bench Replay — Compare Model Maze-Solving PathsReplay and compare how LLMs navigate visual mazes, including optimal paths, m..

NestJS에서 Zod로 스키마 유효성 검사하기 (커스텀 파이프 만들기)지난 글에서는 ParseIntPipe로 URL 파라미터 하나가 숫자인지 확인했습니다. 값 하나 검사하는 건 쉽죠. 그런데 회원가입처럼 이메일·비밀번호·나이가 한꺼번에 넘어오는 경우는요? 이걸 전부 if문으로 검사하는 건 지옥입니다.// 😩 이렇게 하고 싶지 않습니다if (!body.email) throw ...if (typeof body.age !== 'number') throw ...if (body.age 이번 글에서는 Zod로 데이터의 "청사진(스키마)"을 미리 정의하고, 그 스키마로 요청 데이터를 한 방에 검증하는 방법을 다룹니다.0. 스키마 유효성 검사란?필드를 하나하나 수동으로 검사하는 대신, "이 데이터는 이런 모양이어야..

주니어 개발자가 회원가입·로그인 직접 설계하며 배운 것들 (GS인증 / KISA 기준)인증(회원가입·로그인) 기능을 처음부터 설계하면서 계속 막히고 헷갈렸다. 비밀번호는 어떻게 저장하지? 이메일은? SHA-256이면 되나? 소셜이랑 로컬 계정이 겹치면? 탈퇴는 어떻게 처리하지? 하나씩 파고들면서 알게 된 것들을 내가 헷갈렸던 순서 그대로 정리했다. 나 같은 주니어에게 도움이 되길.1. 계정 통합 — "1 이메일 = 1 계정"우리 서비스는 이메일/비밀번호(로컬) 로도, 구글·카카오·네이버(소셜) 로도 로그인할 수 있다. 그러면 이런 의문이 생긴다.🤔 헷갈린 점: 로컬로 가입한 사람이 나중에 같은 이메일로 소셜 로그인하면? 계정이 2개 생기나?정답은 "이메일 하나 = 계정 하나". 같은 이메일이면 계정(U..

React Hook Form으로 로그인 폼 만들기 (입력 검증 + 접근성까지)React로 폼을 만들다 보면 useState가 입력칸 개수만큼 늘어나고, onChange 핸들러가 덕지덕지 붙는 경험을 하게 됩니다. React Hook Form(RHF)은 이 보일러플레이트를 걷어내 주는 라이브러리입니다. 이 글에서는 로그인 폼 하나를 만들면서 RHF의 핵심 3가지 — register, handleSubmit, formState — 를 익히고, 중복 제출 방지·입력 검증·웹 접근성까지 붙여봅니다.0. 설치npm install react-hook-formCodeSandbox 같은 온라인 에디터라면 Dependencies에서 react-hook-form을 검색해 추가하면 됩니다.1. 왜 RHF가 빠를까? (먼저 ..

저는 얼마 전까지만 해도 비밀번호 암호화를 "그냥 bcrypt 쓰면 되는 것"이라고 생각했습니다. 강의에서 그렇게 배웠고, 다들 그렇게 쓰는 것 같았으니까요. 그런데 최근 프로젝트에서 보안 관련 기능을 맡으면서 암호화를 처음부터 제대로 공부하게 됐고, 제가 알고 있던 게 전부가 아니었다는 걸 알았습니다.이 글은 그 과정에서 배운 것들을 정리한 글입니다. "왜?"라는 질문을 계속 던지면서 공부했기 때문에, 개념 하나하나를 최대한 쉽게 풀어보려고 했습니다. 저처럼 암호화가 막막하게 느껴지는 분들께 도움이 됐으면 합니다."암호화하면 되는 거 아니야?" — 시작은 이 질문이었습니다처음에 저는 비밀번호를 암호화한다는 개념 자체를 단순하게 생각했습니다. 그냥 원문을 알아볼 수 없게 만들면 되는 거 아닌가? 그런데 ..

🍔 핵심 개념을 비유로 먼저 이해하기카페에서 주문을 받는 직원이 있다고 상상해보세요.일반 손님 (동기, sync): 주문 → 커피 만들기 → 다음 손님 받기. 무조건 한 번에 한 명씩 순서대로 처리합니다.카페 직원 (비동기, async): 주문을 받은 뒤 커피 기계에 버튼 눌러두고 → 커피가 나오는 동안 기다리지 않고 → 다음 손님 주문을 먼저 받습니다. 커피는 나중에 완성되면 가져다줍니다.자바스크립트와 리액트가 딱 이 카페 직원처럼 동작합니다.📌 1단계 — 자바스크립트의 기본: 코드는 위에서 아래로 실행된다 (동기)보통 코드는 그냥 위에서 아래로 순서대로 실행됩니다. jsconsole.log(1 + 1) // 2 출력console.log(2 + 1) // 3 출력console.log(3 + 1..