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..
"버튼 하나 눌렀을 뿐인데 왜 전체가 버벅이지?"리액트는 부모 컴포넌트가 재렌더링되면 자식 컴포넌트도 무조건 함께 재렌더링됩니다. 평소엔 별문제가 없지만, 자식 컴포넌트가 무거운 연산을 하거나 렌더링 시간이 오래 걸리는 경우엔 심각한 성능 저하로 이어집니다. 이걸 해결하는 도구가 바로 memo와 useMemo입니다.📌 먼저 알아야 할 것 — 리액트의 재렌더링 규칙리액트는 아래 상황에서 컴포넌트를 재렌더링합니다.해당 컴포넌트의 state가 변경될 때부모로부터 받은 props가 변경될 때부모 컴포넌트가 재렌더링될 때 (자식도 무조건 같이 재렌더링)세 번째 규칙이 문제입니다. 부모가 재렌더링되면 자식과 전혀 관계없는 이유라도 자식이 덩달아 재렌더링됩니다. jsxfunction Child() { conso..
"내 리액트 앱이 느린 것 같은데... 어디서부터 시작해야 하지?"리액트 앱을 만들다 보면 어느 순간 이런 고민이 생깁니다. 이 글에서는 리액트 성능 문제를 진단하는 도구와 첫 페이지 로딩을 빠르게 만드는 방법을 초보자도 이해할 수 있게 정리합니다.🔍 React Developer Tools — 컴포넌트를 직접 들여다보는 도구브라우저 기본 개발자도구(F12)의 Elements 탭을 열면 우리가 짠 JSX 코드가 실제 HTML로 변환된 모습을 볼 수 있습니다. 하지만 이건 리액트 컴포넌트 구조와는 다르게 보여서 디버깅이 불편합니다.이를 해결해주는 것이 React Developer Tools 크롬 확장프로그램입니다.설치 방법크롬 웹스토어에서 "React Developer Tools" 를 검색해 설치하면 됩니..
"서버에서 데이터를 가져올 때 로딩, 에러, 성공 상태를 매번 직접 짜야 한다고요? 이제 그럴 필요 없어요!"📌 Tanstack Query가 뭔가요?웹 애플리케이션을 만들다 보면 서버에서 데이터를 가져와야 할 일이 정말 많습니다. 예를 들어 쇼핑몰의 상품 목록, SNS의 게시글, 사용자 정보 같은 것들이죠.이런 데이터 요청(ajax)을 직접 처리하면 아래처럼 생각할 게 한두 가지가 아닙니다.지금 데이터 불러오는 중인가? (로딩 상태)에러가 났나? (에러 상태)성공적으로 가져왔나? (성공 상태)탭을 바꿨다 돌아오면 다시 불러와야 하나?같은 데이터 요청이 여러 컴포넌트에서 중복되면?이 모든 걸 자동으로 처리해주는 라이브러리가 바로 Tanstack Query입니다. 예전 이름은 React Query였고, 지..
