개발자 도전기

MUI Grid2 사용 시 children이 lnvalid prop이라고 나오는 경우 {hidden || }을{!hidden && } 으로 변경 끗

VITE를 사용하고 있다면 REACT_APP_이 아닌 VITE_ 를 앞에 작성해주어야 한다 사용시에는 import.meta.env로 접근! .gitignore에 추가했는데도 commit 목록에 뜬다면 이 문제일 가능성이 높다. 그래도 undefined가 뜬다면 .env 파일 위치를 src가 아닌 가장 최상단 폴더로 옮겨보자!

Lifting State Up이란 ? React는 단방향 데이터 흐름의 원칙을 적용합니다 이에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있습니다 따라서 하위 컴포넌트가 상위 컴포넌트의 상태를 업데이트하기 위해서는 상위 컴포넌트의 상태를 변경하는 함수 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행해야 합니다 이를 Lifting State Up이라고 합니다  useEffect 무한루프댓글을 작성하면 새로고침을 하지 않아도 댓글 목록을 불러오는 기능을 추가하려고 했습니다export function CommentComponent(props) { return ( );} export function Co..

axios.postForm React와 Spring은 응답/요청하는 과정에서 데이터를 JSON 형식으로 전달하기 때문에 파일을 전송하려면 파일 업로드시 form 데이터 형식으로 보내야 합니다 일반 post 요청으로 보낼 경우 form 데이터 형식으로 전달하려면 다음과 같이 config에 타입을 명시해서 보내야 합니다axios.post(`/api/board/write`, { headers: { 'Content-type': 'multipart/form-data', }, title : '제목', content : '내용' files : files });  post() 메서드 대신 axios.postForm() 메서드를 사용하면  config를 따로 작성할 필요 없이  fo..

1. 페이지 번호를 넣을 배열을 생성합니다 let pageNumbers = []; for (let i = 1; i  2. 배열에 담긴 값을 버튼에 매핑합니다. 컴포넌트는 Chakra ui를 사용했습니다.onClick 이벤트에 있는 handlePage(pageNumber)로 버튼의 페이지 값을 전달합니다 {pageNumbers.map((pageNumber) => ( handlePage(pageNumber)}> {pageNumber} ))}   3. onClick 이벤트로 받아온 pageNumber를 searchParams에 추가합니다.이후, 쿼리스트링이 포함된 경로로 이..

useParams과 useSearchParams은 React Router와 함께 사용합니다. useParams()/user/:id 와 같은 다이나믹 URL(또는 동적 경로)을 사용할 때 사용합니다import { useParams } from 'react-router-dom';function UserProfile() { const { userId } = useParams(); // { userId: '123' } 형태로 파라미터를 추출 return User ID: {userId}; 파라미터로 전달된 userId를 받아 User ID : 123을 출력합니다 useSearchParams() 쿼리스트링 형식(?name=son&age=33)의 파라미터를 다루는 데 사용합니다import { useSearchPa..

Axios는 백엔드와 프론트엔드의 통신을 쉽게 하기 위한 라이브러리로, 프레임워크에서 ajax를 구현하기 위해 사용합니다. AXIOS를 사용하면AJAX 방식으로 응답, 요청할 수 있습니다자바, 자바스크립트 객체를 자동으로 JSON 형식으로 변환해줍니다 npm 설치npm install axios axios를 사용하기 위해 설치해줍니다 Proxy 설정React의 포트 번호와 스프링의 포트 번호가 다르기 때문에 vite.config.js 파일에서 다음과 같이 설정합니다server: { proxy: { "/api": { target: "http://localhost:8080", }, }, }, /api 경로로 요청이 오면 :8080 포트로 요청을 보냅니다 Get 요청a..

구조 분해 할당구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식입니다  const a = { name: "son", age: 33, }; const aName = a.name; const aAge = a.age; console.log("aName", aName); // son console.log("aAge", aAge); // 33 위와 같이 객체의 속성값을 하나하나 대입하는 대신에 const { name: bName, age: bAge } = a; console.log("bName", bName); // son console.log("bAge", bAge); // 33 구조 분해 할당 구문으로 손쉽게 ..