타입스크립트에서 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를 이런 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/SMGxe/btrOoztPVQ2/uciHJjTi3PRm1VqkYkl3e1/img.png)
올해 초쯤에 처음으로 리액트 강의를 듣고 공부해서 만들었던 투두리스트 프로젝트를 다시 열어봤다. 코드를 이렇게 짰다니 지금 실력이 많이 늘었다는 것을 느낄 수 있었다..😀👍 맨 처음 들어가면 보이는 화면. 왜 정렬을 저렇게 했는지 모를 노릇이다.. css도 잘 못 다뤘나보다.. 수정도 가능하고, 추가도 가능하다. 용케도 투두리스트 기본 기능은 다 구현했다. 그리고 이때 달력도 달고 싶었는데 할 줄 몰라서 못 달았던 기억이 있다. 달력도 빈 파일이지만 파일은 생성되어 있었다. 그리고 코드를 뜯어봤더니 모자랐던 실력의 내가 너무 귀엽고 웃겼다🤣 !연산자를 모르는지 반대의 값을 주기 위해서 삼항연산자를 사용했다. 불리언을 조건으로 쓸 생각도 못해서 어차피 불리언인 값을 ===을 이용해서 비교하고 있다. 프로젝..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cwFr4u/btrNpKbbhIg/WbsDKNOwqzF6aJhLPFuSw1/img.png)
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); }; })..
- Total
- Today
- Yesterday
- vscode
- CSS
- 파이썬
- 드림코딩
- Python
- Til
- javascript
- html
- React
- 제이쿼리
- 구름에듀
- 코딩앙마
- js
- 깃
- 리액트
- 타입스크립트
- 비주얼스튜디오코드
- vue
- scss
- 회고
- TS
- Typescript
- 자바스크립트
- 스파르타코딩클럽
- 코드잇
- 제로초
- git
- map
- 김버그
- 저스트코드
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |