우당탕탕 개발일기

const handleCopyLink = (url) => { navigator.clipboard.writeText(url); }; url에는 string 형식으로 아무거나 들어갈 수 있다! 나는 버튼을 클릭하면 해당 페이지의 링크가 복사되길 바랐기때문에 함수가 실행될 때 url을 파라미터로 넘기는 식으로 구현했다. 현재 페이지의 URL을 체크하는 방법은 아래와 같다. import { useLocation } from "react-router-dom"; const location = useLocation(); location을 콘솔 찍어보면 pathname이라는 키가 들어있다. handleCopyLink(`${baseUrl}${location.pathname}`) baseUrl은 페이지의 기본URL, 페이..

"Warning: Received false for a non-boolean attribute className." className에 boolean 형태의 값을 받았다는건데 아무리 검색해봐도 boolean을 갖고 있는 형태는 들어가있지 않았다. 구글링해보니, &&연산자를 사용해도 동일한 에러를 발견할 수 있다는 결과가 있었고 실제로 &&연산자를 사용하고 있었다. // ❌ This will throw the above error // ✔️ Use a ternary instead && 연산자를 삼항연산자로 변경하니 에러는 사라졌다! className={state && value} 인 경우에는 state가 false일 때도 있으므로 boolean 값이 들어가 이게 오류의 원인이었던것, https://webt..

콘솔 에러 정리 중 만난 에러 useEffect must not return anything besides a function, which is used for clean-up. useEffect(() => 이 부분이 원인,[]) 중괄호({})로 감싸주면 뚝딱! https://velog.io/@posinity/%EC%97%90%EB%9F%AC-Warning-useEffect-must-not-return-anything-besides-a-function-which-is-used-for-clean-up [에러] Warning: useEffect must not return anything besides a function, which is used for clean-up. Warning: useEffect ..

[ [ {...}, {...} ], [ {...}, {...} ] ] 이런 상황에서 두 배열을 합치는 방법으로 array.flat()이 있다. [ {...},{...}, {...}, {...} ] https://mine-it-record.tistory.com/491 [ES6+] arr.flat() - 배열의 평탄화, 중첩 배열 하나로 만들기 (ft. flatMap()) ES2019(ES10)에서 새롭게 추가된 Array.prototype.flat() 메서드에 대해 알아보자. 이 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙여 새로운 배열로 만들어주는 역할을 한다. ▷ mine-it-record.tistory.com

여러명이 협업하는 경우... 다 제각각 코드 작성 스타일이 다르다. 이걸 맞춰나가는게 협업이라지만, 이런것까지 맞춰야하나 싶은 생각이 들기도 한다. 그 '이런것'에 해당하는 것 중 하나가 import 정렬이었는데.... Eslint에서 import order를 설정할 수 있다고 한다!! 즉, eslint에게 규칙만 알려주면 많은 사람들이 제각각 import 해와도 자동으로 정해진 규칙대로 정렬이 되는 것!!! 일단, eslint부터 설치해준다! npm install -D eslint 이때 확장에서 eslint도 함께 설치해주어야 한다. 그리고 프로젝트의 root 위치에서 .eslintrc.js이라는 파일을 만들어주어 그 안에서 이제 규칙을 작성하면 된다. 기본 순서는 ["builtin", "externa..