한바다

☑️WebConfig란?WebConfig파일은 웹 구성에 대해 지정하는 내용이 담겨 있는 설정 파일이다.스프링부트에서는 WebMvcConfigurer 인터페이스를 구현하여 WebConfig 파일을 작성한다.'WebConfig'클래스는 보통 '@Configuration'어노테이션을 사용하여 설정 클래스임을 명시한다.import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpubl..

✅ build.gradle x 표시전일까지 스프링부트가 정상 실행 되었다가 다음날 스프링부트 재 실행시 build.gradle에 x표시가 되어스프링부트를 실행할 수 가 없었다.이럴경우 build gradle을 리프래쉬 해야 하는데 리프래쉬 해줘도 문제는 해결되지 않았다.확인 시, 폴데어 마우스 우클릭하여 >Properties>Gradle 들어가면 아래와 같이 Override workspace setting 에체크가 되어 있었다.이전에 포스팅한 내용을 참고하면 해당부분은 체크 해제를 해주었는데 스프링부트 내부에서 저절로 체크가 다시 살아났다!!  다시 체크 해제를 해주고 저장해주고 리프래쉬를 해주니 x표시는 사라졌다 ✔️ 두번째 에러 메세지Error starting ApplicationContext. To..

☑️ 리액트에서 프록시 설정(CORS 설명)리액트 애플리케이션은 일반적으로 'localhost:3000'에서 실행된다. 하지만 백앤드는 다른 포트에서 실행이될 수 있기 때문에 이 경우, 리액트에서 API요청을 백앤드 서버로 보내려면 CORS 문제 발생할 수 있다.여기서 CORS란(Cross-Orbin-Resource Sharing) 웹애플리케이션이 다른 도메인에서 제공하는 리소스에안전하게 접근할 수 있도록 해주는 보안기능으로 쉽게말해 웹사이트에서 다른 웹사이트의 데이터를 안전하게 가져올 수 있도록 도와주는 규칙이다. 따라서 프론트앤드(리액트)와 백앤드(스프링부트)를 연결하기 위해 프록시는 리액트 개발서버가 백엔드 서버에요청을 대신 보내주도록 설정하는 것이다(설정 방법)백앤드(스프링부트) applicati..

✅  XML , JSON, CSV 정리우선 세가지를 구분해서 정리 해보기로 한다! XML(eXtensible Markup Language) - html태그 형식으로 된 데이터- 데이터 전송 및 저장을 위해 설계된 마크업 언어- 태그를 사용하여 데이터 구조화- 트리구조로 데이터를 표현(계층적 구조)- 사람이 읽기 쉽고, 기계가 파싱하기 쉬움(파싱이란 복잡한 데이터나 텍스트를 컴퓨터가 이해할 수 있는 형태로 변환하는 것)- 대용량 데이터 처리에 적합하지만, 구문이 비교적 복잡함 JSON = 자바스크립트 객체 문법으로 데이터를 구조화(JavaScript Object Notation) [ {  } ]- 경량 데이터 교환 형식 : 단순하고 가벼움- 사람이 읽고 쓰기 쉬우며, 기계가 변환하고 생성하기 쉬움- 키-값..

☑️ 리액트 환경설정 에러파이널 프로젝트를 매일 깃에 push를 하고 있었는데 해당파일을 다운로드하여 실행 시켰더니아래와 같은 에러코드가 발생하였다.[에러코드]Compiled with problems:×ERROR in ../node_modules/react-dom/cjs/react-dom.development.js 21:16-32Module not found: SyntaxError: C:\Users\user1\Final\node_modules\react\package.json (directory description file): SyntaxError: C:\Users\user1\Final\node_modules\react\package.json (directory description file): Syn..

☑️navigate 란 ?React Router에서 제공하는 기능으로, 사용자를 특정 경로로 이동시키는 데 사용[예시1]import {useNavigate} from 'react-router-dom';const navigate = useNavigate(); navigate(`/chicken-detail/${chicken.id}`)}> 상세보기 [예시2] import {useNavigate} from 'react-router-dom'; const navigate = useNavigate(); axios.post("/") .then(response => { alert("답변이 등록되었습니다.") navigate("/AdminObo"); [예시3] import {useNavi..