욕심도 참 많아

프로젝트를 진행 하던 중 멀쩡하게 로컬에선 잘 돌아가던 프로젝트가 build가 안되는 문제가 발생했다. 처음에는 모든 paths에서 다 에러가 난다고 해서, 의존성 패키지 혹은 옛날 브랜치부터 하나하나 다 까보면서 의존성 삭제 -> 설치 -> 빌드 를 반복했다.CI / CD의 중요성을 너무나도 절실히 느꼈다. 빌드가 정상적으로 되는 브랜치와 그 다음 작업된 브랜치를 확인해 보니, App Router의 기본적인 Loading, Error 같은 페이지들을 추가한 뒤로 안되고 있는 것을 확인했다. 이때 처음 생각했던 문제는 해당 페이지들을 작업하면서 사용한 twin.macro 혹은 "use client"의 부재 문제라고 생각했다. 하지만 해당 문제를 모두 해결했음에도 빌드 에러는 계속해서 났고, error, ..

소개공식문서에는 MSW를Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.로 소개합니다. 직역하자면,Mock Service Worker는 클라이언트에 구애받지 않고 모킹을 작성할 수 있으며, 어떠한 프레임워크, 도구, 환경에서도 재사용할 수 있는 API 모킹 라이브러리 입니다. 다른 모킹 서비스와 다르게 특별한 점은,  • API endpoint를 실제 API의 것으로 사용할 수 있다.• JavaScript를 이용해 웹 애플리케이션 프로젝트에 Mocking 코드를 작성한다.• 실제..

팀에서 프로젝트를 진행하던 중 사용하고 있던 스타일링 라이브러리인 twin.macro가 Next.js 서버 컴포넌트에서 사용이 불가한 것을 확인하고, 해당 문제를 해결하면서 SSR , CSR , RSC , RCC 개념에 대해 제대로 짚고 넘어가보기로 했다. 우선 일반적인 클라이언트 사이드 렌더링에서는CSS / JS 파일이나 이미지같은 파일의 크기가 클때 , 이런 모든 파일들이 모두 로드 될때까지프론트 - 백엔드 API 요청이 계속해서 대기 상태에 머무르게 된다. 이 현상을 워터폴 현상이라 한다. 워터폴현상이 생길시에  - 로딩 지연: 각 요청이 이전 요청의 완료를 기다려야 하므로, 전체 페이지의 로딩 시간이 길어집니다.- 사용자 경험 저하: 페이지의 주요 콘텐츠가 늦게 나타나거나, 사용자가 상호작용을 시..

import axios from "axios"; const api = axios.create({ baseURL: "어쩌구저쩌구백엔드url", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 기존 코드이다. Axios 로 baseURL을 이용해서 그냥 요청을 보내면 network 탭에서 그대로 URL이 노출 되기 때문에 rewrite 기능을 사용하였다!! /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: "/api", destination: "어쩌구저쩌구백엔드url", ..