우주먼지 개발 log

재밌었다~ 남상림 튜터님 예뻐여.. TIL Redux 대신 Recoil 을 써보자~ 사실 tutorial 그대로라 다시 옮겨 적을 필요는 없지만.. ㄷㄷㄷ 복습차원으로.. recoil 패키지 설치 yarn add recoil recoilRoot redux의 provider 처럼 App.jsx에 전역으로 사용하려는 범위에 감싸 놓기 import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( ); } Atom 전역으로 사용하려는 state 변수를 atom을 사용해서 끄적여 준다. key값은 고유값, 보통 변수명과 동일하게..

지금 사실은 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은 ..