# DiaryProject
감정일기장 만들기 5 - 배포 & 후기
public/index.html✚ <html lang="ko"> en을 ko로 바꿔주지 않으면 번역하기~ 같은 게 나올 수도 있음!index.html 에 있는 title을 찾아 바꾸어준다.렌더링 될 때마다 바꾸어주게 하기 위해 useEffect 사용이걸 필요한 페
감정일기장 만들기 4 - 최적화
최적화에는 직접 코드를 눈으로 하나하나 보고 판단하는 정적인 분석과정이 있고, 프로그램 도구를 이용해 찾아내는 동적 분석이 있다근데 난 아직 바보니까 동적 분석을 이용해보기로 함..ㅎ컴포넌트 탭에서 Highlight updates when components rende
감정일기장 만들기 3 - 오류 수정 & Local Storage
오류 수정 매월의 마지막 날 매 달 마지막 날의 글이 안 써지는 것을 발견했다 > Home.js 이 부분을 수정했어야 했다. 0이 되면, 마지막 날의 자정이 설정이 되는 것. 시/ 분/ 초 까지 영향이 미친다는 것을 잊지 말자! 이렇게 수정해주었더니 잘 나오는
감정일기장 만들기 2 - CRUD 기능 구현 (4) 상세
마지막으로 상세페이지를 구현하는 일만 남았다비교적 쉬울 거 같다고 생각하며 시작..!일단 diary.js 에서도 할일이 있다.현재 조회하고자 하는 일기 데이터를 가져와야 함.Edit에서 했던 것처럼 path variable로 받은 일기 id를 가지고DiaryStateC
감정일기장 만들기 2 - CRUD 기능 구현 (3) 수정
먼저 현재 일기의 데이터를 가져올 수 있게 해야함.일단 App.js에서 라우트 설정을 해준다. (:id)useParams를 이용해서 id값을 받아오고,App.js 에서 useContext에 담아뒀던 다이어리 리스트를 불러온다Edit잘 불러와졌는지 확인!diaryList
감정일기장 만들기 2 - CRUD 기능 구현 (2) 작성
NEW 일단 헤더에서는 왼쪽 버튼으로 뒤로가기 하나, 오늘 날짜를 적는 섹션, 감정을 선택하는 섹션, 글을 적는 섹션 그리고 전송하는 버튼들로 나누어 본다 > New.js Header import 해오는 거나 navigate 지정하는 건 생략하도록 한다.ㅎㅎ 내
감정일기장 만들기 2 - CRUD 기능 구현 (1) HOME
홈화면에서는 헤더에 날짜, 그리고 < > 버튼을 누르면 이전 달로 이동하도록 만들고,또 일기 리스트는 필터도 적용한다.Home.js일단 헤더의 가운데 글씨 부분을 설정근데 자바스크립트의 getMonth()함수는 이상해서 그냥 실행하면 첫달이 1이 아니고 0이 된다
감정일기장 만들기 1 - 기초 작업
기초 공사 🪛 font 구글 폰트보다 내가 좋아하는 폰트가 많은 눈누 폰트 이용. https://noonnu.cc/ > App.css 그리고 App.js 에서 import "./App.css"; 하면 끝! 갖다 쓰고 싶은 곳에 font-family: "Hum
DiaryProject(React) - 프로젝트 마무리
개요 > - 첫 스터디 프로젝트를 마무리했다. 사실 누군가에게 보여주기 위한 프로젝트라기보다 리액트를 한 번 경험해보자라는 생각으로 제로베이스에서 hook을 하나씩 학습해가면서 만든거라 완성도보다는 개인의 학습에 중점이 된 프로젝트였다. 그럼에도 불구하고 내 개발 인생 첫 프로젝트를 무사히 마무리해서 뿌듯하다. 개인적인 학습과 부트캠프의 커리큘럼 그리고 토...
DiaryProject(React) - 작성한 일기 목록 개선 작업
개요 > - 전에는 부모 컴포넌트에서 map을 이용해서 antd 버튼, 모달 컴포넌트를 작성한 일기 데이터 수만큼 복제하는 구조였다. 하지만 자식 컴포넌트로 보내는 props가 너무 많아지기도 하고, 자식 컴포넌트 파일(mapButton.js 복제되는 컴포넌트 파일)에서 여러 함수를 작성해서 쓰는게 더더욱 구조를 복잡하게 만드는 것 같았다. 기존의 antd...
DiaryProject(React) - 작성한 일기 목록 보여주기(2)
개요 > 버튼 태그를 통해 작성한 일자와 기본 데이터를 보여주기까지 구현을 완료했고, 이번 작업에서는 antd Modal Component를 통해 모달을 통해 다이어리의 데이터를 끌어올 수 있게 구현해봤다. 구현과정 버튼을 누르면 이벤트가 발생하면서 invisible처리된 모달이 visible로 바뀌는 걸 이용해서 버튼을 누를 때 모달 내부에 데이터가 표...
DiaryProject(React) - 작성한 일기 목록 보여주기(1)
개요 > - 메인 페이지에서 일기를 작성하면 그동안 작성한 일기 목록을 보여주는 페이지를 만들려고 한다. 가상으로 만들어놓은 데이터를 가지고 여러가지 가공을 하면서 초안 구현을 해봤다. 일단은 버튼 태그로 목록을 구현할 예정이며, 추후 모달 형식으로 변경할 예정이다. 일단 버튼 태그 텍스트로는 내가 쓴 다이어리를 구분할 수 있게 작성한 날짜, 기분(데이터...
DiaryProject(React) - 자식, 부모 컴포넌트간 state 공유
참고자료 개요 > - 각자 작업한 컴포넌트를 메인페이지로 합치는 작업을 완료했다. 아래 이미지의 작성 완료 버튼을 누르면 각 컴포넌트의 데이터를 서버로 전송해야 했다. - 여기서 문제점이 발생했다. state를 모두 자식 컴포넌트에서 관리하고 있어 부모 컴포넌트로 자식 컴포넌트의 state value를 가져와야 했다. 해결방법 > 내가 선택한 방법은 부...
DiaryProject(React) - 회원가입 폼(7) - 트러블 슈팅(with useEffect)
수정사항 > 실시간 유효성 검사를 구현했지만, state에는 실시간으로 값이 반영되지만 실시간으로 렌더링이 되지 않아, 비밀번호 유효성 조건인 8자 이상을 충족시켰음에도 alert 메세지가 출력 에러를 확인. 문제의 원인 > (제대로 이해한게 맞다면) > 실시간 유효성 검사 함수의 외부 함수가 'Onchange'라는 콜백 함수였다는 점을 잊고 있었다. 자...
DiaryProject(React) - 회원가입 폼(6) - useReducer 복잡한 state 관리하기
변경사항 회원가입 양식 유효성 검사 메세지를 관리하는 state를 useReducer를 통해 하나의 state에서 관리 useReducer > >- state는 3개의 Alert state를 alert 하나의 state에서 관리될 수 있도록 변경했다. usereducer의 적용 >변경된 코드 > >- alert는 객체로 구성되어 있기 때문에 직접 값을...
DiaryProject(React) - 메인페이지 구성
지난번 Git을 통해 분산되어 있던 코드를 하나의 레포지토리로 합치는데 성공하였고, 이번에는 각 컴포넌트를 합쳐서 메인페이지 틀을 구성했다. 팀원이 사용하는 패키지 자동으로 다운 받기 옮기는 과정에서 배운 점은 각자가 사용하는 모듈을 일일이 하나씩 npm i (모듈명) 할 필요가 없고, 루트 경로에 있는 package.json에 의존성을 추가해준 다음 ...
DiaryProject(React) - Git
개요 그동안 팀원 간 코드 공유없이 local에서만 작업을 해왔다. 각자 기능구현이 마무리되고 기능과 페이지를 합치기 위해 하나의 repository에서 관리해야 할 필요성을 느꼈고, git을 통한 협업을 진행하기로 했다. Git 협업은 처음인데... 개발 공부를 시작하기도 전에 git 강좌를 수강했던 적이 있다. 굉장히 다양한 기능을 배웠던 것 같은데,...
DiaryProject(React) - 회원가입 폼(5) - Material UI 적용
주요 변경사항 Material UI Templete을 사용한 CSS 적용 Material UI? Material UI는 UI Framework이며, component API 형태로 구성되어 있기 때문에 React에서 적용하기 쉽다는 장점이 있다. Material UI Templete > CSS Library를 사용하는 경험이 필요할 것 같아, 추천 지...
DiaryProject(React) - 회원가입 폼(4) - 코드 개선, DB연결, React Router
주요 변경사항 useRef > useState 적용 axios post를 사용하여 DB에 data 전달 react router를 사용한 컴포넌트간 페이지 이동 useRef > useState 적용 >개선점 불필요한 렌더링을 방지하려고 주요 변수를 useRef로 관리하려고 했으나, 본래의 용도와 다르게 쓰이는 것 같아 useState로 재변경 use...
DiaryProject(React) - 회원가입 폼(3)
회원가입 폼 개선 작업 진행 중복 함수 제거 form 유효성 검사 개선 리스트 개선점 - 1. 중복 함수 제거 > #### 문제 인식 기존 코드에서는 함수 4개가 사용되지만 결국 같은 기능을 하고 있다.(input event 발생 > Ref value 재할당) value값을 할당하는데에 변화가 생기면 함수하나하나 고쳐야 하는 비효율 발생 태그 부분에서 ...