프론트엔드 개발자의 시선으로 본 Vite+
개발환경
2026.04.08 15:17
Vite+는 무엇을 바꾸려는가프론트엔드 개발자의 시선으로 본 Vite+의 사용법과 원리 프로젝트 하나 새로 열 때마다 비슷한 순간이 온다. 코드를 짜기도 전에 Node 버전부터 맞추고, 패키지 매니저를 정하고, 린트와 포맷 설정을 고르고, 테스트 러너를 붙이고, 빌드 흐름을 정리하는 순간이다.문제는 코드보다 그 주변인 경우가 많다. 도구들이 조금씩 따로 움직이기 시작하면 팀이 금방 피곤해진다. 소규모 프로젝트에서는 괜찮아 보여도, 팀이 커지면 이런 관리 비용이 금방 눈에 띈다.그래서 Vite+가 흥미로웠다. 이름만 보면 "Vite의 상위 버전" 같지만, 실제로는 프론트엔드 개발에 필요한 툴체인 전체를 하나의 흐름으로 묶으려는 시도에 더 가깝다. VoidZero도 Vite+를 런타임, 패키지 매니저, 프론..
crypto.randomUUID() HTTP 환경에서 작동하지 않는 문제 해결기
JavaScript
2025.11.25 18:30
🔐 [에러 해결] crypto.randomUUID()가 HTTP 환경(내부 IP 등)에서 작동하지 않는 이유와 해결법react + supabase로 개발하던 웹앱을 배포했더니,로컬에서는 잘 되던 기능이 서버(내부망 http://192.168.x.x)에서는crypto.randomUUID is not a function 에러로 실패!이 현상, 왜 발생하고 어떻게 우아하게 해결할 수 있는지 직접 경험을 바탕으로 정리했습니다.📝 목차문제 상황 & 환경 정리증상 및 에러 로그원인 진단 과정근본 원인: Secure Context(보안 컨텍스트)해결: Polyfill(Fallback 함수) 구현교훈과 현실적인 대안 & 부가 팁참고 자료1. 문제 상황 & 개발 환경로컬 개발:http://localhost:5173 ..
🌐 AWS S3 + CloudFront + Route 53을 활용한 정적 웹사이트 배포 & 보안 설정
카테고리 없음
2025.05.31 10:04
안녕하세요! 이번 포스팅에서는 정적 웹사이트를 AWS 환경에서 안전하고 깔끔하게 배포하는 전체 과정을 정리해보았습니다.React 프로젝트를 S3에 올리고, CloudFront CDN을 붙이고, 도메인 연결 + HTTPS 설정 + 보안까지 한 번에 다뤄볼게요.🧱 아키텍처 구성도[ 사용자 ] │ ▼[ CloudFront (CDN) ] ← HTTPS + 도메인 연결 │ ▼[ S3 (정적 파일 저장소) ] ← 비공개 접근 + CloudFront만 접근 가능1️⃣ S3 버킷 생성 및 정적 웹 호스팅 설정S3 콘솔 접속 → 버킷 만들기버킷 이름 설정 (ex. my-portfolio)퍼블릭 액세스 차단 해제 → 나중에 CloudFront로 보안 설정 예정"속성" 탭 → 정적 웹 사이트..
git
🔐 GitHub에서 CI를 실제로 강제하려면?
Git
2025.04.02 13:43
🔐 GitHub에서 CI를 실제로 강제하려면? 앞에서 우리는 GitHub Actions로 PR이 열릴 때pnpm install, build, test를 자동 실행하도록 구성했어요. 근데 사실…테스트가 실패했는데도 Merge 버튼을 누를 수 있다면? 😱CI를 돌리는 의미가 많이 퇴색되겠죠? 그래서 반드시 설정해야 하는 게 있어요.바로 GitHub의 Branch Protection Rule입니다. ✅ 설정 위치 1. GitHub 저장소의 상단 메뉴에서 Settings 클릭 2. 좌측 메뉴에서 Branches 클릭 3. Branch protection rules 섹션에서 Add rule 클릭 ✅ 필수 옵션들 → 실수로 git push origin main 해버리는 상황을 막을 수 있어요! • 체크하면 아..
프로젝트에 GitHub Actions로 CI 구축하기
Git
2025.04.02 13:22
최근에 사이드 프로젝트를 만들면서GitHub Actions를 활용해 자동화된 CI 환경을 구축한 경험을 정리해보려고 합니다. ✅ 왜 CI가 필요했을까? 프로젝트가 커지고 브랜치가 많아지다 보니 이런 문제가 생기더라고요. • 코드 수정할 때마다 직접 build, test를 돌려봐야 하는 번거로움 • 과거의 내가 만든 코드가 기존 기능을 깨뜨릴 수도 있음 • 자잘한 수정만 했을 때도 전체 테스트를 돌리는 건 시간 낭비 그래서 자연스럽게 이런 생각이 들었습니다. “PR 올리면 자동으로 테스트 돌고, 이상 있으면 merge 못 하게 만들 수 없을까?” ➡️ 이걸 해결해줄 수 있는 게 바로 CI (Continuous Integration) 입니다. 🤖 왜 GitHub Actions를 선택했을까? CI 도구는 정..
Husky의 동작 과정과 원리
Git
2025.03.17 17:00
Husky는 Git Hook을 활용하여 코드 품질을 유지하고 오류가 포함된 코드가 커밋되는 것을 방지하는 도구다.Git Hook이란 Git의 특정 이벤트(예: 커밋, 푸시)가 발생할 때 실행되는 스크립트인데,Husky는 이를 활용하여 자동으로 ESLint, Prettier, 테스트 실행 등을 수행할 수 있다. ✅ 1. Husky 패키지 설치npm install --save-dev husky lint-staged • husky → Git Hook을 제어하는 패키지 • lint-staged → 변경된 파일만 ESLint, Prettier 등을 실행✅ 설치 완료 후, package.json을 보면 devDependencies에 추가됨. 📌 2. Husky 활성화 (husky install)설치 후 Husky..
TypeScript
TSC 의 컴파일 프로세스
TypeScript
2024.04.01 00:41
프로그램을 만들기 위해 개발자는 소스코드를 작성합니다. 소스코드는 컴파일러 (Compiler) 에 의해 기계어코드로 변환되어 실행이 가능한 프로그램이 되는데, 이 단계를 컴파일 타임(Compile Time) 이라고 부릅니다. 즉, 컴파일 타임 은 소스코드가 컴파일 과정을 거쳐서 컴퓨터가 인식할 수 있는 기계어 (바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미합니다. 컴파일(compile)은 추상화 단계가 다른 고수준에서 저수준 언어로 변환되는 과정을 가리키는데요. 하지만 타입스크립트는 고수준 언어가 저수준 언어로 변환되는 것이 아니라, 고수준 언어 (타입스크립트) => 고수준 언어(자바스크립트) 로 변환되는 것이기 때문에, 트랜스파일(transpile) 이라고 부르기도 합니다. < ..
Any VS Unknown VS Never
TypeScript
2024.03.25 10:57
any 와 unknown은 값의 유형이 무엇인지 확실하지 않을 때, 사용되는 이스케이프 방법인 반면에 never는 모든 데이터 유형이 부족하고 값이 남지 않을 때 사용됩니다. Any any 타입은 타입 체크를 회피할 수 있는 타입으로, 어떤 종류의 값도 할당할 수 있습니다. 타입스크립트의 타입 시스템에서 any는 "어떤 것이든 될 수 있음"을 의미하며, 컴파일러에게 해당 변수에 대한 타입 체크를 수행하지 말라고 지시합니다. any 타입으로 지정된 변수에는 무엇이든 할당 할 수 있습니다. 단점 :정의되지 않은 메서드를 호출할 수도 있으며, Typescript 에서는 오류가 발생하지 않습니다. Unknown unknown 타입은 타입스크립트 3.0에서 소개되었으며, any 타입보다 타입 안전성을 강화한 타입..
enum 보다는 union type
TypeScript
2024.02.27 14:41
이번 글에서는 enum 대신에 union type을 써야한다는 내용에 대해 써보겠습니다. 얻어갈 수 있는 내용🎯 - enum 타입의 컴파일 과정과 런타임에 미치는 영향 - Tree-shaking - 굳이 enum 타입을 쓰는 방법 - enum 타입 말고 union type을 써야하는 이유 타입스크립트에서 정적 타입 자체는 런타임에 직접적인 영향을 주지 않습니다.🙅♂️ 타입스크립트에서 타입 정보는 컴파일 타임에만 사용되고, 컴파일된 JavaScript 코드에서는 제거되는데요 이는 타입스크립트의 타입 시스템이 런타임에 존재하지 않는다는 것을 의미합니다. 즉, 런타임에는 모든 타입이 사라지고, 순수한 JavaScript 코드만 남게 된다는거죠. 그런데 말입니다. enum과 같은 특정 타입스크립트 구문은 런타..
JavaScript
crypto.randomUUID() HTTP 환경에서 작동하지 않는 문제 해결기
JavaScript
2025.11.25 18:30
🔐 [에러 해결] crypto.randomUUID()가 HTTP 환경(내부 IP 등)에서 작동하지 않는 이유와 해결법react + supabase로 개발하던 웹앱을 배포했더니,로컬에서는 잘 되던 기능이 서버(내부망 http://192.168.x.x)에서는crypto.randomUUID is not a function 에러로 실패!이 현상, 왜 발생하고 어떻게 우아하게 해결할 수 있는지 직접 경험을 바탕으로 정리했습니다.📝 목차문제 상황 & 환경 정리증상 및 에러 로그원인 진단 과정근본 원인: Secure Context(보안 컨텍스트)해결: Polyfill(Fallback 함수) 구현교훈과 현실적인 대안 & 부가 팁참고 자료1. 문제 상황 & 개발 환경로컬 개발:http://localhost:5173 ..
TSC 의 컴파일 프로세스
TypeScript
2024.04.01 00:41
프로그램을 만들기 위해 개발자는 소스코드를 작성합니다. 소스코드는 컴파일러 (Compiler) 에 의해 기계어코드로 변환되어 실행이 가능한 프로그램이 되는데, 이 단계를 컴파일 타임(Compile Time) 이라고 부릅니다. 즉, 컴파일 타임 은 소스코드가 컴파일 과정을 거쳐서 컴퓨터가 인식할 수 있는 기계어 (바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미합니다. 컴파일(compile)은 추상화 단계가 다른 고수준에서 저수준 언어로 변환되는 과정을 가리키는데요. 하지만 타입스크립트는 고수준 언어가 저수준 언어로 변환되는 것이 아니라, 고수준 언어 (타입스크립트) => 고수준 언어(자바스크립트) 로 변환되는 것이기 때문에, 트랜스파일(transpile) 이라고 부르기도 합니다. < ..
Git Bash 와 Git, vi 명령어 모음
Git
2023.05.11 14:21
Git Bash 란? Git bash는 윈도우 운영체제에서 git 명령어를 실행할 수 있도록 제공되는 터미널 에뮬레이터이다. 윈도우에서도 리눅스나 맥에서처럼 git 명령어를 사용할 수 있어 편리하고, vim이나 nano와 같은 텍스트 에디터를 사용하여 편집할 수 있다. vim ( vi )는 명령 모드와 편집 모드로 나뉘어 있으며, 명령 모드에서는 텍스트 파일을 편집하기 위한 다양한 명령어를 입력할 수 있고, 편집 모드에서는 실제로 텍스트를 입력하거나 편집할 수 있다. Git bash 오른쪽 클릭해서 “관리자 권한으로 실행”을 클릭한다. Git bash를 관리자 권한으로 실행해야 하는 이유는 파일 시스템 권한 때문인데, Git bash를 실행하면 기본적으로 현재 사용자의 홈 디렉터리로 이동한다. 그러나 윈..