doyI-T

[구름톤] - 구름톤 in Jeju 13기 후기(우수상 )

2-doooo-2 — Wed, 26 Feb 2025 15:32:48 +0900

☁️구름톤 지원하기

작년에 부트캠프에서 같이 교육 듣던 친구가 추천해준 해커톤! 특별한 계기보다는 재미있어 보였다! 13기 모집 알림을 신청해두었고, 드디어 문자로 알림이 왔다.

구글폼에 들어가 보니 예상보다 작성할 내용이 꽤 많았다.

(선택) 시중에 나와 있는 디자인 시스템(Material Design, Radix UI, Chakra UI)을 사용해 본 적이 있나요? 있다면 어떤 디자인 시스템을 사용했고, 어떻게 활용했는지 구체적으로 설명해주세요.
(선택) 다른 디자이너나 개발자와 협업하여 디자인시스템 라이브러리를 배포하거나 개선한 경험이 있나요? 있다면 구체적인 작업 내용을 설명해주세요.
구름톤 참여 동기를 작성해주세요.(공란 포함 최대 300자)
지원자께서 생각하시는 최근 제주도가 직면한 사회 문제는 무엇이라고 생각하나요? (공란 포함 최대 300자)
구름톤에서 2번의 사회문제를 해결하기 위해 어떤 서비스를 만들고 싶은지 설명해주세요.(공란 포함 최대 500자)
구름톤에서는 '팀원과의 협업'을 중요하게 생각합니다. 유연한 협업을 이끌어 나가기 위해 가지고 있는 나만의 장점을 설명해주세요.(공란 포함 최대 300자)
구름톤을 통해 어떤 부분의 '성장'을 기대하고 있는지, 있다면 작성해주세요.(공란 포함 최대 300자)
진행하신 프로젝트 중 한 가지를 선택하여 설명해주세요.(최대 500자)

이전에 진행한 프로젝트에서 Radix UI를 사용한 경험이 있어서 선택 항목에 모두 작성했다. 취준생이라 미리 정리해둔 내용들이 있어 큰 도움이 됐다. 1월 28일에 지원서 제출하고, 2월 11일에 발표가 났다. 야호~~~

주기적으로 메일을 확인하고 있어서 메일먼저 보고 문자를 확인했다.

문자만 보면 떨어진 줄 알았을 듯!!

해커톤은 처음이었고, 당시 여러 합불 연락을 받고 있던 터라 구름톤에 대해 크게 생각하지 않고 있었다.그런데 막상 합격 소식을 들으니 기뻤댜! 사실 기대했을지도,, ㅎㅎ 바로 비행기 예약하고 숙소도 잡았다.

숙소 추천해주시는데 난 블로그 글 보고 이미 라마다 시티 호텔로 예약해놨다 ㅎㅎ

그리고 그 전날에는 진짜 부담X100000, 자기 PR올라오신 분들과 쭉 읽어봤는데 현직자 분들이 너무 많았고 그리고 대표님도 계셨댜,, 이 사람들 사이에서 나를 어떻게 어필하면 좋지?

오랜만에 제주도 가는데 전날에는 즐거움,, 5% 부담 95%%%% 프로처럼 즐기지 못하겠니??

그래 진심이라 그렇다~~~~~~

제주도 일정 시작하기

이도이가 이도이동으로 떠나기ㅎㅎ 일정 시작하기 하루전에 라마다 호텔로 갔고 다른 곳 둘러볼까 하다가 PR을 아직 다 작성하지 못해서 고냥 호텔에서 맥주마시면서 마저 작성했다.

뭔가 이름으로 확실히 각인될 수 있다고 생각해서 gpt가 추천해 준 멘트를 활용해봤다 ㅋㅋㅋ 너무 나대나 생각도 했지만 다들 자기 PR 생각하느라 나에겐 큰 관심이 없을 거야라고 위안을 삼고 그냥 했다. 그리고 ui/ux 화면단에서 많이 어필하고 싶어 gif도 첨부했다.

1️⃣1일차 - 2월 18일 : 두근두근 설레는 첫만남~~

1-1. 아이스브레이킹

1-2일차는 구름스퀘어에서 진행됐다! 10시 이후에 입실이 가능하대서 천천히 나왔는데 55분에 어디시냐고 전화가 와서 당황했다ㅎㅎ 도착해 보니 미리 정해진 조에 앉아야 했고, 우리 조에는 남자분 한 분만 계셨다. 조원들이 모두 모인 후, 가볍게 인사를 나눴다! 항상 시작하기 전에 가장 긴장하는 편이라 오히려 현장에서 사람들이랑 대화를 좀 나누니깐 좀 긴장이 풀렸다

그리고 도착하자 받은 굿즈!! 텀블러 너무 마음에 든다. 처음에는 간단한 게임을 진행했다. TTS노래 맞추기랑 손병호 게임등등 진행했는데 이긴 팀은 커피 쿠폰 주시고 도시락 빨리 먹기였는데 도시락 빨리 먹어야 뭐하나~ 커피도 사먹으면 돼지 ㅎㅎ

1-2. 해커톤 강의

다음으로 카카오 헌터(조훈)님께서 해커톤 강의를 해주셨는데 간략하지만 핵심적인 내용들이 많았다.

거인에 등에 올라타라

완벽함보다 속도에 집중해라

이미 만들어진 바퀴를 만들지 마라!

출시된 서비스 중에서 불편한 점을 찾고, 우리만의 차별화된 강점을 1~2가지를 넣자

결국, 선택과 집중을 통해 핵심 기능에 몰입하고, 이미 나와 있는 오픈 소스를 효과적으로 활용하는 것이 중요했다. 이 강의를 들으면서 내가 생각했던 아이디어 방향을 조금 수정해야지 싶었다.

1-3. 3-mins, SELF-PR

다음 자기 PR이 시작됐는데 예상보다 고요했다! 경력 있는 분들은 더 많았고 같이 작업하면서 배우고 싶다고 생각했다. 제한시간이 3분이었는데 다른 분들이 예상보다 발표를 빨리해서 시간을 남기신 분들도 꽤 있었다. 드디어 내 차례가 돼서 발표를 했는데 하다 보니 하고 싶은 말이 많아져서 정신없이 하다가 중간에 스톱워치 보니깐 한 10초 남아 있어서 급하게 인사를 하고 자리에 돌아왔다.

그리고 나머지 키워드도 공개!!!

오히려 공유 경제가 다른 기수에서 나왔던 생성형 AI, K-SDGS보다 수월하다고 생각했다!

1-4. GDS 강의 및 실습

다음으로 강의 및 실습시간이 이어졌다. 두 개의 강의 중 선택할 수 있는 줄 알았는데, 프론트엔드 개발자와 디자이너는 GDS를, 백엔드 개발자는 크램폴린 IDE 실습 강의를 나눠서 들었다.

구름의 디디님이 피그마로 GDS를 적용하는 실습을 진행하셨고 구름의 제로님이 React+Vite+Vapor를 이용한 강의를 진행하셨다.

디자인 시스템이 무엇인지, 왜 디자인 시스템을 도입해야 하는지 등 강의 내용은 정말 유용했고, 체계적으로 구축된 시스템이 개발 속도를 높이는 데 큰 역할을 한다는 걸 실감했다.

다만, 실습 시간이 너무 짧아서 아쉬웠다. 끝까지 적용해보고 싶었는데, 실습 시간이 20분도 채 안 됐던 것 같다.

1일 차 마치고 조원들이랑 멘토님한테 추천받은 돈사무소라는 고깃집으로 고기를 먹으러 갔다.

정말 맛있었다!!! 흡,, 사진 보니깐 또 먹고 싶다 ㅎㅎ

이날은 다들 ideation을 마쳐야해서 일찍 돌아갔다. 나도 일찍 돌아가서 다시 한번 아이디어 고민을 했다.

매력적인 핵심 키워드 하나 생각해 보기
우승작 쭉 살펴보니 낭만 한 스푼 들어가 있기
오픈 소스 적절히 활용하기

그래서 나는 모앙버스라는 주제로 최종 ideation을 2일 차 오전 8시에 제출했다ㅎㅎ 중간에 잠이 쏟아져서 아침 6시에 일어나서 다시 만들었다.

2️⃣2일차 - 2월 19일 : 대망의 팀빌딩과 비어파티

2-1. 아이데이션 발표 및 팀 빌딩

이때 다른 분들의 아이디어를 들으면서 원하는 주제를 선택해야 하고, 동시에 내 발표 준비까지 해야 해서 내적으로 혼돈의 카오스였다. ‍

오전 9시까지 제출해야 했는데, 나중에 제출한 사람들부터 발표가 시작됐다. 곧 내 차례라는 뜻...ㅎㅎ

내 아이디어를 좀 더 구체적으로 정리해 볼 걸 하는 아쉬움이 남았다. 아직 머릿속에서 정리가 덜 된 상태라 발표 때 살짝 버벅거렸던 것 같다.

후기 보면 팀 빌딩 끝나고 도떼기 시장터가 된다고 했지만 뭔가 그 정도는 아니었다. 그리고 어떻게 하지 고민하고 있을 때 백엔드 개발자 한분이 나에게 먼저 와서 유심히 보고 있었다고 말해줬다~!! 정말 한줄기의 빛과 같았다.✨

그래서 나도 용기를 얻고 내가 같이 하고 싶었던 프론트엔드 개발자분에게 가서 혹시 아이디어 본인이 구현한 걸로 기획하고 싶으시냐고 여쭤봤고 그리고 어찌저찌 다른 분들과도 이야기하면서 팀이 완성됐다.

팀이 마지막쯤에 다 정해졌는데 오히려 좋았다,,, 내 경험상, 각자 아이디어와 방향을 조금 더 고민한 후에 팀을 꾸리는 것이 더 좋은 결과를 낳을 때가 많았던 것 같다.

그리고 팀원들끼리 같이 도시락 먹고 성산플레이스캠프로 이동했다. 가는 길이 내가 진짜 제주도 왔구나 싶었던,,

또 우리는 팀명을 가는 길에 정했다 ㅎㅎ 다들 뭔가 제대로 된 걸 하고 싶어서 오래 고민한 것 같다. 결국 우리는 그렇게 클라우디 팀이 되었다.

저 멀리 숙소에서 바다가 보이지만 결국 제주도에서 올라올 때까지 바다한 번 못보고 올라왔다는 슬픈 이야기,,

2-2. 카카오 현직자 특강

기획서 작성

어려운 이야기는 개념정리부터 하고 시작
문제점인지 후 해결방안으로 바로 연결하기 - 시작 후 중요한 것 부터 말하세요
신뢰도를 향상시킬 수 있는 말을 인용하기 - 전문가 말 인용하기

발표하기 Tip

발표시작 때 관심을 끌 수 있는 어그로로 시작하기
1. 발표에 의미를 부여하기
2. 과거의 성과나 숫자를 언급
3. 유머러스한 이야기

발표를 하게 되는 순간은 인생에서 또 언제 어떤 순간에 있을지 모르니 여러모로 유익한 강의였다!!

그리고 우리 팀은 계속 틈 날 때마다 기획회의를 했다. 아직 2일 차까지 확정된 기획이 없어서 빨리 기획 나오고 개발 초기세팅이라도 시작하고 내일을 맞이하고 싶었다.

2-3. 비어파티

유명한 구름톤의 하이라이트

사실 맥주도 맥주지만 음식이 맛있었다 ㅎㅎㅎ

처음에는 랜덤으로 앉아서 먹었고

두 번째는 각자 멘토님이랑 앉아서 먹었다.

뭔가 이번 기수는 조금 잔잔한 분위기의 사람들이 많은 줄 알았는데 막상 이야기해 보니깐 매력 있는 분들이 많이 계셨다.

그리고 확실히 현직자 분들이랑 이야기 나누면서 얻어가는 것도 많았다.

개발을 진행하다 보면 어느 시점에 여쭤봐야 하지? 얼마큼 나 혼자 할 수 있을 때까지 해야 하지? 라는 고민이 참 많이 드는데 결론은 빨리 질문하는 게 좋은 것 같다! 질문할 때 한번 더 내 로직에 관해 이해할 수 있고 또 막상 별거 아닌데 너무 오래 혼자 잡고 있으면 시간 낭비가 될 수 있기 때문이다!!!!

그리고!! 사실 비어파티는 본격적인 해커톤을 알리는 시작인 것 같다 ㅎㅎ

왜 안 자??

다들 맥주 조금만 마시고 들어가서 코딩 시작 ㅎㅎ

그리고 우리 팀의 막내 디자이너는 이때부터 밤새기를 시작했다. 젊어서 그런가 열정에 박수를 보낸다!!!!!!!!!!

3️⃣3일차 - 2월 20일 : 39시간 무수면 해커톤 시작

3일 차는 본격적인 해커톤이 시작되었다! 우리 팀이 최종적으로 결정한 기획은 혼잡도를 기반으로 숨겨진 장소를 추천해 주는 서비스였다. 사용자가 인기 관광지의 혼잡도를 실시간으로 확인하고, 만약 혼잡하면 현지인들이 추천하는 한적한 장소로 다른 관광지를 안내해주는 시스템이다.

우리 팀의 브레인, 백엔드 개발자님이 제주 관광 빅데이터 서비스 플랫폼에서 가져온 데이터를 활용해, 좌표(위도, 경도)를 기반으로 반경 150미터 이내에 있는 관광객과 도민의 숫자를 실시간으로 확인할 수 있게 해주셨다.

우리는 이 정보를 화면단에 잘 띄우면 됐다. 아무래도 첫 화면이 할 일이 많을 것 같아 메인 화면/나머지 화면으로 프론트 파트를 나누고 각자 맡은 일을 시작했다. 몇 시까지 마치겠다고 시간을 정해두고 일정을 공유했지만, 생각보다 쉽지 않았다.

그럼에도 불구하고 쉬지 않고 화면을 완성해 나갔다. 없는 시간에 공통으로 사용할 수 있는 컴포넌트들을 계속해서 추출하려고 노력했고, 디자인도 더 나은 방법이 있으면 함께 고민하려 했다. GDS는 적용해보고 싶었지만, 시간이 많이 소요될 것 같아서 결국 포기했다.

중간중간에 디자인과 기획은 계속 바뀌어서 회의를 꾸준히 해줘야 했다.

전날 밤샌 막내 디자이너 깨웠더니 "여기가 어디야" 시전,,, 귀여운 모숩 동영상으로 남기지 못한 게 한이다 ㅠㅠ

이때부터는 시간이 어떻게 흘러갔는지 모르겠다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

밤새고 오전 8시30분에 마주한 에러 ㅎㅎ 깔깔

4️⃣4일차 - 2월 21일 : 해커톤 결과 발표 및 시상

시연 영상을 찍기 10분 전까지 코드를 수정했다. 마지막 제출은 조금 늦어져서 감점을 받았지만, 그래도 넣고 싶은 자료들은 다 반영할 수 있었다. 발표가 시작되고 다른 팀들 발표를 쭉 들으면서, 상 받을 것 같은 팀들은 눈에 띄었다. 정말 짧은 시간 안에 탄탄한 스토리로 PPT를 완성하셨다. 물론, 우리 팀 발표가 내 맘속에선 일등~~~

발표 끝나고 받은 심사평들, 다른 팀들 할 때도 느낀 거지만 마냥 칭찬을 해주시기 보다 날카로운 피드백을 해주셨다.

여행을 갈 때 핫플을 가려고 하는 이유가 있을 텐데 어떻게 생각하는지?
여행이라는 키워드는 F스러운 서비스지만 T스럽게 풀어낸 것 같다. F의 요소가 조금 담겨있었으면 좋았을 것
UI/UX 완성도가 좋아서 URL나중에 받아보고 싶다.
AI(o3모델)를 사용한 이유

우리는 사람들이 핫플을 가려는 이유가 SNS 발달로 포토존의 쏠림 현상을 가장 큰 원인으로 집어냈다. 이런 원인이라면 서비스에서 유사하지만 한적한 장소를 추천해줄 때, 굳이 1,2시간 웨이팅을 하면서 인기 있는 장소에 갈 필요는 없지 않을까?라고 생각했다!

나머지 질문들도 어려웠을 수 있는 답변을 기획자랑 백엔드 개발자분이 잘 받아쳐줬다!!

모든 발표가 끝나고 대망의 시상식이 시작됐다. 우리팀이 가산점 없이 감점만 있어서 3등 아니면 가망이 없다고 생각했는데 처음으로 이름이 불렸다!!! 우와아~~~~~~ 우수상!!!!

구름톤을 통해 느낀 점

짧은 시간 안에 속도전을 해야 하다 보니 기획과 디자인이 정말 중요하다는 걸 실감했다. 그러기 위해서 서로를 납득시킬 수 있는 이야기를 계속 나누려 노력했다. 팀원들 모두 피드백을 잘 받아들이고 더 나은 방향으로 고민하는 게 느껴져서 좋았다.

해커톤 시작하기 전에는 부담 왕창 뿐이었는데 왜 재밌다고 하는지 알겠다. 항상 열정적인 사람들은 나에게 큰 영감을 준다. 나도 더 열심히 살아야지 ㅎㅎ 이렇게 또 다르게 살아가고 있는 사람들한테 에너지 왕창 받고 왔다.

그리고 시간이 된다면 챗봇서비스에 AI이 제대로 적용하고 디자인 나온 대로 프론트단에서 조금 더 수정하고 싶다.

수고했다 짝짝짝

클라우디팀 쵝오 시간 날 때 또 만나요,,,

Next.js(14버전)- SSE 실시간 알림 구현

2-doooo-2 — Fri, 31 Jan 2025 22:04:30 +0900

️들어가며

해당 글은 "next": "14.2.6" 버전을 바탕으로 한 프로젝트입니다.
SSE는 HTTP 표준 기술 중 하나이므로 특정 버전이 존재하지 않습니다.

❓SSE를 선택한 이유는?

우리FIS아카데미에서 진행한 최총 프로젝트에서 우리의 핵심 기능은 '정산'이었다. 이때 신속한 정산을 위해 ‘정산 요청’, ‘정산 시작’, ‘정산 완료’ 등의 정보를 여행원 간 실시간으로 공유할 필요성을 느꼈고 우리는 실시간으로 서비스를 구현할 기술을 찾고 있다.

SSE(Server-Sent Events) VS Polling VS WebSocket

방식	연결 방식	데이터 흐름	실시간성	서버 부하	브라우저 지원	사용 사례
SSE (Server-Sent Events)	단방향 (서버 → 클라이언트)	서버에서 클라이언트로만 데이터 전송	중간 (연결 유지)	낮음	대부분의 최신 브라우저 지원 (IE 미지원)	주가 정보, 알림 시스템, 대시보드
Polling (Short/Long)	클라이언트가 주기적으로 요청	클라이언트 → 서버 요청, 서버 응답	낮음 (지연 발생)	높음 (반복적인 요청)	모든 브라우저에서 가능	채팅, 데이터 새로고침
WebSocket	양방향 (서버 ⇄ 클라이언트)	서버와 클라이언트가 자유롭게 데이터 교환	높음 (실시간)	낮음 (연결 유지, 효율적)	대부분의 최신 브라우저 지원	실시간 게임, 채팅, 주식 거래

Polling은 주기적으로 서버에 요청을 보내는 방식, 리소스 낭비가 심하다고 판단, 또한 웹소켓역시 양방향 통신으로 우리가 구현할 실시간 알림에 쓰기에는 오버 스펙이라고 생각했다. 그래서 서버에서 클라이언트로 단방향 통신인 SSE를 선택해서 구현하게 되었다.

++ SSE와 WebSocket의 차이

SSE는 웹 기술이기 때문에 HTTP 프로토콜 위에서 동작한다.또한, HTTP 연결을 유지한 상태에서 재연결이나 추가 설정 없이 서버로부터 지속적인 데이터 스트림을 받을 수 있다.

반면, WebSocket은 독립적인 프로토콜을 사용하고, HTTP와는 별도의 연결을 만들어 데이터를 주고받는다.

SSE는 CORS(Cross-Origin Resource Sharing)을 통해 다른 도메인에서도 데이터를 수신할 수 있다. WebSocket도 동일한 도메인 간 통신을 제공하지만, 보안상의 이유로 추가 구성이 필요할 수 있다.

Next.js에 SSE 적용하기

Next.js에서는 서버 사이드 렌더링 지원해서 SSE API Route도 구현할 수 있다. 하지만 우리 프로젝트에서느 Spring으로 서버를 구현했기 때문에 나는 데이터를 받아오는 로직을 구현하면 됐다!

우리 서비스에서는 실시간 알림 서비스를 로그인된 회원만 이용할 수 있도록 설계했다. 그래서 서버랑 SSE 연결 시 Authorization 헤더에 토큰값을 포함하여 인증된 요청만 처리되도록 구현해야했고 EventSource API는 요청을 보낼 때 커스텀 헤더를 추가할 수 없어서 event-source-polyfill라이브러리를 사용하였다.

문제 코드

import { EventSourcePolyfill } from 'event-source-polyfill';
import { auth } from '@withbee/auth-config';

export const connectSSE = async (url: string, onMessage: (data: any) => void, onConnect?: () => void, onError?: (error: any) => void, token?: string) => {
  // 인증 정보 얻기
  const session = await auth();
  const accessToken = session?.user!.accessToken;
  if (!accessToken) throw new Error('Authentication required');

  // SSE 연결 설정
  const eventSource = new EventSourcePolyfill(url, {
    headers: { Authorization: `Bearer ${accessToken}` },
    heartbeatTimeout: 30000,  // 30초마다 heartbeat 체크
  });

  // 연결 성공 이벤트
  eventSource.addEventListener('connect', (event: any) => {
    if (event.data === 'SSE 연결이 완료되었습니다.') {
      onConnect?.(); // 연결 완료 콜백 호출
    }
  });

  // 메시지 수신 이벤트
  eventSource.addEventListener('message', (event: MessageEvent) => {
    onMessage(event.data); // 메시지 처리
  });

  // 에러 처리
  eventSource.onerror = (error) => {
    console.error('SSE Error:', error);
    onError?.(error); // 에러 콜백 호출
    eventSource.close(); // 연결 종료
  };

  return eventSource; // 이벤트 소스 반환
};

이렇게 코드를 완성한 후에 돌려봤는데 다음과 같은 에러가 떴다.

headers 객체가 서버 요청 스코프 밖에서 호출됨

처음에는 무슨 소리인가 했는데 서버 컴포넌트에서는 브라우저 전용 API인 EventSource 를 사용할 수 없어서 난 에러였다!.

그렇다면 요청 스코프 밖에서 호출됐다는 게 무슨 말일까?

connectSSE 함수가 'use client' 지시문 없이 작성됨
Next.js는 이 코드를 서버 컴포넌트로 인식
빌드/서버 시작 시점에 이 코드가 평가됨
이 시점에는 실제 HTTP 요청이 없음 (= 요청 스코프 밖)
headers 객체를 생성하려고 시도하지만 실제 요청 컨텍스트가 없어서 에러 발생

그러니깐 대강 요약해보면 브라우저 전용 api안에 header가 있는데 서버컴포넌트에서 이를 부를려고 하니깐 요청 스코프 밖에서 header객체가 호출됐다는 것이다.

꼬꼬질(꼬리의 꼬리를 무는 질문 ㅎㅎ 내가 만든 용어)

그렇다면 요청 스코프는 정확히 언제 표현되는 단어일까?

요청 스코프는 하나의 HTTP 요청이 시작되어 응답이 완료될 때까지의 생명주기를 가지는 실행 컨텍스트를 의미한다. Next.js에서는 크게 세 가지 컨텍스트가 있다.

서버 사이드 렌더링(SSR) 컨텍스트

// 서버에서 실행되는 코드
// headers(), cookies() 등의 API 사용 가능
export default function Page() {
  // 여기는 요청 스코프 내부
}

클라이언트 사이드 컨텍스트

'use client'
// 브라우저에서 실행되는 코드
// window, document 등 브라우저 API 사용 가능

서버 컴포넌트 빌드 타임 컨텍스트

// 빌드할 때 실행되는 코드
// 요청 스코프 밖
const config = {
  // 여기서 headers 접근 불가
}

해결책은 간단했다. EventSourcePolyfill이 필요로 하는 브라우저 컨텍스트가 없었고 headers 객체를 생성하려고 하지만 실제 HTTP 요청 컨텍스트가 없어 에러가 난 거기 때문에 저 컴포넌트를 클라이언트 컴포넌트로 바꿔주면 된다. 그러니깐 'use client'만 붙여주면 된다.

문제 해결 코드

'use client';
// import 생략

export default function RealTimeMsg() {
  const { data: session, status } = useSession();
  const [notifications, setNotifications] = useState<Notification[]>([]);
  const [accessToken, setAccessToken] = useState<string | null>(null);
  const [isVisible, setIsVisible] = useState(false);
  const [isAnimatingOut, setIsAnimatingOut] = useState(false);

  useEffect(() => {
    if (
      status === 'authenticated' &&
      session?.user?.accessToken &&
      !accessToken
    ) {
      setAccessToken(session.user.accessToken);
    }
  }, [session, status, accessToken]);

 useEffect(() => {
  let eventSource: EventSourcePolyfill;
  if (accessToken) {
    (async () => {
      eventSource = await connectSSE(
        `${BASE_URL}/api/notifications/stream`,
        (rawData) => {
          const parsedNotification: Notification = JSON.parse(rawData);
          setNotifications((prev) => [...prev, parsedNotification]);
          // 알림 표시 및 자동 제거 타이머 설정
        }
      );
    })();
  }
  // 클린업
  return () => {
    eventSource?.close();
  };
}, [accessToken]);

  const handleClose = () => {
    setIsAnimatingOut(true);
    setTimeout(() => {
      setIsVisible(false);
      setNotifications((prev) => prev.slice(1));
    }, 1000); // 애니메이션 시간과 맞춤
  };

  if (!isVisible || notifications.length === 0) {
    return null;
  }

  const notification = notifications[0];
  if (!notification) {
    return null;
  }

  return (
    <div className={styles.background}>
      // 생략
    </div>
  );
}

최종 화면

마치며

사실 서버 컴포넌트를 클라이언트 컴포넌트로 바꾸면 해결되는 문제였지만 에러 로그에서 Next.js의 SSR과 CSR의 충분한 이해가 없으면 헷갈리는 문제였기에 충분한 시간을 들여서 고민해보았다,, 그리고 그 뒤로 배포하는 과정에서 로컬에서 개발할 때는 SSE 연결이 에러 없이 잘 작동했는데 배포 후 SSE연결하는 페이지에서 502 Bad Gateway에러가 발생했었다. SSE통신을 지속적으로 연결하려면 nginx쪽에서도 따로 또 설정을 해줘야 했다. 다행히 팀원들의 도움으로 마무리를 깔끔하게 할 수 있었던 것 같다. 새로운 기술 학습해서 짜릿하다~~

참고자료

Next.js + Storybook이용해서 컴포넌트 개발하기 (pnpm 사용)

2-doooo-2 — Tue, 12 Nov 2024 22:47:35 +0900

️들어가며

해당 글은 "next": "14.2.6", "@storybook/nextjs": "8.4.1" 버전을 바탕으로 한 프로젝트입니다.

Storybook 이란?

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

공식문서에서 찾아보면 "스토리북은 UI 구성 요소와 페이지를 독립적으로 제작하는 프론트엔드 작업 환경입니다. 수천 개의 팀이 UI 개발, 테스트, 문서화를 위해 Storybook을 사용하고 있으며, 오픈 소스로 무료로 제공됩니다 " 라고 나와있다.

❓Storybook 언제,왜 사용하는가?

그렇다! 스토리북은 분리 환경에서 UI 컴포넌트를 개발할 수 있다. 또한 UI 컴포넌트 라이브러리를 문서화 할 수도 있고, 디자인 시스템을 개발하기 위해 사용할 수도 있다.

그렇기 때문에 Storybook은 UI 컴포넌트를 빠르고 독립적으로 개발할 때 매우 유용하게 사용된다. 또한 테스트 자동화 및 문서화에도 적합하여, 특히 팀 단위 협업 시 개발 효율성과 유지보수성을 크게 향상시킬 수 있다.

그래서 이번 파이널 프로젝트에서 공통으로 들어갈 모달이나 버튼이 많아 스토리북을 사용하여 프로젝트를 진행하기로 했다.

✅Next.js에 Storybook 사용하기

storybook 셋팅하기

우리 프로젝트에서는 pnpm사용해서 명령어가 다르면 해당 사이트를 들어가서 자신의 프로젝트에 맞는 패키지 명령어를 사용하면 된다.

https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react

pnpm dlx storybook@latest init

해당 명령어는 run까지 한꺼번에 실행되고, 설치하고 나서는 실행 명령어만 사용하면 된다.

pnpm storybook

설치 후에는 해당 명령어만 치면 스토리북이 실행된다. 다음은 실행화면이다.

위의 이미지는 스토리북의 기본 셋팅이 아닌 현재 진행중인 프로젝트에서 활용한 스토리북이다.

storybook UI구조

실행 명령어 후에는 .storybook폴더와 stories폴더가 생긴 것을 확인할 수 있다.

main.ts

import type { StorybookConfig } from "@storybook/nextjs";

import { join, dirname } from "path";

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}
const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@chromatic-com/storybook"),
    getAbsolutePath("@storybook/addon-interactions"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/nextjs"),
    options: {},
  },
  staticDirs: ["../public"],
};
export default config;

main.ts 에는 storybook을 위한 config 설정들이 담겨있다. pnpm dlx storybook@latest init 을 통해서 기본으로 설정되는 stories와 addons 세팅이 되어있다.

주요 함수, 속성들

getAbsolutePath 함수

패키지의 package.json 파일을 기준으로 절대 경로를 반환하는 역할
모노레포로 구성되어 있는 프로젝트의 패키지 위치를 명확하게 찾기 위해 절대 경로가 필요
require.resolve로 패키지를 찾고, dirname으로 해당 패키지의 상위 디렉터리 경로를 반환

stories 속성

Storybook에서 사용할 스토리 파일의 경로를 지정
../stories 폴더 아래의 모든 mdx 파일과 다양한 확장자(js, jsx, mjs, ts, tsx)를 가진 스토리 파일을 포함하도록 설정

addons 속성

Storybook 기능을 확장하는 애드온들이 포함되어 있다.
예시

@storybook/addon-onboarding: Storybook 시작 가이드 제공
@storybook/addon-essentials: 기본적인 스토리북 기능 추가
@storybook/addon-interactions: 상호작용 테스트 지원

framework 속성

Storybook이 사용해야 하는 프레임워크를 지정
Next.js용 Storybook을 설정하기 위해 @storybook/nextjs 프레임워크를 절대 경로로 지정

preview.ts

import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

preview.ts는 Storybook에서 미리보기 환경을 설정하는 데 사용되며, 각 스토리의 기본 매개변수와 속성을 정의한다.

controls 속성

컴포넌트의 props를 Storybook에서 조작
color: 배경색이나 텍스트 색상처럼 컬러 관련 props를 자동 감지하여 색상 선택기를 제공합니다.
date: Date로 끝나는 props를 감지해 날짜 선택기를 제공합니다.

matchers 속성

color
- /(background|color)$/i 정규 표현식을 사용해 prop 이름이 background나 color로 끝나는 경우를 자동으로 감지
- 해당 props는 컬러 선택 컨트롤이 적용되어 Storybook에서 색상을 선택할 수 있음
date
- /Date$/i 정규 표현식을 통해 prop 이름이 Date로 끝나는 경우를 자동으로 감지
- 감지된 props는 날짜 선택 컨트롤이 적용되어 Storybook에서 날짜를 선택할 수 있음

storybook 적용하기

Button.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
  },
  args: { onClick: action('clicked') },
};

export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    primary: true,
    label: '선택 완료',
  },
};

export const LargePrimary: Story = {
  args: {
    primary: true,
    size: 'large',
    label: '그룹 선택 완료',
  },
};

export const SmallPrimary: Story = {
  args: {
    primary: true,
    size: 'small',
    label: '불러오기',
  },
};

import type { Meta, StoryObj } from '@storybook/react'

Meta: 스토리의 메타데이터를 설정. 주로 스토리의 제목, 컴포넌트, 기타 설정들이 포함
StoryObj: 개별 스토리의 속성 타입을 정의. 각 스토리에서 컴포넌트를 어떻게 렌더링할지를 설정할 수 있음

import { action } from '@storybook/addon-actions';

@storybook/addon-actions에서 action 함수를 가져옴. 이 함수는 사용자가 버튼을 클릭했을 때 로그를 기록하거나 이벤트를 추적하는 데 사용
버튼 클릭과 같은 이벤트를 추적하는 데 유용. 여기서는 onClick 이벤트를 추적하여 Storybook의 "Actions" 패널에 출력

const meta: Meta<typeof Button> = { ... };

meta 객체, 스토리에서 컴포넌트의 메타데이터를 정의 - 주요 항목
- parameters: Storybook에서 설정할 수 있는 다양한 추가 옵션. layout: 'centered'로 설정하면 버튼이 화면 중앙에 위치
- tags: 자동 문서화 기능인 autodocs 태그가 추가되어, Storybook의 자동 문서화 시스템에 의해 이 컴포넌트에 대한 설명이 자동으로 생성
- argTypes: 각 스토리에서 사용될 argType을 정의하는데 사용. argTypes는 스토리의 제어를 위한 타입을 정의하는 데 사용
- args: Button 컴포넌트의 기본 인자 값을 설정. 여기서는 onClick 이벤트가 발생했을 때 action('clicked')가 호출되도록 설정하여 버튼 클릭을 추적

여러 스토리들(Primary,Secondary, LargePrimary등);

각 스토리는 Button 컴포넌트의 다양한 변형을 보여주는 예시
args를 사용하여 버튼의 속성을 설정, 스타일과 텍스트 등을 바꿔서 시연

Button.tsx 컴포넌트

"use client";
import React from "react";
import { motion } from "framer-motion";
import styles from "./button.module.css";

export interface ButtonProps {
  primary?: boolean;
  size?: "small" | "medium" | "large" | "xlarge";
  label: string;
  onClick?: () => void;
  className?: string;
}

export const Button = ({
  primary = false,
  size = "medium",
  label,
  ...props
}: ButtonProps) => {
  const mode = primary ? styles.primary : styles.secondary;

  return (
    <motion.button
      type="button"
      className={[styles[size], mode, styles.button].join(" ")}
      transition={{
        duration: 1,
        ease: "easeInOut",
        repeat: Infinity,
        repeatType: "mirror",
      }}
      {...props}
    >
      {label}
    </motion.button>
  );
};

export interface ButtonProps { ... }

ButtonProps
- primary: 버튼 스타일 (기본값은 false)
- size: 버튼 크기 (small, medium, large, xlarge 중 선택 가능, 기본값은 medium)
- label: 버튼에 표시할 텍스트

export const Button = ({ ... }: ButtonProps) => { ... }

이 컴포넌트는 ButtonProps 타입을 받으며, 기본값을 설정하여 props를 구조 분해 할당
primary, size, label을 기본값을 지정하고, props를 나머지로 받아서 사용

return ( ... )

className: 버튼에 적용할 CSS 클래스를 설정. styles[size]로 버튼 크기를, mode로 버튼 스타일을 설정하고, styles.button을 항상 추가
...props: 나머지 props를 버튼 엘리먼트에 전달. 이로 인해 onClick과 같은 다른 props가 전달될 수 있음

label: 버튼의 텍스트를 표시

마치며

한달동안 프로젝트를 진행하면서 이 정도 볼륨의 프로젝트에서 스토리북을 사용하는게 맞나? 오히려 시간 낭비가 아닐까라는 의구심이 들었지만 취준생 입장에서 다양한 경험을 쌓는 것이 중요하다고 판단했다. 아직 스토리북을 활용한 범위가 그렇게 넓지 않아 프로젝트를 계속 진행하면서 더 효과적으로 활용할 수 있는 방법을 찾고자한다!!

참고자료

Next.js - Infinite Scroll활용해서 데이터 처리하기

2-doooo-2 — Sun, 3 Nov 2024 16:20:38 +0900

우리fis아카데미에서 사이드 프로젝트를 진행하면서 랭킹기능을 구현하게 되었다. 페이지네이션이랑 무한스크롤 중에 고민하다가 일일이 클릭하며 페이지를 이동하는게 번거롭다고 느꼈고 InfiniteScroll을 구현해보고 싶었다!

왜 InfiniteScroll을 사용했는가?

사용자 경험 향상: 사용자가 스크롤을 내릴 때 자동으로 추가 데이터를 불러옴으로써, 페이지를 수동으로 전환할 필요 없이 매끄럽고 연속적인 데이터 로딩 경험을 제공
성능 최적화: 초기 데이터 로딩 시 모든 데이터를 한 번에 가져오는 것이 아니라, 필요한 만큼의 데이터만 순차적으로 불러와서 성능을 최적화
편리한 데이터 처리: 다음 페이지 데이터를 가져오는 로직이 명확하게 분리되어 있어, 유지보수와 확장성이 용이

1. react-infinite-scroller 설치하기

npm install react-infinite-scroller

2.import하기

import InfiniteScroll from 'react-infinite-scroller';

3.적용하기

3-1. 백엔드에서 반환되는 데이터 구조 확인

{
  "member": {
    "id": 1,
    "name": "홍길동",
    "course": "클라우드 서비스",
    "rank": 2,
    "image": "이미지 url 주소",
    "studyTime": 1000,
    "totalTime": 6000
  },
  "ranking": {
    "hasNext": true,
    "ranks": [
      {
        "id": 1,
        "name": "홍길동",
        "course": "클라우드 서비스",
        "rank": 2,
        "image": "이미지 url 주소",
        "studyTime": 1000,
        "totalTime": 6000
      }
      // 추가 학생 데이터...
    ]
  }
}

hasNext는 값을 확인하여 더 이상 가져올 데이터가 있는지 여부를 확인하는 변수다.

3-2 구조 분해 할당 구현

API 호출을 통해 데이터를 받아오고, 필요한 정보를 구조 분해 할당을 통해 상태 변수에 저장.

const { member, ranking: { ranks: newRankings, hasNext } }: ApiResponse = await getMemberRanking({
  tab: activeTab,
  pageNumber,
  size,
});

3-3. 상태관리

React의 useState 훅을 사용하여 상태 변수 설정:

activeTab: 현재 활성화된 탭 (일간, 주간, 월간)
rankings: 학생들의 랭킹 리스트
hasMore: 추가 데이터 유무
currentUser: 현재 사용자의 정보
loading: 데이터 로딩 상태

  const [activeTab, setActiveTab] = useState<'DAILY' | 'WEEKLY' | 'MONTHLY'>('DAILY');
  const [rankings, setRankings] = useState<Student[]>([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(0);
  const [currentUser, setCurrentUser] = useState<Student | null>(null);
  const [loading, setLoading] = useState(false);
  const size = 10;

3-4. 데이터 페칭 함수 작성

API 호출을 처리하는 fetchData 함수 구현

const fetchData = async (pageNumber: number) => {
  try {
    setLoading(true);
    const response = await getMemberRanking({ tab: activeTab, pageNumber, size });
    // 데이터 처리 로직...
  } catch (error) {
    console.error('데이터 로드 에러:', error);
  } finally {
    setLoading(false);
  }
};

fetchData 함수는 페이지 번호를 인자로 받아 API를 통해 랭킹 데이터를 요청, 요청은 getMemberRanking 함수를 통해 이루어지며, 현재 활성화된 탭(activeTab)과 페이지 번호(pageNumber), 가져올 데이터의 크기(size)를 매개변수로 전달

페이지 전환이나 데이터 갱신 시 사용자에게 최신 정보를 제공하는 역할 수행

3-5. 무한 스크롤 구현

사용자가 스크롤을 내리면 추가 데이터를 불러오는 loadMore 함수 작성:

const loadMore = () => {
  if (hasMore && !loading) {
    fetchData(page + 1);
  }
};

3-6. 테이블 렌더링

사용자가 스크롤할 때 loadMore 함수를 호출하고, hasMore 값에 따라 더 로드할 수 있는지 확인. 데이터가 로드되는 동안 로딩 메시지가 표시.

<InfiniteScroll
  pageStart={0}
  loadMore={loadMore}
  hasMore={hasMore}
  loader={
    <div className={styles.loader} key={0}>
      Loading...
    </div>
  }
  useWindow={false}
  getScrollParent={() => containerRef.current}
>
  <table>
    ...
  </table>
</InfiniteScroll>

데이터 흐름:

loadMore 함수: 스크롤이 끝에 도달할 때마다 호출되며, 다음 페이지의 데이터를 요청. 이 함수는 부모 컴포넌트에서 fetchData를 호출하여 새로운 데이터를 가져오는 역할을 함
hasMore prop: 현재 더 불러올 데이터가 있는지를 판단. fetchData에서 새로운 데이터를 성공적으로 불러온 후, hasNext의 값에 따라 업데이트.
loader: 데이터 로딩 중에 보여줄 로딩 UI를 정의. 새로운 데이터가 로드되는 동안 사용자에게 로딩 중임을 알려줌.
getScrollParent: 스크롤 이벤트를 감지할 부모 요소를 지정. containerRef를 사용하여 InfiniteScroll 컴포넌트의 스크롤 부모를 지정.

이렇게 Infinite Scroll을 활용해 서버에서 필요한 데이터만 요청하여 네트워크 트래픽을 줄이고 성능 최적화할 수 있게 되었다!!

4.에러 회고 및 리팩토링 진행

처음 랭킹 페이지에 진입했을 때는 정상적인 데이터 반환했으나 주, 월랭킹으로 페이지를 전환했을 때, 스크롤 통해 추가 데이터를 로드 했을 때 동일한 구간의 랭킹이 중복으로 불러오는 문제가 발생

에러 수정 전 코드

export default function Ranking() {
// 상태 정의 생략 

  useEffect(() => {
    const fetchData = async () => {
        setRankings([]);
        setPage(0);
        setHasMore(true);

        const {
          member,
          ranking: { ranks: initialRankings, hasNext },
        }: ApiResponse = await getMemberRanking({
          tab: activeTab,
          pageNumber: 0,
          size,
        });

        const currentUserData: Student = {
          id: member.id,
          name: member.name,
          studyTime: member.studyTime,
          totalTime: member.totalTime,
          course: member.course,
          rank: member.rank,
          image: member.image || rankingImg,
        };

        setRankings(initialRankings);
        setHasMore(hasNext);
        setCurrentUser(currentUserData);
    };

    fetchData();
  }, [activeTab]);

  const loadMore = async () => {
    if (hasMore) { // 로딩 상태 체크 없이 요청 발생
      const nextPage = page + 1;
      try {
        const response: ApiResponse = await getMemberRanking({
          tab: activeTab,
          pageNumber: nextPage,
          size,
        });

        const newRankings = response.ranking.ranks;
        // 기존 상태값을 초기화하지 않고 데이터를 추가
        setRankings((prevRankings) => [...prevRankings, ...newRankings]);
        setHasMore(response.ranking.hasNext);
        setPage(nextPage);
      } catch (error) {
        console.error('데이터 로드 에러:', error);
      }
    }
  };

  return (
    <section className={styles.container}>
      // 생략
    </section>
  );
}

에러 수정 및 리팩토링

export default function Ranking() {
 // 기타 상태 정의 생략
  const [loading, setLoading] = useState(false);

  const fetchData = async (pageNumber: number) => {
    try {
      setLoading(true);
      const {
        member,
        ranking: { ranks: newRankings, hasNext },
      }: ApiResponse = await getMemberRanking({
        tab: activeTab,
        pageNumber,
        size,
      });

      if (pageNumber === 0) {
       // 첫 로드 시 기존 데이터를 덮어씀 
        setRankings(newRankings);
        setCurrentUser({
          id: member.id,
          name: member.name,
          studyTime: member.studyTime,
          totalTime: member.totalTime,
          course: member.course,
          rank: member.rank,
          image: member.image || rankingImg,
        });
      } else {
        setRankings((prevRankings) => [...prevRankings, ...newRankings]);
      }

      setHasMore(hasNext);
      setPage(pageNumber);
    } catch (error) {
      console.error('데이터 로드 에러:', error);
    } finally {
      setLoading(false); // 로딩 상태 초기화
    }
  };

  useEffect(() => {
    fetchData(0); // 새 탭으로 변경 시 첫 페이지부터 데이터 로드 
  }, [activeTab]);

  const loadMore = () => {
  // 로딩 중이 아닐 때만 데이터 요청
    if (hasMore && !loading) {
      fetchData(page + 1);
    }
  };

  return (
    <section className={styles.container}>
      // 생략
    </section>
  );
}

문제 해결 핵심 이유

1. 로딩 상태 추가

원본 코드는 로딩 중임을 표시하는 상태가 없었음. 이로 인해 여러 요청이 동시에 발생할 수 있음

수정 후 아래 코드를 넣음으로써 loading 상태를 추가하여 데이터 로딩 중에는 추가 요청이 발생하지 않도록 함. 이로 인해 여러 요청이 동시에 이루어지는 문제 방지

const [loading, setLoading] = useState(false); // 새로운 로딩 상태

2. fetchData 함수 수정

원본코드에서 모든 모든 데이터 요청이 같은 함수에서 처리되므로, 페이지 번호에 따라 다른 방식으로 데이터를 처리할 수 없음

원본 코드

const fetchData = async () => {
  // API 호출 및 데이터 처리
}

수정 후 코드

const fetchData = async (pageNumber: number) => {
  try {
    setLoading(true); // 로딩 시작
    const {
      member,
      ranking: { ranks: newRankings, hasNext },
    }: ApiResponse = await getMemberRanking({
      tab: activeTab,
      pageNumber,
      size,
    });

    if (pageNumber === 0) {
      setRankings(newRankings); // 초기 데이터 설정
      setCurrentUser({
        // 생략
      });
    } else {
      setRankings((prevRankings) => [...prevRankings, ...newRankings]); // 추가 데이터 병합
    }

    setHasMore(hasNext);
    setPage(pageNumber);
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    setLoading(false); // 로딩 종료
  }
}

pageNumber가 0일 때 초기 데이터를 설정하고, 그 외의 경우에는 기존 데이터와 병합하는 방식으로 수정, setLoading(true)로 로딩 시작을 표시하고, 데이터 요청 후 setLoading(false)로 로딩 종료를 표시

3. loadMore 함수 수정

핵심으로 문제가 됐던 지점, 로딩 중에도 여러번 호출될 수 있어서 중복 데이터 요청이 발생할 수 있음.

React의 상태 업데이트는 비동기적으로 처리됨. setLoading(true)가 실행되어도 즉시 상태가 반영되지 않음. 상태 반영 이전에 사용자가 다시 스크롤하거나, 탭을 변경하면 fetchData 또는 loadMore가 추가 호출될 가능성이 존재, 이는 loading 상태가 아직 업데이트 되지 않아 중복 요청을 막지 못한 결과임.

원본 코드

const loadMore = async () => {
  if (hasMore) {
    const nextPage = page + 1;
    try {
      const response: ApiResponse = await getMemberRanking({
        tab: activeTab,
        pageNumber: nextPage,
        size,
      });
      const newRankings = response.ranking.ranks;
      setRankings((prevRankings) => [...prevRankings, ...newRankings]);
      setHasMore(response.ranking.hasNext);
      setPage(nextPage);
    } catch (error) {
      console.error('데이터 로드 에러:', error);
    }
  }
}

수정 후 코드

const loadMore = () => {
  if (hasMore && !loading) { // 로딩 상태를 확인하여 중복 요청 방지
    fetchData(page + 1);
  }
};

react, next.js를 사용하다보면 관리해야할 상태가 많아지고 동작 순서가 헷갈리는 경우가 종종 생긴다. 어떤 코드가 다른 코드에 영향을 주고 또 그로 인해 사이드 이펙트가 생긴다. 특히 비동기 상태 업데이트가 이루어지는 React의 메커니즘은 그 자체로 주의가 필요가 한 것 같다.

5. 이외의 무한스크롤 구현하는 방법

다른 프로젝트를 진행하면서 똑같은 기능을 다른 방식으로 구현한 팀원이 있어서 이 방법도 살짝 정리하고 넘어가야겠다.

react-intersection-observer 라이브러리 활용한 무한스크롤

import React, { useState } from "react";
import { useInView } from "react-intersection-observer";

const InfiniteScrollWithLibrary = () => {
  const [items, setItems] = useState<number[]>([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const { ref, inView } = useInView({
    threshold: 1.0, // 100% 보일 때 트리거
    rootMargin: "100px", // 트리거를 앞당김
  });

  // 데이터를 가져오는 함수
  const fetchData = async () => {
    if (loading) return;
    setLoading(true);
    const newItems = Array.from({ length: 10 }, (_, i) => i + 1 + (page - 1) * 10);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setItems((prev) => [...prev, ...newItems]);
    setPage((prev) => prev + 1);
    setLoading(false);
  };

  // inView가 true일 때 데이터 로드
  React.useEffect(() => {
    if (inView) fetchData();
  }, [inView]);

  return (
    <div>
      {items.map((item, index) => (
        <div key={index} style={{ padding: "20px", border: "1px solid black" }}>
          Item {item}
        </div>
      ))}
      <div ref={ref} style={{ height: "50px", backgroundColor: "lightgray" }}>
        {loading ? "Loading..." : "Load More"}
      </div>
    </div>
  );
};

export default InfiniteScrollWithLibrary;

react-intersection-observer vs react-infinite-scroller

기능	react-intersection-observer	react-infinite-scroller
사용 방식	useInView 훅 또는 InView 컴포넌트를 사용해 특정 DOM 요소가 뷰포트에 진입했는지 감지	기존 스크롤 이벤트를 감지하여 데이터 로드 (스크롤 위치에 의존)
기반 기술	브라우저의 Intersection Observer API를 사용	스크롤 이벤트(onScroll)에 의존
성능 최적화	요소가 화면에 진입했을 때만 트리거, 성능에 매우 효율적	스크롤 이벤트가 과도하게 발생하면 성능 저하 가능
사용 용도	특정 요소가 화면에 보일 때(진입/퇴장 감지)	무한스크롤 구현에 초점
데이터 로드 방식	관찰 대상이 화면에 보이면 새로운 데이터를 로드	스크롤 위치가 하단에 가까워지면 새로운 데이터를 로드
의존성	브라우저 기본 API 기반으로 가벼움	추가적인 로직 및 상태 관리를 포함, 상대적으로 무겁게 느껴질 수 있음
구현 난이도	단순하고 간결 (라이브러리와 훅으로 구현 가능)	초기 설정이 간단하지만, 세부적인 커스터마이징이 필요한 경우 복잡할 수 있음
특징	뷰포트 진입 감지 외에도 다양한 threshold, rootMargin 등을 설정 가능	데이터 로드 외에 커스터마이징된 스크롤 이벤트 처리 기능 제공
장점	최신 API 기반으로 성능 우수, 요소별로 세밀한 관찰 가능	사용이 간단하고, 기존 스크롤 이벤트와 호환성이 뛰어남
단점	최신 브라우저에서만 완벽 지원, 오래된 브라우저(IE 등)에서는 폴리필 필요	스크롤 이벤트 과다 호출로 성능 저하 가능, 직접적인 Intersection Observer 기능 지원 부족
설치 및 크기	npm install react-intersection-observer (경량 라이브러리, 약 2KB)	npm install react-infinite-scroller (약간 무거움, 약 8KB)
유지보수 상태	활발하게 유지보수 중	유지보수는 되고 있지만 상대적으로 업데이트 빈도가 적음
예제	요소가 화면에 보일 때 추가 데이터 로드 (e.g., 이미지 Lazy Load, 무한스크롤)	페이지 하단 근처에서 데이터 로드 (무한스크롤에 초점)

react-intersection-observer 를 알았다면 이 라이브러리를 사용했을 것 같지만 직접 사용해봐야 좋은 라이브러리의 장점을 직접 체감할 수 있는 것이니,, 특히 내가 맡은 랭킹 페이지 ui에서는 탭간 전환이 많아서 뷰포트에 들어오거나 나가는 순간을 정확히 감지 할 수 있는 react-intersection-observer가 훨씬 적합했을 것 같다. 이외에도 더 다양한 동작을 처리할 수 있다고 하니,, 이미 프로젝트는 끝났지만 다른 팀원 덕분에 좋은 라이브러리를 알게된 게 럭키비키다~~~

참고자료

React - React Testing Library,Jest 이용해서 테스트하기

2-doooo-2 — Sun, 13 Oct 2024 00:17:44 +0900

✅React Testing Libraries란??

React Testing Library는 React 애플리케이션의 컴포넌트를 테스트하기 위한 라이브러리이다. 주로 사용자 관점에서의 컴포넌트 동작을 테스트하도록 설계되어 있으며, 컴포넌트가 실제로 어떻게 동작하는지를 검증하는 데 중점을 둔다.

※ 프론트엔드 테스트 종류

항목	React Testing Library	Vitest	Cypress
목적	단위 테스트, 통합 테스트	단위 테스트, 통합 테스트	엔드 투 엔드(E2E) 테스트, 통합 테스트
실행 환경	노드 환경에서 가상의 DOM 사용	노드 환경에서 Vite와 통합해 빠르게 실행	실제 브라우저 환경에서 테스트
사용 용도	컴포넌트의 단위 테스트	컴포넌트/함수의 단위 및 통합 테스트	전체 애플리케이션 흐름, UI 상호작용 테스트
비동기 작업	간단한 비동기 로직 테스트 가능	비동기 로직 테스트 가능	네트워크 요청, 브라우저 렌더링 테스트 가능
속도	매우 빠름	매우 빠름 (특히 Vite와 통합 시)	상대적으로 느릴 수 있음
시각적 피드백	콘솔 출력	콘솔 출력	스크린샷 및 비디오 캡처 가능

사용자 관점에서의 컴포넌트 동작을 테스트하도록 설계되어있다는게 무슨 말일까?? Vitest 단위 테스트와 비교해서 알아보자!

React Testing Library를 사용할 때:

test('버튼 클릭 시 텍스트 변경', () => {
  render(<MyComponent />);
  const button = screen.getByRole('button', { name: /클릭/i });
  fireEvent.click(button);
  expect(screen.getByText(/변경된 텍스트/i)).toBeInTheDocument();
});

Vitest로 단위 테스트를 작성할 때:

test('함수 호출 테스트', () => {
  const mockFunction = vi.fn();
  myFunction(mockFunction);
  expect(mockFunction).toHaveBeenCalled();
});

React Testing Library는 UI의 동작과 사용자 상호작용을 중심으로 작성된 반면, Vitest의 예시는 함수 호출 여부를 검증하는 단위 테스트이다.

React Testing Library: 사용자 중심의 UI 테스트로, 실제 사용자처럼 컴포넌트와 상호작용하며 결과를 검증한다.

Vitest: 테스트 러너로, 내부 구현 세부 사항을 검증하는 단위 테스트를 작성할 수 있지만, UI 상호작용 중심의 테스트를 원한다면 React Testing Library와 함께 사용하는 것이 좋다.

그럼 다시 React Testing Library로 돌아와서 Jest 와 React Testing Library의 역할을 살펴보면서 이해해보자!

✅Jest란 무엇일까?

React Testing Library는 DOM 상호작용을 중심으로 컴포넌트를 테스트하는 도구이지만, 테스트 환경을 구성하고 실행하는 역할은 수행하지 않는다. Jest는 React Testing Library와 함께 사용되는 테스트 러너로, 테스트를 실행하고 결과를 평가하는 중요한 역할을 한다.

※ 테스트 러너란?

✔️테스트 코드를 실행하고 결과를 보고하는 역할을 한다.

✔️테스트 코드의 실행 환경을 설정하고, 각 테스트 케이스를 실행하여 그 결과를 표시한다.

✔️테스트 러너는 테스트 스위트를 관리하고, 테스트 결과를 출력하며, 테스트 환경의 초기화와 정리를 담당한다.

✔️대표적인 테스트 러너로는 Jest, Mocha, Jasmine, Karma 등이 있다.

Jest란?

✔️ 자바스크립트 테스트 프레임워크이다.

✔️ 사용자는 Jest 를 이용하여 테스트 코드를 작성한다.

✔️ 하지만 Node.js 환경에서 실행되기 때문에 DOM이 없다.

✔️ DOM없이는 React 컴포넌트 테스트가 불가능하다. 그래서 React Testing Library에서 제공하는 가상의 DOM을 이용한다.

Jest에서 제공하는 함수

describe() : 테스트 그룹을 정의할 때 사용
test() : 개별 테스트 케이스를 정의
beforeEach() : 각 테스트가 실행되기 전에 실행
afterEach() : 각 테스트가 실행된 후에 실행
beforeAll() : 모든 테스트가 실행되기 전에 한 번 실행
afterAll() : 모든 테스트가 실행된 후에 한 번 실행
expect() : 테스트에서 값이나 상태를 검증할 때 사용
주요 Matcher들
- toBe() : 엄격한 일치 여부를 확인, ===와 유사한 비교
- toBeInTheDocument() : 해당 요소가 문서에 존재하는지 확인

Mock관련 함수
- jest.fn() : Jest에서 함수의 동작을 모킹하기 위해 사용되는 함수

https://jestjs.io/docs/expect

✅간단한 실습

1. testing-library와 jest 설치하기

npm install @testing-library/react @testing-library/jest-dom

설치하고 나면 pacage.json에 관련 코드가 생성된 걸 볼 수있다.

"scripts": { 
    "test":"jest"
},
"devDependencies": {
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
}

2-1. 필요한 모듈 .babelrc 파일에 설정하기

{
  "presets": [
    [
      "@babel/preset-env", //최신 JavaScript 문법(ES6 이상)을 구버전 JavaScript로 변환
      {
        "modules": false, // Babel이 ES6 모듈 문법(import/export)을 CommonJS로 변환하지 않게
        "targets": {
          "node": "16"
        }
      }
    ],
    "@babel/preset-react" // React JSX 문법을 JavaScript로 변환해 주는 preset
  ],
  "env": {
    "test": {
      "plugins": [
        "@babel/plugin-transform-modules-commonjs", // 테스트 환경에서는 CommonJS로 변환이 필요하기 때문에
        "@babel/plugin-transform-runtime" 
        // Babel이 코드 내에서 반복적으로 사용하는 헬퍼 함수(예: async/await, spread 문법 등)를 전역 공간에 중복 없이 공유
        // 비동기 코드나 async/await 문법이 포함된 코드를 테스트할 때 중요하며, 최신 문법을 지원하지 않는 환경에서 동작하도록 폴리필을 추가
      ]
    }
  }

2-2. Jest가 브라우저 환경을 모방할 수 있도록 jest.config.cjs 파일 설정하기

module.exports = {
  testEnvironment: "jsdom",
};

나와 같은 경우 그냥 .js파일로 돌리면

이런 에러가 발생해서 cjs로 변경해주었다.

cjs vs js 차이점

.cjs: CommonJS 모듈 시스템을 사용하는 파일 확장자. CommonJS는 require()와 module.exports 문법을 사용하며, Node.js에서 오랫동안 사용되어온 모듈 시스템.
.js: 기본적으로 ES Modules (ESM) 형식을 사용하는 파일 확장자. ESM은 import/export 문법을 사용.

왜 cjs 확장자를 사용해야 오류가 안 나는가?

Node.js는 ES Modules (ESM)과 CommonJS (CJS)를 모두 지원하지만, Jest는 기본적으로 CommonJS를 사용한다. jest.config.js 파일에서 module.exports를 사용하면 CommonJS 문법을 사용하고 있다는 의미인데, Node.js는 .js 파일을 ESM으로 처리하려고 시도할 수 있다.

3. 테스트 적용시킬 CreateSchedule 컴포넌트 준비

import React, { useState } from "react";

const CreateSchedule = ({ addResult }) => {
  const [company_name, setCompanyName] = useState("");
  const [deadline, setDeadline] = useState("");
  const [result_date, setResultDate] = useState("");
  const [result, setResult] = useState(3);

  const handleSubmit = (e) => {
    e.preventDefault();
    const newResult = {
      company_name,
      deadline,
      result_date,
      result,
    };
    addResult(newResult);
    clearForm();
  };

  const clearForm = () => {
    setCompanyName("");
    setDeadline("");
    setResultDate("");
    setResult(3);
  };

  const handleResultChange = (e) => {
    const value = e.target.value;
    if (value === "합격") {
      setResult(1);
    } else if (value === "불합격") {
      setResult(2);
    } else {
      setResult(3);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>스케줄 추가</h2>
      <div className="form_wrap">
        <div>
          <label htmlFor="company_name">회사명</label>
          <input
            id="company_name"
            type="text"
            placeholder="회사명"
            value={company_name}
            onChange={(e) => setCompanyName(e.target.value)}
            required
            data-testid="company-name-input"
          />
        </div>
        <div>
          <label htmlFor="deadline">서류지원 마감</label>
          <input
            id="deadline"
            type="datetime-local"
            value={deadline}
            onChange={(e) => setDeadline(e.target.value)}
            required
            data-testid="deadline-input" 
          />
        </div>
        <div>
          <label htmlFor="result_date">결과 발표</label>
          <input
            id="result_date"
            type="datetime-local"
            value={result_date}
            onChange={(e) => setResultDate(e.target.value)}
            required
            data-testid="result-date-input" 
          />
        </div>
        <div>
          <label htmlFor="result">결과</label>
          <select
            id="result"
            value={result === 1 ? "합격" : result === 2 ? "불합격" : "진행 중"}
            onChange={handleResultChange}
            data-testid="result-select" 
          >
            <option value="진행 중">진행 중</option>
            <option value="합격">합격</option>
            <option value="불합격">불합격</option>
          </select>
        </div>
        <div className="button_wrap">
          <button type="submit" data-testid="submit-button">
            추가
          </button>
        </div>
      </div>
    </form>
  );
};

export default CreateSchedule;

data-testid: 테스트 중에 요소를 식별하기 위한 고유한 식별자로 사용. React Testing Library에서 screen.getByTestId()와 같은 함수를 통해 이 요소를 쉽게 찾아서 테스트할 수 있다.

4. CreateSchedule.test.js작성

import React from "react";
import "@testing-library/jest-dom";
import { render, screen, fireEvent } from "@testing-library/react";
import CreateSchedule from "./CreateSchedule";

describe("CreateSchedule 컴포넌트 테스트", () => {
  test("폼이 올바르게 렌더링된다", () => {
    render(<CreateSchedule addResult={jest.fn()} />);

    expect(screen.getByTestId("company-name-input")).toBeInTheDocument();
    expect(screen.getByTestId("deadline-input")).toBeInTheDocument();
    expect(screen.getByTestId("result-date-input")).toBeInTheDocument();
    expect(screen.getByTestId("result-select")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: /추가/i })).toBeInTheDocument();
  });

  test("입력 필드에 값을 입력하고 제출하면 addResult가 호출된다", () => {
    const addResultMock = jest.fn();
    render(<CreateSchedule addResult={addResultMock} />);

    // 입력값 설정
    fireEvent.change(screen.getByTestId("company-name-input"), {
      target: { value: "회사 A" },
    });
    fireEvent.change(screen.getByTestId("deadline-input"), {
      target: { value: "2024-10-12T12:00" },
    });
    fireEvent.change(screen.getByTestId("result-date-input"), {
      target: { value: "2024-10-15T12:00" },
    });
    fireEvent.change(screen.getByTestId("result-select"), {
      target: { value: "합격" },
    });

    // 제출 버튼 클릭
    fireEvent.click(screen.getByRole("button", { name: /추가/i }));

    // addResult가 호출되었는지 확인
    expect(addResultMock).toHaveBeenCalledWith({
      company_name: "회사 A",
      deadline: "2024-10-12T12:00",
      result_date: "2024-10-15T12:00",
      result: 1, // "합격" 선택 시 result는 1
    });
  });

  test("폼 제출 후 입력값이 초기화된다", () => {
    const addResultMock = jest.fn();
    render(<CreateSchedule addResult={addResultMock} />);

    // 입력값 설정
    fireEvent.change(screen.getByTestId("company-name-input"), {
      target: { value: "회사 A" },
    });
    fireEvent.change(screen.getByTestId("deadline-input"), {
      target: { value: "2024-10-12T12:00" },
    });
    fireEvent.change(screen.getByTestId("result-date-input"), {
      target: { value: "2024-10-15T12:00" },
    });
    fireEvent.change(screen.getByTestId("result-select"), {
      target: { value: "합격" },
    });

    // 제출 버튼 클릭
    fireEvent.click(screen.getByRole("button", { name: /추가/i }));

    // 입력 필드가 초기화되었는지 확인
    expect(screen.getByTestId("company-name-input").value).toBe("");
    expect(screen.getByTestId("deadline-input").value).toBe("");
    expect(screen.getByTestId("result-date-input").value).toBe("");
    expect(screen.getByTestId("result-select").value).toBe("진행 중");
  });
});

1. 설정 및 준비

@testing-library/jest-dom: 추가적인 Jest 매처를 사용하기 위해 임포트. 이를 통해 toBeInTheDocument()와 같은 메소드를 사용
render, screen, fireEvent: React Testing Library의 유틸리티 함수들을 임포트
- render: 컴포넌트를 실제 DOM에 렌더링
- screen: 렌더링된 컴포넌트에서 요소를 찾기 위한 API를 제공
- fireEvent: 사용자 이벤트를 시뮬레이션하는 데 사용

2. 테스트 스위트 설명

describe("CreateSchedule 컴포넌트 테스트", () => {...}): 이 블록 안에는 CreateSchedule 컴포넌트에 대한 여러 테스트가 포함되어 있다.

3. 테스트 케이스 분석

테스트 1: "폼이 올바르게 렌더링된다"

목적: CreateSchedule 컴포넌트가 올바르게 렌더링되는지 확인
흐름:
- render 함수를 사용하여 컴포넌트를 렌더링
- getByTestId 및 getByRole를 사용하여 입력 필드와 버튼이 DOM에 존재하는지 확인
- 모든 요소가 존재해야 하므로 각각의 expect 문이 true이면 테스트가 통과

테스트 2: "입력 필드에 값을 입력하고 제출하면 addResult가 호출된다"

목적: 폼에 값을 입력하고 제출할 때 addResult가 올바른 인자로 호출되는지 확인
흐름:
- jest.fn()을 사용하여 addResult의 모킹 함수를 생성
- 각 입력 필드에 fireEvent.change로 값을 설정
- 제출 버튼을 클릭하여 폼을 제출
- expect 문으로 addResultMock이 호출되었는지 확인하고, 올바른 인자가 전달되었는지 검사

테스트 3: "폼 제출 후 입력값이 초기화된다"

목적: 폼 제출 후 입력 필드가 초기화되는지 확인
흐름:
- 이전 테스트와 마찬가지로 입력값을 설정한 후, 제출 버튼을 클릭
- 입력 필드의 값을 검사하여 각 필드가 초기화되었는지 확인. 이때, company-name-input은 비어 있어야 하고, result-select는 기본값인 "진행 중"이 되어야 한다.

5. 테스트 실행

npm test

실행하고 나서

이러 타입에러를 마주했다. 그 이유는 Jest 매처가 확장시켜주는 라이브러리를 추가해줘야 한다. 즉, Jest에 기본적으로 포함되지 않고, 추가적인 라이브러리에서 제공되는 함수이다.

그래서CreateSchedule.test.js에 해당 라이브러리 import 해주고

import "@testing-library/jest-dom";

jest.config.cjs파일에

setupFilesAfterEnv: ["<rootDir>/jest.config.cjs"]

이 코드를 추가해줬다. setupFilesAfterEnv속성이 Jest가 각 테스트 파일을 실행하기 전에 필요한 초기 설정을 수행할 수 있게 해준다고 한다.

그리고 나면 테스트가 성공하게 된 걸 볼 수 있다!!!

참고자료

Spring - LocalDateTime으로 원하는 데이터 주고 받기

2-doooo-2 — Sat, 12 Oct 2024 13:16:58 +0900

✅문제 상황

서버에서 날짜와 시간 데이터를 받아와야하는데 타입이 LocalDateTime이었다.

프론트에서는 input에 <input type="date"> 으로 날짜만 보내고 있었던 상황

그래서 다음과 같은 에러가 떴다.

Resolved [org.springframework.http.converter.HttpMessageNotReadableException: 
JSON parse error: Cannot deserialize value of type `java.time.LocalDateTime` 
from String "2024-09-22 00:00": Failed to deserialize java.time.LocalDateTime: 
(java.time.format.DateTimeParseException) 
Text '2024-09-22 00:00' could not be parsed at index 10]

JSON 파싱 오류: 문자열 "2024-09-22 00:00"에서 `java.time.LocalDateTime` 유형의 값을 역직렬화할 수 없다고 한다!!

※역직렬화(Deserialization)란? = @RequestBody

직렬화된 데이터를 다시 객체의 형태로 만드는 것

ex)

class Person{
	private String name;
    
    public Sample(String name) {
        this.name = name;
    }
}

위와 같은 클래스가 있다고 할 때, Json 데이터 형식을 예로 들면

Person person = new Person("김철수"); 객체를 { "name" : "김철수"} 와 같은 방식으로 변경하는 것을 직렬화,

{ "name" : "김철수"} 데이터를 받아서 Person이라는 객체의 name 필드에 "김철수" 를 할당하고 객체를 생성하는 것을 역직렬화라고 할 수 있다.

✅실패한 방법

일단 프론트에서 시간까지 같이 보낼 수 있는 type으로 수정

<div>
   <label htmlFor="deadline">서류지원 마감</label>
      <input
        id="deadline"
        type="datetime-local"
        value={deadline}
        onChange={(e) => setDeadline(e.target.value)}
        required
       />
  </div>

※날짜를 지정할 수 있는 HTML의 input 요소에서 사용 가능한 type 속성

date: 날짜를 선택할 수 있는 입력 필드 (년, 월, 일)

<input type="date">

datetime-local: 날짜와 시간을 선택할 수 있는 입력 필드 (년, 월, 일, 시간, 분)

<input type="datetime-local">

month: 연도와 월만 선택할 수 있는 입력 필드

<input type="month">

week: 연도와 주를 선택할 수 있는 입력 필드

<input type="week">

time: 시간만 선택할 수 있는 입력 필드 (시간, 분)

<input type="time">

스프링 RequestDto에서는

@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm")
LocalDateTime deadline,

@DateTimeFormat 어노테이션을 추가해주었다.

이렇게 하면 클라이언트에서 "yyyy-MM-dd HH:mm" 형식의 문자열로 날짜와 시간을 입력받아 LocalDateTime 필드로 변환해 처리할 수 있다.

하지만!! 똑같은 에러가 발생했다.

✅성공한 방법

react에서 날짜 보내는 데이터 포맷팅해서 보내기

   const formatDate = (date) => {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      const hours = String(d.getHours()).padStart(2, '0');
      const minutes = String(d.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    };

    const formattedDeadline = formatDate(updatedResult.deadline);
    const formattedResultDate = formatDate(updatedResult.result_date);

이 값을 body에 담아서 보내주는 것이다.

body: JSON.stringify({
   company_name: updatedResult.company_name,
   deadline: formattedDeadline,
   result_date: formattedResultDate,
   result: updatedResult.result, 
}),

이렇게 포맷팅을 해서 보내야하는 이유는

HTML5의 datetime-local 입력 형식과 서버의 LocalDateTime 차이 때문이다.

사용자가 입력한 값은 "yyyy-MM-ddTHH:mm" 형식, 서버에서 LocalDateTime으로 데이터를 받기 위해서는 yyyy-MM-dd HH:mm으로 변환해주는 작업이 필요!!

스프링에서 @DateTimeFormat 대신 @JsonFormat 사용하기

@JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm", timezone = "Asia/Seoul")
LocalDateTime deadline,

@DateTimeFormat 대신 @JsonFormat을 사용했더니 에러가 해결됐다

왜 @DateTimeFormat 대신 @JsonFormat 했더니 에러가 해결된걸까?

✅ @DateTimeFormat vs @JsonFormat

@DateTimeFormat

package org.springframework.format.annotation;

...

public @interface DateTimeFormat {
     ...
 }

패키지에서 볼 수 있듯이 @DateTimeFormat은 Spring의 어노테이션이다.

@JsonFormat

package com.fasterxml.jackson.annotation;

...

public @interface JsonFormat {
	...
 }

패키지를 보면 @JsonFormat은 @RequestBody, @ResponseBody를 사용한 직렬화/역직렬화를 담당하는

Jackson 라이브러리의 어노테이션이다.

Jackson 라이브러리에서는 내부적으로 pattern으로 지정한 형식을 LocalDateTime으로 변환해준다.

따라서, Jackson 라이브러리의 @JsonFormat은 날짜 형식이라면 자유롭게 사용이 가능하다.

하지만, @RequestBody, @ResponseBody를 사용한 역직렬화/직렬화 시

@DateTimeFormat을 사용하려면 Jackson 라이브러리에 있는 어노테이션이 아니기 때문에

LocalDateTime의 기본 형식인 'yyyy-MM-dd'T'HH:mm:ss'으로 요청이 들어와야 바인딩된다.

(이때, @DateTimeFormat을 사용하지 않아도 바인딩이 된다)

결론적으로 @RequestBody, @ResponseBody를 사용한 역직렬화/직렬화 시

날짜 형식을 자유롭게 사용하기 위해서는

@DateTimeFormat이 아닌, @JsonFormat을 사용해야한다.

(물론, Request Body 날짜 형식이 LocalDateTime의 기본 형식인 'yyyy-MM-dd'T'HH:mm:ss'이라면

@DateTimeFormat, @JsonFormat 둘다 사용하지 않아도 그대로 바인딩이 가능하다.)

✅하지만!!! 진짜 성공한 방법

LocalDateTime의 기본 형식인 'yyyy-MM-dd'T'HH:mm:ss'이 아닐때를 전제

1. @RequestBody, @ResponseBody : @JsonFormat 사용
2. @RequestParam, @ModelAttribute : @DateTimeFormat 사용

블로그에서 이 글을 보고 오잉?? 싶었다. 내가 보내는 데이터는 <input type="datetime-local"> 이 형식을 사용했다면 기본형식이 'yyyy-MM-dd'T'HH:mm:ss' 이게 맞을 텐데,,, 왠걸!! 포맷팅도 안해주고 어노테이션을 붙이지 않아도 제대로 보내진다.. 이게 무슨일이지??? 고치는 과정에서 어노테이션을 추가하고 테스트를 해봐서 그런가? 흑흑

꼭 저 전제를 잊으면 안될 것 같다!! <input type="datetime-local"> 을 사용했다면 @JsonFormat , @DateTimeFormat 이 어노테이션을 붙이지 않아도 LocalDateTime 타입에 맞춰서 보내진다!

최종 코드

<input type="datetime-local"/>

이렇게만 바꿔주고

LocalDateTime deadline

어노테이션 붙이지 않아도 잘 보내진다!

참고자료

Next.js - Auth.js( NextAuth.js) 를 이용한 Keycloak과의 인증 처리 과정

2-doooo-2 — Tue, 24 Sep 2024 23:35:25 +0900

✅next-auth 란 무엇인가?

Auth.js(NextAuth.js)는 Next.js 프로젝트의 사용자 인증 및 세션 관리를 위한 라이브러리이다. Google, GitHub 등의 다양한 인증 공급자를 지원하며, (그중에서도 내가 구현한거는 Keycloak과의 인증이다 )Next.js의 서버와 클라이언트 측 모두에서 인증 및 세션 관리를 손쉽게 처리할 수 있다.

✅NextAuth.js를 이용한 Keycloak과의 인증 처리 과정

단계	파일명	동작
로그인 버튼 렌더링	AuthStatus.js	사용자가 로그인 상태인지 확인하고, 로그인 버튼을 클릭하면 signIn 함수를 호출하여 Keycloak으로 로그인 요청 전송.
Keycloak 로그인 처리	auth.js	Keycloak 제공자와의 통신을 설정하고, JWT 토큰을 사용한 인증 및 세션 관리를 처리.
세션 및 토큰 관리	auth.js	JWT 콜백에서 액세스 토큰과 리프레시 토큰을 처리하고, 세션에 필요한 정보를 저장하여 클라이언트와 서버에서 사용.
로그아웃 버튼 렌더링	AuthStatus.js	로그아웃 버튼 클릭 시 keycloakSessionLogout 함수 호출, api/auth/logout로 서버에서 로그아웃 처리 요청 전송.(클라이언트 컴포넌트 -> 서버 컴포넌트로 : id_token을 클라이언트에 노출시키지 않기 위해)
Keycloak 로그아웃 처리	api/auth/logout/route.js	Keycloak 로그아웃 URL로 요청을 보내고, 세션에 저장된 id_token을 사용하여 로그아웃을 완료.
스프링 서버로 API 요청	RootLayout.js	로그인 상태일 때 스프링 서버로 access_token을 포함한 요청을 전송하여 데이터를 가져옴.

✅auth.js(루트) - NextAuth.js와 Keycloak Provider 설정

import NextAuth from "next-auth" 
import Keycloak from "next-auth/providers/keycloak"


// 액세스 토큰이 만료되었을 경우 새로운 액세스 토큰을 발급받기 위해 리프레시 토큰 활용
async function refreshAccessToken(token) {
    const response = 
        await fetch(`${process.env.REFRESH_TOKEN_URL}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                client_id: process.env.AUTH_KEYCLOAK_ID,
                client_secret: process.env.AUTH_KEYCLOAK_SECRET,
                grant_type: 'refresh_token',
                refresh_token: token.refresh_token,
            })
        });

    const data = await response.json();
    return {
        ...token,
        access_token: data.access_token,
        id_token: data.id_token,
        expires_at: Math.floor(Date.now() / 1000) + data.expires_in,
        refresh_token: data.refresh_token,
    }
}


const config = {
    providers: [
        Keycloak({
            clientId: `${process.env.AUTH_KEYCLOAK_ID}`,
            clientSecret: `${process.env.AUTH_KEYCLOAK_SECRET}`,
            issuer: `${process.env.AUTH_KEYCLOAK_ISSUER}`
        })
    ],
    // TODO: 인증과 관련된 다른 처리 로직
    callbacks: { // 인증 처리 과정에서 자동으로 호출되는 콜백들의 목록
        session: {
            strategy: 'jwt', // 세션 관리 방식을 jwt 전략으로 활용
            maxAge: 60 * 60 * 24 // 세션 만료시간(초)
        },

        async jwt({ token, account }) {                        
            const currentTime = Math.floor(Date.now() / 1000);

            if (account) {
                // token 객체에 개별 프로퍼티들로 할당
                token.access_token = account.access_token;
                token.id_token = account.id_token;
                token.expires_at = account.expires_at;
                token.refresh_token = account.refresh_token;
                return token;
            } else if (currentTime < token.expires_at) {
                console.log('토큰이 아직 만료되지 않음');
                return token; // 만료되지 않았기 때문에 기존 토큰 반환
            } else { // 토큰이 만료되었을 경우,
                // keycloak의 토큰 엔드포인트(REFRESH_TOKEN_URL)로 요청 전송
                console.log('액세스토큰이 만료됨');
                
                try {
                    const refreshedToken = await refreshAccessToken(token);
                    console.log('토큰이 갱신되었음');
                    return refreshedToken;
                } catch (error) {
                    console.error('토큰 리프레싱 에러', error);
                    return { ...token, error: 'RefreshToken Error' }
                }
            }

            return token;                
        },

        // jwt 콜백이 반환하는 token을 전달받고, 
        // session을 확인하는 코드(ex. auth())가 호출될 때마다 session 콜백이 호출됨
        async session({ session, token }) {
            // keycloak 로그아웃 엔드포인트에 활용할 id_token을 세션에 저장
            session.id_token = token.id_token;
            // in Java Servlet - session.setAttribute("id_token", id_token);

            // Spring 리소스 서버에 전송할 때 필요한 access_token을 세션에 저장
            session.access_token = token.access_token;

            return session;
        }
    }
}
 
export const { handlers, signIn, signOut, auth } = NextAuth(config)
/*
    next-auth에서 제공하는 내장 함수
        handlers - 인증과 관련된 API 라우트
        signIn: 사용자 로그인 함수
        signOut: 로그아웃 함수
        auth : Next.js 서버가 가진 세션 정보를 반환하는 함수
    
*/

auth.js에서 NextAuth의 Keycloak provider를 설정
Keycloak() 함수에 clientId, clientSecret, issuer 등의 값을 지정하여 Keycloak과의 인증을 처리
jwt() 콜백에서 토큰을 갱신하는 로직과 만료된 토큰을 새로 발급받는 과정이 포함되어 있다. 만료된 액세스 토큰은 refresh_token을 이용하여 갱신된다.

호출옵션

providers: Credentials, Google, GitHub 등의 인증 공급자를 지정

session: 세션 관리 방식을 지정

pages: 사용자 정의 페이지 경로를 지정하며, 로그인 페이지의 기본값은 /auth/signin

callbacks: 인증 및 세션 관리 중 호출되는 각 핸들러를 지정

callbacks.signIn: 사용자 로그인을 시도했을 때 호출되며, true를 반환하면 로그인 성공, false를 반환하면 로그인 실패로 처리

callbacks.redirect: 페이지 이동 시 호출되며, 반환하는 값은 리다이렉션될 URL

callbacks.jwt: JWT가 생성되거나 업데이트될 때 호출되며, 반환하는 값은 암호화되어 쿠키에 저장

callbacks.session: jwt 콜백이 반환하는 token을 받아, 세션이 확인될 때마다 호출되며, 반환하는 값은 클라이언트에서 확인할 수 있다. (2번 이상 호출될 수 있음)

✅components/AuthStatus.js - useSession() 훅을 사용하여 사용자의 세션 상태를 확인

'use client' 
import React from 'react'
import { signIn, signOut, useSession } from 'next-auth/react';

// keycloak의 세션을 날리는 요청
async function keycloakSessionLogout() {
    try {
        // api/auth/logout/route.js의 GET() 호출
        await fetch('/api/auth/logout', { method: 'GET' });
    } catch (error) {
        console.error(error);
    }
}

const AuthStatus = () => {
    // useSession() - 클라이언트 컴포넌트(use client)에서 세션 값을 가져오기 위한 훅
    const { data: session, status } = useSession();

    if (status === 'loading' && !session) {
        return <div>Loading..</div>
    } else if (session) { // 로그인 되었을 경우
        return (
            <div>
                <div>
                    {`${session.user.email} 하이~`}
                </div>
                <button className='className="mt-2 px-2 py-1 font-bold text-white border rounded border-gray-50"'
                onClick={() => keycloakSessionLogout().then(() => signOut({ callbackUrl: '/' }))}>
                    로그아웃
                </button>
            </div>
        )
    }
    
    return (
        <div>
      <button
        className="mt-2 px-2 py-1 font-bold text-white border rounded border-gray-50"
        onClick={() => signIn("keycloak")}>
        로그인
      </button>
    </div>
    )
}

export default AuthStatus

클라이언트 컴포넌트에서는 useSession훅을 사용해 세션값을 가져오고 서버컴포넌트에서는 auth()함수를 사용해 세션값을 가져온다.
signIn()과 signOut()을 사용하여 Keycloak에 대한 로그인 및 로그아웃을 처리하며, 로그아웃 시 Keycloak의 세션도 함께 제거하기 위한 keycloakSessionLogout()을 사용한다.
로그인 처리
- auth.js에서 NextAuth()를 통해 export해주는 signIn함수를 keycloak 프로바이더를 통해 호출
로그아웃 처리
- signOut() -> Next-auth에서 제공해주는 내장 함수, 클라이언트 애플리케이션용 로그아웃 처리
- Keycloak 서버 자체의 세션 정보도 지우는 처리 - 커스텀 함수, keycloakSessionLogout() - 선택
next.js는 클라이어언트 애플리케이션이면서 서버 로직도 작성 가능하다. AuthStatus라는 브라우저에서 Next.js의 서버 로직인 GET:api/auth/logout로 요청을 전송할 수 있다.
그러면 GET:api/auth/logout는 요청을 받고, 응답 객체로 반환해주는 처리를 해야한다.

✅app/api/auth/[...nextauth]/route.js

import { handlers } from "@/auth" // 방금 생성한 auth.js에서 handlers를 불러옴
export const { GET, POST } = handlers

/*
    Auth.js는 api/auth에 해당하는 경로를 통해 인증 처리를 수행
*/

✅app/api/auth/logout/route.js

// 라우트 핸들러, 서버 프로세스에서 동작

import { auth } from "@/auth";


export async function GET() {
    // keycloak 엔드포인트로 로그아웃하기 위해서는 id_token이 필요

    // id_token을 세션에서 꺼내야 함
    const session = await auth();
    if (session) {
        const idToken = session.id_token;
        
        // keycloak의 엔드포인트로 호출
        const KEYCLOAK_URL = `${process.env.END_SESSION_URL}?id_token_hint=${idToken}&post_logout_redirect_uri=${encodeURIComponent(process.env.NEXTAUTH_URL)}`; // 로그아웃 처리 후 리다이렉트할 경로
        
        // 요청 전송
        try {
            const response = await fetch(KEYCLOAK_URL, { method: 'GET' });
            console.log('resp', response);
            
        } catch (error) {
            console.error(error);
            return new Response({ status: 500 });
        }
    }
    
    return new Response({ status: 200 });
}

Keycloak의 로그아웃 엔드포인트로 요청을 전송하여 Keycloak 서버에 세션을 삭제
id_token을 클라이언트에 노출시키지 않기 위해 클라이언트 컴포넌트에서 서버컴포넌트로 넘겨받는 과정이다.

✅layout.js(루트) - 백엔드 API와의 연동

import { auth } from "@/auth";
import "./globals.css";
import AuthStatus from "@/components/AuthStatus";
import { SessionProvider } from "next-auth/react";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({ children }) {

  // 스프링 리소스 서버로 요청 전송
  const session = await auth();

  // 스프링 서버에게 요청을 전송할 때 필요한 값 - Access token
  // 세션에 저장된 액세스 토큰을 꺼내서 Authorizaiton 헤더에 담아서 요청을 전송해서 담아야함 
  const response = await fetch(`${process.env.BACKEND_URL}/api/data`, {
    method:"GET",
    headers:{
      "Authorization":'Bearer '+ session?.access_token,
      "Content-type":"application/json",
    }
  });

  return (
    <html lang="en">
      <body>
          <div className="w-4/5 h-screen p-3 bg-white">{children}</div>
            <h2 className="text-3xl">Next Client App</h2>
              {/* 로그인 상태를 확인하는 용도의 컴포넌트 */}
              <SessionProvider>
             	 <AuthStatus/>
              </SessionProvider>         
      </body>
    </html>
  );
}

auth()를 통해 auth.js에서 설정된 callback 함수 안에 있는 session 정보 를 얻고, 토큰을 활용해 API 요청을 처리

참고사이트

※자바17로 되어 있어야 keycloak사용가능

Next.js - next.js에서 session 활용하기

2-doooo-2 — Mon, 23 Sep 2024 00:03:55 +0900

session 이란 무엇인가?

클라이언트와 서버 간의 연결 상태를 의미, 즉 클라이언트가 브라우저에 접속하여 서버와 접속이 종료하기 전의 상태를 의미한다.

session 동작 순서

출처: https://dongsik93.github.io/til/2020/01/08/til-authorization(1)/

사용자가 로그인을 한다
서버측에서는 로그인 정보를 통해 사용자를 확인한다.
서버측에서 세션 저장소에 사용자 세션 생성을 요청한다.
사용자의 고유한 ID값을 부여하여 세션 저장소에 저장하고, 이와 연결되는 세션 ID를 발행한다.
사용자는 서버에서 해당 세션ID를 받아 쿠키에 저장한다
인증이 필요한 요청을 할 때 헤더에 쿠키를 실어 요청한다
서버에서는 쿠키를 받아 세션 저장소에 대조를 한다
인증 후 요청된 정보를 가져온다
인증이 완료되고 서버는 사용자에게 맞는 데이터를 보내준다

session 과 cookie

저장위치	클라이언트	서버
라이프사이클(만료시점)	쿠키 저장시 설정	브라우저 종료 시 삭제
보안	비교적 취약	안전
속도	빠름	비교적 느림

Next.js에서 session과 cookie이용하기

server 컴포넌트와 client 컴포넌트 관점에서 프로젝트에서 사용한 로직을 정리해보았다.

서버 컴포넌트 - instance.ts, authApi.ts

'use server';

import { cookies } from 'next/headers'; // 서버 사이드에서 쿠키를 처리하기 위한 내장 모듈
import { BASE_URL } from '@/constants/url';
import { auth } from '@/auth';
import { redirect } from 'next/dist/server/api-utils';

interface RequestOptions {
  headers?: Record<string, string>;
  [key: string]: string | Record<string, string> | undefined;
}

const fetchInstance = async (url: string, options: RequestOptions = {}) => {
  const session = await auth();
  const accessToken = session?.user?.accessToken;

  const headers: RequestOptions['headers'] = {
    'Content-Type': 'application/json',
    ...options.headers,
  };

  if (accessToken) {
    headers.Authorization = `Bearer ${accessToken}`;
  }

  try {
    const response = await fetch(`${BASE_URL}${url}`, {
      ...options,
      headers,
    });

   //response 로직 생략 
   
  } catch (error) {
   //에러 처리 로직 생략
  }
};

export const instance = fetchInstance;

'use server';

import { BASE_URL } from '@/constants/url';
import { instance } from './instance';

export const signIn = async ({ email, password }: { email: string; password: string }) => {
  const response = await instance('sign-in', {
    body: JSON.stringify({ email, password }),
    credentials: 'include',
    method: 'POST',
  });

  return response;
};

export const reissueToken = async (refresh_token: string) => {
  const response = await fetch(`${BASE_URL}reissue`, {
    headers: {
      Cookie: `refresh_token=${refresh_token}`,
    },
    method: 'POST',
  });

  // reponse에러 로직 생략

  const cookie = response.headers.get('Set-Cookie');
  const { accessToken } = await response.json();
  const refreshToken = cookie?.split(';')[0].split('=')[1];

  return { accessToken, refreshToken };
};

세션(Session)

서버 사이드에서는 auth() 함수를 통해 세션 정보를 가져온다.
- 여기에는 보통 사용자 액세스 토큰과 같은 인증 관련 정보가 포함되며, 이를 이용해 API 요청 시 인증을 처리한다.
- fetchInstance 함수에서는 세션 정보를 가져와서 액세스 토큰(session?.user?.accessToken)을 추출하고, 이 토큰을 Authorization 헤더에 넣어 API 요청 시 사용한다. (Bearer ${accessToken})

액세스 토큰(Access Token)

액세스 토큰은 서버에서 외부 서비스로의 API 요청을 인증하기 위해 사용된다. 이 토큰이 있어야만 권한이 필요한 작업들을 수행할 수 있다.
코드에서는 /sign-in이나 토큰 재발급(reissue) 같은 API 요청을 보낼 때, 헤더 또는 본문에 액세스 토큰을 포함시켜 요청을 인증한다. 만약 액세스 토큰이 만료되거나 없을 경우, 새로운 토큰을 발급받거나 에러 처리 로직이 실행된다.

쿠키(Cookies)

쿠키는 주로 서버 사이드에서 세션을 유지하는 데 사용된다. reissueToken 함수에서는 refresh_token이 쿠키에 저장되어, 이를 이용해 새로운 액세스 토큰을 발급받는다.
또한 서버는 Set-Cookie 헤더를 통해 새로운 토큰을 클라이언트에 저장할 수 있다. (response.headers.get('Set-Cookie'))

클라이언트 컴포넌트 - Header.tsx

'use client';

//style관련 import 생략

import useUserInfo from '@/hook/useUserInfo';
import { useUserInfoStore } from '@/store/memberStore';
import { useSession } from 'next-auth/react';
import { useEffect } from 'react';
import { getUserInfo } from '@/api/memberApi';

export default function Header() {
  const userInfo = useUserInfo();
  const { setUserInfo } = useUserInfoStore();

  const { data: session, update } = useSession();

  const accessToken = session?.user?.accessToken;
  const refreshToken = session?.user?.refreshToken;

  // update();

  useEffect(() => {
    const storedUserInfo = localStorage.getItem('userInfo');
    if (storedUserInfo && !accessToken && !refreshToken) {
      localStorage.removeItem('userInfo');
      setUserInfo(null);
    }
  }, [accessToken, refreshToken, setUserInfo]);

  // 유저정보조회
  useEffect(() => {
    (async () => {
      if (!localStorage.getItem('userInfo') && accessToken && refreshToken) {
        const result = await getUserInfo();
        const storedUserInfo = { name: result.name, course: result.course, email: result.email };
        if (result) {
          localStorage.setItem('userInfo', JSON.stringify(storedUserInfo));
          setUserInfo(result);
        }
      }
    })();
  }, [accessToken, refreshToken, setUserInfo]);

  return (
     // html 로직 생략
  );
}

세션(Session)

클라이언트 사이드에서는 next-auth의 useSession을 사용해 사용자 세션 상태를 관리한다. 로그인 시 액세스 토큰과 리프레시 토큰을 세션에 저장한 후, 이를 이용해 인증된 API 요청을 보낼 수 있다.
토큰을 가져오고(session?.user?.accessToken, session?.user?.refreshToken), 이 토큰들을 이용해 사용자 정보를 서버에서 받아와 전역 상태에 저장하거나 localStorage에 저장

액세스 토큰(Access Token)

액세스 토큰이 없으면, 기존에 저장된 사용자 정보를 지우도록 로직이 처리

쿠키(Cookies)

클라이언트 사이드에서는 쿠키를 직접적으로 다루진 않지만, credentials: 'include' 옵션을 통해 쿠키를 자동으로 요청에 포함시킬 수 있다. 이를 통해 브라우저가 자동으로 쿠키(예: 리프레시 토큰)를 서버에 전송하여 세션이 유진된다.

전반적으로 핵심은 next.js는 서버 컴포넌트에서 쿠키를 읽고 처리한 뒤 클라이언트로 필요한 데이터만 보내주는 방식이기 때문에 쿠키 값을 클라이언트에서 직접 노출시키지 않고도 사용할 수 있다!!

그리고 우리 프로젝트에서는 세션과 쿠키, 토큰을 모두 사용했다. 보통 세션, 쿠키 vs jwt(토큰) 이렇게 나눠서 로그인을 구현한다. 하지만 Next.js에서 제공하는 useSession훅을 사용해 세션 관리 기능을 활용하면서도, 클라이언트에서 토큰을 통해 API 요청을 처리하는 방식으로 혼합된 구조를 사용할 수 있다.

참고자료

SVG 활용하기

2-doooo-2 — Tue, 17 Sep 2024 23:47:00 +0900

SVG란?

SVG는 'Scalable Vector Graphics' 의 약어로
각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML 기반의 형식을 이야기한다.

✅SVG를 사용하는 이유는?

PNG나 JPG는 비트맵 기반의 이미지로 각 항목에 하나 이상의 정보 비트를 가지고 있는 표현이다.

반면 SVG는 벡터 기반으로 각 좌표에 점을 이어서 만들어지는 개념이다. 벡터 기반의 아이콘은 확대나 축소를 해도 깨지지 않는 것과 같은 원리이다.

✅프로젝트에서의 SVG 활용 사례

내가 참여한 프로젝트에서는 MobileFooter 컴포넌트에 SVG 아이콘을 활용하여 사용자 경험을 개선했다

하단 네비게이션 메뉴에서 각 아이콘을 클릭하면 fill이 채워지도록 하졌고 css의 scale을 이용해 크기를 자연스럽게 커지도록 하였다.

export default function MobileFooter() {
   const menuItems = [
    {
      href: '/',
      label: '카드',
      icon: (
        <svg
          className={styles.svg}
          width="51"
          height="38"
          viewBox="0 0 51 38"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1 19.8676C1 11.2095 1 6.88046 3.83129 4.19071C6.66261 1.50098 11.2195 1.50098 20.3333 1.50098H30C39.1137 1.50098 43.6708 1.50098 46.502 4.19071C49.3333 6.88046 49.3333 11.2095 49.3333 19.8676C49.3333 28.5257 49.3333 32.8549 46.502 35.5445C43.6708 38.2343 39.1137 38.2343 30 38.2343H20.3333C11.2195 38.2343 6.66261 38.2343 3.83129 35.5445C1 32.8549 1 28.5257 1 19.8676Z"
            stroke="#9ca3af"
            strokeWidth="3"
          />
          <path
            d="M20.3332 30.1982H10.6665"
            stroke="#9ca3af"
            strokeWidth="3"
            strokeLinecap="round"
          />
          <path
            d="M15.4998 23.3105H10.6665"
            stroke="#9ca3af"
            strokeWidth="3"
            strokeLinecap="round"
          />
          <path
            d="M1 15.2764H49.3333"
            stroke="#9ca3af"
            strokeWidth="3"
            strokeLinecap="round"
          />
          <path
            d="M30 26.7548C30 24.5902 30 23.508 30.7078 22.8355C31.4157 22.1631 32.5549 22.1631 34.8333 22.1631C37.1118 22.1631 38.251 22.1631 38.9588 22.8355C39.6667 23.508 39.6667 24.5902 39.6667 26.7548C39.6667 28.9193 39.6667 30.0015 38.9588 30.674C38.251 31.3464 37.1118 31.3464 34.8333 31.3464C32.5549 31.3464 31.4157 31.3464 30.7078 30.674C30 30.0015 30 28.9193 30 26.7548Z"
            stroke="#9ca3af"
            strokeWidth="3"
          />
        </svg>
      ),
    },
    {
      href: '/travel',
      label: '여행',
      icon: (
        <svg
          className={styles.svg}
          width="30"
          height="32"
          viewBox="0 0 30 33"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.3851 31.288L14.0056 28.2425C14.5494 27.7763 15.4506 27.7763 15.9945 28.2425L19.6149 31.288C20.4539 31.7075 21.4795 31.288 21.7902 30.3868L22.4739 28.3202C22.6448 27.8229 22.4739 27.0926 22.101 26.7197L18.5738 23.177C18.3097 22.9284 18.1077 22.4312 18.1077 22.0738V17.6454C18.1077 16.9928 18.5894 16.682 19.1953 16.9306L26.8246 20.2247C28.0211 20.7375 29 20.1004 29 18.7952V16.7908C29 15.7497 28.2231 14.5533 27.2597 14.1493L18.5738 10.4045C18.3252 10.2958 18.1077 9.96947 18.1077 9.68978V5.0283C18.1077 3.5677 17.0355 1.84295 15.7303 1.17481C15.2642 0.941731 14.7203 0.941731 14.2542 1.17481C12.949 1.84295 11.8768 3.58324 11.8768 5.04384V9.70532C11.8768 9.98501 11.6593 10.3113 11.4106 10.4201L2.74029 14.1648C1.77691 14.5533 1 15.7497 1 16.7908V18.7952C1 20.1004 1.97891 20.7375 3.17536 20.2247L10.8047 16.9306C11.3951 16.6665 11.8923 16.9928 11.8923 17.6454V22.0738C11.8923 22.4312 11.6903 22.9284 11.4417 23.177L7.91454 26.7197C7.54162 27.0926 7.3707 27.8074 7.54162 28.3202L8.2253 30.3868C8.50499 31.288 9.53052 31.7231 10.3851 31.288Z"
            stroke="#9ca3af"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      ),
    },
    {
      href: '/banking',
      label: '뱅킹',
      icon: (
        <svg
          className={styles.svg}
          width="36"
          height="36"
          viewBox="0 0 36 36"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M1.3335 21.3333C1.3335 15.048 1.3335 11.9052 3.28611 9.95262C5.23875 8 8.38143 8 14.6668 8H21.3335C27.6188 8 30.7617 8 32.7142 9.95262C34.6668 11.9052 34.6668 15.048 34.6668 21.3333C34.6668 27.6187 34.6668 30.7615 32.7142 32.714C30.7617 34.6667 27.6188 34.6667 21.3335 34.6667H14.6668C8.38143 34.6667 5.23875 34.6667 3.28611 32.714C1.3335 30.7615 1.3335 27.6187 1.3335 21.3333Z"
            stroke="#9ca3af"
            strokeWidth="2"
          />
          <path
            d="M24.6668 7.99967C24.6668 4.85697 24.6668 3.28562 23.6905 2.30932C22.7142 1.33301 21.1428 1.33301 18.0002 1.33301C14.8575 1.33301 13.2861 1.33301 12.3098 2.30932C11.3335 3.28562 11.3335 4.85697 11.3335 7.99967"
            stroke="#9ca3af"
            strokeWidth="2"
          />
          <path
            d="M18.0003 26.8882C19.8413 26.8882 21.3337 25.6445 21.3337 24.1105C21.3337 22.5763 19.8413 21.3327 18.0003 21.3327C16.1593 21.3327 14.667 20.089 14.667 18.5548C14.667 17.0208 16.1593 15.7772 18.0003 15.7772M18.0003 26.8882C16.1593 26.8882 14.667 25.6445 14.667 24.1105M18.0003 26.8882V27.9993M18.0003 15.7772V14.666M18.0003 15.7772C19.8413 15.7772 21.3337 17.0208 21.3337 18.5548"
            stroke="#9ca3af"
            strokeWidth="2"
            strokeLinecap="round"
          />
        </svg>
      ),
    },
  ];
  
  return (
    <div className={styles.mobile}>
      <footer className={styles.footer}>
        <nav className={styles.nav}>
          <ul className={styles.menuList}>
            {menuItems.map((item) => {
              const isActive =
                item.href === '/'
                  ? pathname === item.href
                  : pathname.includes(item.href!);

              return (
                <li key={item.href} className={styles.menuItem}>
                  <Link href={item.href || '/'} className={styles.menuLink}>
                    <span
                      className={`${styles.iconWrapper}  ${isActive ? styles.active : ''}`}
                    >
                      {item.icon}
                    </span>
                    <span
                      className={`${styles.label} ${isActive ? styles.active : ''}`}
                    >
                      {item.label}
                    </span>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      </footer>
    </div>
  );
}

✅SVG 임포트 방식 비교

React와 Next.js에서는 여러 방법으로 SVG를 사용할 수 있다. 각각의 장단점을 살펴보자!

1. Inline SVG

const MyIcon = () => ( 
	<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"> 
		<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" /> 
	</svg> 
);

장점:
- 직접 JSX에 작성하므로 외부 파일 의존성이 없다.
- 동적으로 속성을 조정하기 용이하다.
단점:
- 코드 가독성이 떨어질 수 있다.
- 복잡한 SVG의 경우 JSX 코드가 길어질 수 있다.

2. 파일 임포트

import MyIcon from './icon.svg'; 

const App = () => <MyIcon />;

장점:
- SVG 파일을 별도로 관리할 수 있어 코드가 간결해진다.
- SVGR을 설정하면 SVG를 React 컴포넌트처럼 사용할 수 있다.
단점:
- 빌드 도구(Webpack, Vite 등)에 추가 설정이 필요하다.

3. CSS 백그라운드 이미지

.icon { 
   background-image: url('./icon.svg');
   width: 24px; 
   height: 24px; 
 }

장점:
- 스타일 파일에서 SVG를 관리하므로 레이아웃과 스타일을 분리할 수 있다.
단점:
- SVG의 색상이나 크기를 동적으로 변경하기 어렵다.

✅React에서 SVG 스타일링

1. 속성을 활용한 동적 스타일링

React에서는 width, height, fill, stroke 같은 SVG 속성을 props로 전달하여 동적으로 조정할 수 있다.

const DynamicIcon = ({ size = 24, color = 'black' }) => ( 
 <svg width={size} height={size} fill={color} xmlns="http://www.w3.org/2000/svg"> 
 	<circle cx="12" cy="12" r="10" stroke="black" strokeWidth="2" /> 
 </svg> 
 );

2. CSS를 통한 스타일링

CSS 모듈 또는 Tailwind CSS를 사용하면 SVG에 스타일을 쉽게 적용할 수 있다.

import styles from './Icon.module.css'; 

const StyledIcon = () => ( 
    <svg className={styles.icon} xmlns="http://www.w3.org/2000/svg"> 
    	<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" /> 
    </svg> 
);

/* Icon.module.css */ 
.icon { fill: blue; transition: fill 0.3s; } 
.icon:hover { fill: red; }

✅SVG 최적화

1. SVGO를 활용한 최적화

SVG 파일을 최적화하면 불필요한 속성과 코드가 제거되어 성능이 향상된다.

도구: SVGO
최적화 방법:

npx svgo ./icon.svg --output ./icon.optimized.svg

2. 컴포넌트화

SVG를 React 컴포넌트로 변환하면 재사용성과 코드 관리가 편리해진다.

import React from 'react'; 

const Icon = ({ color = 'black' }) => ( 
    <svg fill={color} xmlns="http://www.w3.org/2000/svg"> 
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" /> 
    </svg> 
); 

export default Icon;

✅Next.js 환경에서의 SVG 사용 팁

1. 서버 사이드 렌더링 (SSR)

Next.js에서 SVG 컴포넌트를 SSR로 렌더링하려면 SVGR 설정을 추가해야 한다.
next.config.js

module.exports = { 
	webpack(config) { 
        config.module.rules.push({
            test: /\.svg$/, 
            use: ['@svgr/webpack'], 
        }); 
	return config; 
   }, 
};

2. Lazy Load와 Dynamic Import

SVG 아이콘을 동적으로 로드하면 초기 로딩 속도를 개선할 수 있다.

import dynamic from 'next/dynamic'; 

const DynamicIcon = dynamic(() => import('./MyIcon'), { ssr: false }); 

const App = () => <DynamicIcon />;

✅실제 사용 사례와 확장

애니메이션 추가 - SVG에 간단한 애니메이션을 추가하면 더욱 생동감 있는 UI를 만들 수 있다.

const AnimatedIcon = () => ( 
    <svg xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red">
            <animate attributeName="r" from="40" to="20" dur="1s" repeatCount="indefinite" /> 
        </circle>
    </svg> 
);

참고자료

https://brunch.co.kr/@ggk234/11

Electron이란?

2-doooo-2 — Tue, 17 Sep 2024 21:00:37 +0900

electron

Electron이란?

일렉트론이란 데스크톱 애플리케이션을 구축하는 도구

Electron은 데스크톱 애플리케이션을 개발하기 위한 오픈소스 프레임워크이다. HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 Windows, macOS, Linux에서 실행 가능한 크로스플랫폼 데스크톱 애플리케이션을 만들 수 있다. 물론 Angular, React, Vue도 사용가능하다.

추가로 매년마다 갱신되는 프론트엔드 로드맵 마지막 쪽에서 electron을 찾아볼 수 있다. 그만큼 프론트엔드에서도 나름 중요한 역할을 차지하고 있다는 거 아닐까?

✅Electron을 활용한 대표적인 애플리케이션

출저:Dev.DY

우리가 알고 있는 많은 앱들이 이미 electron을 이용하고 있고 추가로 notion,postman도 electron을 활용한 데스크탑 앱이다!

✅Electron의 장점과 단점

장점

크로스 플랫폼 지원으로 개발 비용 절감
웹 기술 기반으로 기존 프론트엔드 개발자에게 친숙
Node.js 및 Electron API로 강력한 기능 제공

단점

상대적으로 높은 메모리 사용량
애플리케이션 크기 증가 (Chromium 포함)
성능 이슈 (특히 대규모 애플리케이션)

✅Electron 설치 및 실행

설치

npm install --save-dev electron

그리고 나서 package.json을 수정해야 한다. main에 main.js를 설정하지 않으면 Electron은 index.js를 로드하려고 할 것이다.

// package.json
{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

main.js

Electron에서 메인 프로세스 파일은 애플리케이션의 진입점이며,

Electron API를 사용하여 애플리케이션의 라이프사이클을 관리합니다.

const { app, BrowserWindow } = require('electron')
const path = require('path')
const isDev = require('electron-is-dev')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  // 개발 모드에서는 localhost:3000, 프로덕션에서는 build된 파일을 로드
  win.loadURL(
    isDev 
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../build/index.html')}`
  )

  // 개발자 도구 열기
  if (isDev) {
    win.webContents.openDevTools()
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

app: 애플리케이션의 생명 주기를 관리하는 Electron 모듈. 애플리케이션이 시작되고 종료될 때 발생하는 이벤트를 처리
BrowserWindow: 새로운 브라우저 창을 생성하는 데 사용되는 모듈. 이 창은 HTML, CSS, JavaScript를 렌더링하여 데스크탑 애플리케이션 UI를 제공.
path: 파일 경로를 다룰 수 있는 Node.js 내장 모듈로, 경로를 안전하게 처리하는 데 사용.
isDev: 현재 Electron 애플리케이션이 개발 모드인지 확인하는 라이브러리. 개발 모드에서는 http://localhost:3000에서 앱을 실행하고, 프로덕션 모드에서는 빌드된 파일을 로드.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

애플리케이션 실행

npm start

출처:www.electronjs.org

마치며.... 이 글을 쓰게 된 계기

2달여동안 프로젝트를 진행하며 사용자를 늘리기 위해 이것저것 시도해봤지만 일회성 사용자만 잠시 늘어날 뿐 정기 사용자를 유지한다는 것이 얼마나 어려운일지 알게 되었다. 그래서 electron을 이용해서 데스크톱 앱을 만들었으면 조금이라도 정기 사용자가 늘지 않았을까라는 아쉬움에 electorn에 대해 공부하고 코드에서 어떻게 활용하는지 알아보고자 이 글을 작성하게 되었다.

참고자료