#웹개발

| 서론 안녕파세요, 팡일입니다. Checky에도 공용 컴포넌트는 있었습니다. Button이 있었고 Modal이 있었고 Text도 있었습니다. 그런데 어느 날 다크 모드를 붙여 보려고 코드를 열었을 때, 저는 이 프로젝트의 회색이 몇 종류인지 대답할…

| 서론 안녕하세요, 팡일입니다. "당신의 사이트에서 문제가 감지되었습니다." 어느 날 구글에서 이런 메일이 오면, 덜컥 겁이 나지 않으세요? 저도 그랬습니다. 그런데 이 메일 한 통이 결국 우리 홈페이지에 제대로 된 방문자 분석 시스템을 갖추는 계…

| 서론 안녕하세요, 팡일입니다. Vite 프로젝트에서 npm run dev를 실행하던 중 다음과 같은 경고 메시지가 나타났습니다. Browserslist: browsers data (caniuse-lite) is 7 months old. Pleas…

| 서론 안녕하세요, 팡일입니다. 프론트엔드 프로젝트를 진행하다 보면 Vite의 resolve 옵션을 자주 마주하게 됩니다. 처음에는 단순히 alias 설정 정도로만 사용하는 경우가 많지만, 실제로는 모듈 경로 해석, 의존성 중복 방지, 환경별 en…

| 서론 안녕하세요, 팡일입니다. Vite를 사용하다 보면 vite.config.ts 파일에서 다양한 옵션들을 설정하게 되는데, 처음에는 어떤 옵션이 언제, 어떻게 적용되는지 감이 잘 잡히지 않는 경우가 많습니다. 특히 설정을 추가할 때마다 “이건 …

| 서론 안녕하세요, 팡일입니다. MongoDB는 프론트엔드 개발을 하다 보면 백엔드나 데이터 구조를 이해하기 위해 한 번쯤은 반드시 접하게 되는 데이터베이스입니다. 특히 JSON 기반 구조를 사용하기 때문에 React와 같은 프론트엔드 환경과도 잘…

| 서론 안녕하세요, 팡일입니다. 서비스를 개발하다 보면 데이터를 어떻게 저장하고 관리할지에 대한 고민은 반드시 하게 됩니다. 특히 최근에는 단순한 정형 데이터뿐만 아니라, 다양한 형태의 데이터를 빠르게 처리해야 하는 경우가 많아지면서 NoSQL 데…

| 서론 안녕하세요, 팡일입니다. 이번 글에서는 Angular 프로젝트를 처음 시작하는 방법부터, 프로젝트 구조와 기본 동작 흐름까지 한 번에 정리해보려고 합니다. Angular는 React와 비교했을 때 구조가 비교적 정해져 있고, 초기 설정 과정…

| 서론 안녕하세요, 팡일입니다. 이전 글에서는 React + Node.js 기반의 풀스택 모노레포 환경을 구축하는 과정을 정리했고, 이번 글에서는 그 환경 위에서 실제로 데이터를 저장하고 조회할 수 있는 CRUD 기능을 구현해보겠습니다. 전체 데이…

| 서론 안녕하세요, 팡일입니다. 보통 웹 개발을 하면 프론트엔드 프로젝트와 백엔드 프로젝트를 각각 관리해왔었는데요? 혹시 모노레포라고 들어보셨나요? 모노레포란?: 두 개 이상의 프로젝트, 애플리케이션 또는 라이브러리 코드를 하나의 버전 관리 저장소…

| 서론 안녕하세요, 팡일입니다.프로젝트를 진행하면서 서버 데이터 호출 로직이 점점 복잡해져, API 모듈 구조를 정리하려고 했습니다. 그런데 구조를 손본 직후, 화면이 하얘지고 콘솔에는 courses.ts 404가 터졌습니다.“파일 하나만 만들면 …

| 서론 안녕하세요, 팡일입니다. 이번 글에서는 TanStack Query(React Query)를 사용하는 환경에서 “DB는 정상적으로 변경되는데 UI가 갱신되지 않는 문제”를 해결한 경험을 공유합니다. 실제 서비스(HomePage)를 운영하면서 …