전체 글105 [Framer Motion] 메뉴바 애니메이션 0. 개요 이번에 다루는 것은 framer-motion을 활용해서 위와 같은 메뉴바를 구현하는 방법이다.지금 만들고 있는 내 포트폴리오의 Header에 이를 적용하기 위해서 구현 방법을 공부해봤고 실제로 이를 구현하는데 성공하였고, 나중을 위해서 구현하는 과정을 블로그에 정리해두기로 하였다.1. 구현 과정예제 코드와 실행 예시는 다음과 같다. import {styled} from "styled-components";import {motion} from "framer-motion";import {useState} from "react";interface I_ItemData { ItemId: string; ItemNm: string;}const Wrapper = styled.div` widt.. 2025. 8. 5. [Zustand] 상태 및 액션 설계 패턴 (작성 중) 목차1. 상태 설계 패턴2. 액션 설계 패턴1. 상태 설계 패턴① Store 구조화 기본 원칙 Zustand의 Store는 상태, 액션(함수) 계산된 값(Computed Value), 총 세가지로 나눠서 설계를 한다.const useCountStore = create((set, get) => ({ count: 0, setCount: () => set((state) => ({count: state.count + 1})), doubleCount: () => get().count * 2})); 상단의 소스코드에서 count는 상태에 해당하며setCount는 count의 값을 1 증가하는 액션을 수행하는, 상태를 변경하는 함수이고그리고 doubleCount는 get() 함수를 통해 상태의 값을 .. 2025. 6. 25. [Zustand] Zustand 맛보기 목차1. Zustand란?_① 상태 관리 라이브러리를 사용해야 하는 이유_② Zustand 설치 및 기본 예제1. Zustand란? Zustand는 독일어로 "상태", "형편", "상황"등을 의미하는 단어로'redux', 'recoil'과 같은 React에서 사용되는 상태 관리 라이브러리 중 하나이다. Zustand는 보일러 플레이트를 사용하지 않기 때문에 코드 작성이 간결하며별도의 Provider 없이도 사용할 수 있다는 장점을 가지고 있는 상태 관리 라이브러리이다.① 상태 관리 라이브러리를 사용해야 하는 이유 Zustand라는 라이브러리가 어떤건지는 대충 알았으나굳이 Zustand 같은 상태 관리 라이브러리를 써야하는 지에 대해 의문점이 들것이다.기본적으로 React로 개발한 프로젝트는 여러 개의 컴.. 2025. 6. 24. [Maple ToDo] 지금까지 작업한 내용 정리 개인 프로젝트 'Maple ToDo', 이전까지 작업했던 내용 간략하게 정리 개발 기간: 2025.01.31 ~ 2025.05.06 (진행 중)- 3월부터 4월까지 정보처리 산업기사 실기 준비 기간이었기 때문에 실제로 작업한 기간은 약 두 달 남짓 정도 1. 캐릭터 검색, To Do List 화면 이동 검색창에 내 캐릭터의 닉네임을 입력하고, Enter 키나 검색 버튼 (화면상 돋보기 모양 버튼)을 누르면Nexon Open API 통해 메이플스토리 내, 해당 닉네임과 동일한 닉네임의 캐릭터 정보를 받아오고데이터를 성공적으로 받아왔다면, 아래 이미지처럼 To Do List 페이지로 이동한다. To Do List 화면 최상단에는 내 캐릭터 정보 (캐릭터 이미지, 닉네임, 서버, 레벨, 직업)가 보이고.. 2025. 5. 6. [Framer-motion] Drag and Drop 목차1. Reorder_① _② 2. Drag and Drop 예제_① 예제 1 (Framer-motion / Reorder 기능 활용한 버전)_② 예제 2 (Reorder 사용하지 않고, DnD 구현)📔 Reference이번에 공부한 것은 Framer-motion 라이브러리의 Reorder라는 기능을 활용해서아래와 같은 Drag and Drop 애니메이션을 구현해보는 방법에 대해 공부해봤다. 위의 예시는 실제로 Framer-motion의 Reorder 기능을 활용해서 만든 DnD 예제이다.예제에 대한 설명에 들어가기 앞서서, Reorder에 대한 설명부터 하겠다.1. ReorderFramer Motion의 Reorder는 드래그되는 목록을 만드는데 사용할 수 있는 컴포넌트로과 두 가지 컴포넌트를 사.. 2025. 4. 30. [React] Checkbox 예제 1. 개요 상단의 이미지는 필자가 예전에 만들었던 To Do List App의 모습이다.처음 일정을 만들고, 일정 아이템에서 '완료' 버튼을 클릭하면 해당 일정이 완료 처리가 되는 식이다. Microsoft의 To Do라는 프로그램을 실행한 모습을 가져와봤다. 이제 위의 이미지처럼 특정 일정의 체크박스를 클릭 시 해당 일정이 완료되게 해보려고 한다.버튼을 클릭해서 일정을 완료하는 것이 아니라, 좀 더 일반적인 To Do List에 가깝게 말이다. 실제로 구현 완료한 예제는 바로 다음 장에서 다루도록 하겠다.2. To Do List① Version 1 / To Do Item 한 개만 사용 예제 소스코드는 다음과 같이 작성하였다.import {useState] from "react";import {styl.. 2025. 2. 22. [React] Hook의 규칙 📔 목차1. 개요2. Hook의 규칙1. 개요이번에 공부한 것은 Hook, React Hook의 규칙에 대한 것이다.사실 React Hook의 규칙에 대해서는 예전, React를 처음 공부할 당시에 React 공식 문서 / Hook 규칙 파트를 본 적이 있었고, 공부한 내용을 정리까지 했었다. 그리고 이때 공부했던 것들은 시간이 지나면서 내 머릿속에서 점차 잊혀 갔고최근에 사이드 프로젝트를 진행하면서 다시금 Hook 규칙에 대한 기억을 갱신하게 됐다. 이거는 실제로 내가 사이드 프로젝트를 진행할 때 봤었던 Error 메시지인데React Query의 useQuery Hook을 onValid라는 임의의 함수에서 호출하는 코드를 짰다가 보게 됐다. 이는 React Hook을 함수 컴포넌트의 최상위 영역이 .. 2025. 2. 15. Framer Motion 맛보기 1. Framer Motion2. motion props ① props: animate ② props: initial ③ props: transition 3. Variants ① Variants의 정의 ② Variants 예제, Part 1 ③ Orchestration ④ Variants 예제, Part 24. Drag1. Framer MotionFramer Motion은 React에서 Animation 효과들을 쉽게 구현할 수 있게 해주는 라이브러리로아래 이미지처럼 Netflix 같은 데에서 사용되는 멋진 Animation 효과들을 구현할 수 있다. framer-motion 라이브러리는 아래 명령어를 입력해서 설치할 수 있다.npm install framer-motionframer-moti.. 2025. 1. 1. [Recoil] Selector 1. Selector① Selector의 정의 Recoil에서 Selector란 파생된 상태 (derived state)의 일부를 나타낸다.여기서 파생된 상태 (derived state)란 기존 recoil state (atom)를 입력 받고그걸 변형해서 반환하는 순수 함수에 전달된 상태 (state)의 결과물이라고 보면 된다. 이러한 Selector는 selector() 함수를 통해서 생성할 수 있다.const toDoSelector = selector({ key: "toDoSelector", //고유 key 값 get: ({get}) => {}});② get Selector의 get 속성은 get 메서드를 인자로 전달 받는다.이때 전달받은 get 함수를 통해서 atom이나 다른 Select.. 2024. 11. 16. 이전 1 2 3 4 ··· 12 다음
