본문 바로가기

전체 글82

9. 페이지네이션 ※페이지네이션 구현 -Math.ceil : 올림 함수 ex) 4.3 -> 5 , 7.8 -> 8 -slice() : 배열의 일부분을 잘라내서, 새로운 배열을 구성 -각 페이지 마다 다이어리 4개씩 ※카테고리 분류 함수 에서 로 옮겨 정리 -카테고리 버튼 누를 때마다 페이지 1로 설정 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX -Category.JSX -CategoryButton.JSX -Header.JSX -Sidebar.JSX -EditDiary.JSX -Pagination.JSX module -Diary.JSX css -Diary.css -Category.css component - import Reac.. 2024. 2. 19.
8. 일기 수정 모달 창 ※수정 버튼 클릭 시 모달 창이 나오도록 구현 ※pointer-events CSS를 이용해 모달 창 개/폐 여부에 따라 페이지 버튼 클릭 이벤트 허용/방지 -모달 창이 열리면 모달 창 외부 버튼을 클릭이 안되며 그대로 모달 창 닫힘 ※이벤트 리스너를 이용해 모달 창 외부를 클릭하면 모달 창이 닫힘 -mousedown : HTML 요소 위에 마우스를 클릭 시 이벤트 발생 -.current.contains(event.target) : 특정 영역 외 클릭을 감지 ※제목/내용/카테고리 수정 ※수정 모달 창을 열 시 , 이미 저장된 제목/내용/카테고리를 기본 value로 지정 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JS.. 2024. 2. 15.
7. 페이지 구성 전체적인 페이지 구성 -헤더, 사이드바 추가 추가 -카테고리 버튼을 사이드바로 이동 -한 줄당 일기장 2개 씩으로 그리드 설정 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX -Category.JSX -CategoryButton.JSX -Header.JSX -Sidebar.JSX module -Diary.JSX css -Diary.css -Category.css component - import React from 'react' import '../css/Diary.css' function Header() { return ( LIFE SHELF ) } export default Header component - .. 2024. 2. 13.
6. 모달 창 구현 모달 창 추가 ※모달 창 열기/닫기 ※모달 창 외부 버튼 클릭 허용/방지 -stopPropagation(): 이벤트 버블링을 방지 -이벤트 버블링: 이벤트가 동작될 시 루트까지 해당되는 부모 요소의 이벤트도 동작 ※모달 창 외부 클릭 시 모달 창 닫기 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX -Category.JSX -CategoryButton.JSX module -Diary.JSX css -Diary.css -Category.css component - import React, {useState} from 'react' import '../css/Diary.css' imp.. 2024. 2. 10.
COMPLETE TIMER 타이머 기능 최종 완성본 component -Button.jsx -Input.jsx page -Timer.jsx css -Timer.css App.js component - import React from 'react' function Input({className, type, value, onChange, placeholder}) { return ( ) } export default Input component - import React from 'react' function Button({type, className, name, onClick}) { return ( {name} ) } export default Button page - import React, {useCallback, useEffec.. 2024. 2. 7.
4. HOUR, STOP/RESTART, RESET ※시 추가 ※타이머 정지/재시작 추가 ※리셋 기능 추가 component -Button.jsx -Input.jsx page -Timer.jsx css -Timer.css page - Timer.jsx import React, {useCallback, useEffect, useState} from 'react' import '../css/Timer.css' import Input from '../component/Input' import Button from '../component/Button' function Timer() { const MAX_TIME = 59 const [timeOut, setTimeOut] = useState(true) const [startView, setStartView] = .. 2024. 2. 7.
CHROME APP componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg App.js component - import React from 'react' function Input({className, type, name, value, onChange, maxLength, placeholder, checked}) { return ( ) } export default Input component - import React from 'react' function But.. 2024. 2. 5.
11. 시간에 따른 Title ※시간에 따라 사용자에게 Title로 인사 하기 componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg module - import React, {useEffect, useState} from 'react' import '../css/List.css' import Input from '../component/Input' import Button from '../component/Button' function Login() { const checkU.. 2024. 2. 4.

티스토리툴바