상황프론트 뷰에서 반려동물 관리를 누르면 내가 등록한 반려동물 목록이 출력된다.그런데 목록에 반려동물의 이미지와 이름이 떠야하는데 뜨지 않았다.생성되는 목록 갯수를 보면 잘 출력이 되고, 백엔드에서도 확인해본 결과 결과는 잘 내려와졌다.뭐가 문제인지 하나하나 찾아보기로 했다! 현재 코드import { useEffect, useState } from "react";import { Link } from "react-router-dom";import { getPetsById } from "../api/auth";import basicPicture from "../assets/basicPicture.png";interface Pet { id: number; name: string; image: string..

상황S3까지 모두 세팅하고 이제 CreatePetInfo 컴포넌트에서 등록하기 버튼을 눌렀는데 스프링부트에서 Missing or invalid Authorization header에러가 나타났다. 딱봐도 헤더의 토큰에 뭔가 문제가 있는 상황. 정확한 확인을 위해 프론트에서 console.log("Authorization 쿠키 값: ", authCookie); 로 확인을 해봤지만 undefined가 나왔다.아니 쿠키를 확인해보면 잘 들어가 있는데 왜 뭐가 문제인 건가요,, 백엔드(스프링부트) 코드// 로그인@PostMapping("/login")public ResponseEntity login(@RequestBody UserCommonDto userCommonDto, HttpServletResponse r..

오늘은 application-dev.yml 파일의 적용방법에 대해 알아보자! application-dev.yml이란?application-dev.yml은 Spring Boot에서 개발 환경을 환경별로 따로 설정하기 위한 파일이다.프로그램이 실행될 때 기본적으로 application.yml 파일을 실행하는데 우리는 dev파일을 사용할 예정이기 때문에 몇가지 설정이 필요하다. 왜 application-dev.yml을 써야할까?가장 큰 이유는 환경별로 설정을 분리할 수 있기 때문이다!사실 application-dev라고만 써놨지만, application-prod.yml 을 사용해서 운영환경에 적용되는 설정을 할 수도 있다. 즉 여러 yml파일로 나누어 각 환경에 맞는 설정을 분리해서 관리할 수 있는 것이다. ..

https://1000end.tistory.com/8 - 1.  AWS S3 버킷만들기 1편에서 버킷을 다 만들어봤습니다. 이어서 설명해 보겠습니다! 그 다음으로 S3에 파일을 업로드하려면 IAM 사용자의 권한이 필요하기 때문에 사용자를 생성해볼 것이다. 1.  IAM 사용자 생성하기  S3 > IAM > 사용자 > 사용자 생성 선택 사용자 이름 입력 후 다음 선택 직접 정책 연결 선택 > AmazonS3FullAccess 선택 > 다음 선택생성한 사용자에게 S3 접근 권한을 부여하기 위해 AmazonS3FullAccess 권한을 추가해 주었다. 사용자 생성을 눌러 생성완료하기  이렇게 IAM 사용자가 잘 생성이 되었다! 2.  IAM 엑세스 키 생성하기Spring Boot 에서 S3에 접근 해서 이미지..

오늘은 AWS S3를 이용하여 이미지를 저장하는 방법 그 첫번째 시간으로 S3 버킷부터 만들어 볼 것이다. 중간중간 각 설정에 대해 정리도 해놓는 거라 조금 정신 없어 보일 수도 있겠으나,나중에도 두고두고 보면서 공부하기 위함이니 이해해주길 바란다! AWS S3 기본 개념1. 버킷 (Bucket)버킷은 S3에서 파일(객체)을 저장하는 컨테이너이다.하나의 AWS 계정당 100개의 버킷을 생성할 수 있다.S3의 저장 공간을 논리적으로 분리하는 역할을 한다.2. 객체 (Object)객체는 S3에 저장되는 파일 자체를 의미한다.객체는 파일 데이터 + 메타데이터(파일의 정보)로 구성된다.S3의 객체는 키(Key)라는 고유한 식별자로 구분된다. AWS S3 버킷 생성 S3를 사용하기 위해서는 가장 먼저 버킷을 만들..

프론트, 백엔드 회원가입 기능을 구현하고 회원가입 버튼을 눌렀을 때 아래와 같은 CORS 에러가 발생했다.그래서 이제 그 오류를 하나하나 해결해 보려고 한다.signup:1 Access to XMLHttpRequest at 'http://localhost:8080/api/auth' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 방법 1. 리액트 auth.ts파일의 백엔드 기본 ..