#프론트엔드

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

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

| 서론 안녕하세요, 팡일입니다. 프론트엔드 프로젝트를 진행하다 보면 vite.config.ts 파일을 자주 마주하게 됩니다. 처음에는 단순히 플러그인이나 alias 정도를 설정하는 파일처럼 보이지만, 실제로는 개발 서버 실행 방식, 빌드 전략, 환…

| 서론 안녕하세요, 팡일입니다. Git을 사용하다 보면 git clone, git pull, git push를 할 때 원격 저장소 주소를 두 가지 방식으로 사용할 수 있습니다. HTTPS 방식 SSH 방식 처음에는 큰 차이를 느끼지 못하고 사용하지…

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

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

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

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

| 서론 안녕하세요, 팡일입니다. 오늘은 목업데이터를 api로 제공해주는 서비스인 'mockapi.io'의 사용법에 대해서 공유해보려고 합니다. 현재 진행중인 사이드 프로젝트에서 백엔드 환경 연결이 이루어지지 않아, json-server를 사용해왔었…

| 서론 안녕하세요, 팡일입니다. React Router v6에서 중첩 라우트(nested routes)를 사용하다 보면 index 라우트를 자연스럽게 사용하게 됩니다. 저 역시 메시지 기능을 구현하면서 /message 아래에 여러 하위 페이지를 두…

| 서론 안녕하세요, 팡일입니다. 오늘은 React + Vite + TS 환경과 Firebase Hosting 그리고 Github Action을 구축하는 방법에 대해서 공유 드리려고 합니다. Vercel로 CI/CD를 구축하는 방법도 공유드린 적이 …

| 서론 안녕하세요, 팡일입니다. 지난 포스팅에서는 useQuery와 캐시 생명주기를 중심으로, 서버 데이터를 ‘읽어오는(Read)’ 방식에 대해 깊이 있게 살펴보았습니다. 이번 포스팅에서는 그 데이터를 ‘변경하는(Change)’ 작업, 즉 생성(C…