SWR 오픈소스 코드, 초보자도 OK! 실제 개발에 쓰는 분석 비법 대공개
좋은 코드를 배우는 방법: SWR 분석하기
좋은 코드를 배우는 가장 좋은 방법 중 하나는 다른 사람들이 잘 짠 코드를 많이 보는 거야. 그런데 처음 오픈소스 코드를 보면 어떻게 읽어야 할지 막막할 때가 많잖아? 그래서 오늘은 SWR이라는 라이브러리를 예로 들어서 오픈소스 코드를 어떻게 분석하면 좋을지 알려줄게.
SWR, 뭐가 좋을까?
SWR은 데이터를 관리하고 로딩 상태를 효율적으로 처리해주는 라이브러리야. React Query나 Redux Toolkit 같은 다른 라이브러리도 있지만, SWR 코드는 정말 깔끔하고 구조가 잘 잡혀 있어서 감탄했어.
SWR의 핵심 기능은 Immutable (불변성), Infinite (무한), Mutate (변경) 이렇게 세 가지야.
SWR 코드 뜯어보기
프로젝트를 열어보면 package.json 파일이 보일 거야. 이건 여러 개의 작은 패키지로 나눠져 있다는 뜻이고, 각 패키지는 자기만의 의존성을 가지고 있어.
코드 안에는 Internal과 Core 폴더가 있는데, 아마 SWR의 내부 로직들이 들어있을 거야. Core 폴더에는 useSWR이라는 함수가 있는데, 이게 우리가 SWR을 쓸 때 가장 많이 만나는 함수야. Internal 폴더에는 utils라는 디렉토리가 있고, 여러 유틸리티 함수들이 모여있어. 보통 앞에 밑줄(_)이 붙은 함수는 외부에서 직접 쓰지 않는 내부 함수라고 보면 돼. 이렇게 폴더를 나누는 건 사용자가 보기 편하게, 내부 로직을 잘 분리하기 위한 방법인 것 같아.
테스트 코드가 보물창고!
라이브러리를 분석할 때 테스트 코드를 먼저 보는 걸 강력 추천해. 테스트 코드를 보면 이 코드가 뭘 해야 하는지, 실제로 어떻게 작동하는지 알 수 있거든. 또, 예상치 못한 상황(엣지 케이스)을 어떻게 처리하는지도 볼 수 있어서, 나중에 내 코드를 테스트할 때 어떤 경우를 테스트해야 할지 감을 잡을 수 있어.
E2E 테스트, 꼭 필요할까?
SWR 테스트 코드 중에 E2E (End-to-End) 테스트가 눈에 띄었어. 이건 버튼을 눌렀을 때 데이터가 제대로 가져와지고 화면에 잘 보이는지, 특정 조건에서는 버튼이 비활성화되는지 등을 확인하는 테스트야. UI부터 서버 응답까지 모든 걸 다 확인하는 거지.
그런데 문득 이런 생각이 들었어. "프론트엔드 개발에서 E2E 테스트가 정말 필요할까? 그냥 내가 직접 버튼 눌러보면 되는 거 아닌가?" 그래서 SWR의 E2E 테스트를 더 자세히 파고들었지.
site라는 폴더 안에 app, library, pages가 있는데, 테스트를 위해 간단한 웹사이트를 만들어 놓은 것 같아. 여기서 사용된 테스트 프레임워크는 Playwright야. Cypress와 비슷하지만 마이크로소프트에서 만들어서 VS Code와 연동이 잘 돼.
SWR의 E2E 테스트는 Basic SSR (서버 사이드 렌더링)과 Partial Hydration (부분 수화) 두 가지 경우에 집중하고 있어. Basic SSR 테스트는 페이지가 제대로 렌더링되는지 확인하고, Partial Hydration 테스트는 특정 요소들이 페이지에 제대로 렌더링되는지 확인하는 거야.
E2E 테스트는 사용자 입장에서 꼼꼼하게 테스트할 수 있다는 장점이 있지만, UI나 디자인이 자주 바뀌는 빠르게 변하는 환경에서는 유지보수 비용이 많이 들 수 있어. 그래서 UI 기반 테스트보다는 핵심 로직에 집중하는 게 더 효율적일 수 있다고 생각해.
캐싱의 비밀
SWR에서 내가 정말 궁금했던 건 캐싱이었어. 테스트 파일 중에 useSWR cache.test라는 테스트를 봤는데, 이건 다음과 같은 내용을 확인하고 있었어.
- 캐시를 업데이트할 수 있어야 한다.
- 캐시 값을 올바르게 변경(mutate)할 수 있어야 한다.
이걸 더 잘 이해하기 위해 SWR의 실제 캐싱 구현을 봤는데, WeakMap을 사용하고 있었어. WeakMap은 더 이상 필요 없는 객체는 자동으로 메모리에서 해제해줘서 메모리 누수를 막는 데 도움이 돼. 그래서 캐싱에 아주 좋은 선택지인 거지.
그래서 뭘 배웠을까?
- 테스트 코드를 읽고 쓰는 방법
- SWR의 캐싱 시스템이 어떻게 작동하는지
- 주석을 효과적으로 사용하는 방법
- 캐싱이 어떻게 구현되는지
이래서 테스트 코드를 꼭 봐야 한다는 거야! 핵심 개념에 집중하고 차근차근 분해하면 라이브러리를 더 잘 이해할 수 있어.
좋은 코드는 결국 똑똑하게 따라 하는 것에서 시작돼. 오픈소스 프로젝트를 공부하면 더 좋은 코드를 쓰고 라이브러리를 더 잘 활용하게 될 거야.
GitLens 같은 도구는 커밋 기록을 추적하고, 풀 리퀘스트를 확인하고, 릴리스 노트를 검토하는 데 아주 유용해. React 같은 큰 프로젝트는 기여 가이드도 자세하게 나와 있어서, 문서 작성법이나 저장소 관리 방법을 배우는 데 도움이 돼.
라이브러리를 효과적으로 분석하고 싶다면, 테스트 코드를 먼저 확인하고, 핵심 개념을 하나씩 파고들어 봐. 다음에 또 보자!