개발자R의 삶

이미지를 백엔드에서 presignedUrl을 만들어서 프론트엔드로 보내주고 화면에 뿌려주는 상황. 화면에서는 분명 이미지가 잘 보이는데 html2canvas, jspdf 를 사용해서 pdf로 다운받을 때에는 이미지가 보이지 않았다. 이미지 크기만큼 자리를 차지하는거 보면 분명 element를 인식을 하는 것 같았다. 그런데 어떠한 에러도 나지 않고 그냥 안보였음. 사진 설명과 함께 이미지가 아래에 나와야 했음. 근데 이미지 부분이 하얗게 나오는 현상.. 구글링 열심히 한 결과 S3 CORS의 문제였다는걸 알게되었음. https://github.com/eKoopmans/html2pdf.js/issues/141 위 url 참고 일단 S3에서 CORS 를 허용하도록 셋팅해야한다. 이건 내가 한건 아니라서 설명..

query param은 url에 그냥 넣어주면 되고, request param은 { params : { ....} } 형태로 넣어주면 된다. axios .get(`http://localhost:8080/api/v1/user/${USER_NO}/history`, { params: { history_type: value, start_date : .... .... }, }) .then((response) => { setHistoryList(response.data); }); request param이 없는 경우 아래처럼 하면 된다. axios .get(`http://localhost:8080/api/v1/user/${USER_NO}/history`) .then((response) => { setHistoryL..

mui 라이브러리를 사용하지 않고 처음부터 끝까지 AutoComplete 를 구현했다. 생각보다 신경쓸게 많았다. 제일 빡셌던건 방향키로 목록을 탐색할 때 스크롤을 자연스럽게 움직이게 하는 것이었다. 처음엔 자바스크립트 기본 함수인 scrollIntoView() 를 사용해볼까 했는데 내가 생각하는거랑 전혀 다르게 움직여서 그것까지 직접 구현했다. (그래서 코드가 좀 더러움;) AutoComplete.tsx import { useState, useRef, useEffect } from "react"; import { getLocalStorageValue } from "./utils/localstorage.util"; import styles from "./AutoComplete.module.css"; im..

어떻게 검색을 해야하는 건지, 검색을 해도 잘 안나와서 어찌저찌 개발을 했다. 앱을 쓰다보면 상단 타이틀이 페이지마다 바뀌는 UI를 본적이 있을 것이다. 예를 들어 카카오톡 같은 경우에도 친구 / 채팅 / 뷰 이런식으로 현재 페이지 이름이 상단에 나와있다. 그런데... 레이아웃은 아래처럼 되어있다. 페이지는 여기만 바뀌는데 의 속성을 어떻게 바꿀 수 있지? {props.children} 열심히 생각하다가, react의 Context API를 사용해야하나, redux를 사용해야하나 고민을 했고 redux를 활용하기로 했다. 우선 store 폴더를 먼저 만들어주었다. store 폴더에 index.js 파일과 title.js 파일을 만들어준다. title.js는 state를 관리하는 곳이고, index.js는..

리액트로 프로젝트 진행 중... 하단 네비게이션을 만들어야했다. 모바일화면으로 구성을 하려고 해서 찾아보니 react navigation 라이브러리가 있었는데 React Native 전용이었다. 그래서 그냥 만듦! 위와 같은 모양을 만드는 것이 목표! BottomNav.js import { NavLink } from "react-router-dom"; import classes from "./BottomNav.module.css"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHome, faListDots, faCirclePlus, faGear, faUsers } from "@fortawesome/free-sol..

1. 설치 https://fontawesome.com/v6/docs/web/use-with/react/ Set Up with React Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com 위 사이트에서 npm 명령어로 설치를 해준다. 사용 방법은 두가지로 나뉜다. 한 컴포넌트에서만 쓰는 방법, 글로벌로 쓰는 방법. 나는 우선 하단바에서만 사용할거기 때문에 individual 방식을 사용했다. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' //사용할 아이콘을 임포트 해준다. import {..

새로운 토이프로젝트를 시작하면서 프로젝트를 만들었다 create-react-app을 이용해서 띄웠는데... react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot 콘솔에 위와 같은 메시지가 떴다. 리액트18버전부터는 ReactDOM.render() 방식을 쓰지 않는다는 것! 이게 기존 코드였다면.... impor..

https://github.com/flatlogic/one-react-template/ GitHub - flatlogic/one-react-template: Flatlogic One - React Template and Theme Flatlogic One - React Template and Theme. Contribute to flatlogic/one-react-template development by creating an account on GitHub. github.com 우측 상단에 Use this template 을 눌러서 내 레포지토리로 가져올 수 있다. node 16버전을 쓰고 있었더니 설치가 잘 안됨... 옛날 노드 모듈을 많이 쓰고 있는 템플릿인 것 같다. 그래서 노드 버전을 14로 낮..

useParams, useRouteMatch import { Fragment, useEffect } from "react"; import { useParams, Route, Link, useRouteMatch } from "react-router-dom"; import Comments from "./../comments/Comments"; import HighlightedQuote from "../quotes/HighlightedQuote"; const QuoteDetail = () => { const match = useRouteMatch(); const params = useParams(); console.log(match) console.log(params) const { quoteId } = pa..

웹개발을 하다보면 절대 빼놓을 수 없는 라우터! 라우터를 사용하기 위해서 react-router-dom 라이브러리를 사용해야한다. index.js import ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import "./index.css"; import App from "./App_router_practice"; ReactDOM.render(, document.getElementById("root")); 최 상위 컴포넌트인 컴포넌트를 컴포넌트로 감싸주어야 한다. App.js import { Route, Switch, Redirect } from "react-router-dom"; import Layout fro..