리액트
Framer-motion 리액트 애니메이션 라이브러리
Framer-motjon 리액트를 위한 오픈소스 프로덕션레디 모션 라이브러리 프로덕션 레디란? 사용자의 요구-사용성, 의존성, 가용성-을 충족 시키는 소프트웨어. 실제 운영 환경에서 구동이 가능한 코드. 설치 npm install framer-motion import { motion } from "framer-motion" export const MyComponent = ({ isVisible }) => ( ) Animations Motion 컴포넌트를 animate 속성을 통해 제어하며, 간단한 애니메이션은 animate props에서 직접 값을 설정할 수 있습니다. Gestures 제스쳐는 리액트 이벤트 시스템을 확장하여 사용하며 호버, 탭, 드래그를 지원합니다. Variants Variants를 통..
노마드코더 캐럿마켓 클론코딩 예약구매 완료!
프로그래밍을 처음 배우기 시작하면서부터 지금까지 쭉 함께하고 있는 노마드코더 Learning by doing을 통해 프로그래밍을 배울 수 있는 가장 좋은 사이트라고 생각한다. 새로운 기술을 배우고 -> 이 기술이 왜 필요한지, 왜 탄생했는지를 찾아보고 -> 혼자 여러 방면으로 연습해보는 일련의 과정이 나에게 참 잘 맞았다. 복습해야할 강의도 많고 수료해야할 챌린지도 많고, 이론에 대한 공부할 것도 너무 많지만, 중압감은 하나도 없다. 커리큘럼을 재밌게 구성한 니꼬쌤 덕이 아닐까!! 요 니꼬쌤이 이번에 15시간 이상 분량의 NextJS 강의를 만들었다 처음 바닐라 자바스크립트에 입문하며 후에 편리한(?) 리액트 프레임워크를 배우게 될 생각에 기대가 됐었는데, 마찬가지로 리액트를 처음 배우기 시작할때도 리액..
[리액트] React-hook-form
리액트에 내장된 hook만으로 컴포넌트 속 form을 검증하기 위해서는 const [toDo, setToDo] = useState(""); const [toDoError, setToDoError] = useState(""); const onChage = (event: React.FormEvent) => { const { currentTarget: { value }, } = event; setToDoError(""); setToDo(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault(); if (toDo.length < 10) { return setToDoError("To Do Should Be Longer"); } ..
[리액트] Recoil - state management
REDUX? or RECOIL? -> Nico said, "Everytime you learn or use libraries, framworks and other skills, You MUST know why you need and use those." Because those are built to sort out things. State management의 필요성? 다크모드, 유저의 로그인 여부 등 리액트 앱의 각종 state를 일일이 부모/자식 컴포넌트까지 argument로 전달해준다면 수많은 interface를 생성하고 반영해주어야함. => global state(atoms)를 사용하면 이를 해결할 수 있음! const isDark = useRecoilValue(isDarkAtom); const..
[리액트] - styled component
1. props 활용 - 동일한 컴포넌트에 특정 prop에 다른값을 주고싶을때 const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; //inside of rendered component 2. extend 활용 - 이미 만들어진 컴포넌트를 확장하여 사용 const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; const Circle = styled(Box)` border-radius: 50px; `; 3. as - 컴포넌트 내 prop은 같되 html..