에러 노트

[JS] 룸 생성 모달에서 날짜 클릭 없이 바로 생성하면 에러 발생

2022.10.3 (월) 작성 1. 에러❗️ 룸 생성 모달에서 룸 이름만 작성하고 바로 룸 만들기를 클릭하면 날짜 관련 오류가 발생했다. 2. 상황 에러 메시지 3. 시행착오 확인해보니, Date 객체를 받아와서 날짜 포맷(yyyy-MM-dd) 형식으로 바꿔주는 작업에서 에러가 발생했다. const setDateStr = (dateObj) => { return ( dateObj.getFullYear() + '-' + (dateObj.getMonth() + 1 < 9 ? '0' + (dateObj.getMonth() + 1) : dateObj.getMonth() + 1) + '-' + (dateObj.getDate() < 9 ? '0' + dateObj.getDate() : dateObj.getDate()..

[React] svg 파일 불러오기가 안 돼요!

2022.9.27 (화) 작성 1. 에러❗️ 리액트에서 svg 파일 자체를 import 시키면 파일을 불러오지 못한다. 2. 상황 svg 파일 링크를 img 태그의 src로 가져다 쓰는 것과, svg 코드 그대로 복사해 삽입하는 것은 문제가 없었다. 하지만 svg 파일을 자체를 import 시키고 싶을 때, 다음과 같이 작성하니 error 가 발생했다. import CancelIcon from '../images/cancel-icon.svg'; ... const Modal = () => { ... return ( ) } 3. 해결💡 다음과 같이 import 시키면 svg 파일을 리액트 컴포넌트처럼 사용할 수 있다. import { ReactComponent as CancelIcon } from '../i..

[React] styled-components에서 background-image 가 안 들어감

2022.7.27 (수) 작성 1. 에러❗️ styled-components에서 background-image로 이미지를 넣었는데 뜨지 않는다. 2. 상황 React 앱에서 styled-components 로 스타일링 중, 아래 같이 코드에 이미지 경로를 넣으면 배경 이미지가 안 뜬다. background-image: url('../images/roomDetail/02_rooftop_1x_w3000.png'); 3. 해결💡 styled-components에서 배경 이미지를 넣을 때는 두 방법 중 하나를 쓰면 된다. 1. src 폴더 안에 images 폴더가 있을 때 //이미지 임포트 시켜주고 import rooftopImg from '../images/02_rooftop_1x_w3000.png'; con..

[HTML] SVG 크기 조절은 어떻게 하죠?

2022.9.4 (일) 작성 1. 에러❗️ svg의 속성값으로 들어간 width와 height를 변경하니, 아이콘이 잘려서 표시된다. 2. 상황 1. 구글 아이콘에서 아이콘을 svg로 다운 받았다. 2. 그리고 코드에 삽입해주었다. (리액트) const OutIcon = () => ( ); //리액트 jsx 코드 ... // ( ); 3. 해결💡 viewBox 속성을 사용해주면 된다! viewBox MDN 참고. 사실 mdn 내용이 잘 이해되지 않았다. 그래서 실제 코드로 실험해보고, 내 식대로 뷰박스에 대해 설명해보자면... 👉 viewBox는 아이콘의 실제 크기와 위치(보이는 부분)를 정의한다. 👉 viewBox 속성은 min-x, min-y, width, height를 순서대로 써줘야 한다. 👉 즉..

[React] 리액트 build 폴더의 index.html 이 브라우저에서 안 떠요!

2022.8.26 (금) 작성 1. 에러❗️ 리액트 build 폴더의 index.html 이 브라우저로 열리지 않는다. 2. 상황 CRA(create-react-app)으로 리액트 앱을 만들었다. npm run build 로 build 폴더가 생겼다. build 폴더의 index.html 파일을 브라우저로 여니, 화면이 로드되지 않는다! 3. 시행착오 build 를 했을 때, 터미널에 다음과 같은 메시지가 떴다. The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You ma..

[React] CRA 에서 proxy 가 동작하지 않아요!

2022.8.25 (목) 작성 1. 에러❗️ create-react-app으로 앱을 만들고, proxy 설정을 한 뒤 axios로 GET 요청을 보냈다. 그런데 응답이 안 오고 내 리액트 앱의 html 문서가 뜬다! 2. 상황 CRA로 리액트 앱을 만든 뒤, 아래처럼 package.json에 프록시 설정을 주었다. 그리고 다음과 같이 단순한 앱을 구성해 응답을 받아오게 만들었다. import { useState } from "react"; import axios from 'axios'; function App() { const [data, setData] = useState(""); const handleClick = () => { axios.get("/") .then(res => { console.lo..