나인 클라우드은 AI 감정 솔루션 그림일기 서비스 입니다.
하루의 일과를 그림 과 글로 정리하여 그날의 감정 이모티콘과 함께 기록해보세요.

cloud nine (행복의 절정)이라는 속담에서 착안했습니다. 행복한 감정을 기록 (cloud), 9가지의 감정 표현 이라는 점에서 저희 서비스에 어울리는 속담 같아 나인클 라우드라고 설정해 보았습니다.

구분	링크	구분	링크
	Nine Cloud		브로슈어
	FE Github		팀 SA
	BE Github		Figma

주철민	송지우	한덕용
cheolminJOO	nsong113	HyperQuanx

소셜 로그인	달력 페이지	그림 그리기

AI open api	무한스크롤	채팅방

달력 월 변경 시, 달력 데이터 표기 오류 에러 [철민]

- 문제의 디테일
오늘이 2024년 1월 4일이라면 2023년의 모든 달력은 데이터가 다 나타나지 않고, 모든 달력이 4일, 즉 오늘 날짜까지만 데이터가 등장합니다.

- 해결을 위한 노력
조건부 렌더링을 어떻게 줘야 제가 원하는 대로 구현이 될까 손코딩으로 메모장에 여러가지 경우의 수를 적어놓고 정리한 다음, 하나하나 적용했습니다.
- 해결 방법
오늘 일,월,년도의 데이터와, 달력이 바뀔 때 일,월,년도의 데이터를 변수로 정리하고 이 변수들을 이전 달, 이번 달,이후 달들에 대해 구분을 할 수 있는 const에 대입시켜 만들고, 이들을 조건부 렌더링에 적용해 해결했습니다.

토큰 재발급 관련 [덕용]

- 문제 -
1. 서버에서 지정한 만료시간과 클라이언트에서 계산한 만료시간이 다름
2. 토큰 재발급 로직 작성 중에 모든 에러 사항에서 Token 재발급으로 들어가버리는 오류와 에러코드가 Server와 안 맞는 오류.
- 해결을 위한 노력 -
1. 처음에는 Server에서 empireTime(만료시간)이라는 값을 보내주도록 요청하였습니다. Server에서는 만료시간이 Unix time으로 설정되어 있다고 해서 Front에서 현재시간을 Unix time으로 바꿔주는 로직을 만들고 (만료시간 - 현재시간)으로 유효기간을 계산하고 setTimeout()을 사용해서 Front에서 시간을 재서 시간이 끝나면 자동적으로 재발급 요청을 하도록 로직을 생각해 보았습니다. 하지만 서버에서 지정한 만료시간과 클라이언트에서 계산한 만료시간이 다른 오류가 생겼고 이 뿐만 아니라 토큰 관리가 복잡해지고, 불필요한 서버요청이 계속 생기며 만료시간을 프론트에서 저장하면 보안에도 취약할 것 같아서 이 방법을 버리고 만료가 된 이후에 서버 요청을 한다면 자동적으로 토큰 재발급 URL로 접근할수 있도록 하기 위해 Axios intercepter를 사용했습니다.
2. 일단 실험을 위해 Token 만료시간을 극단적으로 짧게 설정해놓았습니다. Token이 만료된다면 대체적으로 서버에서 401번이나 419번 에러코드를 보내준다는 여러 레퍼런스들을 참고해서 Server와 에러코드를 맞춰보았습니다. 401번은 다른곳에서도 사용한다는 얘기를 듣고 Token 만료 에러 코드를 419번으로 통일하였습니다. 인터셉터 로직에는 419번 에러코드가 뜬다면 /token으로 이동되도록 설정해주고 헤더에 RefreshToken을 담아서 Server에 토큰 재발급을 요청하였습니다.
- 결과 -
토큰이 만료되면 419번 에러코드가 뜨고 자동으로 /token으로 넘어가서 RefreshToken을 대조한 후 새로운 AccessToken을 발급해줌.

Socket.io [덕용]

- 문제 -

서버에서 지정해준 URL로 접근하지 못하는 현상.



서버에서 설정해준 URL로 접근하는 과정이 쉽지 않았습니다.



분명 엔드포인트를 /community/chat/socket.io로 설정해놓았는데 막상 개발자 도구를 보면 설정한 엔드포인트로 접근하지 못했습니다.

- 해결을 위한 노력 -


혹시 path 설정을 따로 해준다면 접근할 수 있을까 해서 기존에 하던 방식과 다르게 path 설정을 집어넣었습니다.

- 결과 -

결국 Server와 연결에 성공하였고 채팅 기능까지도 성공했습니다.

1. 번들 크기 최적화

react-icons는 종류별로 js파일을 하나씩 가지고 있어서, 하나의 아이콘을 실행하면 그 아이콘이 속한 js 파일이 실행돼서 관련 없는 불필요한 파일들도 함께 빌딩 돼 번들 크기가 커집니다. 그래서 @react-icons/all-files를 설치했고, 이 라이브러리는 아이콘마다 js 파일을 가지고 있어서 빌딩 시 필요한 파일만 실행 돼 번들 크기 최적화를 시킬 수 있었습니다.

2. React.lazy를 이용하여 라우팅 code splitting / webP확장자로 변경

- React.lazy는 React에서 코드 스플리팅을 구현하기 위한 기능 중 하나입니다. 코드 스플리팅은 애플리케이션을 더 작은 청크(chunk)로 나누어 각 청크가 필요할 때만 로드되도록 하는 기술입니다. 이를 통해 초기 로딩 시간을 줄이고 성능을 최적화할 수 있습니다. 전체 애플리케이션을 로드하는 대신 현재 사용자가 방문한 페이지에 필요한 코드만 로드하는 것을 의미하여 더 빠른 로딩을 가능하게 합니다.

- WebP 이미지는 일반적으로 JPEG 및 PNG보다 더 효율적인 압축을 제공하면서도 높은 품질을 유지합니다. 자주 사용되는 이미지를 효율적으로 압축하기 위해 webP로 변경하였습니다.

3. Profiler를 활용해서 불필요한 렌더링 최적화 / compressor.js로 이미지 압축

- 프로파일러를 사용하여 컴포넌트 렌더링 최적화를 진행했습니다. 특히 글쓰는 곳이나 그림을 그리는 부분은 마우스를 움직이거나 글자를 입력할 때 마다 헤더나 모든 레이아웃이 리렌더링이 되는 것을 알 수 있었습니다. 따라서 React.memo를 사용하여 컴포넌트를 캐싱했습니다.

- 마지막으로 compressor.js를 사용하여 0.02mB로 압축 후 서버에 보내니 하나의 이미지 로딩시간이 최대 50% (6ms->3ms)단축되었습니다.

카카오 공유하기 기능 추가 [덕용]

- 피드백 -
"나의 감정 일기를 인스타나 카카오로 공유 할 수 있으면 좋을 것 같습니다"

- 해결 -




Kakao develop에서 공유하기를 위한 세팅을 해주었고 공식문서에 따라 공유하기 기능을 만들었다.