coding/react17 Next.js에서 백그라운드 이미지 적용해서 애니메이션 주기 import image from 'next/image'; const aa = {dkdj:dfjdk, dkjlsjd:skfjslkdf}; return ( ) const Image = styled.div... &>img { &.hover { trasnform: scale(0.2) ... } } ...; 2021. 11. 17. 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. 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. BrowserRoute, Switch, Route의 역할 (react-route-dom) 들어가기 `react-route-dom`의 주요 컴포넌트를 자세히 알아보자! 리액트 라우터에는 3개 주요 컴포넌트가 있습니다.: 라우터 컴포넌트 라우트 일치 컴포넌트 네비게이션 컴포넌트 그리고 리액트 라우터를 시작하려면, 이 순서를 지켜주어야 합니다.: 라우트 컴포넌트(루트) > 라우트 일치 > 네비게이션 라우트 컴포넌트 라우트의 핵심구성 요소로 이랑 가 있는데, 차이점은 URL 방식과 서버를 통신하느냐의 차이입니다. BrowserRouter: 일반 URL 경로를 사용하며 해당 경로마다 서버를 올바르게 구성해줘야합니다. HashRouter: URL의 해시 부분에 현재위치를 저장합니다. 서버로 전송되지 않아서 서버 구성이 필요하지 않습니다. 라우터를 이용하려면 최상위 레벨(=루트)에서 최상위 요소를 래핑해.. 2021. 10. 17. 이전 1 2 3 4 5 다음
