My Little Forest

생성일
2023/11/27 01:51
태그
개발자 성장 플랫폼
깃허브
프로젝트 설명
멋진 개발자를 꿈꾸는 우리가 꾸준히 성장하는 이곳, My Little Forest
QnA 피드 - 답변 채택

Overview

멋진 개발자를 꿈꾸는 우리가 꾸준히 성장하는 이곳, My Little Forest
 깃허브를 활용해서 함께 코딩을 재밌게 할 수 있는 개발자 커뮤니티가 있다면 어떨까?
 개발자에게 중요한건 알지만… 생각보다 어려운 꾸준함을, 함께 공유한다면 어떨까?

My Little Forest 는

꿈꾸는 모든 개발자분들의 개발 놀이터, 커뮤니티 플랫폼입니다.
 커밋으로 하나되는 우리들의 개발 놀이터. 하루하루 커밋하며 나무를 키워보세요!
 경쟁과 함께, 빠른 변화들에 적응하며 달려야 하는 우리의 현실을 잠시 벗어나, 나만의 숲을 가꾸고 친구들과 함께 공유해보세요!
 요즘 핫한 개발 트렌드는 뭐야? 최신 IT뉴스와 정보도 놓치지 말고 챙기세요!
 우리들의 좌충우돌 개발 이야기, 현업 이야기를 함께 나누고 공유해보아요!

Project

주요 기능

Search
검색 및 필터 기능
뉴스
커뮤니티
유저 간 실시간 채팅
이미지 업로드
실시간 알림 기능
Github OAuth2.0 소셜 로그인
JWT를 이용한 사용자 인증
Github API를 이용한 커밋 기록 조회

프로젝트 아키텍쳐

Search

Problem

CORS (Cross Origin Resource Sharing)
•
백엔드 서버와 프론트 엔드 서버 연동 작업 중 header에 액세스 토큰을 담아 보내는 API 요청 시 CORS 에러

Try to solve

•
BE
CORS (Cross Origin Resource Sharing)

배경

테스트 코드도 다 성공했는데, 젠킨스 빌드가 안된다

문제점

CI로 도커 컨테이너 레이어 캐시가 많이 쌓인 나머지 서버의 로컬 디스크 용량이 다 차서 빌드할 공간이 없었다

Try to solve

du -sh /var/lib/docker/* 로 용량 확인
→ /var/lib/docker/overlay2 가 많다면,
sudo docker system prune -a -f 로 도커 레이어 정리

느낀점

젠킨스 빌드가 안돼요

배경

실시간 알람을 유저에게 보내기 위해, 알림이 필요한 로직에 넣어서 구현을 했다. 하지만 FCM서버를 초기화하는데 에러가 생기고, 메시지 발송도 안되고 이로 인해 기존 서비스들도 제대로 작동하지 않는 문제에 직면했다.

Problem

1.
FCM 서버로의 초기화 요청 실패
2.
메시지 발송 실패
3.
로컬에서는 알림 발송 성공, 배포 환경(Google Cloud Platform)에서는 알림 발송 실패
4.
서비스가 FCM 의 응답 시간을 기다림으로 인해 서비스의 응답시간이 지연 됨.

Reason

1.
초기화 요청실패 : fcm에서 발급 받은 private key를 resources 폴더에 저장하여 사용
2.
메시지 발송 실패
3.
FCM으로부터 발급 받은 privateKey.json파일을 읽어오는 경로가 로컬과 배포 환경이 서로 다름.
4. FCM으로 인한 서비스 응답지연
•
구현한 로직이 해당 서비스가 FCM의 응답이 완료될 때까지 서비스가 기다려야하는 것 때문에 응답 시간이 늦어지는 것을 발견하였다.
•
하기의 코드가 서비스 로직에 그대로 들어가 있기 때문에 당연한 일이였다.
FCM 알림 발송 및 배포 , 응답시간 지연 에러

배경

뉴스 API 를 요청하고 뉴스 상세 정보를 저장 하는 과정에서 뉴스 API를 여러 검색어로 요청 하다보니 중복되는 뉴스가 발생하여 같은 link 혹은 같은 제목으로 들어오는 뉴스는 제외 시켰지만, 중복되는 문제가 발생했습니다.

문제점

같은 데이터로 저장이되면, 뉴스를 보여주는 리스트 응답 데이터에 같은 데이터가 중복 되는 문제가 발생합니다.

해결방안

첫 번째 의심되는 상황 (검색어를 표시 하는 제목 불일치)
1.
저장된 데이터에서 jpa를 사용해 findByLnikOrTtile을 사용해 link가 같거나 title이 같으면 중복이 되지 않게 했지만 뉴스 API에서 데이터를 보내줄 때 title에 아래 사진과 같이 <b></b>태그안에 검색에 사용된 검색어를 감싸서 보내준다.
두 번째 의심되는 상황(Transaction에 의해 DB에 반영되기전 데이터를 검색하여 중복검사가 안되는 문제)
2.
Transaction을 아래와 같이 설정을 해서 NewsApi가 전부 파싱되고 전부 저장이 되기 전까지 DB에 반영이 되지 않는다.
트랜잭션(Transaction)이란?
트랜잭션이란? 트랜잭션(Transaction 이하 트랜잭션)이란, 데이터베이스의 상태를 변화시키기 해서 수행하는 작업의 단위를 뜻한다. 데이터베이스의 상태를 변화시킨다는 것은 무얼 의미하는 것일까? 간단하게 말해서 아래의 질의어(SQL)를 이용하여 데이터베이스를 접근 하는 것을 의미한다. SELECTINSERTDELETEUPDATE착각하지 말아야 할 것은, 작업의 단위는 질의어 한문장이 아니라는 점이다. 작업단위는 많은 질의어 명령문들을 사람이 정하는 기준에 따라 정하는 것을 의미한다. 게시판을 예로 들어보자. 게시판 사용자는 게시글을 작성하고, 올리기 버튼을 누른다. 그 후에 다시 게시판에 돌아왔을때, 게시판은 자신의 글이 포함된 업데이트된 게시판을 보게 된다. 이러한 상황을 데이터베이스 작업으로 옮기..
https://mommoo.tistory.com/62
여기서, 두 번째가 더 맞다고 생각 드는 부분이 있습니다.
트랜잭션 특징으로 원자성과 일관성을 갖고 있는데 각각의 특징은 이렇습니다.
•
원자성: 트랜잭션이 데이터베이스에 모두 반영되던가, 전혀 반영되지 않아야 한다.
뉴스 api 데이터 중복 문제(Transaction)

배경

리코일로 전역으로 테마 값을 관리하는 방법과, css 클래스 변화를 통한 테마 변경 중, 후자를 선택

문제점

app.tsx에서 useEffect를 통해 페이지가 마운트될때, 테마값을 로컬스토리지에서 읽어와 적용하도록 했다. 하지만 기본적인 class 값이 light 모드에 맞춰져 있기 때문에, light 모드가 먼저 실행 → DOM 렌더링 이후 → useEffect 가 실행되며 로컬스토리지 값을 읽어오기 때문에, 한번 깜빡임 이후 다크모드로 변경된다.

해결방안

useEffect 대신 useLayoutEffect를 사용해 렌더링된 컴포넌트가 화면에 그려지기 전에 동기적으로 실행되도록 해결했다.
클래스 변화를 통한 테마변경 후, 새로고침시 깜빡임

배경

View-height 를 활용한 무한 스크롤 구현했다. 스크롤 위치가 바닥에 닿는 순간 다음 페이지를 불러오도록 구현한 것.

문제점

scrollEvent로 인해, 한꺼번에 많은 요청 fetch 요청이 연속적으로 발생하는 문제와 가끔씩은 view height 를 제대로 인식하지 못해서 next page 가 undefined이 나는 문제

해결방안

react-intersection-observer를 활용한 무한 스크롤 구현했다. 옵저버가 화면에 보여지는 순간 다음페이지를 불러온다.
useInfiniteQuery와 react-intersection-observer의 ref 사용
+) useInfiniteQuery의 query key를 사용할 때는 페이지 파라미터를 포함한 인자를 사용해야 한다!
제대로 사용 안하면 리패치 안됨
Infinity Scroll

배경

처음에는 이미지를 서버로 업로드하는 과정에 대해 이해하지 못해서, 단순히 우리가 frontend에서 파일을 업로드할때, data.url 의 string 형식으로 db에 보관해야하는 줄 알았다…

문제점

하지만 이미지 파일을 data URL 형식으로 문자열로 저장하면, 문자열의 크기는 이미지 파일의 크기와 거의 같아진다. 예를 들어, 1MB의 이미지 파일을 data URL로 변환하면 약 1MB의 문자열이 생성. 이러한 문자열을 서버에 저장하면, 매우 많은 저장 공간을 차지하게 되어 서버에 무리가 갈 수 있다...

해결방안

formData를 사용하여 이미지 파일을 서버에 전송 이 경우에는 이미지 파일 자체를 전송하기 때문에, 문자열을 저장하는 것보다 훨씬 효율적이다. formData는 서버에 데이터를 보낼 때 사용하는 객체로, 파일 업로드 등에 사용된다. 때문에 이미지 파일의 크기와 무관하게 효율적으로 서버에 저장할 수 있다.
폼데이터로 전송하기 위해서는 객체 형식의 텍스트 정보는 JSON 형식의 문자열로 변환하여 blob 객체로 만든다. blob 객체를 FormData에 append 메서드를 이용하여 createPostRequest라는 이름으로 추가.
•
FormData는 Blob객체와 File 객체를 모두 지원하지만, 일반 객체는 직접 전송할 수 없다. 따라서, 일반 객체를 전송하려면 먼저 JSON 형식의 문자열로 변환하여 Blob 객체로 만든 후, 이를FormData 에 추가해야 한다
•
HTTP 프로토콜에서는 클라이언트와 서버 간의 통신에서 전송되는 데이터가 일반 객체일 경우, 해당 객체를 직접 전송할 수 없다. 이는 HTTP 프로토콜이 텍스트 기반 프로토콜이기 때문.
•
따라서, 일반 객체를 서버에 전송하려면 객체를 문자열(JSON 형식 등)로 변환하고, 이를 HTTP 요청 메시지에 포함시켜 보내면 서버 측에서도 해당 문자열을 다시 객체로 변환하여 사용한다.
이미지 형식의 정보는 File 객체로 전송. Blob 객체와 비슷하지만, File 객체는 추가적으로 파일 이름과 파일 타입 정보를 함께 가지고 접근 가능하다. 따라서, 이미지 파일을 File 객체로 변환할 때, 이미지 파일의 이름과 타입 정보도 함께 지정해서 보내야 한다.
텍스트 및 이미지 파일 formData 전송

배경

이미지를 업로드하는 과정중, 파일이 크면 이미지를 최적화해서 업로드하는시간의 공백이 생각보다 길기 때문에, 로딩 처리를 해주는 것이 맞다고 생각했다.

해결 과정

1.
파일 업로드 버튼 클릭시, useState로 isLoading을 true, 이미지 준비중 이미지 띄운다.
2.
이미지가 로딩중 useState에 실제 이미지 파일 값이 들어오면, 파일 이미지로 바꿔주기
3.
문제는, 이미지 파일을 고르지 않고 취소를 선택하면, 그냥 이미지 로딩중 상태가 계속 떠있게 된다.
4.
그럼 사진 파일이 있을 때, 로딩처리를해주고, 비동기적으로 사진이 최적화되고 url이 생성될 동안 로딩페이지를 보여주자. 이후 사진이 잘 들어왔다면 로딩을 종료해준다.
파일 업로드 로딩상태 처리

배경

사용자가 게시물의 상태를 변경했을때의 새로고침 없이 결과를 실시간으로 확인할 수 있어야한다.

문제점

React query의 mutation 함수를 비동기적으로 실행해, 게시물 상태변경을 반영한 후, 성공시 다시 데이터 fetch를 통한 실시간 반영을 해야한다. mutation 함수가 성공했을 때 실행되는 onSuccess에서 다시 데이터를 fetch 해오도록 하고, useQuery 함수에는 unique한 키값을 넘겨줬다.(실패)

해결

mutation 함수가 실행되는(좋아요 버튼 onClick)시점으로 돌아와서, Mutation 함수가 useState 상태를 업데이트하는 경우, useEffect를 사용해서 isSuccess 상태가 업데이트된 후, Refetch 하기 사실 그냥 mutate함수가 아닌 mutateAsync 함수를 사용하면 바로 해결될 일이지만 이때는 그 존재를 몰라서 직접 구현했습니다……
React Query를 통한 좋아요 likeCount 실시간 반영