글작성과 수정이 겹치는 부분이 많아서 DiaryEditor 컴포넌트를 따로 만들었다 import DiaryEditor from "../components/DiaryEditor" const New = () => { return ( ) }; export default New; 그리고 New컴포넌트에서 DiaryEditor를 불러와주었따 헤더 만들기 import { useNavigate } from "react-router-dom"; import MyHeader from "./components/MyHeader" import MyButton from "./components/MyButton" const DiaryEditor = () => { const navigate = useNavigate(); return..

수정 전/ 후 홈 모습 날짜헤더 등록하기 mount가 됨과 동시에 날짜가 표시되어야 하고 월을 이동할 버튼이 필요함 import { useState } from "react"; import MyHeader from './../components/MyHeader' const Home = () => { const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월` return ( ); }; export default Home; useState를 통해 날짜를 set해준다. 전에 헤더로 만들어두었던 MyHeader 컴포넌트를 import 해주고 MyHea..

React Redux useReducer(); 상태관리 함수인 useState 대신 useReducer를 사용할 것이다. 컴포넌트 상태 업데이트 로직을 컴포넌트 바깥이나 다른파일에 작성 후 불러올 수 있다. const [data, dispatch] = useReducer(reducer, []); 앱 컴포넌트안에 useReducer() 훅을 불러온다. reducer const reducer = (state, action) => { let newState = []; switch (action.type) { case 'INIT': { return action.data; } case 'CREATE': { const newItem = { ...action.data } newState = [newItem, ...s..

폰트 설정 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글폰트에 있는 나눔펜스크립트와 연성폰트를 사용한다 import style 내 url과 css font-family를 App.css에 등록해줬다 레이아웃 셋팅 모든 페이지에 반영되는 레이아웃 셋팅을 할 것이다. 흰색 메인 컨텐츠, 바탕 회색등의 모든 페이지에 공통되는 스타일을 추가할 것 React 앱은 index.js파일에서 앱 컴포넌트가 랜더링되는 JSX요소들을 아이디가 루트를 갖는 요소를 자식으로 가지면서(getElementById('root') 화면에 추가되는 원리. 그 증거로 요소 확인시 App컴포넌트는 ro..

[Java] 스레드 제어 스레드 상태? 스레드 객체를 생성하고 start() 메소드를 호출하면 바로 실행되는 것이 아니라 실행 대기 상태가 된다. 운영체제는 실행 대기 상태에 있는 스레드 중 하나를 선택해 실행 상태로 만 h-owo-ld.tistory.com 550페이지 직접해보는 손코딩 public class AutoSaveThread extends Thread{ public void save() { System.out.println("작업 내용을 저장한다"); } @Override public void run() { while (true) { try { Thread.sleep(1000); } catch (InterruptedException e) { break; } save(); } } } publi..