React

GSAP은 애니메이션을 쉽게 사용할 수 있는 자바스크립트 라이브러리이다!CSS 보다 강력하고 제이쿼리보다 20배 이상 퍼포먼스가 좋다고 한다또, GSAP의 장점은 프레임워크에 구애를 받지 않아서React, Vue, Angular등 어떠한 프레임워크에서도 사용이 가능하다

recoil-persist ? react 프로젝트에서 전역상태관리를 recoil로 선택하게 되었다. 새로고침시 전역상태관리가 초기화되는 문제가 발생하여, local storage로 저장을 하게 되었는데 recoil-persist라는 라이브러리를 사용하면 더 편리

리액트는 SPA(single page aplication) 로 페이지가 1개인 어플리케이션이다. 1개인 페이지 새로고침 없이 필요한 부분을 렌더링 시켜 주소에 맞춰 필요한 화면을 보여준다.이때 필요한 것이 바로 React Router 이다.리액트에서 만든 공식 라우팅

styled components? CSS in JS 는 스타일링을 할때 css를 이용하는게 아닌 javascript를 사용해 컴포넌트에 바로 삽입하는 기법이다. CSS in JS 중에서도 각광받는 라이브러리가 바로 Styled components 이다. 설치방법

리액트 라우터 6.4버전 이상에서 사용가능한 createBrowserRouter ,outlet 정리 입니다.BrowserRouter를 비롯한 리액트 라우터 사용법은 리액트 라우터 이전글 최상단 파일인 index.tsx에서 RouterProvider를 불러줍니다.Rout

제어 컴포넌트는 사용자의 입력을 기반으로 자신의 State를 관리하고, 업데이트 한다.즉, 입력한 데이터 상태와 저장된 데이터 상태가 같은 것을 말하고 사용자가 입력한 값과 저장되는 값이 실시간 동기화 된다.문제점 : 입력할때 마다 렌더링이 되기 때문에 불필요하게 리렌

꿀잼 리엑트 애니메이션 라이브러리 Framer Motionhttps://www.framer.com/motion개인적으로 애니메이션 잘 하고 싶은 욕심은 있는데너무 어렵다는 생각이 컸다 ㅠ\_ㅠ CSS 키프레임 애니메이션도 머리아픔..근데 framer motio

useTransform()은 한 값 범위에서 다른 값 범위로 매핑하여 다른 MotionValue의 output을 변환하는 MotionValue를 만든다.예시) x값을 -200, 0, 200 에서 0, 1, 0 으로 변경해준다. 이를 이용해 쉽게(?) 스크롤 이벤트를

useLocation()은 현재 url의 정보를 가져오는 리액트 라우터 훅이다.메인 페이지에서 상세 페이지로 넘어갈때같은 정보를 여러번 받아와서 로딩이 걸리는걸 해결할 수 있다.위를 보면 state객체에 name : "Bitcoin" 이라는 프로퍼티가 보이는데이는 메인

노마드 리액트 마스터 클래스 과정 졸업 과제로 영화 앱 사이트를 제작하게 되었다.TA분들의 조언을 따라 몇가지 수정할 부분이 생겨 블로그에 기록을 남겨본다.해당 사이트는 크게 총 3가지의 페이지로 나뉘는데 데이터만 다르고 로직이 동일하다.처음 만들때도 이거 너무 똑같은

cra(creatr react app)는 react 팀에서 추천하는 공식 보일러 플레이트이다.리액트 설정이 간편하여 손쉽게 프로젝트 생성이 가능하여 많이 쓰이고 있다. 하지만 기술의 발전으로 cra도 어느새 구식이 되었고.. 새로 많이 쓰이는 vite에 대해 공부를 해

최근에 멋사 리액트 프로젝트였던 타잉을 다시 리팩토링(?) 하고 있다.리팩토링인지 새로 만드는건지 하하.. 아무튼 만드는중 스크롤 문제가 있어 기록을 남겨둔다.height가 긴 onboarding 페이지 맨 아래에서 빨간 버튼을 누르면 로그인 페이지로 이동하는 로직이다

오픈 소스 자바스크립트 라이브러리로, 다양한 종류의 인터랙티브 지도를 웹 페이지에 구현할 수 있는 도구다양한 지리 정보를 시각적으로 표현하고, 지도 위에 다양한 요소를 추가하여 사용자가 지리 정보를 탐색하고 분석이 가능하다맵 객체에는 다양한 객체가 있다. 이 객체들이