우주먼지 개발 log

지금 사실은 next js 구간이다.. (?) 언제해 공부.. TIL React query mutation 공통 함수로 빼기 오늘의 에러 : useMutation 같은 React hook은 top level에서 사용할 수 없다. 는 에러 src\query\useTodoQuery.js Line 5:31: React Hook "useMutation" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks 오늘의 실수 () => 이것을 안붙인 것.. 아직도 개념이 안잡혀서 그런 듯ㅠ.ㅠ [공통으로 ..

숙제 5 level 늦은 제출, 막혔던 부분 catch up~ TIL 내가 생각한 typescript의 이해.. 내가 사용하려는 값(위에서 선언한 변수이든 함수의 리턴값이든 매개변수든)이 무슨 타입인지 나는 알지만 컴퓨터도 알게 하자. typescript로 리액트 쿼리 사용하기 javascript로 짠 코드를 typescript로 바꾸는 시작부터 막혔다.. 답을 찾아가는 방법.. 어떻게든 되게 하는 방법?? todolist 조회 함수이다. // 1. as-is // 모든 todos를 가져오는 api const getTodos = async () => { const response = await axios.get(SERVER_URL); return response; }; //(처음에는 response를 통..

오늘도 화이팅! TIL 타입스크립트 보조 교재 ㅊㅊ 동기가 튜터님 질문하는 거 구경하다가 추천 교재 주워왔다. 살까말까. 1) effective typescript 2) https://www.zerocho.com/book/3 리덕스 툴킷 with typescript https://redux-toolkit.js.org/tutorials/typescript https://redux-toolkit.js.org/usage/usage-with-typescript - 공식 사이트인데 이대로만 하자.. - 타입쓰기전에 하던 것과 조금 다르더라도 -0- redux thunk with typescript 블로그 참고한 거 https://i-ten.tistory.com/285 - payload를 여러 변수를 담아 객체로 ..

오늘도 쉽지않군.. TIL TypeScript React 에서 쓰기 함수의 input, output에 type 쓰는 기본부터, 객체 배열 type 까지 원장님 추가 세션에서 받아적은 것 정리했다 !! [TypeScript] React 에서 사용하기 2 지난 포스팅에서 설치만했으니까 이제 사용하는 방법!! 스파르타 내배캠 프론트엔드과정 원장님 추가세션 수업들은 내용 정리 ^.^ 1. typescript 문법을 쓰지 않아도 컴파일러가 추론해서 에러를 잡 developer.happymunzi.com 그 다음은 props랑 children, eventHandler type 주는법 예정... 그 다음은 redux 사용하는 법.. 와.. 어렵다 ^.^ 이러다가 숙제 1level props-drilling 인채로 제..

React 숙련주차 개인과제 해설 참고 https://www.youtube.com/watch?v=i0kLshFoaeM 1. GlobalStyle 만들기 with styled-components GlobalStyle.js import {createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` `; export defualt GlobalStyle; 2. reset Styles 을 복사해 넣어요 구글에 reset Styles 검색해보면 나오는 걸 사용하면 된다. import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobal..

지난 포스팅에서 설치만했으니까 이제 사용하는 방법!! 스파르타 내배캠 프론트엔드과정 원장님 추가세션 수업들은 내용 정리 ^.^ 1. typescript 문법을 쓰지 않아도 컴파일러가 추론해서 에러를 잡아준다. javascript 로 작성해보고 오류를 잡아나가면서 수정해 보자. 아래 두 문장은 javascript에서는 가능하지만 typescript에서는 에러를 발생시켜 준다. 첫 문장에서 a는 number 타입으로 정해졌기 때문에. const a = 1; a = "hell"; // 에러 발생 2. useState hook 추가해보기 아래 useState 구문에서 타입을 정해주지 않아도 컴파일러가 추론해서 number는 number 타입이구나 라고 알고 있다. const [number, setNumber] ..

오늘도 화이팅! TIL Animation css 공부하기 따로 작성하였다~ [css] 애니메이션 @keyframes React App 처음 생성했을 때 이미지가 돌아가는 것에 대해 생각해 본적이 없었는데, 이제야 갑자기 궁금해져서 얘 gif 인가? 했는데 아니었다. css를 통한 애니메이션 효과였던 것이다. ㅇ0ㅇ 팀플 후 developer.happymunzi.com TypeScript React에서 사용하기 이것도 따로 작성하였다~ [TIL] 23/12/12 TypeScript 문법 종합반 : Start 오늘도 화이팅! TIL TypeScript 요약 = > javascript는 웹페이지에 동적인 효과를 주기 위해 만들어진 스크립트 언어인데 -> 발전하여 성능을 높이고자 구글에서 v8 엔진을 크롬 브라..

1. CRA 만들기 with TypeScript yarn create react-app --template typescript 2. type debugging에 유용한 vscode extension 3. useState에서 typeScript 사용해보기 generic을 사용한다. const [counter, setCounter] = useState();

React App 처음 생성했을 때 이미지가 돌아가는 것에 대해 생각해 본적이 없었는데, 이제야 갑자기 궁금해져서 얘 gif 인가? 했는데 아니었다. css를 통한 애니메이션 효과였던 것이다. ㅇ0ㅇ 팀플 후에 css의 중요성을 깨달았고 이제 공부를 좀 하려고 한다. 우리 팀원들이 이미지 움직이는 것을 많이 넣었는데, 바빠서 확인을 못했었는데 모두 animation 이었다 ㅇ0ㅇ 우리 KPT 회고에서 제일 많은 투표를 받은 지난 코드도 다시보자! 라는 Try 를 수행하기 위해 우리 팀 css 부분도 다시 뜯어봐야겠다^.^ 1) 데이트 코스 등록이라는 글자를 띄워주는 StyledDateTitle 라는 styled-components 가 있다 데이트코스 등록 💟 2) 여기있다! shakeAnimation은 ..

오늘도 화이팅! TIL TypeScript 요약 = > javascript는 웹페이지에 동적인 효과를 주기 위해 만들어진 스크립트 언어인데 -> 발전하여 성능을 높이고자 구글에서 v8 엔진을 크롬 브라우저에 내장했고 -> 이를 기반으로 Node.js 라는 플랫폼이 나왔고 javascript로 백엔드를 개발할 수 있게 되었다. 그런데 프론트엔드에서 뷰에서 보이는 사소한 에러였던 녀석들이 백엔드에서는 서버를 다운시키는 어마무시한 에러를 볼 수도 있다. javascript는 동적언어이기 때문에 런타임에 (프로그램 실행) 개발자의 실수를 알게 되기 때문이다. javascript의 단점 1) 실행시간에 결정 되는 변수 타입 2) 약한 타입체크 - let, const 무슨 타입인데? 뭘 담는 변수? - let a ..