분류 전체보기 썸네일형 리스트형 [React][Webpack] webpack, babel 로 시작하기 (without CRA) https://github.com/joohaem/boilerplate-webpack-without-cra GitHub - joohaem/boilerplate-webpack-without-cra: setting Webpack, Babel without CRA setting Webpack, Babel without CRA. Contribute to joohaem/boilerplate-webpack-without-cra development by creating an account on GitHub. github.com Webpack이란? JS 모듈을 파일 단위로 관리하다 보니, 자연스레 파일이 많아지게 된다 한 편, 브라우저에는 한 번에 보낼 수 있는 HTTP 요청 수의 제한이 있기 때문에, 이를 묶어 처리.. 더보기 [React][css] 마우스 hover 시에 svg 보이기 구현하고자 한 뷰 나는 그저 위와 같은 뷰를 만들고 싶었다. . onmouseover / onmouseout 이벤트 처음에 들었던 생각은 onmouseover 이벤트로 hover 시의 state와 onmouseout 이벤트로 hover 가 해제될 때의 state를 관리하고자 하였다 console.log("wrapper")} onMouseOver={() => handleIsMouseOver(true)} onMouseOut={() => handleIsMouseOver(false)} > {isMouseOver ? ( console.log("hover")}> ) : null} 그래서 위와 같이 isMouseOver boolean state를 관리해주었고, 2가지 문제점이 발생하였다 onmouseover / on.. 더보기 [React][Javascript] 뒤로 가기 막기 / 창 닫기 막기 / 새로고침 막기 서비스의 필요성 북스테어즈(https://book-stairs.com/) 서비스 작업을 하다가 진짜 독서가들의 독서법 - 북스테어즈 뇌 과학 기반의 차별화 된 독서법을 제안합니다. book-stairs.com 뒤로 가기 막기 / 창 닫기 막기 / 새로고침 막기의 기능이 요구되었다 우리가 글 작성 등의 작업을 하며 실수로 뒤로 가기, 새로고침, 창 닫기를 한다고 생각해보자 정말 끔찍하다! 이에 대해 네이버 블로그같은 경우에는, 아래 사진과 같이 경고창을 띄우며 막는다 우리 서비스에도 독서를 하며 질문과 답변을 직접 작성하는 기능이 주이기 때문에, 위와 같은 기능이 꼭 필요할 것 같다 하나씩 해보도록 하자 창 닫기 및 새로고침 막기 창이 닫히거나, 새로고침을 할 경우에 window 객체는 beforeunlo.. 더보기 [React][비교] SWR vs React Query vs Recoil selector ? 고민의 시작점 북스테어즈(https://book-stairs.com/) 서비스 작업을 하다가 진짜 독서가들의 독서법 - 북스테어즈 뇌 과학 기반의 차별화 된 독서법을 제안합니다. book-stairs.com 여러 API에 대한 비동기 처리를 관리하는 라이브러리의 필요성을 느끼게 되었다 반복되는 API 요청으로 불필요한 통신이 지속되었기 때문이다 그래서 캐싱에 필요한 라이브러리를 찾아보니, 대표적으로 3가지가 있었다 Recoil selector (https://recoiljs.org/ko/docs/api-reference/core/selector/) SWR (https://swr.vercel.app/ko) React Query (https://react-query.tanstack.com/) 적합성 / 대중.. 더보기 [React][framer-motion] framer-motion Animation Library 연습 페이지 링크 (https://sad-wing-00b0bb.netlify.app) Framer Motion sad-wing-00b0bb.netlify.app 페이지 깃허브 (https://github.com/joohaem/prt-framer-motion) 공식 문서 (https://www.framer.com/docs/introduction/) 공식 깃허브 (https://github.com/framer/motion) 목차 . ├── Props │ ├── initial │ ├── animate │ ├── transition │ ├── variants │ ├── custom │ ├── style │ ├── whielHover / whileTap │ ├── drag / dragContraints │ └──.. 더보기 이전 1 ··· 4 5 6 7 8 9 10 ··· 38 다음
