diary-project
1.감정일기장 만들기 1 - 기초 작업
기초 공사 🪛 font 구글 폰트보다 내가 좋아하는 폰트가 많은 눈누 폰트 이용. https://noonnu.cc/ > App.css 그리고 App.js 에서 import "./App.css"; 하면 끝! 갖다 쓰고 싶은 곳에 font-family: "Hum
2.감정일기장 만들기 2 - CRUD 기능 구현 (1) HOME
홈화면에서는 헤더에 날짜, 그리고 < > 버튼을 누르면 이전 달로 이동하도록 만들고,또 일기 리스트는 필터도 적용한다.Home.js일단 헤더의 가운데 글씨 부분을 설정근데 자바스크립트의 getMonth()함수는 이상해서 그냥 실행하면 첫달이 1이 아니고 0이 된다
3.감정일기장 만들기 2 - CRUD 기능 구현 (2) 작성
NEW 일단 헤더에서는 왼쪽 버튼으로 뒤로가기 하나, 오늘 날짜를 적는 섹션, 감정을 선택하는 섹션, 글을 적는 섹션 그리고 전송하는 버튼들로 나누어 본다 > New.js Header import 해오는 거나 navigate 지정하는 건 생략하도록 한다.ㅎㅎ 내
4.감정일기장 만들기 2 - CRUD 기능 구현 (3) 수정
먼저 현재 일기의 데이터를 가져올 수 있게 해야함.일단 App.js에서 라우트 설정을 해준다. (:id)useParams를 이용해서 id값을 받아오고,App.js 에서 useContext에 담아뒀던 다이어리 리스트를 불러온다Edit잘 불러와졌는지 확인!diaryList
5.감정일기장 만들기 2 - CRUD 기능 구현 (4) 상세
마지막으로 상세페이지를 구현하는 일만 남았다비교적 쉬울 거 같다고 생각하며 시작..!일단 diary.js 에서도 할일이 있다.현재 조회하고자 하는 일기 데이터를 가져와야 함.Edit에서 했던 것처럼 path variable로 받은 일기 id를 가지고DiaryStateC
6.감정일기장 만들기 3 - 오류 수정 & Local Storage
오류 수정 매월의 마지막 날 매 달 마지막 날의 글이 안 써지는 것을 발견했다 > Home.js 이 부분을 수정했어야 했다. 0이 되면, 마지막 날의 자정이 설정이 되는 것. 시/ 분/ 초 까지 영향이 미친다는 것을 잊지 말자! 이렇게 수정해주었더니 잘 나오는
7.감정일기장 만들기 4 - 최적화
최적화에는 직접 코드를 눈으로 하나하나 보고 판단하는 정적인 분석과정이 있고, 프로그램 도구를 이용해 찾아내는 동적 분석이 있다근데 난 아직 바보니까 동적 분석을 이용해보기로 함..ㅎ컴포넌트 탭에서 Highlight updates when components rende
8.감정일기장 만들기 5 - 배포 & 후기
public/index.html✚ <html lang="ko"> en을 ko로 바꿔주지 않으면 번역하기~ 같은 게 나올 수도 있음!index.html 에 있는 title을 찾아 바꾸어준다.렌더링 될 때마다 바꾸어주게 하기 위해 useEffect 사용이걸 필요한 페