[일곱번째 프로젝트/개인] 마인드 다이어리 회고록

요구사항

redux, react query등을 이용하여 본문과 댓글을 가진 구조의 웹 서비스 만들기

• API 명세서
• 본문 CRUD 구현
• json-server 서버 배포
• 동적 라우팅
• 1개 이상의 Custom Hook을 구현
• Form에 유효성 검증
• 버튼 컴포넌트 1개로 모든 버튼을 구현
• development 환경에서만 redux devtool이 활성화 되도록 처리
• .env 를 이용해서 API 서버의 URL 코드상에서 숨기도록 처리

(+)

• 로그인, 회원가입 기능
• 로그인, 회원가입 폼 에러 처리
• JWT의 유효시간이 만료된 경우, 유저에게 재로그인 요청 
• 인가

 

결과물

작업기간: 7월 6일, 10일 ~ 14일(6일)

 

마음 일기장 프로젝트를 제작하였다.

[CBT 인지행동치료 / 감정 일기 / 자유양식] 3가지 타입으로 일기장 작성 폼을 제공하였다.

일기를 쓰며 매일매일 점차 마음이 단단해질 수 있도록 하여

일기 기록뿐만 아니라 마인드 컨트롤까지! 긍정적인 효과를 주고자 하였다.

 

개인적인 일이 있어 이번 주차는 집중을 제대로 못해서 추후 보완 필요

https://github.com/lizzieFEstudy/mind-diary

GitHub - lizzieFEstudy/mind-diary: 마음 일기

 

 

---

배운 점

일기장의 작성, 수정, 조회 폼에서 사용되는 체크박스를 커스텀훅으로 만들어 사용

import { useState } from 'react';

/**
 *
 * @returns
 * <input
        type="checkbox"
        checked={checkedList.includes(item)}
        onChange={(e) => checkHandler(e, item)}
        value={item}
    />
 */
const useCheckbox = () => {
  // state
  const [checkedList, setCheckedList] = useState([]);
  const [isChecked, setIsChecked] = useState([]);

  // handler
  const checkedItemHandler = (value, isChecked) => {
    if (isChecked) {
      setCheckedList((prev) => [...prev, value]);
    } else if (!isChecked && checkedList.includes(value)) {
      setCheckedList(checkedList.filter((item) => item !== value));
    }
  };
  const checkHandler = (e, value) => {
    setIsChecked(!isChecked);
    checkedItemHandler(value, e.target.checked);
  };

  return [checkedList, checkHandler, setCheckedList];
};

export default useCheckbox;

 

글리치 서버 배포

https://velog.io/@optimist5235/json-%EC%84%9C%EB%B2%84%EB%A5%BC-glitch%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

json 서버를 glitch로 배포하기

https://glitch.com/dashboard

Glitch: The friendly community where everyone builds the web

 

버셀 배포
https://velog.io/@elle2elle/Redux-%EB%B0%B0%ED%8F%AC

[React] Glich, Vercel (배포)

https://vercel.com/dashboard

Dashboard – Vercel