티스토리

🍮

검색하기

블로그 홈

🍮

jinbaaaaang.tistory.com/m

진방이 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

🍅 REACT 뽀모도로 타이머 만들기 (7) 🍅 마지막으로 Study 페이지를 만들었다.Study 페이지는 Study 컴포넌트와 바늘의 회전을 담당하는 ChimStudy 컴포넌트로 구현하였다.ChimStudy 컴포넌트// ChimStudy.jsimport { useEffect, useState } from "react";import Chim from "../chim/Chim";import "../BackGround/Background.css";export default function ChimStudy({ isStart, setIsStart, degree }) { const savedDegree = parseInt(localStorage.getItem("degree") || degree); const [currentDegree, setCur.. 공감수 1 댓글수 0 2025. 2. 3.
🍅 REACT 뽀모도로 타이머 만들기 (6) 🍅 Pomodoro 페이지에는 0.5초에 1도씩 돌아가는 시계가 들어간다.이를 구현하기 위해서는 바늘 컴포넌트와 Pomodoro에 직접적으로 들어갈 바늘 컴포넌트를 이용한 컴포넌트가 필요하다.Chim 컴포넌트// Chim.jsimport pic5 from "../Pic/Chim.png";export default function Chim(props) { return ( )}props.degree 값을 받아 이미지를 해당 각도로 회전시킨다. transition: "transform 1s linear"을 통해 transform 속성이 변경될 때 등속도로 회전하는 애니메이션 효과를 적용했다.ClockPomo 컴포넌트// ClockPomo.jsimport Chim from "../chim/.. 공감수 1 댓글수 0 2025. 2. 3.
🍅 REACT 뽀모도로 타이머 만들기 (5) 🍅 다음으로 Setting 컴포넌트를 만들었다. Setting 페이지에는 각각 Study와 break 시간을 수정하는 작은 토마토 모양 2개가 있다.이를 구현하기 위해 TomatoTime이라는 컴포넌트가 필요했다.TomatoTime 컴포넌트// TomatoTime.jsimport pic3 from "../Pic/TomatoTime.png";import "./TomatoTime.css";export default function TomatoTime(props) { return ( {props.title} 00HOUR .. 공감수 1 댓글수 0 2025. 2. 3.
🍅 REACT 뽀모도로 타이머 만들기 (4) 🍅 메인 페이지 다음으로 TodoList 컴포넌트를 만들었다. TodoList 컴포넌트를 만들기 위해서는 투두 입력칸을 나타내는 컴포넌트, 하나의 투두를 생성하는 컴포넌트가 필요했다. 투두를 생성하는 컴포넌트를 만들면서는 체크표시를 나타내는 컴포넌트와 삭제버튼을 나타내는 컴포넌트 또한 필요해졌다.그래서 TodoList 컴포넌트 내에 TodoInsert 컴포넌트와 TodoListItem 컴포넌트를 포함하고, TodoListItem 컴포넌트 내에 TodoCheck 컴포넌트와 TodoRemove 컴포넌트를 포함하게 코드를 작성했다.TodoList 컴포넌트// TodoList.jsimport Background from "../BackGround/Background";import pic2 from "../Pic/T.. 공감수 1 댓글수 0 2025. 2. 3.
🍅 REACT 뽀모도로 타이머 만들기 (3) 🍅 먼저 돌아가는 바늘을 제외한 Pomodoro 페이지를 만들었다.그러기 위해선 Background 컴포넌트와 TomatoBtn 컴포넌트가 필요했다.Background 컴포넌트// Background.jsimport { useNavigate } from "react-router-dom";import "./Background.css";export default function Background(props) { let navigate = useNavigate(); let goToMenu = () => { navigate('/'); // "/" 경로(홈)로 이동 } return ( 🍅{props.title}🍅 );}배경색을 지.. 공감수 1 댓글수 0 2025. 2. 3.
🍅 REACT 뽀모도로 타이머 만들기 (2) 🍅 SPA 방식으로 페이지 이동을 구현하고자 했다. SPA 방식 : 페이지 전환 시에도 서버에서의 새로운 HTML 요청 없이 현재 페이지에서 필요한 부분만 변경하는 방식이다. 새 HTML을 요청하지 않기에 페이지 전환이 빠르고 useState 등을 이용해 프론트엔드에서 상태 관리가 가능하지만 처음에 자바스크립트 파일을 한 번에 다운로드해야 하기에 초기 로딩 속도가 느릴 수 있다. // index.jsimport React from 'react';import ReactDOM from 'react-dom/client';import { BrowserRouter } from 'react-router-dom';import App from './App';const root = ReactDOM.crea.. 공감수 1 댓글수 1 2025. 2. 2.
🍅 REACT 뽀모도로 타이머 만들기 (1) 🍅 여름방학 동안 HTML, CSS, JS와 리액트 공부를 했다.직접 만들어보는 공부를 하지 않았더니 피상적으로만 이해가 된다는 느낌을 계속 받아,이번 겨울방학에는 직접 작은 프로젝트를 해보자 라는 생각으로 계획한 뽀모도로 타이머이다. 홍보부 카드뉴스를 만들면서 쫌쫌따리 기른 피그마 실력으로 UI를 디자인했다.UI 디자인을 마친 다음에.. 나는 피그마 기능 중 정말 기본만 사용해서 만들고 있었구나..코드를 작성하면서.. 피그마로 UI 디자인 할 때 디테일한 부분까지 생각하지 않으면 굉장히 귀찮구나..이 두가지를 느꼈다. 이후 유튜브에서 3시간쯤 되는 피그마 설명 영상을 봤다. 다음 디자인 할 때 적용해봐야겠다. 네 페이지로 이루어진 타이머이다. 첫 번째 페이지에서는 토마토 모양의 시계가 계속해서 돌아간다.. 공감수 2 댓글수 0 2025. 2. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.