[개발 일기] 프로필 이미지 수정 기록, 해시태그 구상

목차

1. 이미지 파일 제공
2. client에서 이미지 접근
3. 해시태그 구상
4. 참고자료

---

이미지 파일 제공

golang에서 정적 파일을 제공하기 위한 fileserver가 존재
fileserver를 이용하여 URL로 이미지에 접근 가능

fileserver를 이용한 정적 파일 제공 방법

• r.PathPrefix("/profiles/") : "/profiles/"로 시작하는 모든 경로에 대한 라우터를 생성합니다.
• http.StripPrefix("/images/profiles/", ...) : 요청 경로에서 "/images/profiles/" 부분을 제거하여 파일 서버에 전달합니다.
• http.FileServer(http.Dir("../assets")) : "../assets/" 디렉토리에서 정적 파일을 제공하는 파일 서버를 생성합니다.
• 이미지 파일은 작은 사이즈의 썸네일 용 이미지로 변환하여 저장

client에서 이미지 접근

react에서 프로필 이미지용 컴포넌트를 작성
props로 id 값을 전달하면 아래와 같이 id에 해당하는 이미지를 요청

  const imageUrl = `${server}/assets/images/profiles/${id}.jpg`;

  return <ImgBox src={imageUrl}></ImgBox>;

---

결과

---

해시태그 구상

첫번째 구상

1. 해시 태그를 배열로 전달
2. 이전 값을 DB에서 받아와 요청으로 받은 배열과 비교
3. 이전 값에 없던 내용은 count++, 이전 값은 있으나 요청에 없는 것은 count--
4. 반복문을 통하여 각각의 해시태그를 DB에 추가 두 번째 구상
5. 티스토리의 경우 해시태그 입력 시 <를 입력하면 입력이 종료
6. 요청의 해시태그를 string으로 저장하되 해시태그 사이에 <를 입력하여 해시태그 구분
7. count는 첫 번째 구상과 동일

최종 결정

기술 스택의 경우 관리자가 기술 스택을 추가하여 지정된 내용만 추가가능, 해시태그의 경우 사용자가 제한 없이 어떠한 값이든 입력 가능
ex) ㅏ, ㅓ, 12ㄴㅇㅊㅎ43 등 다양한 값이 가능
예시와 같은 값을 입력 후 수정하게 되면 DB에 count가 0인 row가 쌓일 수 있다고 생각

N:M의 관계보다 profile_Id와 hashtag가 복합 식별자로 구성된 table로 hashtag를 관리
수정 시 profile_Id에 관련된 row를 전부 제거 후 hashtag를 추가
인기 hashtag를 위한 count는 필요시 DB에서 요청

ERD

---

참고 자료

• https://okky.kr/questions/1386929 : 프로필 이미지 원본과 썸네일 파일 비교
• https://j1mmyson.github.io/posts/ServingFiles/ : golang에서 fileserver 만들기
• https://tecoble.techcourse.co.kr/post/2022-09-13-image-storage-server/ : 이미지 스토리지 서버 구축 및 최적
• https://okky.kr/questions/1202862 : 해시태그 테이블 고민 글
• https://gist.github.com/qkreltms/de01e98cf426d4ca56b764b39f3ff21d : 해시태그 테이블 경우의 수 비교