우주먼지 개발 log

오늘도 화이팅! 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 ..

오늘도 화이팅! TIL 1) 리액트 쿼리를 썼는데 같은 페이지에 있는 A 컴포넌트에서 저장하고 B 컴포터넌트에서 읽어올 때 , 읽어오는 정보들이 바로 화면 업데이트가 안된다! alert창도 안뜬다 ! 도무지 모르겠다! 이거 그거잖아 ~ invalidate 안해준거 아니야? 할 수 있는데, 해줬다 룰루~ ^.^ 이건 내가 넣은 isSuccess 구문 때문이었던 것 같은데, 타이밍 문제인 것 같다. ^.^ onSuccess와 isSuccess를 둘 다 넣은 탓에 둘의 싸움이 아닐까.. 왜냐 onSuccess에서 console.log("xx") 한 줄만 넣어줘도 alert 이 뜨기도 했으니까. 넘넘 황당.. 나 이거 어디서 본것 같은데 ㅋㅋㅋ 결국엔 망한 코드에서는 console.log 한줄 못빼는 것이다. ..

오늘도 화이팅! TIL (팀 KPT 회고) Keep - 현재 만족하고 있는 부분 주희 지향님 따라다니면서 튜터님께 질문 자주하고 명쾌한 해결법을 받을 수 있어서 너무 좋았다. 리액트 쿼리 사용법을 알게된 점 지향 의견을 적극적으로 내고 소통이 원할해서 좋았다. (내가) 부족하지만 맡은 부분을 의견을 통합한대로 맞춰주면서 구현해내서 만족스러웠다. 민규2)전반적인 css 외우진 못해도 한번씩 구현해서 꽤 많이 성공한 부분 1)툴킷, 회원가입/로그인 유효성 검사 연습 희찬 프로젝트에서 진행 과정에서 반복되는 부분에 익숙해 질 수 있어서 좋았다. git을 강의에서 단순히 배운 것을 실제 프로젝트에서 사용해보니 좋았다. 홍상 Problem - 불편하게 느끼는 부분 주희 출제의도에 맞춰 api 사용에 중점을 두면 ..