깃허브에서 codespaces으로 브라우저로 개발하기 vs code 열고 환경 세팅하는 등 딥하게 개발하지 않고 간단한 개발이나 의존성 업데이트를 "깃허브" 내에서 하고 싶다는 욕구가 있는데..깃허브에는 "Codespaces"라는 기능이 있다. 방법은 쉽다. 일단 본인 레파지토리에 들어간다. 이후이미지처럼 초록색 code 이 버튼을 누르고 Codespaces를 누르면 저렇게 뜬다. Create codespace on main 버튼을 누르면 자연스럽게 브라우저에 가상의 vs code 개발 환경을 띄울 수 있다.이제 여기에 각종 터미널 명령어 등을 기입해서 평소 개발하듯 소스 제어 및 깃 커밋 푸시도 가능하다. 되게 유용하기 때문에 이런 거 알아두면 좋다. 실제 현업 개발자들도 좋아하고 태블릿에서도 코딩 작업을 쉽게 할 수 있다. 여러모로 좋은 기능이니 한 번.. 2026. 6. 19. Code Rabbit PR 리뷰 세팅 방법 https://zelkovaria.github.io/etc/CodeRabbit-PR%EC%9E%90%EB%8F%99%ED%99%94/ 2026. 5. 15. React-admin: 관리자 페이지 구축하기 React-admin: 기업용 B2B 관리자 페이지 구축의 종결자웹 서비스를 운영하다 보면 사용자 관리, 게시글 모니터링, 통계 확인 등을 위한 백오피스(Back-office) 혹은 어드민 페이지 구축이 필수적입니다. 하지만 매번 비슷한 UI와 CRUD 로직을 반복해서 짜는 것은 개발자에게 매우 지루한 작업이죠. 이 고민을 해결해 주는 것이 바로 React-admin입니다.공식 사이트https://marmelab.com/react-admin/ React AdminA frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Desi.. 2026. 4. 7. Drizzle ORM이란 Drizzle ORM: SQL의 직관성과 TypeScript의 안전성을 결합한 차세대 ORM최근 TypeScript 생태계에서 가장 뜨거운 관심을 받고 있는 ORM을 꼽으라면 단연 Drizzle ORM입니다. "SQL처럼 보이고, TypeScript처럼 동작한다"는 철학 아래 개발된 Drizzle ORM은 기존 Prisma나 TypeORM이 가졌던 한계점을 극복하며 급부상하고 있습니다.오늘은 Drizzle ORM이 왜 특별한지, 그리고 실제 프로젝트에서 어떻게 활용할 수 있는지 상세히 알아보겠습니다.공식 사이트https://orm.drizzle.team/ Drizzle ORM - next gen TypeScript ORM.Drizzle ORM is a lightweight and performant Ty.. 2026. 4. 7. Next.js 서버 액션(Server Actions) 완벽 이해하기: 개념부터 실전 예제까지 Next.js 13.4 버전부터 안정화된 서버 액션(Server Actions)은 modern 웹 개발의 패러다임을 바꾸고 있습니다. API 엔드포인트를 일일이 생성하지 않고도 서버 측 로직을 실행할 수 있는 서버 액션의 핵심 개념과 사용법을 정리해 드립니다.1. 서버 액션(Server Actions)이란?서버 액션은 클라이언트 컴포넌트나 서버 컴포넌트에서 호출할 수 있는 비동기 함수입니다.기존에는 클라이언트에서 데이터를 수정하려면 fetch를 통해 특정 API 라우트(/api/post)에 요청을 보내고, 서버에서 이를 처리하는 과정을 거쳐야 했습니다. 하지만 서버 액션을 사용하면 별도의 API 라우트 없이 함수 하나로 서버 DB 작업 등을 직접 수행할 수 있습니다.2. 왜 서버 액션을 사용해야 할까?코.. 2026. 4. 6. 슈퍼베이스 프로젝트 자동 일시정지 방지 솔루션 슈퍼베이스를 써본 사람은 잘 알겠지만, 무료 플랜을 사용할 시에 7일간 활동이 없다면 프로젝트가 자동으로 일시정지되는 이슈가 있다. 물론 정지되면 다시 활성화시키면 되지만, 프로젝트가 일시정지된다는 것 자체가 굉장한 불편함을 가져온다.이 글은 그런 불편함을 방지하는 여러 방법과 정지된 프로젝트를 다시 복구 및 마이그레이션 하는 방법을 작성한다.(다른 블로그글을 출처로써 링크로 남겨두겠습니다.)복구https://sooncoding.tistory.com/395 Supabase 일시정지(Paused) 프로젝트 DB 복구 & 마이그레이션 전체 과정 정리들어가며본 글은Supabase 프로젝트가 90일 이상 일시정지(Paused)된 이후 Dashboard를 통한 복구가 불가능한 상황에서, 기존 프로젝트의 데이터베이.. 2026. 4. 2. 알아두면 쓸데있는 ESLint / Prettier ESLint는 코드의 문법·로직 문제를 잡는 Linter이고, Prettier는 코드의 포맷(스타일)을 일관되게 정리해 주는 포매터입니다.두 도구를 함께 쓰면 규칙 충돌이 생길 수 있어, Prettier를 ESLint 규칙으로 통합해 관리하는 설정이 일반적입니다.https://share.google/iBdEawXn7YBdnGjGO 알아두면 쓸데있는 ESLint & Prettier 설정 방법 (feat.우아한테크코스)VSCode에서 ESLint & Prettier 설정하기 (feat.우아한테크코스)velog.iohttps://dev-102.tistory.com/entry/ESlint-Prettier-%EA%B8%B0%EB%B3%B8-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 ESli.. 2026. 3. 26. conventional commits (커밋 메세지 작성 가이드라인) 깃허브에 commit을 남길 때, 다들 어떤 식으로 남기는가? 자신만의 규칙이 있는가? 아님 그냥 되는대로, 느낌대로?나의 경우는 "느낌"대로 올리는 것 같다. 물론 commit에는 내가 올린 기능에 대한 설명을 남기는 부분이지만, 그 "규칙"이라는 것에서는 느낌대로 올린다.이때, 사실 commit를 올리는 것에 정답은 없다. 그러나 일정한 프로덕트를 만드는 프로젝트에서는 이 commit 규칙이 필요하게 된다. (뿐만 아니라 깃 협업의 흐름도 정해져야 한다.)이때 쓰이는 스펙이 "conventional commits"이다.conventional commits 이란?일단 공식 문서의 링크는 다음과 같다.https://www.conventionalcommits.org/en/v1.0.0/ Conventiona.. 2026. 3. 18. 동적 페이지 Title 변경 - React & Next.js 들어가며사용자가 다른 페이지로 이동했을 때, 브라우저 탭의 title이 그대로 "Home"으로 남아있나요?홈페이지: "My App"제품 상세 페이지: "My App" (변경 안 됨)사용자 프로필: "My App" (변경 안 됨)❌ 나쁜 경험제대로 된 웹사이트는 페이지마다 고유한 title을 가져야 합니다.홈페이지: "Home - My App"제품 상세 페이지: "iPhone 15 - My Shop"사용자 프로필: "John Doe - My App"✅ 좋은 경험이 가이드에서는 React와 Next.js에서 동적으로 title을 변경하는 방법을 배웁니다.1. React에서 Title 변경방법 1: useEffect와 document.title기본 사용법typescriptimport { useEffect } .. 2026. 3. 3. Storybook - 컴포넌트 개발의 완전한 혁신 들어가며당신이 리액트 컴포넌트를 개발할 때, 매번 전체 애플리케이션을 실행해서 그 컴포넌트를 테스트했던 경험이 있나요?문제 상황:Button 컴포넌트를 수정했다면:1. npm start2. 애플리케이션 대기 (3-5초)3. 버튼이 있는 페이지로 이동4. 버튼 상태 변경 (hover, disabled 등)5. 수정이 필요하면 1번부터 반복...→ 아주 비효율적입니다!Storybook은 이 모든 번거로움을 제거합니다. 각 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공합니다. 컴포넌트의 모든 상태(정상, 로딩, 에러 등)를 한눈에 볼 수 있고, 상호작용까지 테스트할 수 있습니다.공식 사이트 가이드라인https://storybook.js.org/tutorials/intro-to-storybook/.. 2026. 2. 24. 인증(Auth) 시스템 인증(Auth) 시스템 완벽 가이드1. 전체 흐름 개요회원가입 흐름:사용자가 프론트엔드에서 회원가입 폼 입력프론트엔드가 입력값 유효성 검사백엔드로 회원가입 요청 전송백엔드가 비밀번호 해싱 후 DB에 저장성공 응답 반환로그인 흐름:사용자가 이메일/비밀번호 입력백엔드가 DB에서 사용자 조회비밀번호 검증JWT 토큰 생성 및 반환프론트엔드가 토큰 저장이후 요청마다 토큰을 헤더에 포함2. 핵심 개념2.1 비밀번호 해싱비밀번호를 평문으로 저장하면 안 됩니다. bcrypt 같은 라이브러리로 해싱하여 저장합니다.// bcrypt 예시const hashedPassword = await bcrypt.hash(plainPassword, 10); // 10은 salt roundsconst isMatch = await bcry.. 2026. 2. 10. Docker란? Docker - 개발과 배포의 혁명들어가며당신이 개발한 애플리케이션이 로컬에서는 완벽하게 작동하는데, 서버에 배포하면 에러가 발생한 적이 있나요?이유:- 개발 PC: Node 16, Python 3.9, PostgreSQL 12- 테스트 서버: Node 14, Python 3.8, PostgreSQL 11- 프로덕션: Node 18, Python 3.10, PostgreSQL 13→ 환경이 다르면 코드가 다르게 작동합니다!Docker는 이 모든 문제를 근본적으로 해결합니다. 애플리케이션과 모든 의존성을 하나의 컨테이너로 패킹하여, 어디서나 동일하게 실행되도록 합니다.(공식 사이트)https://www.docker.com/ Docker: Accelerated Container Application Deve.. 2026. 2. 7. Giscus란? Giscus - GitHub로 관리하는 댓글 시스템들어가며블로그에 댓글 시스템이 필요한데, Disqus 같은 외부 서비스는 너무 무겁고 추적이 많습니다. 또한 댓글 데이터 소유권도 보장되지 않습니다.Giscus는 완전히 다른 접근 방식입니다. GitHub Discussions를 댓글 저장소로 사용합니다. 즉, 모든 댓글이 당신의 GitHub 저장소에 저장되고, 당신이 완전히 통제할 수 있습니다.(공식 사이트)https://github.com/giscus/giscus GitHub - giscus/giscus: A commenting system powered by GitHub Discussions. :speech_balloon: :gem:A commenting system powered by GitHub .. 2026. 2. 6. Prisma란? Prisma - 현대적 ORM의 완벽한 선택들어가며데이터베이스와 통신할 때 SQL을 직접 작성하는 것이 얼마나 번거로운지 알고 계신가요?-- SQL 직접 작성 (번거로움)SELECT * FROM users WHERE email = $1;INSERT INTO users (name, email, age) VALUES ($1, $2, $3);UPDATE users SET age = $1 WHERE id = $2;DELETE FROM users WHERE id = $1;Prisma는 이 모든 번거로움을 없앱니다. 타입 안전한 데이터베이스 접근, 자동 마이그레이션, 강력한 관계 설정 - 모든 것을 우아하게 처리합니다.(공식 사이트)https://github.com/prisma/prisma GitHub - pris.. 2026. 2. 5. MSW란? MSW (Mock Service Worker) - 네트워크 레벨 API 모킹들어가며당신이 프론트엔드 개발 중에 백엔드 API가 완성되기를 기다린 적이 있나요? 또는 백엔드 개발자가 특정 에러 상황을 재현하기 어려워 했나요?MSW(Mock Service Worker)는 이 모든 문제를 해결합니다. Service Worker API를 사용하여 네트워크 레벨에서 API 요청을 가로채고, 정의된 핸들러가 응답을 제공합니다. 이는 단순한 모킹을 넘어, 실제 네트워크 요청처럼 작동합니다.공식 깃허브https://github.com/mswjs/mswMSW의 핵심 개념기존 방식 vs MSW기존 방식 (fetch 모킹):┌─ 테스트 코드├─ jest.mock('/api/users', ...)├─ 매번 설정 필요└─ 부분.. 2026. 2. 4. Deno란? Deno - Node.js의 문제를 근본적으로 해결한 JavaScript 런타임들어가며당신이 Node.js 생태계의 문제점을 느껴본 적이 있나요?npm의 의존성 지옥 (node_modules의 쓸데없는 크기)보안 문제 (패키지가 무분별하게 파일 접근)모듈 시스템의 혼란 (CommonJS vs ES Modules)TypeScript 설정의 복잡함Deno는 Node.js의 창시자 Ryan Dahl이 Node.js의 "10년의 후회"를 토대로 만든 새로운 JavaScript 런타임입니다. 처음부터 올바르게 설계되어, 더 안전하고 효율적입니다.공식 깃허브https://github.com/denoland/deno/Node.js vs Deno 비교핵심 차이점Node.js (1009년):├─ CommonJS + ES.. 2026. 2. 3. FSD란? FSD (Feature-Sliced Design) - 프론트엔드 아키텍처 혁신들어가며당신이 점점 커지는 리액트 프로젝트에서 다음과 같은 문제를 겪었다면, FSD가 답입니다:"이 컴포넌트는 어디에 있지?" - 파일 구조가 복잡함"이 유틸 함수를 쓸 수 있나?" - 순환 의존성으로 사용 불가"리팩토링하면 뭔가 깨질까봐..." - 의존성 파악이 어려움"여러 팀원이 같은 기능을 만들고 있어" - 협업이 어려움FSD(Feature-Sliced Design)는 이 모든 문제를 구조적으로 해결하는 방법론입니다. 프로젝트를 수평적 계층(shared, entities, features 등)과 수직적 슬라이스(각 기능)로 구분하여, 확장성과 유지보수성이 뛰어난 아키텍처를 만듭니다.공식 깃허브https://github.co.. 2026. 2. 2. Neon란? Neon - 서버리스 PostgreSQL의 미래들어가며전통적인 PostgreSQL 서버를 관리하는 것은 힘듭니다. 데이터베이스 인스턴스를 항상 실행 중으로 유지해야 하고, 트래픽에 따른 수동 스케일링을 해야 하며, 백업과 보안을 신경 써야 합니다.Neon은 이 모든 문제를 완전히 해결합니다. 서버리스 PostgreSQL 플랫폼으로, 자동 스케일링, 즉각적인 분기(branching), 관리형 호스팅을 제공합니다. AWS Lambda와 유사하게 사용한 만큼만 비용을 지불하면서도 완전한 PostgreSQL 기능을 사용할 수 있습니다.공식 깃허브https://github.com/neondatabase/neon GitHub - neondatabase/neon: Neon: Serverless Postgres. We.. 2026. 2. 1. Lefthook란? Lefthook - Husky보다 빠르고 강력한 Git 훅 관리들어가며Husky를 사용 중인데 pre-commit 훅이 실행될 때마다 5-10초 기다린다면? Node.js 오버헤드 때문입니다. Lefthook은 Go로 작성되어 100배 더 빠릅니다.Go 바이너리로 빌드된 Lefthook은 npm 패키지 설치 없이도 작동하며, JavaScript뿐 아니라 Python, Ruby, Java 등 모든 프로젝트에서 사용할 수 있습니다. 특히 대규모 모노레포에서 Lefthook의 병렬 실행 기능은 개발 속도를 획기적으로 향상시킵니다.공식 깃허브https://github.com/evilmartians/lefthook GitHub - evilmartians/lefthook: Fast and powerful Git h.. 2026. 1. 31. Husky란? Husky - Git 훅으로 자동화된 코드 품질 관리들어가며당신이 실수로 버그가 있는 코드를 커밋하거나, 스타일 가이드를 따르지 않은 코드를 메인 브랜치에 푸시했던 경험이 있나요? Husky는 이런 인간의 실수를 완전히 자동화된 방식으로 방지합니다.Husky는 Git 훅(hook)을 관리하는 도구입니다. 개발자가 코드를 커밋하거나 푸시하기 전에 자동으로 검증 작업을 수행하므로, 문제 있는 코드가 저장소에 들어가는 것을 원천적으로 차단합니다.공식 사이트https://github.com/typicode/husky GitHub - typicode/husky: Git hooks made easy 🐶 woof!Git hooks made easy 🐶 woof! Contribute to typicode/husky.. 2026. 1. 30. 이전 1 2 3 4 ··· 16 다음
