성빈

개발도중, API에 접근하려하자 CORS 정책에 의해 막혔다는 에러가 발생했다.   시작하기에 앞서, CORS에 대해 학습하고자 한다. 🔺 CORS(Cross-Origin Resource Sharing)교차 출처 리소스 공유도메인이 다른 서버끼리 리소스를 주고 받을 때 보안을 위해 설정된 정책 일반적으로, 프론트엔드와 백엔드가 협업하면서 각자 따로 서버를 띄우게 되었을 경우에 발생한다. 서로 다른 React 서버(3000포트)와 Springboot(8080포트) 서버가 리소스를 주고 받으려 한다면 포트번호가 달라 서로 다른 출처로 판단되어 CORS 위반 에러가 발생한다. 📌 Origin(출처)그렇다면 같은 출처와 다른 출처를 어떻게 구분할 수 있을까?Protocal + Host + Port 가 같으면..

글자 사이에 삽입되어 있는 이미지 태그는 어디에 이미지가 들어가는지 표기하기 위한 '이미지 마킹'이다. 이를 라이브러리를 통해서 json파일을 리액트로 렌더링 해서 한번에 처리하면 좋겠지만 우리가 생각한 것처럼 되는 라이브러리를 찾지 못했다. 그래서 이를 정규 표현식으로 직접 파싱해서 우리가 원하는 img 태그로 전환하려 한다. 그렇게 만들게 된 함수는 아래 코드와 같다.//HTML 문자열에 포함된 태그를 실제 이미지로 변경하는 함수 const parseImageTag = (question) => { // 정규식을 사용하여 문자열을 찾는다. const imgRegex = //g; // 대체할 이미지 태그로 교체한다. return question.replace(imgRegex, ..

📚 PDF 전환 라이브러리프로젝트 진행 중, 자체 어플리케이션에서 문서를 직접 PDF 형식으로 다운로드하는 기능을 제공하기 위해 PDF 전환 라이브러리를 조사하게 되었다. 1️⃣ jsPDF 라이브러리 + html2canvas 라이브러리jsPDFhtml, 이미지, canvas 객체를 PDF로 변환해주는 라이브러리HTML 요소를 직접적으로 PDF로 변환하는 기능은 제공하지 않고텍스트, 이미지 등의 기본적인 요소를 PDF에 추가하는 기능만을 제공하기 때문에 html2canvas 라이브러리와 함께 사용된다.html2canvashtml 객체를 canvas로 변환해주는 라이브러리HTML 요소를 캔버스 요소로 변환하는 기능을 제공한다.캔버스 요소는 그 자체로 이미지 데이터를 가지고 있기 때문에, 이를 jsPDF가 ..