개발자겨려

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..

yarn 설치후 yarn 명령어 인식 안되어서 해결 방법을 찾아 아래처럼 실행 하였지만corepack enablecorepack prepare yarn@stable --activate Internal Error: EPERM: operation not permitted 에러 발생.. 🔥해결 방법시작 메뉴 > PowerShell 우클릭 > "관리자 권한으로 실행" 클릭.다시 아래 명령어 실행:corepack enablecorepack prepare yarn@stable --activate 이제 yarn -v로 Yarn이 설치됐는지 확인yarn -v

문자열일 경우🧠 private static boolean isPalindromeTowPointer (String str) { // 양쪽으로 비교 str = str.toLowerCase().replaceAll("[^a-zA-Z0-9]]",""); int left = 0; int right = str.length()-1; while(left= end) { return true; } if(str.charAt(start) != str.charAt(end)) { return false; } return isPalindromeRecursion(str, start..

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 서버가 ..

React - Spring 연동 시 Proxy 설정 프록시란?프록시(Proxy)는 "대리"의 의미로, 인터넷과 관련해서 쓰이는 경우, 특히 내부 네트워크에서 인터넷 접속을 할 때에, 빠른 액세스나 안전한 통신등을 확보하기 위한 중계서버를 "프록시 서버"라고 일컫는다. 클라이언트와 Web서버의 중간에 위치하고 있어, 대신 통신을 받아 주는 것이 프록시 서버이다. 왜 해야하는가?리액트의 기본 Port 넘버는 3000번, Spring은 8080번으로 서로 다르기 때문이다.CORS 문제가 생기므로 프록시 설정 필수. package.json에 아래와 같이 추가( 나같은 경우는 아래처럼 추가해도 안됐다..)"proxy": "http://localhost:8080" 원인(추측): 지금 이 문제는 proxy 때문이..

(프로젝트 생성했다는 전제하에) 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 // 프로필 목록 불러오는 컴포넌트│ ├──..

Docker를 사용할 때, 컨테이너 외부와 내부의 포트를 연결하려면 포트포워딩을 설정해야 한다. 그래야 컨테이너를 띄우고, Postman이나 브라우저에서 접근 가능!API를 테스트 시 포트포워딩 설정을 하지 않으면 ECONNREFUSED 오류가 발생할 수 있다.#빌드docker build -t profile-service .#빌드 후# -p 8080:8080 ➔ 호스트(내 컴퓨터) 8080포트를 컨테이너 8080포트에 연결# --name ➔ 컨테이너 이름 설정docker run -d -p 8080:8080 --name profile-service profile-service 추가로, dockerfile에 포트 오픈했는지 확인# 포트 오픈 (8080)EXPOSE 8080 Spring Boot 서버가 ..

fetch() 와 fetchOne() 비교기능 fetch() fetchOne()반환 타입List단일 객체 (결과 없으면 null)결과 없음빈 리스트 반환null 반환결과 2개 이상모든 결과 반환NonUniqueResultException 발생용도여러 결과가 예상되는 경우 또는 결과가 없을 수 있는 경우단건 조회가 확실한 경우 (예: Primary Key로 조회)주의사항 NonUniqueResultException 발생 가능성 고려