[TIL] 221024

Beanxx·2022년 10월 24일

목록 보기

82/120

🔥 오늘 한 일

프로그래머스 Lv.0 4문제 완료
StudyHaza 플젝
- Detail page 글 수정 기능 구현
- 글쓴이만 글 수정, 삭제 버튼 보이도록 구현
- 상세페이지 ‘참여하기’ 버튼에 준비중모달 연결
[MERN STACK 커뮤니티] Section0-2(React, Express/Mongoose/Style) 학습
14:30~15:00 BearMello 플젝 회의

🚨Error Handling

플젝 구조를 전에 이상하게 짜논 바람에 수정 기능 구현할 때 구조가 꼬여서 구현하는데 좀 오래 걸렸다,,🥲
첨에 구조 짤 때 나중에 구현할 기능까지도 생각해서 체계적으로 로직 짜기!
firebase 데이터 수정 기능 자체는 삭제 기능과 유사하게 구현가능하다.

1️⃣ firebase 데이터 수정 기능

const onUpdatePost = async (el) => {
  const q = query(collection(db, "posts"), where("id", "==", id));
  const data = await getDocs(q);
  try {
    if (data.docs.length !== 0) {
      await updateDoc(data.docs[0].ref, el);
    }
    toggleIsEdit();
    window.location.reload();
  } catch {
    console.log("Not Update");
  }
};

2️⃣ 글 수정시 selectBox에서 보여지는 값을 기존 데이터로 보이게 하기

수정 전 기존 데이터는 백엔드, 오프라인 일 경우에도, select box에선 기본 값으로 설정된 프론트엔드, 온라인으로 표시되었다.
방법을 찾아보던 중에 selected 속성을 추가해주면 된다는데 더 찾아보니까 React에선 selected를 사용하면 에러가 나고, value 속성을 따로 지정해주면 된다는 것을 알게 되었다.
그래서 Select 태그 내 value 속성으로 선택된 원래 데이터 값을 따로 추가해줬다.

<Select
  onChange={
    props.options === props.devTypeOptions ? onChangeDevType : onChangeOnOff
  }
  value={props.defaultValue} // <- here!!!
>
  {props.options.map((option) => (
    <option key={option.value} value={option.value}>
      {option.name}
    </option>
  ))}
</Select>

[참고한 자료] React 에서 select 사용하기

3️⃣ DatePicker 'Uncaught RangeError: Invalid time value' error

DatePicker에서 계속 위 에러가 나서 코드를 다시 보다가 date를 toLocaleDateString()를 이용해서 ‘2022.10.24.’ 같은 형식으로 바꿔줬다가 이 문자열을 date로 다시 DatePicker에 넣으려니까 유효하지 않는 값이라는 에러가 났던 것이다.
그래서 아래 코드처럼 다시 Date 형식으로 변환해줬음!

// 문자열인 date를 다시 date 형식으로 변환한 값을 초기값으로 할당
const [editStartDate, setEditStartDate] = useState(new Date(data.startDate));

// 이후 다시 firebase에 데이터 넣을 때 문자열로 다시 변환해주기
const editData = {
  startDate: editStartDate.toLocaleDateString(),
	...
};

🧚 새롭게 알게 된 내용

MongoDB 연결- [Mongoose 공식문서] Mongoose v6.6.7
Emotion - Emotion 공식문서
React Bootstrap - React-Bootstrap 공식문서

✍️ Diary

스하 플젝 수정 기능 구현하는데 전에 짰던 구조에다가 기능을 추가하려니까 구조가 엉망이라 구현하는데 꽤 오래걸림,,😵‍💫

오늘부터 MERN STACK 새로운 강의를 듣기 시작했다,, 아직 Udemy 강의도 다 못 들었는데 또 다른 강의를 듣는게 맞나싶지만 6시간정도 강의니까 이번주 내로 틈틈이 들어서 커뮤니티 사이트 배포까지 해보기!!
Express로 백 구현하고, MongoDB도 연결하구, React-Bootstrap이랑 Emotion도 client에 적용해봤다. Emotion은 첨 써봤는데 styled-components랑 문법은 거의 같다!

아 글구 미처 완성하지 못한 BearMello 플젝 2주 기간잡고, 기본 기능 구현 마무리짓기로 했담 화이팅팅 💪