기록하고 싶은 것들

빌드 만든 일기장을 배포를 하기 위해서는 빌드 작업을 거쳐야 한다. 따라서, 해당 디렉토리에서 build명령어를 실행해 주었다. npm run build 해당 명령어를 실행 뒤에는 build라는 디렉토리가 생성된다. 배포를 위해 , 지금까지 만든 결과물이 압축된 형태로 위치해있다. 배포 이번 프로젝트에서는 쉽게 배포를 할 수 있게 도와주는 firebase를 사용하였다. 프로젝트를 생성해준 뒤, firebase를 조작할 수 있는 아래의 툴을 설치해 준다. npm install -g firebase-tools 이후 프로젝트의 최상단 디렉토리 에서, 아래 명령을 실행해준다. firebase login 이후 firebase에 로그인하였던 구글계정으로 로그인을 해주면, 아래와 같은 이미지가 뜨며, 로그인이 되었다..

오늘은 기존의 적었던 다이어리의 상세 내용을 볼 수 있는 Diary page를 구현하였다. 정보 불러오기 params로 전달받은 diary의 id를 설정해준뒤, useEffect를 이용하여, id와 diaryList가 변경될 때마다 id에 해당하는 diary를 찾아 setData로 data의 상태를 변경시켜, 정보를 전달 받는다. useEffect(() => { if (diaryList.length >= 1) { const targetDiary = diaryList.find( (it) => parseInt(it.id) === parseInt(id) ); //일기 존재 여부에 따라 설정 if (targetDiary) { setData(targetDiary); } else { alert("없는 일기입니다."..

오늘은 일기장의 new 페이지를 만들어 주었다. new페이지는 새로운 일기를 쓸 때 사용하는 페이지로, 기본적으로 일기에 들어갈 날짜, 감정, 내용을 적어서 새로운 일기를 추가해주는 역할을 한다. Header 우선 헤더부분에는 기존에 제작한 MyHeader를 이용하여 구현하였다. headText 부분에는 '새 일기쓰기'라는 텍스트를 넣어주었고 leftChild에는 기존에 생성했던 버튼 컴포넌트를 부착하여, 버튼을 클릭 시 뒤로 이동하게 설정해주었다. }/> input_date 일기의 날짜를 지정해 줄 수 있는 input태그이다. 날짜를 ISOString방식으로 변환하여 기본값으로 설정하였고, 원하는 날짜를 클릭 시에 변경이 되도록 설정해주었다. setDate(e.target.value)} /> input..

감정 일기장에 들어갈 기본적인 home 페이지를 만들어 주었다. Header 우선 헤더부분에는 기존에 제작한 MyHeader를 이용하여 구현하였다. headText 부분에는 현재 연도와 월을 넣어주어서, 일기장이 현재 날짜를 잘 반영할 수 있게 만들었다. leftChild와, rightChild 에는 각각 기존에 생성했던 버튼 컴포넌트를 넣어주었고 각각의 버튼을 클릭 시 1달 전,후로 headText가 바뀌게 설정해주었다. const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; const increaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getM..