전체 글 (128) 썸네일형 리스트형 [트러블슈팅] TypeScript에서 CSS / 이미지 import 시 오류 발생 목차 (OPEN)🧩 문제 상황🛠 해결 방법💡 교훈🔎 전체 코드 🧩 문제 상황Vite + React + TypeScript 환경에서.css나 .png 파일을 import 하니까아래와 같은 에러가 발생했다. Cannot find module './style.css' or its corresponding type declarations.Cannot find module './logo.png' or its corresponding type declarations. 처음에는 그냥 경로 문제인 줄 알았는데,실제 원인은 TypeScript가 해당 파일 형식을이해하지 못해서 생긴 타입 오류임을 알게 되었다. 🛠 해결 방법직접 타입 선언 파일을 만들어서TypeScript에게 이런 파일도 import 가.. [Frontend] Mock이란 목차 (OPEN)📦 Mock이란💡 Mock을 사용하는 이유🔧 Mock과 관련된 용어들 📦 Mock이란Mock (모의 객체)란 테스트 환경에서실제 객체의 동작을 흉내 낸 가짜 객체를 의미한다. 이는 테스트 대상이 아닌 외부 의존성을 제어하거나 대체함으로써테스트를 더 쉽고 안정적으로 진행할 수 있도록 도와준다. 예를 들면, 아래와 같은 상황에서 Mock을 사용할 수 있다. 1️⃣ API 요청을 실제로 보내지 않고, 미리 정해둔 응답을 흉내내고 싶을 때// userService.tsexport const fetchUser = async () => { const res = await fetch('/api/user'); return res.json();}; fetchUser() 라는 함수는 서버에 요.. [Frontend] 테스트 코드 작성하기 - Testing Library & Jest 목차 (OPEN)📘 왜 테스트 코드를 작성해야 할까?🧪 프론트엔드 테스트의 종류⚙️ Jest + Testing Library 설정🧾 기본 테스트 예제 (App 컴포넌트 라우팅 테스트)🧯 CI에서 테스트까지 돌리고 싶다면 📘 왜 테스트 코드를 작성해야 할까?"프론트엔드는 눈으로 직접 확인할 수 있으니까굳이 테스트까지 해야 할까?" 이렇게 생각하는 분들도 많지만,사실은 오히려 그 반대이다. 💡 테스트 코드가 중요한 이유✔ 리팩토링 시 기능이 깨지지 않았는지 빠르게 확인할 수 있다.✔ 협업 중 다른 개발자가 변경한 코드가 내 기능에 영향을 주는지 검증할 수 있다.✔ CI / CD 자동화 파이프라인에서 안정적인 배포를 도와준다.✔ 버그를 조기에 발견하고 유지보수성을 높일 수 있다. 즉, 테스.. [Frontend] prettier 적용하기 목차 (OPEN)✨ Prettier란🤔 왜 필요할까💻 Prettier 설치 및 적용 방법⚙ VS Code에서 Prettier 자동 적용 설정 방법⛔ .prettierignore란💻 .prettierignore 만드는 방법 ✨ Prettier란Prettier는 코드 스타일을 자동으로 정리해주는의견 없는 (Opinionated) 코드 포맷터이다. 사람마다 들여쓰기, 세미콜론, 따옴표 등 스타일이 다 다르기 때문에Prettier가 이런 문제를 사전에 방지해주는 역할을 해주는 것이다. 🤔 왜 필요할까1️⃣ 팀 협업에서 코드 스타일 충돌을 방지할 수 있다.2️⃣ 코드 리뷰 시 스타일에 대한 코멘트를 줄이고 로직에만 집중할 수 있다.3️⃣ 자동화된 포맷팅으로 일관성 있는 코드를 유지할 수 있다.4️⃣ C.. [트러블슈팅] NPM에서 PNPM으로 🧩 문제 상황프로젝트를 초기에는 가장 보편적으로 사용되는 npm을 기본 패키지 매니저로 구성했었다.또한, TypeScript, TailwindCSS, React Query 등 다양한 라이브러리를 함께 사용하며 개발을 이어갔다. 그러나 기능이 점차 확장되고 의존성이 많아질수록, 아래와 같은 문제에 반복적으로 직면하게 되었다. 👾 npm install 실행 시, 20초 이상 소요되는 느린 설치 속도👾 node_modules 디렉토리의 지속적인 용량 증가👾 의존성 간 충돌로 인한 npm install 실패 및 Cannot find module 오류 발생👾 CI 환경에서의 빌드 시간 증가 및 불안정한 캐시 처리 이러한 문제들은 단순한 불편함을 넘어서개발 속도 저하로 이어졌다. 🔍 원인 분석처음에는.. [Frontend] 패키지 매니저의 동작 과정 목차 (OPEN)⚙️ 패키지 매니저는 어떻게 작동할까1️⃣ Resolution 단계 (누굴 설치할지 정하는 단계)2️⃣ Fetch 단계 (결정된 버전의 파일을 받아오는 단계)3️⃣ Link 단계 (코드에서 쓸 수 있게 연결해주는 단계)🔸 npm 방식🔸 pnpm 방식🔸 Yarn Plug’n’Play (PnP)✅ 총정리 ⚙️ 패키지 매니저는 어떻게 작동할까프론트엔드 개발을 하면서 yarn install이나 npm install은거의 반사적으로 치는 명령어 중 하나이다. 나는 문득, "이 명령어가 내부적으로 어떤 일을 하고 있는걸까?" 라는 궁금증이 생겼다. 결론부터 말하면 패키지 매니저는Resolution → Fetch → Link 라는 과정을 통해서우리가 쓸 수 있는 상태로 의존성을 준비해준다. .. [Frontend] 패키지 매니저 목차 (OPEN)🖼️ 렌더링이란⚙️ 브라우저의 렌더링 과정💡 렌더링 방식의 세 가지 분류⚖️ CSR vs SSR vs SSG 비교🙄 어떤 방식을 선택해야 할까?🔚 결론 📦 패키지 매니저란프론트엔드 개발을 처음 시작할 때,가장 먼저 접하게 되는 건React와 axios, react-router 등과 같은수많은 라이브러리들이다. 이러한 라이브러리들은 보통 아래와 같이import 또는 require 구문으로 사용한다.import React from 'react';import {sum} from '@/utils';const _ = require('lodash'); 처음에는 단순히 "저 이름만 쓰면 가져다 쓸 수 있는 거구나 ~"하고 넘겼지만,문득 "도대체 이 React는 어디서, 어떻게, 어떤 .. [Frontend] 렌더링의 3가지 방식: CSR, SSR, SSG 목차 (OPEN)🖼️ 렌더링이란⚙️ 브라우저의 렌더링 과정💡 렌더링 방식의 세 가지 분류⚖️ CSR vs SSR vs SSG 비교🙄 어떤 방식을 선택해야 할까?🔚 결론 🖼️ 렌더링이란앞선 포스팅에서 설명했었지만중요한 만큼 다시 한 번 짚고 넘어가자면,렌더링이란 HTML, CSS, Java Script를 해석해서 실제 화면 (UI)으로 그려주는 것이다. 조금 더 구체적으로 설명하자면,HTML 👉🏻 구조 담당CSS 👉🏻 스타일 담당Java Script 👉🏻 동작 및 로직 담당이 세 가지를 브라우저가 해석해서 시각적으로 보여주는 과정이 렌더링이다. ⚙️ 브라우저의 렌더링 과정브라우저는 아래의 5단계 과정을 통해 화면을 그린다. 1️⃣ DOM & CSSOM 생성브라우저가 HTML 파일.. 이전 1 ··· 10 11 12 13 14 15 16 다음
