원-달러 환율 변환기를 구현했다.사용자가 한 화폐 단위의 금액을 입력하면, 사전에 정의된 환율을 사용해 다른 화폐 단위로 변환된 금액을 동시에 보여준다.구현 과정컴포넌트 분리입력 필드를 재사용 가능한 CurrencyInput 컴포넌트로 분리한다.const CurrencyInput = ({ value, onChange, currencyUnit }) => { return ( {currencyUnit} onChange(currencyUnit, e.target.value)} /> );};currencyUnit: 화폐 단위(krw 또는 usd)를 받아 라벨과 id로 사용한다.value: 현재 입력값을 props로 받아 표시한다.onChange: 입력값이 변경될 때 화..

이전 글에서 다뤘던 배달 음식 주문 폼을 개선해봤다.여러 개로 분리된 state를 하나로 통합하고, useRef를 활용해 입력 유효성 검사 기능을 추가했다.구현 과정State 통합하기기존에 분리되어 있던 3개의 state를 객체 형태의 하나의 state로 합친다.기존 코드const [menu, setMenu] = useState("");const [address, setAddress] = useState("");const [request, setRequest] = useState(""); 변경 후const [state, setState] = useState({ menu: "", address: "", request: "",}); 이에 맞춰 JSX의 value 속성도 수정한다.return ( ..

React로 간단한 배달 음식 주문 페이지를 구현했다.메뉴, 배달 주소, 요청사항을 입력받고 주문 완료 시 입력값을 확인할 수 있도록 만들었다.구현 과정마크업 구조먼저 주문에 필요한 입력 폼들을 구성한다. 메뉴 선택을 위한 select,주소 입력을 위한 input, 요청사항 입력을 위한 textarea, 그리고 주문 완료 button을 배치한다.export default function OrderEditor() { return ( 배달의민족 주문 아이스크림 젤리 초콜릿 배달 주소 배달 요청사항 주문 완료 );} state 관리각 입력 필드의 값을 관리하기 위한 state를..

New 페이지에서 일기를 작성할 수 있는 기능을 구현했다.날짜 선택, 감정 선택, 일기 내용 입력이 가능하며, 날짜 포맷팅 유틸리티를 통해 일관된 날짜 형식을 유지한다.날짜 포맷팅 유틸리티formatWithZero 함수날짜를 두 자릿수로 일관되게 표시하기 위한 함수다.const formatWithZero = (number: number) => number 숫자가 10보다 작을 경우 앞에 0을 붙여 반환한다. getStringDate 함수날짜 데이터를 원하는 문자열 형식으로 변환하는 함수다.export const getStringDate = ( targetDate: Date | string | number, format: string = "yyyy-mm-dd") => { const dateObj =..

Home 페이지에서 월별 일기 데이터를 관리하고 정렬하는 기능을 구현했다. 사용자가 월을 전환하며 해당 기간의 일기만 볼 수 있고, 최신순 또는 오래된순으로 정렬할 수 있다.날짜 및 기간 관리현재 날짜 표시 및 월 변경pivotDate상태로 현재 표시 중인 월을 관리하고, 좌우 버튼으로 이전/다음 달로 이동할 수 있도록 구현했다.const [pivotDate, setPivotDate] = useState(new Date());const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1));};const onDecreaseMonth = () => { setPivotDate(new..