LawLens 서비스 오픈소스 기여! + 스터디 회고

🧑‍⚖️ 들어가기에 앞서

무슨 프로젝트인가요?

소개

---

🧑‍⚖️ “법제처 공식 DB + 자체 RAG (예규·판례 + LLM 컴파일 wiki)로 모든 인용을 교차검증해서 LLM 환각을 차단하는 한국 법령·세무 Q&A 어시스턴트”
→ 단일 Next.js 프로젝트로 두 개 도메인(LawLens + SalesLens)을 운영하는 한국 법령 AI SaaS

Github

• https://github.com/IISweetHeartII/lawlens

Url

• https://lawlens.log8.kr/
• https://saleslens.log8.kr/

---

구조 분석

리뷰하기 전에 구조 먼저 짚고 가자면!

총 10개의 도메인, 14개의 페이지

❯ tree
.
├── app
│   ├── _components
│   ├── account
│   │   ├── organization
│   │   │   ├── [id]
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── billing
│   │   └── return
│   │       └── page.tsx
│   ├── chat
│   │   ├── [id]
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── disclaimer
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── login
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── page.tsx
│   ├── pricing
│   │   └── page.tsx
│   ├── privacy
│   │   └── page.tsx
│   ├── refund
│   │   └── page.tsx
│   ├── saleslens
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── terms
│       └── page.tsx

---

문제 상황

전체적인 페이지 렌더링 속도는 무난했지만, 유독 사이드바에서 대화를 클릭하면, 채팅 창으로 전환되기까지 미묘한 딜레이가 있었어요

따라서 분량이 너무 방대한 관계로, "채팅 부분의 페이지 전환 속도가 느리다"는 문제에 집중해서 /src/chat 부분만 리팩토링을 진행했어요.

원인

LawLens는 새 대화를 시작할 때 아래와 같은 흐름이에요

1. /chat 에서 메시지 입력
2. 
3. 서버에서 AI 응답 스트리밍 시작
4. 응답이 끝나면 페이지가 리렌더링 되면서(깜빡 후) → URL이 /chat/uuid-1234 로 바뀜
   
   

흐름을 보면 알 수 있듯, 응답이 끝나는 순간 메시지가 위에서부터 다시 로드되며, 깜빡이면서 이미 다 그려졌던 내용이 처음부터 다시 렌더링되는 걸 확인할 수 있었어요.

useEffect(() => {
  if (isNew && !navigatedRef.current && status === 'ready' && messages.length > 0) {
    navigatedRef.current = true;
    router.replace(`/chat/${conversationId}`);
  }
}, [isNew, status, messages.length, router, conversationId]);

router.replace() 는 URL을 바꾸는 함수가 아닌 App Router에서는 "이 경로로 네비게이션하는 함수"예요. 따라서 재패치가 따라와요.

Next.js App Router는 서버 컴포넌트 RSC 기반이므로, router.replace()를 사용하면 새 URL에 해당하는 서버 컴포넌트를 다시 패치해요.

즉 URL이 바뀌었으므로 서버에서는 바뀐 URL의 RSC를 다시 패치하고 ChatLayout.tsx 파일에 해당하는 쿼리를 모두 다시 실행 후 이후 새로 리렌더링을 하게 되는 흐름이었어요.

수정

답변 이후에는 URL만 바꾸고 싶은 의도를 유지하려면, Next.js를 우회해서 window.history.replaceState 를 써주면 돼요.

// Before
router.replace(`/chat/${conversationId}`);

// After
window.history.replaceState(null, '', `/chat/${conversationId}`);

다만 한가지 주의할 점은, ‘Next.js를 우회해서’ URL을 변경하는 것이기 때문에 라우터 상태에 의존하는 뒤로가기 동작 등을 수행했을 때 내부 상태가 예상과 다를 수 있다는 트레이드 오프가 있어요.

---

🥭 React 스터디 회고

10주 동안 React 중급 스터디를 마쳤다. 컴포넌트 설계부터 테스트 전략까지, 늘 궁금했지만 혼자서는 파보지 못했던 문제들을 스터디원들과 하나씩 짚어가는 시간이었다. "왜 이렇게 써야 하는가"를 계속 묻고, 어떻게 하면 더 쉽게 설명할 수 있을지 고민하는 재미가 있던 스터디였다.

---

커리큘럼 한눈에 보기

주차	주제
1주차	컴포넌트 설계 원칙
2주차	커스텀 훅과 책임 분리
3주차	상태 관리 전략 비교
4주차	TanStack Query 심화
5주차	렌더링 최적화 실전
6주차	에러 핸들링 & 안전성
7주차	폴더 구조 & 아키텍처
8주차	테스트 전략
9주차	포트폴리오 사이트 만들어오기 (MVP)
10주차	스터디한 내용을 기반으로 서로 코드 리뷰해주기

---

5주차 렌더링 최적화 실전 (발표 주차) 회고

렌더링 최적화는 내가 직접 발표를 맡은 주차이자, 실제 10주차 코드리뷰까지 사용된 개념이었다.
렌더링 최적화 실전 가이드: React DevTools Profiler 활용법, useMemo / useCallback / memo 적용 기준, 불필요한 렌더링 찾아서 없애기

준비하면서 가장 크게 느낀 건 측정 없이 최적화하면 안 된다는 것이었다. 처음에는 "모든 곳에 useMemo와 useCallback을 붙이면 빨라지지 않을까"라는 생각이 있었는데, 실제로 Profiler를 돌려보면 병목이 예상과 다른 곳에 있는 경우가 많았다.

Profiler의 Flame Graph에서 셀프 시간이 높은 컴포넌트를 찾고, "왜 이 컴포넌트가 렌더링됐는가"를 확인한 뒤에 최적화 도구를 적용하는 순서가 핵심이었다. 실제 LawLens 코드에서는 불필요한 useCallback을 제거하는 것이 오히려 성능 개선으로 이어지는 사례도 있었다. 최적화란 무언가를 추가하는 것이 아니라 불필요한 것을 없애는 것이기도 하다는 걸 실감했다.

발표 준비 과정에서 팀원분이 남겨주신 질문이 기억에 남는다.

"모든 부분에 메모이제이션 vs 필요한 부분만 메모이제이션 중 어떤 의견이 더 본인과 맞는 것 같았나요?"

당시에는 "필요한 부분만"이라고 답했지만, 그 기준이 뭔지 스스로도 흐릿했다. 발표를 준비하면서 그 기준이 조금씩 명확해졌다. 비싼 계산인지, 함수 참조의 안정성이 필요한지, 부모 리렌더링이 자식에게 전파되는지

이 세 가지를 확인하는 것이 앞으로 최적화의 기준이 되었다

---

전체 회고

가장 크게 성장한 부분

"왜"를 먼저 묻는 습관이 생겼다. 도구를 사용하기 전에 왜 이 도구가 필요한지, 다른 선택지는 무엇인지를 먼저 고민하게 됐다. 렌더링 최적화 발표를 준비하면서 특히 그 습관이 강해졌다고 생각한다.

아쉬웠던 부분

시험기간에는 학교 공부에 집중하다 보니 4, 8주차의 내용을 깊이 있게 따라가지 못한 부분이 있다. Tanstack Query, 에러 핸들링과 테스트 전략은 별도로 더 공부하고 싶은 주제로 남아 있다.

스터디에서 배운 것

기술 지식만큼이나 함께 공부하는 방식도 배웠다. 질문하는 것을 두려워하지 않는 분위기, 다른 사람의 코드에서 배우는 경험, 발표를 준비하면서 개념을 다시 정리하는 과정 같은 모든 것이 혼자 공부할 때는 얻기 어려운 것들이었다.

---

마치며

10주가 생각보다 빠르게 지나갔다. 매 주차마다 "이건 나중에 다시 봐야겠다"는 주제가 쌓였고, 그게 지금의 학습 로드맵이 됐다.

스터디는 끝났지만, 각 주차에서 다룬 주제들은 계속 이어서 공부할 예정이다. 특히 렌더링 최적화와 테스트 전략은 실제 프로젝트에 더 깊이 적용해보고 싶다!