[프로젝트] 웹 TripRecorder - day야자

오류 및 문제점

1. More than one row with the given identifier was found

• 문제점: OneToOne 관계에 여러 데이터가 연결돼 문제가 발생했다.
• 해결 방안: MySQL에서 다중 연결된 데이터를 삭제한다.

2. tripNo undefined

• 문제점: 여행 카테고리 컴포넌트이기 때문에 tripNo가 undefined로 뜬다.
• 해결 방안: 콜백 함수를 이용해 tripNo를 넘긴다.

3. localStorage 값이 변경되면 useEffect 실행

• 문제점: localStorage의 값이 변경되었을 때 useEffect가 실행되어야 한다.
• 해결 방안: recoil을 사용해 localStorage 값을 설정하고, localStorage 값이 수정되었을 때의 이벤트를 추가한다.

// Navbar.jsx
const [localUserNick, setLocalUserNick] = useRecoilState(LocalUserNickAtom);

useEffect(() => {
  const handleStorageChange = (e) => {
    console.log(e);
    if (e.key === "userNick") {
      setLocalUserNick(e.newValue);
    }
  };

  window.addEventListener("storage", handleStorageChange);

  return () => {
    window.removeEventListener("storage", handleStorageChange);
  };
}, []);

<Link
  to={"/"}
  className="link_name"
  onClick={() => {
    Cookies.remove("jwtToken");
    setIsLog(false);
    setUserNum("");
    setUserNickName("");
    setUserProf("");
    localStorage.setItem("userNick", "");
    setLocalUserNick("");
    localStorage.clear();
  }}
>
  로그아웃
</Link>

// Home.jsx
const [userNick, setUserNick] = useRecoilState(LocalUserNickAtom);

useEffect(() => {
  api.get("/sns/list").then((res) => {
    const picData = res.data;
    setAllData(picData.map((d) => d));
  });
}, [userNick]);

4. 프로필 화면에서 로그인, 팔로우 여부에 따라 게시글 제한

• 문제점: 프로필 조회시 게시글 공개범위가 적용되지 않았다.
• 해결 방안: 각 경우의 수를 계산해 게시글 공개 범위를 적용한다.

// 로그인 전
// 전체 공개 게시글
if (userNo == 0L) {
  scope = new Integer[] { 1 };
}
// 내 프로필인 경우
// 모든 데이터 공개
else if (userNo.equals(profileUserNo)) {
  scope = new Integer[] { -1, 0, 1 };
}

else {
  UserVO follower = urepo.findById(userNo).orElse(null);
  UserVO following = urepo.findById(profileUserNo).orElse(null);

  FollowVO follow = frepo.findByFollowerAndFollowing(follower, following);
  if (follow == null) {
    scope = new Integer[] { 1 };
  } else {
    scope = new Integer[] { 1, 0 };
  }
}

List<SnsVO> tmpSnsList = srepo.findBySnsAndSnsScopeIn(trip, scope);

진행 상황

1. 게시글 상세

• 좋아요
• 댓글
• 게시글 내용
  

2. 여행 카테고리 삭제

• 여행에 속한 게시글과 경비가 한번에 삭제
  

3. 팔로우 여부에 따른 프로필 게시글 제한

• 로그인 전
  • 전체 공개 게시글
• 내 게시글
  • 전체 게시글
• 팔로우 게시글
  • 전체 공개, 팔로우 공개 게시글
• 팔로우가 아닌 게시글
  • 전체 공개 게시글

4. 돈 천 단위 구분

// input 금액 입력값 변경
const onInputChange = (event) => {
  const inputMoney = event.target.value
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");

  setMoney(inputMoney);
};

// 출력 금액 입력값 변경
const getMoney = (money) => {
  return money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

---

참고 자료

• OneToOne 에러
• localStorage 변경시 렌더링 (검색어: react function component 로컬스토리지 값 변경되었을 때 렌더링)
• 천단위 구분