react-color-palette color picker 툴인데 가장 유명한 react-color보다 가볍고 사용법도 간단하다. 특히 typescript 기반으로 만들어져서 typescript 프로젝트에서 오류가 날 확률이 적다. 개인적으로는 디자인도 내 스타일. https://github.com/Wondermarin/react-color-palette GitHub - Wondermarin/react-color-palette: 🎨 Lightweight Color Picker component for React. 🎨 Lightweight Color Picker component for React. Contribute to Wondermarin/react-color-palette development by..
내용 파일 형식의 input에 업로드한 이미지를 미리보기 형식으로 화면에 구현하는 법 알아보기 FileReader API로 미리보기 구현 FileReader API는 파일을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해주는 Web API다. FileReader API는 readAsDataURL 메서드랑 조합해 파일을 base64 형식의 문자열로 변환할 수 있다. 변환한 문자열은 img 태그의 src값, background-image의 url값에 넣어 이미지 형태로 불러올 수 있다. 비동기로 실행되기 때문에 reader에 파일이 load된 이후에 이미지 영역에 넣어줘야 한다. 자바스크립트 사용 예시 const file = document.getElementById("my-file"); const pre..
내용 state가 배열인 경우에 어떻게 값을 추가하고, 제거하는지 알아보기 배열에 값 추가 전개 연산자(Spread Operator)를 사용해 기존에 지정되어 있던 state를 배열에 담고, 해당 배열 뒤에 값을 추가한 새 배열을 state에 지정한다. 배열 안의 값이 string인 경우 // state 기본값: ["A", "B"] const [arr, setArr] = useState(["A", "B"]); // state에 "C" 추가 setArr(prevList => [...prevList, "C"]); // 결과: ["A", "B", "C"] console.log(arr); 배열 안의 값이 object인 경우 // state 기본값: [{word: "A"}, {word: "B"}] const [a..
오류 발생 조건 Keydown 이벤트를 실행할 때, 첫 keydown 이벤트가 두 번 실행되는 경우가 있다. 영어로 입력했을 때는 발생하지 않기 때문에 한글(?) 관련된 오류인 것 같은데, 이것저것 테스트해 봤더니, 크롬 브라우저에서 한글로 입력한 경우에만 오류가 발생했다. isComposing 메서드 이벤트 중복 실행을 방지하기 위해 isComposing이라는 메서드를 사용했다. isComposing 메서드는 keydown과 keyup 이벤트 사이에 같은 이벤트가 중복 실행되는 걸 체크해 true/false를 반환하는 메서드다. JavaScript 사용 예시 document.addEventListener("keydown", (e) => { if (e.isComposing) return; // 실행할 이..
서론 리액트에서 배열에 map 함수를 적용할 때, 'Each child in a list should have a unique "key" prop'이라는 콘솔 오류가 뜨는 경우가 있습니다. 오류가 나도 렌더링에 문제는 없지만, 되도록이면 오류는 잡아주는 게 좋기 때문에, 제가 사용한 방법을 공유하려고 합니다. 원인 제가 파악한 선에서 오류가 나는 경우는 3가지가 있었습니다. key 값이 없는 경우 key 값이 잘못 입력된 경우 key 값이 잘못된 위치에 입력된 경우 1. key 값이 없는 경우 key 값이 없는 경우, map 함수 내부에서 return 되는 JSX 코드의 최상위 태그에 key를 prop 형식으로 입력해 주면 됩니다. 코드 예시 최상위 태그 전체 코드 예시 const page = () =>..
https://fonts.taedonn.com Fonts Archive fonts.taedonn.com 셀렉트 박스 외 영역 클릭 시 포커스 해제 개인 포폴 작업 중, 셀렉트 박스 외 영역 클릭 시 셀렉트 박스 포커스가 해제되는 기능이 필요했다. ❌ useEffect만 사용하는 방법 처음 시도한 방법은 useEffect 안에 mouseup 이벤트 리스너를 사용하는 방식. 어느 정도 기능이 구현되긴 했지만, 클릭 시 리액트가 여러 번 리렌더링 되어 다시 포커스 상태로 돌아가는 경우가 있었기 때문에, 다른 방법을 찾아볼 필요가 있었다. 🙆♂️useRef를 같이 사용하는 방법 그 다음 시도한 방법은 useRef를 같이 사용하는 방식. 이 방식은 특정 영역을 감지하는 Ref를 원하는 요소에 지정해서, 해당 영..
https://fonts.taedonn.com Fonts Archive fonts.taedonn.com 이슈 사항 개인 포트폴리오 작업 중, 아래와 같이 @font-face에 적용할 폰트를 서버에서 JSON을 통해 문자열로 불러오려 했더니, 띄어쓰기는 적용이 되지만 줄 바꿈이 적용이 안 돼서 나왔다,, 이슈를 해결하기 위해 문자열을 잘라서 태그도 넣어보고, 함수를 만들어 문자열을 나눠도 봤지만, 매번 렌더링 할 때마다 복잡한 함수를 실행해야 되기 때문에, 클라이언트의 과부하를 줄이기 위해 좀 더 근본적인 해결 방법을 찾아야 했다. 그러던 와중 태그에 대해 알게 됐고, 반신반의하며 태그로 문자열을 감싸봤다. 로컬 서버에서 결과를 확인해 보니, 제대로 줄 바꿈이 되어서 나왔다? 문제는 해결이 됐지만, 왜 줄..
리액트는 컴포넌트 단위로 개발합니다. 컴포넌트는 사용자 입장에서 HTML 요소와 크게 다르지 않습니다. 나 태그를 컴포넌트로 만든다고 했을 때, 컴포넌트 내부에서 jsx 문법을 써서 HTML 요소를 return 해서 만들 수 있습니다. 📌 구현할 HTML 요소 Hello, taedonn 📌 index.html => 리액트를 렌더링 할 베이스 파일 📌 렌더링 할 베이스 파일 📌 index.js => index.html에 렌더링 할 리액트 최상위 컴포넌트 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from ..
