본문 바로가기

분류 전체보기372

[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.
[면접 준비] 데이터 베이스 면접 질문과 답변 저는 JAVA 백엔드 개발자, 혹은 React 프론트 엔드 개발자를 목표로 하는 취업 준비생입니다. 면접에서 대답할 주요 관심 주제는 Spring, Java, React, Next.js, JavaScript, TypeScript, OS, Network, DB, Docker입니다. 제가 사용해본 기술 중 통합, 정리한 면접 관련 내용을 정리합니다. 틀린 내용이 있다면 댓글로 지적해주시길 바랍니다. 감사합니다 ❓ 데이터 베이스가 뭔지 설명해주세요. 더보기 데이터베이스는 일정한 규칙에 의해 구조화된 데이터의 모음이다. 데이터베이스는 릴레이션(rdbms의 테이블), 어트리뷰트(rdbms의 열), 도메인(어트리뷰트의 값)으로 이루어져 있다. 이러한 데이터베이스를 제어 관리하는 시스템을 DBMS라고 부른다. DBM.. 2024. 1. 10.
[Spring] 트러블 슈팅 -스프링 부트 axios 프리플라이트 에러/cors에러 스프링부트 axios 통신시 에러 문제 상황 axios.post로 통신할 때 헤더가 셋되어있지 않아 통신 에러가 지속적으로 발생하였다. 재밌는 것은 allowAll로 설정한 컨트롤러에서는 정상 통신이 된다는 것이었다. 문제가 되는 지점은 axios.post로 요청을 보낼 때, 토큰이 유효할 경우에만 도달 가능한 컨트롤러와 통신을 할 때였다. 또한 신기한 점은 axios.get으로 요청을 할 때는 전혀 에러가 발생하지 않는다는 것이다. 분석 오랜 시간 끝에 에러 흐름이 아래와 같이 발생한다는 것을 깨달았다. 1. axios에서 get은 프리플라이트를 날리지 않지만 post요청을 할 시 프리플라이트를 날리게 된다. 이 프리플라이트가 정상 통신을 했을 경우에 본 요청이 날아가게 된다. 이 프리플라이트는 OPT.. 2024. 1. 9.
[면접 준비] 프론트엔드 면접 질문과 답변 저는 JAVA 백엔드 개발자, 혹은 React 프론트 엔드 개발자를 목표로 하는 취업 준비생입니다. 면접에서 대답할 주요 관심 주제는 Spring, Java, React, Next.js, JavaScript, TypeScript, OS, Network, DB, Docker입니다. 제가 사용해본 기술 중 통합, 정리한 면접 관련 내용을 정리합니다. 틀린 내용이 있다면 댓글로 지적해주시길 바랍니다. 감사합니다 ❓ 브라우저에 대해서 설명해주세요. 더보기 브라우저는 다양한 리소스 컨텐츠를 gui를 통해 유저에게 보여주는 소프트웨어이다. 즉 브라우저의 주요 기능은 선택한 웹 리소스( HTML문서이지만, PDF, 이미지 등의 컨텐츠)를 서버에 요청하여 브라우저 창에 표시하는 것이다. 브라우저가 HTML을 해석, 표.. 2024. 1. 8.

티스토리툴바