클라우딩 어플리케이션 엔지니어링 TIL Day 36 - 감정 일기장 만들기 (5)

2024. 2. 29. 23:11· TIL/프로그래머스 데브코스
목차
  1. # Diary 컴포넌트 구현
  2. # Diary  컴포넌트 Header
  3. # React 흔히 발생 버그 수정
  4. 1. 일기 데이터 추가 시 id가 겹치는 버그
  5. 2. 오타
  6. 3. 매달의 마지막 날에 일기 등록 시 렌더링이 안 되는 오류
  7. # 새로 알게 된 점

# Diary 컴포넌트 구현

Diary 컴포넌트 즉, 일기 상세 페이지를 구현해보자

우선 상세 내용을 보여줄 일기 데이터의 id 값을 받아와서 해당 id 값으로 일기 데이터를 가져와야 한다

useContext 를 사용해서 App 컴포넌트에 위치한 DiaryStateContext 가져오자

diaryList 라는 변수를 생성해서 해당 변수에 일기 데이터들을 담아주자

수정 구현과 마찬가지로 useEffect 를 사용해서 id 일치 여부를 확인한다

  useEffect(() => {
    if (diaryList.length >= 1) {
      const targetDiary = diaryList.find(
        (it) => parseInt(it.id) === parseInt(id)
      );

      if (targetDiary) {
        setData(targetDiary);
      } else {
        alert("없는 일기입니다!");
        navigate("/", { replace: true });
      }
    }
  }, [id, diaryList]);

이제 일기 상세를 보여줄 컴포넌트를 구현해보자

데이터가 없을 때는 로딩 중임을 알려주고

데이터가 있을 때는 상세 페이지를 렌더링한다

코드의 전체적인 구조는 다음과 같다

  if (!data) {
    return <div className="DiaryPage">로딩중입니다...</div>;
  } else {
    return (
      <div>
        <h1>여기는 Diary</h1>
      </div>
    );
  }

 

# Diary  컴포넌트 Header

데모사이트의 헤더를 보고 구현해보자

우선 오늘의 날짜를 받아온 후 변환해서 헤더에 넣어주어야 한다

이전에 만들었던 DiaryEditor 컴포넌트의 getStringDate 함수를 가져다가 쓰면 되는데

이때 코드의 중복이 일어난다

중복되는 코드는

src 폴더 -> util 폴더 -> date.js 파일에 저장해서 필요시 import 해서 사용하자

emotionList 도 공통으로 사용되기 때문에 date.js 로 이동하자!

기존에 했던 방식과 동일하게 MyHeader 컴포넌트와 MyButton 컴포넌트를 재사용하여 헤더 생성하자

잘 완성되었다!

 

 date.js 로 옮겨주었던 emotionList를 꺼내와서 Diary 컴포넌트에서 사용해보자

const curEmotionData = emotionList.find(
      (it) => parseInt(it.emotion_id) === parseInt(data.emotion)
    );

emotionList 의 id와 현재 emotion 상태를 비교해서 동일한 것을  찾는다

해당 내용을 화면에 렌더링되도록 해주면 된다

        <article>
          <section>
            <h4>오늘의 감정</h4>
            <div className="diary-img-wrapper">
              <img src={curEmotionData.emotion_img} />
              <div className="emotion-descript">
                {curEmotionData.emotion_descript}
              </div>
            </div>
          </section>
        </article>

css 까지 적용한 모습은?

최종 완성 모습은 아래와 같다


# React 흔히 발생 버그 수정

1. 일기 데이터 추가 시 id가 겹치는 버그

App 컴포넌트에서 dataId 를  useRef(0) 으로 받아오고 있기 때문이다

이미 기존에 dummyData가 1~5까지의 아이디를 가지고 있는데 useRef(0) 으로 설정해주면 다시 0부터 id를 생성하기 때문에 겹치게 된다

따라서 useRef(6) 으로 변경해야 한다

  const dataId = useRef(6);

겹치는 키가 발생했는지 확인하고 왜 발생했는지 고민하고 해결하는 과정이 필요하다

 

2. 오타

javascript에서 오타는 흔히 발생하는 실수이다

애초에 오타를 내지 않으면 좋지만 실수는 언제든지 할 수 있기에

typescript 로 해결해보자

 

3. 매달의 마지막 날에 일기 등록 시 렌더링이 안 되는 오류

lastDay의 수정이 필요하다

0시 0분 0초가 아닌

23시 59분 59초로 수정해야 한다!

  useEffect(() => {
    if (diaryList.length >= 1) {
      const firstDay = new Date(
        curDate.getFullYear(),
        curDate.getMonth(),
        1
      ).getTime();
      const lastDay = new Date(
        curDate.getFullYear(),
        curDate.getMonth() + 1,
        0,
        23,
        59,
        59
      ).getTime();

# 새로 알게 된 점

중복되는 코드는 따로 하나의 파일에 모아두고 import 하여 사용하면 코드의 가독성도 좋아지고

전체적인 구조를 쉽게 파악할 수 있다는 것을 배웠다

또한 이러한 코드를 처음에 분리하면 좋겠지만 개발하다가 알게 될 수도 있기 때문에

개발 중간에 옮기는 방법을 배운 것도 유익하였다

서비스의 가장 기본적인 기능인 CRUD를 이번 강의를 통해 배웠다

일기 등록, 수정, 삭제, 상세보기, 정렬 등 이번에 구현한 로직을 다시 한번 복습해서 완전히 나의 것으로 만들어야겠다

저작자표시 비영리 변경금지 (새창열림)

'TIL > 프로그래머스 데브코스' 카테고리의 다른 글

클라우딩 어플리케이션 엔지니어링 TIL Day 39, 40, 41, 42 - 감정 일기장 만들기 (8 ~ 마치면서)  (0) 2024.03.01
클라우딩 어플리케이션 엔지니어링 TIL Day 37, 38 - 감정 일기장 만들기 (6~7)  (0) 2024.03.01
클라우딩 어플리케이션 엔지니어링 TIL Day 35 - 감정 일기장 만들기 (4)  (0) 2024.02.27
클라우딩 어플리케이션 엔지니어링 TIL Day 34 - 감정 일기장 만들기 (3)  (1) 2024.02.27
클라우딩 어플리케이션 엔지니어링 TIL Day 33 - 감정 일기장 만들기 (2)  (0) 2024.02.23
  1. # Diary 컴포넌트 구현
  2. # Diary  컴포넌트 Header
  3. # React 흔히 발생 버그 수정
  4. 1. 일기 데이터 추가 시 id가 겹치는 버그
  5. 2. 오타
  6. 3. 매달의 마지막 날에 일기 등록 시 렌더링이 안 되는 오류
  7. # 새로 알게 된 점
'TIL/프로그래머스 데브코스' 카테고리의 다른 글
  • 클라우딩 어플리케이션 엔지니어링 TIL Day 39, 40, 41, 42 - 감정 일기장 만들기 (8 ~ 마치면서)
  • 클라우딩 어플리케이션 엔지니어링 TIL Day 37, 38 - 감정 일기장 만들기 (6~7)
  • 클라우딩 어플리케이션 엔지니어링 TIL Day 35 - 감정 일기장 만들기 (4)
  • 클라우딩 어플리케이션 엔지니어링 TIL Day 34 - 감정 일기장 만들기 (3)
개발자 정지은
개발자 정지은
프로그래밍 공부 기록
개발자 정지은
PROGRAMMING DIARY
개발자 정지은
전체
오늘
어제
  • 분류 전체보기 (107)
    • 알고리즘 (49)
      • BeakJoon (27)
      • SWEA (9)
      • Inflearn (2)
      • CodeSignal (1)
      • Programmers (10)
    • FE (0)
      • Javascript (0)
      • React (0)
    • BE (0)
    • CS공부 (13)
      • Database (7)
      • IT기본지식 (6)
    • TIL (45)
      • 프로그래머스 데브코스 (45)
    • Project (0)
      • DreamHi (0)
      • 인사관리시스템 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 리액트
  • 코딩부트캠프
  • figma
  • javascript
  • 알고리즘
  • 자바스크립트
  • 국비지원교육
  • 프로그래머스 데브코스
  • ReactNative
  • React.JS
  • 피그마
  • 프론트엔드

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
개발자 정지은
클라우딩 어플리케이션 엔지니어링 TIL Day 36 - 감정 일기장 만들기 (5)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.