본문 바로가기

coding59

zustand 사용하기 🚀 스토어 만들기 const useStore = create(set=>({ bears: 0, increasePopulation: () => set(state => ({ bears: state.bears + 1})), removeAllBears: () => set({ bears:0 }); }))set 함수는 state를 병합해주는 함수로써 객체, 함수등을 넣어서 사용할 수 있다. 구성요소 바인딩 provider가 따로 필요하지 않으며 어느 페이지에서나 가져와서 사용하면 된다. 상태를 선택하면 구성 요소가 변경 사항에 따라 다시 렌더링 된다. const BearCounter = () => { const bears = useStore(state => state.bears); return {bears} around.. 2021. 11. 9.
Canvas API - 기본 도형 그리기 직사각형 그리는 3가지 방법 1. clearRect(x, y, width, height) 정의된 사각형의 모든 픽셀을 투명으로 설정하고 이전에 그린 내용을 지운다. 2. fillRect(x, y, width, height) 너비와 높이에 의해 크기가 결정되고 x, y 위치에 채워진 사각형을 그린다. 3. strokeRect(x, y, width, height) strokeStyle 및 기타 컨텍스트 설정에 따라 윤곽선 사각형을 그린다. 텍스트를 그리는 3가지 방법 1. fillText() 2. strokeText() 3. measureText() 측정된 텍스트에 대한 정보(= 너비)를 반환한다. let text = ctx.measureText('Poburi'); console.log(tex.. 2021. 10. 31.
Fetch API 들어가기 Fetch API를 이용하면 요청/응답과 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능합니다. 또한 fetch()메서드를 이용하는 것으로 비동기 네트워크 통신을 쉽게 할 수 있게 도와줍니다. Fetch의 기본스펙이 jQuery.ajax()와 다른 두가지: 1. fetch()로 부터 반환되는 프로미스 객체는 HTTP error 상태를 reject하지 않음. (HTTP Status Code가 404 또는 500을 반환하더라도..! ) 대신, ok상태가 false인 리졸브가 반환되며 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됨. 2. 보통 쿠키를 보내거나 받지 않음. 쿠키를 전송하기 위해서는 자격증명 옵션을 반드시 설정해야함. 2017년 8월 25일 이후 기본.. 2021. 10. 23.
historyApiFallback의 역할 리액트는 SPA 방식이어서 URL의 시작 주소(=index.html)만 갖고 있는데, 웹의 history API를 사용해서 여러가지 URL이 있는 것 처럼 가짜주소를 만들어 줄 수 있다. localhost:3090/login coding-heesong.com/beauty/make-up 이런 주소로 이동하거나 새로고침을 하면 프론트로 가지 않고 서버로 가게된다. 그런데 문제는 서버는 오직 시작 주소만 알고 있다. localhost:3090 coding-heesong.com 그래서 webpack.config.ts에서 devServer의 historyApiFallback: true를 줘서 실제로 서버에는 없는 주소를 있는 주소처럼 인식 할 수 있게 해준다. 2021. 10. 17.

티스토리툴바