0503 · FE7월 19일
Vite에서 Browserslist 경고가 나타난 이유와 해결 방법
| 서론 안녕하세요, 팡일입니다. Vite 프로젝트에서 npm run dev를 실행하던 중 다음과 같은 경고 메시지가 나타났습니다. Browserslist: browsers data (caniuse-lite) is 7 months old. Pleas…
웹개발 · ViTE · frontend
FE
9월 0장 · 통산 515장
- 0496 · FE6월 23일[TS] 리터럴 유니온(Literal Union)으로 더 안전한 코드를 작성하는 방법| 서론 안녕하세요, 팡일입니다. TypeScript를 사용하다 보면 "loading", "success", "error" 같은 상태값을 자주 다루게 됩니다. 처음에는 단순히 string 타입으로 선언하고 사용하지만, 프로젝트 규모가 커질수록 오타나…typeScript · JavaScript · REACT
- 0480 · FE4월 25일[Vite] 공통 옵션 (Shared Options) 2편| 서론 안녕하세요, 팡일입니다. 프론트엔드 프로젝트를 진행하다 보면 Vite의 resolve 옵션을 자주 마주하게 됩니다. 처음에는 단순히 alias 설정 정도로만 사용하는 경우가 많지만, 실제로는 모듈 경로 해석, 의존성 중복 방지, 환경별 en…웹개발 · typeScript · ViTE
- 0479 · FE4월 25일[Vite] 공통 옵션 (Shared Options) 1편| 서론 안녕하세요, 팡일입니다. Vite를 사용하다 보면 vite.config.ts 파일에서 다양한 옵션들을 설정하게 되는데, 처음에는 어떤 옵션이 언제, 어떻게 적용되는지 감이 잘 잡히지 않는 경우가 많습니다. 특히 설정을 추가할 때마다 “이건 …웹개발 · ViTE · 프론트엔드개발
- 0478 · FE4월 25일[Vite] Vite 들어보셨어요? (Vite 구성)| 서론 안녕하세요, 팡일입니다. 프론트엔드 프로젝트를 진행하다 보면 vite.config.ts 파일을 자주 마주하게 됩니다. 처음에는 단순히 플러그인이나 alias 정도를 설정하는 파일처럼 보이지만, 실제로는 개발 서버 실행 방식, 빌드 전략, 환…프론트엔드 · ViTE · 프론트엔드개발
- 0477 · FE4월 24일[Xcode] .xcodeproj와 .xcworkspace의 차이| 서론 안녕하세요, 팡일입니다. iOS 개발을 진행하다 보면 .xcodeproj와 .xcworkspace 두 가지 파일을 마주하게 됩니다. 처음에는 두 파일이 비슷해 보이기 때문에 어떤 것을 사용해야 하는지 혼란을 겪기 쉽습니다. 특히 CocoaP…cocoapods · 개발지식 · iOS개발
- 0447 · FE3월 19일[Angular] Angular에서 CSR → SSG 전환하기| 서론 안녕하세요, 팡일입니다. 이번 글에서는 Angular CSR 기반 프로젝트에서 특정 페이지만 SSG(Prerender)로 전환한 경험을 정리해보았습니다. 기존 프로젝트는 전체가 CSR 구조로 구성되어 있었기 때문에, 브라우저에서 JavaSc…hydration · frontenddevelopment · Angular
- 0446 · FE3월 19일[Angular] Angular 초심자 문법 가이드| 서론 안녕하세요, 팡일입니다. Angular를 시작하면서 상태는 어떻게 관리할지, 템플릿에서 변수는 어떻게 사용할지, 조건문과 반복문은 어떤 형태로 사용할지에 대해 정리할 필요가 있었습니다. 특히나, Angular의 signal, @if, @fo…프론트엔드개발 · frontend · Angular
- 0445 · FE3월 19일[Angular] Angular 프로젝트 시작하기 (처음부터 구조 이해까지)| 서론 안녕하세요, 팡일입니다. 이번 글에서는 Angular 프로젝트를 처음 시작하는 방법부터, 프로젝트 구조와 기본 동작 흐름까지 한 번에 정리해보려고 합니다. Angular는 React와 비교했을 때 구조가 비교적 정해져 있고, 초기 설정 과정…웹개발 · 프론트엔드개발 · 개발블로그
- 0444 · FE3월 14일[JavsScript] 자바스크립트의 마법사: Unary Plus(+) 연산자 활용법| 서론 let num = '123'; console.log(+num); 123을 문자가 아닌 숫자로 출력하려고 하는데, 혹시 위의 코드에서 의문이 드시는 점이 있으신가요? 저는 이 코드를 봤을 때, "문자가 아닌 숫자로 형변환은 어디서하지? +는 …JavaScript · 코딩테스트 · 개발자공부
- 0441 · FE3월 13일[React] React + Node.js 풀스택 CRUD 만들기 (Prisma + SQLite)| 서론 안녕하세요, 팡일입니다. 이전 글에서는 React + Node.js 기반의 풀스택 모노레포 환경을 구축하는 과정을 정리했고, 이번 글에서는 그 환경 위에서 실제로 데이터를 저장하고 조회할 수 있는 CRUD 기능을 구현해보겠습니다. 전체 데이…FE · 웹개발 · 프론트엔드
- 0440 · FE3월 13일[React] React + Node.js 풀스택 모노레포 환경 세팅 (pnpm + Turborepo)| 서론 안녕하세요, 팡일입니다. 보통 웹 개발을 하면 프론트엔드 프로젝트와 백엔드 프로젝트를 각각 관리해왔었는데요? 혹시 모노레포라고 들어보셨나요? 모노레포란?: 두 개 이상의 프로젝트, 애플리케이션 또는 라이브러리 코드를 하나의 버전 관리 저장소…FE · 웹개발 · 프론트엔드