코드4 [220428] useReducer useReducer가 나오게 된 배경 react로 전역상태를 만들기 위해 반드시 사용해야할 redux react-redux 이렇게 부를 정도로 긴밀한 관계다. 하지만 redux의 단점은 사용할수록 코드가 복잡해지고 계속해서 컴포넌트로 감싸는 wrapper지옥을 만드는 것이다. 이런 단점을 보완하기 위해 hook이 나오면서 react팀은 redux의 reducer를 따로빼서 기능으로 만들었다. 전역상태를 하기 위해 원래 redux에서 사용했던 reducer기능을 가져온것. ( 상태를 바꾸는 코드를 몰아넣을 수 있는게 reducer ) redux의 단점 const [info,setInfo] = useState( { user:{ userid:'', userpw:'', username:'' }, notice:{.. 2022. 5. 6. 티스토리 코드블럭 스타일 수정하기 - 모서리 둥글게, 줄간격, margin 코드블럭 안의 폰트스타일이나 배경색을 바꾸고 싶은 경우는 다음 글에 게시해놓았다. https://hancoco.tistory.com/55 티스토리 코드블럭 스타일 수정하기 - highlight, 어두운 배경, 원하는 폰트로 바꾸기. 방법은 2가지다. 1) 블로그 관리 > 플러그인 > 코드 문법 강조를 선택해서 코드블럭 스타일을 바꾼다. 2) 직접 스타일을 받아서 바꾼다. ( 여기서 주의할점은, 위에서 말한 코드 문법 강조를 해제한 hancoco.tistory.com 코드블럭 폰트랑 배경색을 바꾸고나니 좀더 욕심이 생긴다. 줄간격도 넓히고 삐쭉한 모서리도 좀 둥글둥글하게 바꾸고 싶다!!!! 그러니, 바꿔보자. 1) 티스토리 블로그관리 > 스킨편집 > html 편집 > css에 들어가자 2) css에 해당 .. 2022. 2. 3. [220127] 콜백함수를 활용한 자동차 레이싱 게임 [ 목표 ] 세 대의 차를 아반떼>소나타>제네시스 순서대로 출발시킨다. 출발할때 GO!라는 텍스트를 표시한다. 도착할때 END!라는 텍스트를 표시한다. 한대의 차가 출발하고 도착하고나서 다음 차가 출발하게 한다. 3대의 차가 도착하고나면 경기끝!이란 텍스트를 표시한다. 시도 1) 우선 콜백함수를 차례대로 생성해서 출력값을 만들어서 결과값을 보자. const 아반떼 = () => { console.log('아반떼 GO!') setTimeout(()=>console.log('아반떼 END!'),1000) } const 소나타 = () => { console.log('소나타 GO!') setTimeout(()=>console.log('소나타 END!'),1000) } const 제네시스 = () => { c.. 2022. 2. 2. [220112] 동기적코드 / 비동기적 코드 / setTimeout(), setInterval() 동기적인 방법와 비동기인 방법은 뭘까? 동기적인 코드 자바스크립트 코드는 보통 동기적으로 실행된다. 마치 책을 읽듯이 위에서 아래로, 왼쪽에서 오른쪽으로 읽어내려오며 코드를 한줄한줄 차례로 실행된다는 뜻이다. 한 코드가 실행 될때까지 다음 코드가 실행되지 않는다는 특징이 있다. 장점은 코드를 파악하기 쉽고, 유지보수, 디버깅이 쉽다. 그래서 단순 목적을 지닌 기기의 프로그래밍에 자주 이용된다. (예 : ATM기계, 키오스크, 단순단말기) 단점은 한 코드의 실행이 오래 걸릴경우 손가락만 빨며 끝나기를 기다려야 한다는 것이다. 처리하는데 10초 처리하는데 10분 처리하는데 1초 이와 같은 코드를 실행한다고 치면, 3번 코드가 실행될때까지 총 10분 10초가 걸릴것이다. 만약 이 같은 일이 쇼핑몰 구매페이지에.. 2022. 1. 12. 이전 1 다음
