fullfish의 개발자 도전기

사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form입니다. npm i react-hook-form 아래 처럼 쓰면 저런 객체가 만들어짐 const {register} = useForm() console.log(register('toDo')) watch는 값을 추적함 (state를 만들고 onCahge함수를 만들고 input에 props를 주는것과 같음) const { register, watch } = useForm() console.log(watch) 예를 들어 여러개의 from이 있을때 원래는 하나하나 state만들고 그랬어야하는데 function ToDoList() { const { register, watch } = useForm() console.log(watch()..

npm i recoil // index.tsx root.render( ) atom 만들기 // src/atoms.tc import { atom } from 'recoil' export const isDarkAtom = atom({ key: 'isDark', // 유일해야함 default: true, }) atom 받아오기 // src/App.tsx const isDark = useRecoilValue(isDarkAtom) atom 값 바꾸기 // coins.tsx const setDarkAtom = useSetRecoilState(isDarkAtom) const toggleDarkAtom = () => setDarkAtom(prev => !prev) Toggle Mode useRecoilValue와 us..

type Words = { [key: string]: string; }; class Word { constructor(public term: string, public def: string) {} } class Dict { private words: Words constructor() { this.words = {} } add(term: string) { if (this.words[term] === undefined) { this.words[term] = '' } } get(term: string) { if (this.words[term] !== undefined) { return console.log(this.words[term]) } } delete(term: string) { if (this.wor..

https://full-fish.github.io/nomardcoders-ReactJSmasterClass-cryptoTracker/ React App full-fish.github.io 시간이 없어서 css는 안건드렸다...

Route src/routes 폴더에 각각의 페이지 컴포넌트 만들고 src/Router.tsx에 아래처럼 라우팅을 한다 // Router.tsx import { BrowserRouter, Switch, Route } from 'react-router-dom' import Coin from './routes/Coin' import Coins from './routes/Coins' function Router() { return ( ; ) } export default Router useParams로 해당 url의 params를 가져올 수 있다 // /src/routes/Coin.tsx import { useParams } from 'react-router' interface Params { coinId: ..

npx create-react-app 내 앱 이름 --template typescript npm i --save-dev @유형/styled-components npm i styled-components // index에서 root에러가 난다면 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) //이렇게 수정 interface : object shape(객체모양)을 TypeScript에게 설명해주는 개념 interface PlayerShape { name: string age: number } const sayHello = (playerObj: PlayerShape) => `Hello ${playerObj.nam..

쓰는 이유 1. Type 안정성 // js는 [1,2,3] + false === '1,2,3false' function divide(a,b){ return a/b } divide('xxx') === NaN // 인자가 2개가 들어오지도 않았고 타입도 안맞지만 에러를 안띄움 2. 런타임에러(코드실행중의 에러) 방지 const obj = {name:'manseon'} obj.hi() // obj.hi is no a function에러가 뜸 // 즉, 실행을 이미 시키고 에러를 띄움 // 애초에 obj에 hi가 없음을 먼저 인지하는 편이 좋음 문법 타입을 지정안해줘도 추론함 let a = 'a' a = 'b' // ok let a = 'a' a = 1 //type 에러 남 구체적 명시 let b : boole..

tag에 style 직접 먹일 때 일반적 사용법 : 이름을 붙여 줄 수 있다 const BoxOne = styled.div` background-color: teal; width: 100px; height: 100px; ` props내리기 가능 const Box = styled.div` background-color: ${props => props.bgColor}; width: 100px; height: 100px; ` 컴포넌트 extend하기 const Box = styled.div` background-color: ${props => props.bgColor}; width: 100px; height: 100px; ` const Circle = styled(Box)` border-radius: 50px..

리액트 기초 복습하려고 노마드코더 'ReactJS로 영화 웹 서비스 만들기'강의를 들었다 별거는 아니고 그냥 강의 들으면서 따라 만든것 https://full-fish.github.io/nomadcoders/ React App full-fish.github.io https://github.com/full-fish/nomadcoders GitHub - full-fish/nomadcoders Contribute to full-fish/nomadcoders development by creating an account on GitHub. github.com

크리스마스 이브까지 얼마나 남았는지 카운트 코드 : https://github.com/full-fish/vanillaJS-time-until-christmas GitHub - full-fish/vanillaJS-time-until-christmas Contribute to full-fish/vanillaJS-time-until-christmas development by creating an account on GitHub. github.com