개발자겨려

오류 해결 : 아래와 같이 수정 (참고 링크: https://github.com/GoogleChrome/web-vitals/issues/482)import { MetricType } from "web-vitals";const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void) => { if (onPerfEntry && onPerfEntry instanceof Function) { import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => { onCLS(onPerfEntry); onINP(onPerfEntry); onFCP(onPerfEntry);..

ESLintESLint는 ES(ECMAScript)와 Lint의 합성어로, 자바스크립트를 분석하여 오류나 버그를 찾는데 도움을 주는 정적 분석도구 1. 설치 yarn add --dev eslint eslint-config-prettier eslint-config-prettier : eslint에서 prettier와 충돌할 수 있는 rule을 끔 2. ESLint 설정 파일을 생성하고 초기 설정을 도와주는 마법사(wizard) 를 실행npx eslint --init 위의 과정이 끝나고 설치되면 eslint.config.mjs 파일이 만들어짐 3. eslint.config.mjs 파일 설정import js from "@eslint/js";import globals from "globals";import p..

PrettierPrettier는 코드 포맷터로 우리가 작성한 코드를 가독성 좋게 만들어주는 확장 도구이 도구를 사용하면 여러 개발자들의 코드 스타일을 통일하여 균일한 코드 품질을 가질 수 있게 만들 수 있다. 1.프리티어 설치yarn add --dev prettier 2. ".prettierrc" 파일 생성 3. prettierrc 파일에 아래와 같이 설정 추가{ "arrowParens": "always", "bracketSameLine": false, "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxSingleQuo..

Enum ValidationEnum Validation은 Enum 타입의 데이터가 유효한 값인지 확인하는 과정을 의미한다. 이는 주로 사용자 입력 또는 API 요청에서 Enum 값을 받을 때, 해당 값이 Enum에 정의된 값 중 하나인지 검증하는 데 사용된다. 🧩 Enum Validation의 필요성데이터 무결성 유지: Enum Validation을 통해 유효하지 않은 값이 시스템에 들어오는 것을 방지하여 데이터의 무결성을 유지할 수 있다.코드 안정성: Enum Validation은 런타임 에러를 줄이고, 코드의 안정성을 높이는 데 기여한다.가독성 향상: Enum을 사용하면 코드의 가독성이 향상되며, 관련된 상수들을 논리적으로 그룹화할 수 있다. 🧩 Enum Validation 방법 Custom ..

CORS (Cross-Origin Resource Sharing)란?CORS는 웹 페이지가 다른 도메인의 리소스에 접근할 수 있도록 브라우저에게 권한을 부여하는 체제이다. 브라우저는 보안상의 이유로 다른 출처(Origin)의 리소스에 대한 HTTP 요청을 제한하는데, 이때 출처는 프로토콜, 호스트, 포트를 포함한다. 즉, CORS는 웹 페이지가 다른 출처의 자원을 요청하는 것을 제한하는 보안 메커니즘이라고 생각하면 된다. 나의 경우에는React는 localhost:3000Spring Boot는 localhost:8080서로 포트가 다르기 때문에 "다른 출처(Cross-Origin)"로 인식함.특히 PUT, POST 요청은 CORS preflight(사전 요청) 검사를 거치는데, 이걸 Spring 서버가 ..

(프로젝트 생성했다는 전제하에) 1. React 프로젝트 생성npx create-react-app profile-frontend --template typescript 2. 필수 라이브러리 설치cd profile-frontendnpm install axios react-router-dom 3. 프로젝트 기본 구조 설계 profile-frontend/├── public/├── src/│ ├── api/ │ │ └── memberProfileApi.ts // API 호출 함수 모음│ ├── components/ │ │ └── MemberProfileList.tsx // 프로필 목록 불러오는 컴포넌트│ ├──..