[서평]대규모 리액트 웹 앱 개발을 읽어보자

이 책을 고른 이유

운이 좋게도 9월부터 인턴에 나가게 되었습니다. 실무 경험이 없고 프로젝트만 진행하다보니, 이제 곧 닥칠 대규모 라는 키워드에 자극되어 이 책을 고르게 된 것 같네요.

혼자서 프로젝트를 하다보면 축소보다는 확장 을 더 하게됩니다. 그러다보니, 먼 미래에 닥칠 엄청난 복잡성에 대해서는 안일하게 생각합니다.

따라서 이 책은 저에게 실무 환경에 잘 적응 될 수 있도록 여러 상황과 환경을 미리 알려줄 것 같습니다.

위와 같은 고민을 가지고 있는 분이라면, 아래의 글은 책을 고르는데 도움 이 될 것이라 생각합니다.

우발적 복잡성과 내재적 복잡성

기본적으로 시스템이 확장하게 되면, 복잡성을 마주하게 되고 이런 복잡성을 줄이기 위해 확장성 있는 모듈을 만들고, 클린코드를 지향하며 에러를 줄이고는 한다.

이러한 복잡성을 두가지로 분류하여 우발적 복잡성 과** 내재적 복잡성** 로 유형을 설명하고 있다.

우발적 복잡성

• 기존 문제에 관한 새로운 해결책을 만들면서 생기는 복잡성

내재적 복잡성

• 주로 레거시 코드와 관련이 있으며, 끊임 없는 변경과 진화의 결과로 나온 복잡성
• 우발적 복잡성이 증가하면 -> 내재적 복잡성

책 첫장에서는 위와 같은 복잡성을 설명하는데, 이 책에 내용이 전반적으로 무슨 내용인지 알려줘서 책을 읽는데 어려움이 없었습니다.

사이트 프로젝트를 만들다 보면, 속도와 완성에 초점이 맞춰져 있어서 주로 우발적 복잡성 을 뛰는 것을 경험했다.

예를 들어, 서버에서 HTTP 메서드 요청을 받고, 데이터를 A 에 받아 **B **에 props로 전달하고 있다면, 추후 전역으로 관리하지 못한 상태에 우발적 복잡성을 나타난다고 생각이 된다.

1// App.js
2function App() {
3  const [userData, setUserData] = useState(null);
4  
5  useEffect(() => {
6    fetch('/api/user').then(res => setUserData(res.json()));
7  }, []);
8  
9  return <UserProfile userData={userData} />;
10}
11
12// UserProfile.js
13function UserProfile({ userData }) {
14  return <UserDetails userData={userData} />;
15}

만약 밑으로 하위 컴포넌트가 더 늘어나게 된다면 Props Drilling 지옥을 만나서 '우리는 전역으로 상태관리를 할 걸,, 하면서 혀를 찰 수 밖에 없는 것이고, 이러한 문제는 개발자라면 이런 우발적인 상황을 맞닥뜨렸다고 생각이 든다.

그러면 어떻게 복잡성을 줄일 수 있을까?

이 책에서는 다양한 방법을 제시한다

• 모듈성
• 지연 로딩
• 코드 분할
• 문서화
• 성능
• 효율적으로 데이터를 가져오기
• 상태관리 등등

이 책에서는 현업에서 쓰이는 여러가지 최적화 방법 과 디자인 패턴 그리고 시스템 환경 에 관해서 이야기를 끊임 없이 하고 있다.

즉, 모든 과정은 순환되고 초기 시스템 설계가 중요하단 것을 깨달았다. 이 책은 확실히 실무를 경험해보지 않은 아직 학생이라면, 대규모를 처리하는 프로젝트는 어떻게 작업 을 하고 소통을 하며 프로젝트를 만드는지 피부에 닿지는 않았지만, 적어도 내 머릿속에서 설계도를 펼쳐놓고 설명해주는 기분이 들었다.

이 책은 어떤 깨달음을 줄까?

지연로딩, 다양한 코드 분할

책 앞부분에서는 모듈성과, 지연로딩, 그리고 다양한 코드 분할법에 대해서 먼저 이야기한다. 이는 책을 읽는 독자를 위해 간단한 내용부터 설명하면서, 후반부에서는 이 앞 파트를 예시를 들면서 확장하고 있다.

지연 로딩(리소스가 필요할 때만 로딩하는 기법)을 읽으면서, 내가 프론트엔드로 개발하다가 지연 로딩을 고려한 적이 있나? 라고 생각이 들었다.

솔직히 서버에서 들어오는 양이 얼마나 거대한 지 잘 모르겠고, 소규모 프로젝트는 트래픽이 많지도 않아서 데이터 요청과 응답의 시간이 길지 않았다고 느꼈던 것 같다.

이제 곧 실무를 경험하게 되고 좋은 퍼포먼스를 보여줘야 하니, 책을 읽으면서도 끊임 없이 책에 질문을 던졌다.

"API 문서 같은 곳에서 지연로딩 처리면 좋을 것 같다고 이야기 해주면 좋지 않나?"

협업으로 개발을 해보거나 개발자를 꿈꾸고 있다면, 앞 파트는 한번 쯤은 들어본 내용 들이다. '근데 이거 왜 쓰는거야?'라는 생각이 들면 책은 상황 예시를 통해 설명해준다. 이런 점이 내가 책을 고른 이유 중 한 가지 이유다.

** 책에 질문을 적는 이유는 두가지다.**

• 실무에서 질문을 던지는 것을 두려워하지 않기 위해서
• 책에 몰입하기 위해서

마치 이 책 자체가 다양한 조각모음으로 되어있으며, 여러번 설명하지 않고 대규모로 문자를 나열하며 책이라는 프로그램을 완성시킨 느낌이었다.

테스팅이 가장 인상 깊었다

테스팅을 도입하면 개발 생산성이 확 떨어지는 걸 느껴서 여러 프로젝트를 진행하면서, 테스팅은 잘 갖춰지지 않았고 그냥 간단하게 테스팅 도구들만 사용하며 찍먹만 해봤다.

그래서 잘 알지 못했었는데, 이 책에서는 이유 에 대해서 구체적으로 설명하고 있다.

'테스팅은 소프트웨어가 해야 할 일을 하고 있는지 확인하는 방법이다.'

대규모 리액트 웹앱 개발 - p.185

테스팅을 해야하는 이유는 프로젝트의 신뢰 라고 생각한다. 오류가 나는 부분을 일일이 찾는 것도 비용이고, 코드를 잘 작성했다는 증거가 되기도 한다.

책에서는 단위테스트(unit test) 부터 설명하고 있다.

Jest를 이용해서 컴포넌트 내에 함수가 잘 작동하는지 Counter Component를 통해서 설명해주고 있다.

여기서는 정리,동작,확인 패턴 으로 단위 테스트를 명확하고 간결한 형태로 구조화하고 있다.

• 정리 : 이 단계에서는 테스틑 대상 컴포넌트 혹은 시스템의 초기 단계를 설정한다. 특정 props를 사용해 컴포넌트를 렌더링하거나, 목 객체를 만들거나, 필요한 의존성들을 초기화한다.

• 동작: 이단계에서는 동작을 수행하거나 사용자 상호작용 또는 시스템 운영을 시뮬레이션하는 이벤트를 트리거한다. 이 동작에는 클릭이나 키 입력, 함수 호출, 컴포넌트 상태 업데이트 같은 이벤트를 트리거하는 것 등이 포함된다.

• 확인: 마지막 단계에서는 이전 단계에서 동작을 수행한 뒤 컴포넌트나 함수가 기대한 대로 작동했는지 확인한다. 어서션(assertion)을 사용해서 특정한 조건이 참(true)을 유지하는지 확인한다. 예를 들면 어떤 요소가 DOM 안에 존재하는지 확인하거나, 업데이트된 상탯값을 기대 결과와 비교하거나, 특정 함수가 적절한 인수와 함께 호출되었는지 검증한다.

이런 구조는 테스트에서 많이 쓰이는 접근법으로 코드 흐름을 파악하는데 도움이 되는 정보라고 생각한다.

책에서는 다양한 코드 스니펫으로 알려주기도 하고 설명도 해주니 실무 경험을 하기 전에는 이 책을 읽어보는 것을 추천한다.

이후 엔드 투 엔드 , 통합 테스트를 설명해준다. 이런 설명이 인상깊었던 것이 아니다.

스냅숏 테스트 를 처음 들었다. 특정 시점에서의 컴포넌트의 UI 출력을 캡처하고 이를 미래의 출력과 비교 함으로써 의도하지 않은 변경이 발생하지 않았음을 보장하는데 초점을 둔다.

이걸 보자마자 Three.js 라이브러리로 모델을 불러오는 중 렌더링 리플로우 과정에서 로컬과 환경이 달랐던 트러블 슈팅이 생각이 났다.

쑥쑥약속

위와 같이 화면 왼쪽 섹션 중앙에 3D 모델이 나와야 하는데, 배포 시 내가 맞춘 y좌표 값보다 한 참 위에서 모델이 렌더링이 되는 이슈였다.

좌표 로그도 찍어보면서, 모델 렌더링 지연을 줘서 해결을 했는데 이 때, 의도치 않게 배포환경에서 테스트하다보니 계속해서 git push를 하게 되었다.

그래서 이 때, 스냅숏테스트를 통해서 배포 환경과 차이점을 확실히 구분 짓고, 원인을 찾는 것이 현대적인 방법이 아닐까 생각이 든다.

마무리

평소에 학습을 하고 싶은 부분이 있다면 기술 블로그를 정독하긴 한다. 해당 글에서 관련있는 학습을 하고 싶으면 계속해서 검색하는데, 내가 원하는 부분과 상이하거나 계속해서 새로운 내용이 나오다보니 여기서 대부분은 피로를 느끼는 것 같다.

하지만 책은 이런 문제를 어느정도 보완해준다. 책을 쓴 독자는 지식을 효과적으로 공유하기 위해 목차부터 세세하게 구분이 되어있고 궁금한 부분들을 빠르게 설명해준다.

또한 어느정도 주관이 들어간 내용은 나와 생각을 비교하면서 읽으니 흥미롭게 읽게 된다.

책을 읽고 이렇게 서평을 남기는 것도 너무 도움이 된다.

긴 글 읽어주셔서 감사합니다 ! 책 추천해주시면 감사하겠습니다.