React9 [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] 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. React Hook Form 맛보기 1. React Hook Form_① React Form 예제 (간단한 To Do List)_② React Form 예제 2 (React Hook Form update)1. React Hook FormReact Hook Form은 React에서 'form'을 좀 더 사용하기 편하게 해주는 라이브러리로의 상태 state와 유효성 검사를 처리하기 위한 간편한 방법을 제공해 주는 라이브러리다. React Hook Form은 아래 명령어를 입력해서 설치할 수 있다.npm install react-hook-form 백문이 불여일견, 기존에 React에서 form을 다루던 방식을 아래 예제를 통해서 복습해 보자.① React Form 예제 (간단한 To Do List) import {useState} from ".. 2024. 8. 26. [TypeScript] create-react-app에 TypeScript 설치하기 1. 'create-react-app'에 TypeScript 설치하기npx create-react-app my-app 위의 명령어는 React App을 만들 때 사용하는 명령어이다.여기서 아래와 같이 '--template typescript' 추가하면 TypeScript를 같이 설치할 수 있다.npx create-react-app my-app --template typescript설치가 완료되면, 기존에 'create-react-app'으로 생성된 React App 초기 파일에서TypeScript와 관련된 파일이 추가 혹은 변경된 것을 확인할 수 있다.(CRA 기본 프로젝트와 관련된 파일들을 개별적으로 정리한 뒤에 캡쳐한 것이다.)앞에서 다룬 명령어는 React App을 처음부터 생성하는 명령어이다.즉,.. 2024. 4. 20. [React Router]<Link> 태그 Issue 해결하기 1. 문제 설명 위의 이미지와 같은 특정 날짜를 기준으로, 주간 박스 오피스 정보를 출력하는 웹 페이지에서영화 제목을 클릭하면, 해당 영화에 대한 상세 정보가 적힌 웹 페이지로 넘어가는 기능을React Router를 활용해서 구현하고 정상적으로 동작하는 지 테스트를 해봤다. 더보기'Home.js' (영화 웹 페이지의 기본 화면 담당) import { useState } from "react";import { useEffect } from "react";import Movie from "../Components/Movie";function Home(){ const [Loading, setLoading] = useState(true); const [Movies, setMovies] = useSt.. 2024. 2. 13. 이전 1 2 다음
