봉보로봉봉

타입스크립트에서 props 넘기기 props를 기존에 넘겨주듯이 넘겨줬다. 그랬더니 props 부분에 빨간줄이 떴다..🥹 제발.. 그만.... // 에러 const CheckList = ({ todos }) => { return ( {todos.map((el: Todos) => ( ))} ); }; export default CheckList; 이유는 props를 넘길때도 타입을 지정해주어야 하기 때문이다. 그래서 이리저리 검색을 해서 넣었더니 빨간줄이 사라졌다. interface Todos { id: number; todo: string; } interface TodosProps { todos: Todos[]; } const CheckList = ({ todos }: TodosProps): JSX.El..

처음에는 모든걸 괄호 안에 적어줬는데 자꾸 빨간줄을 띄우길래 괄호 안에 있던 걸 변수로 분리해줬다. 그래도 menu에서 빨간 줄을 띄웠다. const getRandomMenu = () => { const randomNum = Math.floor(Math.random() * foodArr.length); const menu = foodArr[randomNum] !== undefined ? foodArr[randomNum] : '분류를 선택해주세요'; // 여기서 menu에 자꾸 빨간 줄을 띄웠다. setTodayMenu(menu); }; 나는 아무것도 하지않았으나 타입스크립트가 추론하길 이 자리에 null과 undefined이 들어갈 수 없어서 불만을 띄운 것 같았다. 그래서 todayMenu state에..

타입스크립트 리액트 타입스크립트에서 js로 쓰던 파일은 ts로 jsx로 쓰던 파일은 tsx로 해주면 된다. 타입스크립트 styled-components styled-components를 타입 스크립트에서 사용하려면 추가적으로 다운을 받아줘야한다. npm i styled-components --save npm i --save-dev @types/styled-components 처음에는 타입을 받아오는 명령어를 다른걸 사용했었는데 Cannot find module 'styled-components' or its corresponding type declarations. 오류가 떠서 다시 --save-dev 를 추가해서 재설치해줬다. 참고 ThemeProvider 사용하기 기존에 나는 theme.js를 이런 ..

올해 초쯤에 처음으로 리액트 강의를 듣고 공부해서 만들었던 투두리스트 프로젝트를 다시 열어봤다. 코드를 이렇게 짰다니 지금 실력이 많이 늘었다는 것을 느낄 수 있었다..😀👍 맨 처음 들어가면 보이는 화면. 왜 정렬을 저렇게 했는지 모를 노릇이다.. css도 잘 못 다뤘나보다.. 수정도 가능하고, 추가도 가능하다. 용케도 투두리스트 기본 기능은 다 구현했다. 그리고 이때 달력도 달고 싶었는데 할 줄 몰라서 못 달았던 기억이 있다. 달력도 빈 파일이지만 파일은 생성되어 있었다. 그리고 코드를 뜯어봤더니 모자랐던 실력의 내가 너무 귀엽고 웃겼다🤣 !연산자를 모르는지 반대의 값을 주기 위해서 삼항연산자를 사용했다. 불리언을 조건으로 쓸 생각도 못해서 어차피 불리언인 값을 ===을 이용해서 비교하고 있다. 프로젝..

input 체크박스를 클릭하면 onClick이벤트가 2번 발생하는 이유 input checkbox를 커스텀해서 체크박스를 구현했다. 체크박스를 선택하면 해당 체크박스에 해당하는 쿼리스트링이 쿼리스트링을 관리하는 배열에 들어가는데 한 번 클릭했는데 2번씩 들어갔다. React.StrictMode 때문인가 싶어서 없애고 클릭해봐도 계속해서 2번 들어갔다. ... el.name === text)[0].checked} readOnly /> {text} ... 대략적인 구조는 이렇게 되는데 자꾸 onClick 이벤트가 2번 발생했다. 검색을 해봐도 strict 모드를 때문이다라고 나와서 결국 영어로 검색하다가 왜 그런지 이유를 찾았다. 영어를 못해도 영어 검색을 생활화하자...🥲 label태그와 input태그는 ..

새롭게 알게 된 CSS 속성 calc() calc를 사용하면 css속성값에 계산식을 이용할 수 있다. , , , , , , 또는 를 받는 속성의 값으로 사용할 수 있다. length구문에 해당하는 아무 값에나 사용할 수 있다. 덧셈, 뺄셈, 곱셈, 나눗셈이 가능하다. 곱셈과 나눗셈은 오른쪽 피연산자가 숫자여야한다. width: calc(100% - 80px); filter 흐림효과나 색상 변형 등 그래픽 효과를 요소에 적용한다. /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow..

command not found: dbmate dbmate up을 설치했는데도 안돼서 글로벌로 설치했더니 해결 됐다. Error: unsupported driver MissingDriverError: Wrong driver: "undefined" given. .env파일에서 변수를 사용하고 있었는데 .env파일명이 .env.test로 되어있었고, 안에 변수에 값도 내 상황과는 달라서 수정해서 해결했다. Error during Data Source initialization Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL cl..

Top Button 구현하기 내가 짠 코드 ... const TopButton = (props) => { const [button, setButton] = useState(false); useEffect(() => { const handleShowButton = () => { window.scrollY > 750 && window.scrollY { window.removeEventListener('scroll', handleShowButton); }; })..