성빈

1. package.json 파일이 없는 경우 npm start 명령을 입력했지만, 아래와 같은 오류가 떴다.club> npm startnpm ERR! code ENOENTnpm ERR! syscall opennpm ERR! path C:\Users\...\WebPrograming TeamProject\club\package.jsonnpm ERR! errno -4058npm ERR! enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\Users\...\WebPrograming TeamProject\club\package.json'npm ERR! enoent This is related to npm no..

개발도중, 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가 ..

⚠️ useHistory는 react-router 버전5까지 사용할 수 있다. react-router-dom 버전6로 업데이트 되면서 useHistory가 useNavigate로 바뀌었다. useHistory훅리액트에서 URL 주소를 변경할 때 사용하는 훅이다.리액트 특성상, URL변경없이 내부 컴포넌트만 변경시켜 화면을 바꿔줄수 있지만, 핵심 컴포넌트들이 변경될 때 URL 주소를 같이 변경시켜주면 사용자 친화적인 페이지가 될 수 있다. useHistory() 사용하기import { useHistory } from "react-router-dom";export default function SelectExam() { const history = useHistory();}const handleSubmit..

react-router-dom를 설치하니, npm install react-router-dom 아래와 같은 오류가 발생하였다.     아래 명령어로 버전을 확인했더니, 버전6을 사용하고 있는 것을 확인할 수 있었다. npm list react-router-dom    "react-router" 패키지에는 여러 기능과 함수들이 내보내기 되어 있다. 하지만 여기에 나열된 오류 메시지들은 "react-router-dom" 패키지에서 일부 내보내기를 찾지 못했다는 것을 나타낸다.예를 들어, 이 오류 메시지에서는 'react-router' 패키지에서 AbortedDeferredError, NavigationType, createPath등의 내보내기를 찾지 못했다고 말하고 있다. 하지만 이러한 내보내기들은 'rea..

axois와 fetch 모두 HTTP 요청을 보내는 데 사용되는 도구이다. axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공한다.✅ axiosNode.js, 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변환해준다.[장점]response timeout 처리 방법이 존재한다.요청을 중도 취소, 응답시간 초과 설정 등의 기능Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다.크로스 브라우징 최..

아래와 같은 document.execCommand는 더 이상 권장되지 않는다. document.execCommand("bold"); 따라서, 아래와 같은 형식으로 제작하였다. import React, { useState } from "react"; export default function EditExam() { const [fontSize, setFontSize] = useState("12px"); const [uploadedImage, setUploadedImage] = useState(null); const wrapTextWithSpan = (action, value) => { const selection = window.getSelection(); if (!selection.rangeCount) ..

키보드 이벤트의 isComposing 키워드를 입력받을 때, 한글을 입력하면 검색어의 마지막 글자가 딸려오는 문제가 발생했다. 영어를 입력했을 때에는 문제가 되지 않지만, 한글을 입력했을 때에만 문제가 발생했다. 한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자이고, 영어는 조합문자가 아니다. 따라서 한글을 입력할 때 이 글자가 조합중인건지, 조합이 끝난 상태인지 파악하기 어렵기 때문에, Enter키를 입력하면 이벤트가 2번 발생하게 되며, 영어를 입력할 때에는 발생하지 않고, 한글을 입력할 때에만 발생하게 된다. 📌 또한 이 문제는 크롬 브라우저에서 한글을 사용하는 경우에만 문제가 발생한다. 키보드 이벤트에는 isComposing이라는 입력문자가 조합문자인지 아닌지를 boolean값으..

axois와 fetch 모두 HTTP 요청을 보내는 데 사용되는 도구이다. axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공한다. ✅ axios Node.js, 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리 비동기로 HTTP 통신을 할 수 있으며 return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다. HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변환해준다. [장점] response timeout 처리 방법이 존재한다. 요청을 중도 취소, 응답시간 초과 설정 등의 기능 Promise 기반으로 만들어졌기 때문에 데이터 다루기 편리하다. 크..