컴퓨터/React10 [Next.js] 트러블 슈팅 - 외부 호스트 이미지 삽입(Error: Invalid src prop (https://...) on `next/image`, hostname "..." is not configured under images in your `next.config.js`) next.js에서는 각종 기능을 제공하는 Image태그를 빌트인으로 제공한다. 이때 Image에 외부 호스트의 파일을 넣으려면 설정이 필요하다. 나 같은 경우 이미지 클라우드 서버를 허용해줘야한다. 즉 next.config.js에를 아래처럼 구성한다 const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "res.cloudinary.com", port: "", pathname: "/내 경로 패턴/내 경로 패턴2/**", }, ], }, }; module.exports = nextConfig; 2024. 1. 20. [React] Axios로 폼 데이터 제출 예제 코드/파일 제출 폼 데이터 제출 예제 코드이다. name으로 접근하여 파일을 받아와 제출한다. const onSubmit = (e) =>{ e.preventDefault(); let formData = new FormData(); formData.append('uploadFile', document.frm.uploadFile.files[0]); // send axios.post("http://localhost:3000/fileUpload", formData) .then(res=>{ //처리 }) .catch(e=>{ alert(e); }) } 위 코드는 아래의 폼에 frm이라는 name으로 접근하여 uploadFile의 name으로 접근한 후 파일을 받아와 제출한다. 아래 형태로 @RequestParam으로 값을 받을 .. 2023. 8. 17. [React] 리액트 필수 훅 예제로 알아보기 리액트 훅 Hook은 갈고리라는 의미이다. 리액트의 함수형 컴포넌트에서 상태(state)와 생명주기 메서드(lifecycle methods)를 관리하기 위한 방법을 제공한다. 원래 존재하는 기능(함수, 컴포넌트 등)에 갈고리처럼 끼어들어가 존재감을 뽐낸다고 하면 된다. 즉, 훅은 class, 함수를 따로 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. 기본 Hooks useState : 상태를 관리하기 위한 훅, 즉 변수 값을 관리한다. useEffect : 사이드 이펙트를 처리한다. React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 정의한다. useContext : 컴포넌트 트리 상에서 전역적인 데이터를 공유하기 위한 훅이다. 추가 Hooks useRe.. 2023. 8. 10. [Redux] 리덕스의 개념 잡기/아직도 리덕스를 모른다면 리덕스의 개념 리덕스는 대표적인 상태관리 툴 중 하나이다. 사용하는 예는 이렇다. 리액트에서 컴포넌트간 데이터를 공유해야한다. 그런데 계층 구조가 복잡하여 부모의 값이 프롭을 통해 두 번 세 번 전달된다. 매우 복잡하며 중간에 프롭의 값이 어떻게 변화할지 예측이 힘들다. 이럴 때 리덕스를 사용한다. 리덕스의 핵심 가치 중 하나는 immutable, 불변이다. 자바스크립트의 모든 객체들은 기본적으로 불변하지 않다. 즉, mutable하다. 아래 코드를 보자. const obj = { a: 1, b: 2 } // still the same object outside, but the contents have changed obj.b = 3 const arr = ['a', 'b'] // In the same w.. 2023. 8. 10. 이전 1 2 3 다음
