1. CancleLike 핸들러 추가

<FavoriteIcon className={styles.icon} onClick={handleoCancelLike}/>

const handleoCancelLike = async () => {
  try {
    const response = await axios.post('/api/postlike/cancel', {
      userId: userId,
      postId: postId
    });
    console.log(response.data);
    setIsLiked(false); // 좋아요 상태를 false로 설정
  } catch (error) {
    console.error('Error unliking the post:', error);
  }
};

2. API 처리

// controller
Mapping("/cancel")
public ResponseEntity<String> cancleLikePost(@RequestBody PostLikeDTO dto) {
    boolean isCancled = postLikeService.cancleLikePost(dto.getUserId(), dto.getPostId());
    if (isCancled) {
        return ResponseEntity.ok("Post unliked successfully");
    } else {
        return ResponseEntity.badRequest().body("Failed to unlike post");
    }
}


// service
public boolean cancleLikePost(String userId, Integer postId) {
    try {
        // 1. userId와 postId로 PostLikeEntity를 찾기
        PostLikeEntity postLike = postLikeRepository.findByUserIdAndPostId(userId, postId);
        if (postLike != null) {
            // 2. 찾은 엔티티를 삭제
            postLikeRepository.delete(postLike);
            return true;
        }
        return false; // 좋아요가 존재하지 않는 경우
    } catch (Exception e) {
        return false;
    }
}


// repostiory
PostLikeEntity findByUserIdAndPostId(String userId, Integer postId);

데이터가 정상적으로 삭제되는 것을 확인할 수 있다.

1. SELECT

SELECT 문은 테이블에서 원하는 데이터를 조회할 때 사용된다.

SELECT 컬럼명 FROM 테이블명;
SELECT 컬럼명1, 컬럼명2, ... FROM 테이블명;
SELECT * FROM 테이블명;

컬럼명을 나열할 때는, 나열한 순서대로 출력된다.

실전 문제

이메일에 작성할 고객의 성과 이름, 이메일이 필요한 경우

SELECT first_name, last_name, email FROM customer;

2. SELECT DISTINCT

테이블에에서 중복되지 않는 값만 조회하고 싶을 때 사용한다.

SELECT DISTINCT(컬럼명) FROM 테이블명;

SELECT DISTINCT 컬럼명 FROM 테이블명;

실전 문제

어떤 등급의 영화들을 가지고 있는지 조회할 경우

SELECT DISTINCT rating FROM film;

3. COUNT

특정 쿼리 조건에 맞는 입력 행의 개수를 구하고 싶을 때 사용한다.

SELECT COUNT(쿼리명) FROM 테이블명;
SELECT COUNT(*) FROM 테이블명;

예를 들어,

SELECT COUNT (DISTINCT rating) FROM film;

4. SELECT WHERE

WHERE 문은 열에 조건을 지정하여 그에 맞는 행이 반환되도록 한다.

SELECT 컬럼명1, 컬럼명2 FROM 테이블명
WHERE 조건

1. 비교 연산자 : =, < , >, >=, <=, <> OR !=
2. 논리 연산자 : AND, OR, NOT

예를 들어,

SELECT * FROM customer
WHERE first_name='Jared';

SELECT COUNT(*) FROM film
WHERE rental_rate > 4 AND replacement_cost >= 19.99
AND rating='R';

SELECT * FROM film
WHERE rating != 'R';

실전 문제

한 고객이 매장이 지갑을 두고 갔다. 'Nancy Thomas' 고객의 이메일 주소를 찾아서 이메일을 보내야한다. 그의 이메일 주소를 조회해보자.

SELECT email FROM customer
WHERE first_name = 'Nancy' AND last_name = 'Thomas';

한 고객이 영화 'Outlaw Hanky'의 내용(description)을 궁금해한다. 영화의 내용을 조회해보자.

SELECT description FROM film
WHERE title='Outlaw Hanky';

한 고객이 영화 반납을 연체했다. 고객의 '259 Ipoh Drive'주소로 우편을 보냈고, 전화로도 이 내용을 알려야 한다. 해당 주소에 살고있는 고객의 전화번호를 조회해보자.

SELECT phone FROM address
WHERE address = '259 Ipoh Drive' ;

5. ORDER BY

열의 값에 따라 오름차순(ASC)/내림차순(DESC)으로 정렬한다.

SELECT * FROM customer
ORDER BY first_name ASC;

여러 칼럼에 각기 다른 정렬을 적용할 수도 있다.

SELECT store_id, first_name, last_name FROM customer
ORDER BY store_id DESC, first_name ASC;

👉 1. store_id를 기준으로 내림차순 정렬
   2. first_name을 기준으로 오름차순 정렬 (A to Z)

6. LIMIT

쿼리에 대해 반환되는 행의 개수를 제한할 수 있다. 쿼리의 가장 마지막에 실행된다.

SELECT * FROM payment
WHERE amount != 0.00
ORDER BY payment_date DESC
LIMIT 5;

빠르게 테이블 구조만 확인하고 싶을 때, ```SELECT * FROM table LIMIT 1```을 쓰기도 한다.

실전 문제

처음으로 결제한 10명의 고객에게 리워드를 지급하고 싶다. 처음으로 결제를 생성한 고객 10명의 ID는?

SELECT customer_id FROM payment
ORDER BY payment_date ASC
LIMIT 10;

고객이 점심 시간에 볼 짧은 영화를 대여하고 싶어한다. 상영시간이 가장 짧은 영화 5편의 제목은?

SELECT title, length FROM film
ORDER BY length ASC
LIMIT 5;

🚨 상영 시간이 46분인 영화가 5개일 뿐이라는 보장은 없다. 6분짜리 영화가 6개 이상일수도 있다.

위의 고객이 50분 이하의 영화를 찾는다면, 제안할 수 있는 영화는 총 몇 편인가?

SELECT COUNT(*) FROM film
WHERE length <= 50;

7. BETWEEN

값의 범위를 제어한다. 범위 안에 존재하는 값만 가져오는 게 아니라, NOT BETWEEN 연산자로 범위 밖에 존재하는 값을 조회할 수도 있다.

SELECT * FROM payment
WHERE amount NOT BETWEEN 8 AND 9;

SELECT * FROM payment
WHERE payment_date BETWEEN '2007-02-01' AND '2007-02-15';

시간 범위를 지정할 땐, TIMESTAMP를 고려해야 한다.

BETWEEN '2007-02-01' AND '2007-02-14' 로 범위를 지정하면, 14일에 결제한 데이터는 출력되지 않는다.

8. IN

SELECT color FROM table
WHERE color IN ('red','blue','green');

색상이 red OR blue OR green 인인 행을 조회한다.

NOT 연산자와 결합해서 사용할 수도 있다.

SELECT color FROM table
WHERE color NOT IN ('red','blue');

SELECT COUNT(*) FROM payment
WHERE amount IN (0.99,1.98,1.99);

SELECT COUNT(*) FROM payment
WHERE amount NOT IN (0.99,1.98,1.99);

SELECT * FROM customer
WHERE first_name IN ('John','Jake','Julie');

9. LIKE and ILIKE

@gmail.com 으로 끝나는 이메일 주소를 찾는 경우처럼, 문자열 내의 일반 패턴에 매칭하고 싶을 때 사용한다.

WHERE name LIKE 'A%' : 대문자A로 시작하는 모든 문자열 WHERE name LIKE '%a' : 소문자a로 끝나는 모든 문자열

WHERE title LIKE 'Mission Impossible _' : Missino Impossible 뒤에는 문자 하나만 올 수 있다. (1, 2, 3, 4, ...)

WHERE name LIKE '_her%' 의 경우

• Cheryl
• Theresa
• Sherri 를 포함할 수 있다.

더 자세한 내용은 PostgreSQL 공식문서 참조.

SELECT * FROM customer
WHERE first_name LIKE 'J%' AND last_name LIKE 'S%';

성의 첫 글자가 대문자 J로 시작하고, 이름의 첫 글자가 대문자 S로 시작하는 고객을 조회한다. 👉 LIKE 연산자는 대소문자를 구분한다.

SELECT * FROM customer
WHERE first_name ILIKE 'j%' AND last_name ILIKE 's%';

성의 첫 글자가 J 혹은 j로 시작하고, 이름의 첫 글자가 S 혹은 s로 시작하는 고객을 조회한다. 👉 ILIKE 연산자는 대소문자를 구분하지 않는다.

SELECT * FROM customer
WHERE first_name LIKE '_her%

마무리 문제

5달러보다 큰 금액을 결제한 거래는 몇 건입니까?

SELECT COUNT(*) FROM payment 
WHERE amount > 5;

성이 P로 시작하는 배우는 몇 명입니까?

SELECT COUNT(*) FROM actor
WHERE first_name LIKE 'P%';

고객 주소에서 중복되지 않는 고유한 지역(district)은 몇 개입니까?

SELECT COUNT(DISTINCT(district)) FROM address;

위에서 조회한 중복되지 않는 지역의 목록을 조회하세요.

SELECT DISTINCT(district) FROM address;

R등급이고 교환 비용이 5달러에서 15달러 사이인 영화는 몇 개입니까?

SELECT COUNT(*) FROM film
WHERE rating = 'R' 
AND replacement_cost BETWEEN 5 AND 15;

제목에 'Truman'이 포함되는 영화는 몇 편인가요?

SELECT COUNT(*) FROM film
WHERE title LIKE '%Truman%';

SQLD 공부할 때 같아서 재밌었다. ILIKE는 처음 보는 연산자라서 배워가는 것도 있었다. 아님 내가 공부를 덜 했던 걸지도...😉

(↑ 이미지 클릭 시 강의 페이지로 넘어감)

PostgreSQL 에 관해 조금 더 찾아보고 있었는데, 마침 Udemy 에서 세일을 하고 있었다. 무슨 면접 한 번을 위해서 강의까지 찾아듣나 싶지만, 이게 나다... 🥲

하지만, 굳이 면접이 아니더라도 이런 기초 강의를 통해 학원에서 제대로 사용해보지 않은 쿼리문을 복습하는 기회라고 생각하면 꽤 도움이 될 것 같다.

1. 설치

https://www.postgresql.org/ 에 들어가서 PostgreSQL을 설치하고,

https://www.pgadmin.org/ 에서 PgAdmin을 설치했다.

그리고 컴퓨터를 껐다가 켜면,

준비 끝!

2. 데이터베이스 생성

Databases 우클릭 -> Create -> Database

강좌에서 설명하는대로 dvdrental 데이터베이스를 생성했다.

기존 파일 복구 (Restore)

강사가 제공하는 데이터베이스를 사용하기 위해 Restore를 진행했다.

복구를 진행하기 전에 Data Options 탭에서 Sections 설정을 몇 가지 수정했다.

(Pre-data / Data / Post-data 세 가지 수정했음)

다크모드 : File > Preferences > Miscellaneous > Themes

대시보드의 Refresh rates 등의 속성을 바꾸고 싶을 때에도, File > Preferences

해당 부분을 postActions 컴포넌트로 분리했다.

import React from "react";
import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
import TelegramIcon from "@mui/icons-material/Telegram";
import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
import styles from "../styles/post.module.css";

function PostActions() {
  return (
    <div className={styles.icons_container}>
      <div>
        <FavoriteBorder className={styles.icon} />
        <ChatBubbleOutlineIcon className={styles.icon} />
        <TelegramIcon className={styles.icon} />
      </div>
      <div>
        <BookmarkBorderIcon className={styles.icon} />
      </div>
    </div>
  );
}

export default PostActions;

1. '좋아요' 상태를 저장해보자

아이콘을 클릭하면, handlePostLike 이벤트가 발생한다.

<FavoriteBorder className={styles.icon} onClick={handlePostLike} />

handlePostLike 이벤트 메서드는 다음과 같이 구현했다.

const handlePostLike = async () => {
  try {
    const response = await axios.post('/api/postlike', {
      userId: userId, 
      postId: postId
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error liking the post:', error);
  }
};

데이터베이스에 사용자id 와 포스트id가 정상적으로 저장되는 것을 확인했다.

그런데, 좋아요를 눌러도 icon이 변하지 않았다. 😕

당연하다. 아이콘은 여전히 <FavoriteBorder /> 이거 하나다.

2. '좋아요' 상태를 가져와보자

사용자가 해당 포스트에 좋아요를 눌렀는지 확인하는 메서드를 구현했다.

const [isLiked, setIsLiked] = useState(false);

useEffect(() => {
  const fetchLikeStatus = async () => {
    try {
      const response = await axios.get('/api/postlike/status', {
        params: { userId: userId, postId: postId }
      });
      setIsLiked(response.data);
    } catch (error) {
      console.error('Error fetching like status:', error);
    }
  };

  fetchLikeStatus();
}, [userId, postId]);

setIsLiked(response.data); 에서 응답이 true라면, isLinked = true가 된다. isLinked = true일때, <FavoriteBorder /> 대신 <FavoriteIcon />가 출력되어야한다.

isLiked ? (
  <FavoriteIcon className={styles.icon} />
) : (
  <FavoriteBorder className={styles.icon} onClick={handlePostLike} />
)}

그러면 이렇게 좋아요 아이콘이 바뀌지 않는다. 여전히 <FavoriteBorder /> 가 출력된다.

모달창을 껐다가 켜야 <FavoriteIcon /> 가 출력된다.

🚨왜 즉시 변경되지 않지?

useEffect(() => {
  const fetchLikeStatus = async () => {
    try {
      const response = await axios.get('/api/postlike/status', {
        params: { userId: userId, postId: postId }
      });
      setIsLiked(response.data); // 백엔드에서 받아온 좋아요 상태를 설정
    } catch (error) {
      console.error('Error fetching like status:', error);
    }
  };

  fetchLikeStatus();
}, [userId, postId]);

useEffect 가 처음 로드될 때 좋아요 상태를 가져오기 때문이다.

🍀상태를 즉시 변경해보자

좋아요 아이콘을 클릭하면, isLiked 상태가 즉시 변경되도록 구현하변 되지 않을까?

const handlePostLike = async () => {
  try {
    const response = await axios.post('/api/postlike', {
      userId: userId,
      postId: postId
    });
    console.log(response.data);
    setIsLiked(true); // 좋아요 상태를 즉시 true로 만든다
  } catch (error) {
    console.error('Error liking the post:', error);
  }
};

<FavoriteBorder /> 아이콘을 클릭하면, 아이콘이 바로 <FavoriteIcon /> 로 바뀐다. 굿👍

하지만, 모달창을 켤 때, <FavoriteBorder /> 가 보였다가, <FavoriteIcon />로 바뀌는 것을 확인하고 말았다.

🚨초기 UI가 노출된다

async 데이터를 가져오는 시간이 필요하기 때문인 것 같다. 모달창을 띄울 때, useEffect로 좋아요 상태를 호출하기 때문이다. 모달창을 띄울 때, 이미 좋아요 상태를 가지고 있어야할 것 같다.

🍀부모에서 상태를 받아오자

그럼, 부모 컴포넌트에서 isLiked 상태를 가져와야하나? 테스트 해보면 되겠지...

부모 컴포넌트에 좋아요 상태를 가져오는 메서드를 추가했다.

useEffect(() => {
  const fetchLikeStatus = async () => {
    if (loggedInUser && postModal) {
      try {
        const response = await axios.get('/api/postlike/status', {
          params: { userId: loggedInUser.id, postId: postModal.postId }
        });
        setIsLiked(response.data);
      } catch (error) {
        console.error('Error fetching like status:', error);
      }
    }
  };

  fetchLikeStatus();
}, [loggedInUser, postModal]);

<PostActions postId={postModal.postId} userId={loggedInUser.id} isLiked={isLiked} setIsLiked={setIsLiked} />

❗부모 컴포넌트에서 상태를 받아오므로, 자식 컴포넌트에서는 axios 함수를 뺐다.

됐다. 진짜 됐는데, 사진으로만 첨부하니까 잘 모르겠네... 다음에는 영상으로 따오던지 해야겠다.

북마크도 동일한 방식으로 진행하면 될 것 같다.

그래서 PostgreSQL 이 뭔데? 🤔

PostgreSQL은 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS) 이다. 이건 기존에 사용했던 MySQL, MariaDB, Oracle 과 같다.

간단하게 각각의 특징을 살펴보자면,

• MySQL, MariaDB : 속도와 성능에 중점을 둔 경량화된 RDBMS (오픈 소스)
• Oracle : 고성능과 보안성, 데이터 복구 기능 등이 뛰어난 RDBMS (상용)
• PostgreSQL : 안정성과 확장성에서 독보적인 RDBMS (오픈 소스)

이렇게 정리할 수 있겠다.

데이터 형식

PostgreSQL 의 확장성에 대해 조금 더 알아보자면, PostgreSQL은 NoSQL 기능도 함께 제공한다.

NoSQL? 그건 또 뭔데? 🤔

NoSQL은 데이터베이스의 한 종류다. 데이터베이스란? 정보를 저장하고 관리하는 장소라고 생각하면 된다.

이전에 사용했던 MySQL, Oracle 같은 데이터베이스는 정보를 테이블에 보관한다. 그런데, 최근에는 테이블에 딱 맞지 않는 비정형 데이터라는 게 많아졌다. 비정형 데이터는 쉽게 말해, 정해진 틀이 없는 정보다.

NoSQL 데이터베이스는 이런 비정형 데이터를 유연하게 다루기 위해 만들어졌다. 테이블 구조가 아니라, JSON 같은 형식을 사용해 원하는 대로 정보를 저장할 수 있다. JSON은 간단히 말해, 정보를 키-값 쌍으로 저장하는 방식이다.

예를 들어, 사용자의 프로필 정보는 사람마다 다를 수 있다. 어떤 사람은 취미를, 어떤 사람은 위치를 추가할 수도 있잖나!

비교를 해보자.

☑️테이블로 저장하는 방식이다.

데이터가 깔끔하게 정리되지만, 모든 사용자에게 동일한 필드를 적용해야 하므로, 필드가 비어 있는 경우가 생기거나, 테이블을 자주 변경해야 할 수 있다.

☑️다음은 JSON 형식으로 저장하는 방식이다.

{
  "users": [
    {
      "id": 1,
      "name": "김민지",
      "email": "minji@example.com",
      "hobby": "노래",
      "location": "서울"
    },
    {
      "id": 2,
      "name": "팜하니",
      "email": "pham@example.com",
      "hobby": "춤"
    },
    {
      "id": 3,
      "name": "다니엘",
      "email": "danielle@example.com",
      "location": "호주"
    }
  ]
}

각 사용자가 자신에게 필요한 정보만을 저장할 수 있다. 추가적인 필드가 필요할 때에도 테이블 구조를 변경할 필요 없이, JSON 구조에 해당 필드를 추가하면 된다. → 유연성이 높다.

PostgreSQL은 이런 NoSQL 방식도 지원한다. 즉, 전통적인 테이블 구조는 물론이고 비정형 데이터도 유연하게 다룰 수 있다는 것이다.

그래서 PostgreSQL은 기존의 RDBMS보다 더 다양한 데이터를 처리할 수 있다는 장점이 있다.

쿼리문

다른 형식의 데이터를 처리하기 위해서는 작성하는 쿼리문의 형식도 다를 것이다.

☑️아래는 전통적인 테이블 구조로 저장된 데이터를 조회하는 쿼리문이다.

SELECT name, email, hobby, location
FROM users
WHERE hobby IS NOT NULL;

☑️다음은 JSON 데이터를 다룰 때의 쿼리문이다.

SELECT json_data->>'name' AS name,
       json_data->>'email' AS email,
       json_data->>'hobby' AS hobby,
       json_data->>'location' AS location
FROM users_json
WHERE json_data->>'hobby' IS NOT NULL;

(_users_json_ 테이블에는 JSON 데이터를 저장하는 _json_data_ 필드가 존재)

위의 쿼리문은 너무나 익숙하지만, 아래의 쿼리문은 익숙하지 않다. 어떤 느낌인지 알겠지만, 명확하게는 모르겠달까? 🤔 그래서 한 줄씩 뜯어보겠다.

• json_data->>'name'

  • PostgreSQL에서 JSON 데이터 타입을 다룰 때 사용하는 연산자.
  • ->> 연산자는 JSON 객체에서 문자열을 추출할 때 사용된다.

• AS name

  • 추출한 값을 name이라는 별칭으로 표시하게 한다.

• FROM users_json

  • users_json이라는 테이블에서 데이터를 조회한다.

• WHERE json_data->>'hobby' IS NOT NULL

  • JSON 데이터에서 hobby 키의 값이 존재하는 행만 필터링한다.

피드의 썸네일을 눌렀을 때, 출력되는 모달창이다. 어느 프로젝트든 모달창을 꼭 만드는 것 같은데, 만들 때마다 헷갈려서 정리해두기로 했다.

1. 기본 모달창

// css
.modalBackground {
z-index: 10000;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgb(0 0 0 / 80%);
display: flex;
align-items: center;
margin: auto;
}

.modalBox {
background-color: white;
border-radius: 8px;
margin: auto;
height: 50%;
}
```

이제 모달창 내부를 두 섹션으로 나눈다.

1. 이미지 출력부
2. 내용 및 댓글 출력부

2. 모달창 섹션 분리

그리드 시스템을 사용하기 위해 부모 컨테이너에 display:grid를 적용했다.

```js
return (
  <div className={styles.modalBackground}>
    <div className={styles.modalBox}>
      {/* 이미지 출력 */}
      <div className={styles.sectionImg}>
      </div>
      {/* 내용 출력 */}
      <div className={styles.sectionContent}>
      </div>
    </div>
  </div>
);

// css
.modalBox {
  background-color: white;
  border-radius: 8px;
  margin: auto;
  height: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 이미지와 콘텐츠가 각각 50%씩 차지 */
}

.sectionImg {
  background: pink;
  grid-row: 1;
  grid-column: 1;
}

.sectionContent {
  grid-row: 1;
  grid-column: 2;
  background: skyblue;
}

```

3. 이미지 넣기

이미지는 임의로 넣었다. sectionImg 안에 가득 차도록 구현했다.

return (
  <div className={styles.modalBackground}>
    <div className={styles.modalBox}>
      {/* 이미지 출력 */}
      <div className={styles.sectionImg}>
        <img src={이에로} />
      </div>
      {/* 내용 출력 */}
      <div className={styles.sectionContent}>
      </div>
    </div>
  </div>
);

// css
.sectionImg {
  grid-column: 1;
  height: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
}

.sectionImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4. 섹션 나누기

섹션은 6개로 나눴다.

1. 프로필
2. 내용 및 댓글
3. 좋아요/댓글/공유/북마크 버튼
4. 좋아요 개수
5. 작성일
6. 댓글 작성

마찬가지로 그리드 시스템을 사용하기 위해 부모 컨테이너에 display:grid를 적용했다.

return (
  <div className={styles.modalBackground}>
    <div className={styles.modalBox}>
      {/* 이미지 출력 */}
      <div className={styles.sectionImg}>
        <img src={이에로}  alt='이에로 고양이'/>
      </div>
      {/* 내용 출력 */}
      <div className={styles.sectionContent}>
        <div className={styles.sectionProfile}>
          {/* 프로필 */ }
        </div>
        <div className={styles.sectionComment}>
          {/* 내용 및 댓글 */}
        </div>
        <div className={styles.sectionButtons}>
          {/* 좋아요/댓글/공유/북마크 */}
        </div>
        <div className={styles.sectionLikes}>
          {/* 좋아요 개수 */}
        </div>
        <div className={styles.sectionDate}>
          {/* 작성일 */}
        </div>
        <div className={styles.addComment}>
          {/* 댓글 작성 */}
        </div>
      </div>
    </div>
  </div>
);

// css
.sectionContent {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.sectionProfile {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

5. 모달창 닫기

모달창을 열었으니, 닫기 위한 버튼이 필요하다. 모달창 닫기 버튼은 첨부한 사진처럼 배경의 우측 상단에 위치하게 했다.

또한, modalBox 바깥은 배경 부분을 클릭해도 모달창이 닫히게 구현하기 위해서 modalBackground 에도 onClick이벤트를 추가했다.

const closeModal = () => {  
  handleCloseModal(); // 모달을 닫기 위해 handleCloseModal 호출
};

return (
  <div className={styles.modalBackground} onClick={closeModal}>
    <div className={styles.modalBox}>
      {/* 이미지 출력 */}
      <div className={styles.sectionImg}>
        ...
      </div>
      {/* 내용 출력 */}
      <div className={styles.sectionContent}>
        ...
      </div>
    </div>
    <button className={styles.closeBtn} onClick={closeModal}>
      <CloseIcon />
    </button>
  </div>
);

🚨하지만, 이렇게 구현하면 modalBox를 클릭해도 모달창이 닫히는 현상이 발생한다. 부모 컨테이너에 걸린 이벤트가 전파되기 때문이다.

🍀이걸 해결하기 위해선, 자식 컨테이너에 이벤트 전파를 막는 메서드를 추가해야한다.

const closeModal = () => {  
  handleCloseModal(); 
};

const stopPropagation = (e) => {
  e.stopPropagation(); // 이벤트 전파 방지
};

return (
  <div className={styles.modalBackground} onClick={closeModal}>
    <div className={styles.modalBox} onClick={stopPropagation}>
      {/* 이미지 출력 */}
      <div className={styles.sectionImg}>
        ...
      </div>
      {/* 내용 출력 */}
      <div className={styles.sectionContent}>
        ...
      </div>
    </div>
    <button className={styles.closeBtn} onClick={closeModal}>
      <CloseIcon />
    </button>
  </div>
);

여기서부터는 실제 데이터를 매핑해서 진행했다.

6. 이미지 슬라이더

인스타그램에 게시할 수 있는 이미지는 최대 10장이다. 그 말인즉슨, 모달창에서도 이미지 목록을 확인할 수 있어야 한다는 의미다.

구현해야할 기능은 다음과 같다.

1. 최대 10장의 이미지를 차례대로 넘겨볼 수 있어야한다.
2. 이전 이미지가 존재할 때에만 이전 버튼 출력
3. 다음 이미지가 존재할 때에만 다음 버튼 출력

(1) 이미지 슬라이더

const handleNext = () => {
  if (currentIndex < postModal.images.length - 1) {
    setCurrentIndex(currentIndex + 1);
  }
};

const handlePrev = () => {
  if (currentIndex > 0) {
    setCurrentIndex(currentIndex - 1);
  }
};

{/* 이미지 출력 */}
<div className={styles.sectionImg}>
  <img 
    src={`http://localhost:8080${postModal.images[currentIndex].url}`} 
    alt={postModal.images[currentIndex].alt || '게시물 이미지'} 
  />
  {postModal.images.length > 1 && ( // 이미지가 한 장 이상일 때만 버튼이 출력되도록 
    <>
      <button className={`${styles.Btn} ${styles.prevBtn}`} onClick={handlePrev}>
        <NavigateBeforeIcon />
      </button>
      <button className={`${styles.Btn} ${styles.nextBtn}`} onClick={handleNext}>
        <NavigateNextIcon />
      </button>
    </>
  )}
</div>

    .Btn {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .Btn svg {
      width: 100%;
      height: 100%;
    }

    .prevBtn {
      top: 50%;
      left: 10px;
    }

    .nextBtn {
      top: 50%;
      right: 10px;
    }

(2) index로 버튼 출력 제어

(1)에서는 이전, 다음 이미지의 존재 여부 관계없이 버튼이 출력되었다. 이젠, currentIndex를 이용해 버튼 출력을 제어한다.

{postModal.images.length > 1 && (
  <>
    // 현재 index가 0보다 크다면(첫번째 이미지가 아니라면)
    {currentIndex > 0 && ( 
      <button className={`${styles.Btn} ${styles.prevBtn}`} onClick={handlePrev}>
        <NavigateBeforeIcon />
      </button>
    )}
    // 현재 index가 이미지의 개수 - 1 보다 작다면(마지막 이미지라면)
    {currentIndex < postModal.images.length - 1 && ( 
      <button className={`${styles.Btn} ${styles.nextBtn}`} onClick={handleNext}>
        <NavigateNextIcon />
      </button>
    )}
  </>
)}

첫번째 이미지에서는 다음 버튼만, 마지막 이미지에서는 이전 버튼만 출력된다.

이제 content 부분만 매핑하면 모달은 끝이다👍

아직 진행 중~

✨ 한줄 요약 : 저장 경로를 내부 → 외부로 변경했다

포스트를 업로드하는 데까지는 성공했다. 그런데, 피드에서 포스팅한 이미지를 불러오는 데에서 문제가 생겼다.

🚨문제 발생

원인 분석

업로드 경로로 설정해둔 /src/resources/static/uploads에도 이미지가 업로드 되어있다. 그런데 왜 출력이 안 될까?

그런데 사실 아예 안 되는 건 아니다... 🤔

서버를 껐다가 재가동하면, 이미지가 출력된다. 오...

Network 탭을 확인해보면 이런식으로 403 에러가 떠있다.

서치 결과, 대부분의 문제는 경로 때문이라는 것을 알게 되었다.

나는 경로 설정을 어떻게 했더라...?

private final String uploadDir = System.getProperty("user.dir") + "/src/main/resources/static/uploads";

private String saveImage(MultipartFile image) {
    try {
        // 업로드 폴더가 존재하지 않으면 생성
        Path uploadPath = Paths.get(uploadDir);
        if (!Files.exists(uploadPath)) {
            Files.createDirectories(uploadPath);
        }

        // 파일 저장
        String fileName = UUID.randomUUID().toString() + "_" + image.getOriginalFilename();
        Path filePath = uploadPath.resolve(fileName);
        image.transferTo(filePath);

        // 파일의 상대 URL 반환 (예: /uploads/파일이름)
        return "/uploads/" + fileName;
    } catch (IOException e) {
        throw new RuntimeException("Failed to save image", e);
    }
}

👉 /src/main/resources/static/uploads로 경로를 설정했다.

분석 결과

/src/main/resources/static는 Spring Boot 애플리케이션이 빌드 될 때 포함된다.

즉, 업로드한 파일을 사용하려면 애플리케이션을 다시 빌드하고 재시작해야 한다는 의미다.

🍀해결 방법

1. 경로 변경

애플리케이션 내부로 설정되어있던 경로를 user.dir로 변경했다.

// 파일 저장 디렉토리 경로 설정
private final String uploadDir = System.getProperty("user.dir") + "/uploads";

private String saveImage(MultipartFile image) {
    try {

        // 업로드 폴더가 존재하지 않으면 생성
        Path uploadPath = Paths.get(uploadDir);
        if (!Files.exists(uploadPath)) {
            Files.createDirectories(uploadPath); // 디렉토리 생성
        }

        // 파일 이름 생성
        String fileName = UUID.randomUUID().toString() + "_" + image.getOriginalFilename();
        Path filePath = uploadPath.resolve(fileName);

        // 파일을 지정된 경로에 저장 (임시 파일을 사용하지 않음)
        Files.write(filePath, image.getBytes()); // 파일을 직접 디스크에 기록

        // 파일의 상대 URL 반환 (예: /uploads/파일이름)
        String fileUrl = "/uploads/" + fileName;
        return fileUrl;
    } catch (IOException e) {
        throw new RuntimeException("이미지 저장 실패", e);
    }
}

이렇게 외부에 경로를 구성하면, 새로 빌드를 할 필요 없이, 애플리케이션 실행 중 첨부된 파일을 사용할 수 있다.

단, 외부 경로 파일에 접근하기 위한 핸들러가 필요하다.

2. 외부 경로 파일 접근

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    // /uploads/** 경로를 루트 경로의 /uploads 폴더와 매핑
    registry.addResourceHandler("/uploads/**")
            .addResourceLocations("file:" + System.getProperty("user.dir") + "/uploads/");
}

외부 경로에 있는 파일을 Spring Boot에서 정적 리소스로 사용하기 위해, WebMvcConfigurer의 addResourceHandlers 메서드를 사용하여 경로를 매핑했다.

3. 결과

서버를 재시작하는 과정 없이, 첨부된 이미지가 출력된다.

참고

• https://wildeveloperetrain.tistory.com/41 (addResourceHandlers)

🤯반성의 시간

애초에 왜 내부 경로로 경로를 설정했는지도 의문이다. 정말 생각 없이 코딩한 것 같아서 부끄러울 따름이다...