2025/04 10

CORS (Cross-Origin Resource Sharing) 오류 해결 방법

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

[React] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

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

General/React⚛️ 2025.04.28

Spring + React + Typescript연동하기

(프로젝트 생성했다는 전제하에) 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🐳] 포트포워딩(container port forwarding)

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

JPAQueryFactory의 fetch() 와 fetchOne() 비교

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

[LeetCode] TwoSum

문제 설명:정수로 이루어진 배열 nums와 하나의 정수 target이 주어졌을 때,배열 안의 두 숫자를 더해서 target이 되는 두 숫자의 인덱스를 찾아서 반환하세요.각 입력에는 딱 하나의 정답만 존재한다고 가정할 수 있습니다.같은 요소를 두 번 사용할 수는 없습니다.정답은 어떤 순서로든 반환해도 됩니다. 시간복잡도: O(n²) (가장 비효율적이다) public static int[] twoSum(int[] nums, int target) { int[] result = new int[2]; for (int i = 0; i 주어진 nums의 정렬이 안된경우 HashMap 사용 시간복잡도: O(n) public static int[] twoSum(int[] nums,..

id 필드에 Long 타입을 사용하는 이유

@Entitypublic class Book { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) // auto increment private Long id = null; @Getter @Column(nullable = false) private String name;}Long 타입 vs long 타입" data-depth="1" data-heading="">Long 타입 vs long 타입Long (Wrapper 클래스):Long은 long 기본형 타입의 래퍼(Wrapper) 클래스입다.객체이므로 null 값을 가질 수 있다 .Long 객체는 힙(Heap) 메모리에 저장된다.컬렉션(Collections)이나 제네릭(Ge..

General/Java☕️ 2025.04.16

JDK와 JRE의 차이점

JDK (Java Development Kit)JDK는 자바 애플리케이션을 개발하기 위한 도구 모음으로, 컴파일러(javac), 디버거, JRE 등을 포함하고있다.JDK는 JRE를 포함하고 있어 자바 프로그램을 개발하고 실행하는 데 필요한 모든 것을 갖추고 있다. ○ 역할 : 자바 애플리케이션 개발 ○ 포함 요소 : JRE + 개발도구 (javac, javadoc, jdb 등) JRE (Java Runtime Environment)JRE는 자바 프로그램을 실행하기 위한 환경을 제공하며, JVM, 클래스 라이브러리, 런타임 라이브러리 등을 포함.JRE만 설치하면 자바 프로그램을 실행할 수 있지만, 개발은 할수없다. ○ 역할 : 자바 애플리케이션 실행 ○ 포함 요소 : JVM + 자바 클래스 라이브..

General/Java☕️ 2025.04.15

@Transactional 과 Rollback규칙 (feat. Checked Exception , Unchecked Exception)

@Transactional 어노테이션과 롤백 규칙 Spring의 @Transactional 어노테이션은 AOP(Aspect-Oriented Programming)를 사용하여 트랜잭션을 관리한다. @Transactional이 적용된 메서드에서 예외가 발생하면, Spring은 해당 예외가 롤백을 유발해야 하는지 확인하는데 기본적으로 Spring은 Unchecked Exception (RuntimeException 또는 Error)이 발생했을 때만 롤백한다. Checked Exception에 대해서는 롤백을 수행하지 않는데, 이는 Checked Exception이 비즈니스 로직에서 복구 가능한 예외로 간주되기 때문. 즉, 개발자가 Checked Exception을 처리하기 위한 별도의 로직을 구현했을 것으로..