한바다

☑️ 리액트 로고 변경리액트 로고 변경은 public > index.html에서 진행한다[변경전 화면] [변경전 코드]public > index.html React  -> 이 부분에 로고를 실시간으로 변경하기 위해서png파일을 ico로 변경한다!! 파일을 변환해주는 사이트는 아래 두곳이 있다!https://convertio.co/kr/png-ico/ PNG ICO 변환 (온라인 무료) — Convertiopng 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요.convertio.cohttps://cloudconvert.com/png-to-ico PNG to ICO | CloudConvertCompress Mer..

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

☑️ 리액트 환경설정 에러파이널 프로젝트를 매일 깃에 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..

✅ 스프링부트에서 보내는 값과 리액트에서 받는 값이 다를 경우 오류[Cotroller.java]@PostMapping("/upload)public ResponseEntity insertProfile(@RequestParam("files") MultipartFile[] files, @RequestParam("username") String username ){ serivice.uploadProfile(files,username); return ResponseEntity.ok("이미지업로드성공");return response.jso..

✅ 게시판 제목 클릭 상세페이지이동 에러게시판에서 제목을 클릭 했을때 상세페이지로 이동하기 위해 스프링 부트에서 아래와 같이 코드를 추가 하였다[Post-mapper.xml] SELECT * FROM Post WHERE post_no = #{postNo}  [PostMapper.java]@Mapperpublic interface PostMapper { Post findPostById(@Param("postNo") int postNo); }[PostService.java]public interface PostService { Post findPostById(int postNo);}[PostServiceImpl.java]@Overridepublic Post findPostById(int postNo) ..