비동기5 [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. [220317] socket.io 설치 & 세팅 socket.io 설치 $ npm install socket.io socket.io 의 구조 Namespace ㄴ Room ㄴ Socket socket.io는 이런 구조로 이루어져있다. Namespace에 있는 Socket끼리 통신하는 개념이고, default-NameSpace을 따로 지정해주지 않으면 '/'가 된다. socket.io 세팅 원래 html 파일 header에 이 코드를 작성해야하는데, 나는 모든 정적파일을 public에서 찾도록 설정을 해놓은 상태다. 빼내려면 public 폴더를 빠져나가서 찾는 코드를 작성해야하는데 구찮아..... 그래서 CDN 코드를 사용하기로 함. (이게 ES6 모듈이라고한다. 몰랐음) ( socket.io 공식 홈페이지 : https://socket.io/docs/.. 2022. 3. 18. [220304] 간단히 보는 AJAX 개념 [목록] 1. AJAX란? 2. 비동기통신 코드 만들기 1. AJAX(Asynchronous Javascript And XML)란? 브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위. 페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받아서 일부만 업데이트 되는 비동기 자바스크립트. 간단히, 브라우저에서 돌아가는 자바스크립트가 사용할 수 있는 객체라고 알면 된다. 사용하는 기본 내장 객체로는 XMLHttpRequest이 있다. XML은 데이터 통신을 하는 옛날 형식을 말한다. 요즘은 JSON으로 대체되고 있다. 엘리먼트 형태인 XML보다 객체형태인 JSON으로 작성했을때 코드 길이가 1.5배가 줄어들기 때문. 통신할때 html보다는 데이터만 주고 받음. 그 데이터를 받는 형태가 옛날.. 2022. 3. 10. [220129] promise를 활용한 자동차 레이싱 게임 [ 목표 ] 세 대의 차를 아반떼>소나타>제네시스 순서대로 출발시킨다. 출발할때 GO!라는 텍스트를 표시한다. 도착할때 END!라는 텍스트를 표시한다. 한대의 차가 출발하고 도착하고나서 다음 차가 출발하게 한다. 3대의 차가 도착하고나면 경기끝!이란 텍스트를 표시한다. Promise와 콜백함수 const 아반떼 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('아반떼 GO!'), 1000}) }) 아반떼.then( data => { console.log(data) console.log('아반떼 END') }) --------------------------------------------------------------- //출력 아반떼 GO! .. 2022. 2. 27. [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. 이전 1 다음
