타이포랩 리팩토링: 가이드 페이지

넥제로 약 1년 전에 급하게 만든 프로젝트를 심심해서 까봤는데 문제가 아주 많았다

1년 전의 똥코드를 박제하고 리팩해보자 ..

 

UserGuide.tsx 페이지를 살펴보면

 

VIEW GUIDE 버튼을 누르면 로딩 이미지가 뜨고, 로딩이 완료되면 지피티가 만들어준 설명이 렌더링된다

 

코드를 살펴보면 문제가 많다.

 

0. 구조분해할당???

린트 설정이고 뭐고 냅다 tsrafce 해서 만들어진 Props 에 필요한 걸 갖다 넣어둔 모습이다.

심지어 props:Props 로 받아와서 이후 모든 받아온 값에 props.element 처럼 접근해야 한다.

 

컨벤션의 문제이기는 하지만.. 타입 이름에 페이지명을 포함시켜줬고 구조분해할당을 시켜준 후 모든 props. 를 제거했다.

스타일적인 부분들은 린트 설정 후 한번 정리하는 게 좋겠다.

 

1. 무한 삼항연산자

뭘 하고 싶었는지는 알겠으나 삼항 연산자 안에 무한 삼항 연산자를 박아놨고 조건에 맞지 않으면 null을 반환한다

바깥 연산자부터 뜯어보면서 정리해보면

showGuide는 boolean 으로 된 state 값인데.. 이게 false 면 버튼을 보여주고, 아니면 내용을 보여준다.

이정도 분기는 한눈에 알 수 있고 꽤나 명확하다.

showGuide 면 가이드를 보여주고, 아니면 버튼을 보여준다.

 

그런데 문제는

2. 재사용 안하면 분리 안 해도 되는 거 아닌가

버튼을 이렇게 만들어 뒀다는 것

then catch finally가 온클릭 안에서 멋지게 빛나고 있다

 

또 gpt 생성하는 시간이 꽤나 길었는지 버튼이 눌렸는지 상태, 가이드 보여줄지에 대한 상태를 분리해서 관리하고 있다.

 

어떻게 바꾸면 좋을까?

해설을 받아오는 내부 컴포넌트를 lazy 컴포넌트로 바꾸고, 외부를 Suspense 로 감싼 뒤 Fallback 에 로딩 중 컴포넌트를 넣어주면 상태 관리도 덜 해도 되고 깔끔하지 않을까?

 

먼저 관심사별로 분리를 조금 해 두어야 구조가 눈에 잘 보일 것 같다.

버튼, 태그, 설명 부분으로 추상화를 조금 해보자

0. 버튼 분리

이놈이다

 

1. 로더 분리

 

로더

또 로더 부분도 따로 컴포넌트로 빼서, Suspense 등을 쓸 때 확실하게 표시할 수 있도록 한다

 

2. 연산자 정리, 시멘틱 태그 정리

null을 리턴하는 경우는 && 연산자로 교체해 값이 있는 경우만 표시하도록 했다

그리고 태그 부분이 map 으로 도는데 h1 태그로 되어 있어 의미가 맞지 않으므로 p 태그로 교체했다.

 

3. 태그 부분 분리

폰트 고를 때 태그 골랐다면 표시해주는 컴포넌트다.

가이드 파일에 있어 핵심 관심사가 아니기 때문에 컴포넌트화 시켜 분리해 숨겨놨다.

가이드가 어디서 생기는지 조금 더 보기 쉬워졌다.

 

 

현재 구조는 이렇다.

'

아직 showGuide 와 isGuideBtnPushed 상태로 관리하고 있는 모양이다.

버튼을 누르면 로딩 상태로 들어가고, 로딩 상태가 끝나면 가이드 컨텐츠를 보여주는 구조다.

 

4. 내부 가이드 컨텐츠 컴포넌트에서 데이터 페칭

async 데이터 페칭에 Suspense 를 쓰는 구조는 일반적이지 않고 보통 state로 로딩 중인지 완료되었는지 구분해 관리한다고 한다(전처럼)

실험적인 기능인 use 훅을 이용해서 가이드 데이터를 받아오고 표시해 보았는데

어떤 점이 좋고 나쁜지는 더 알아보아야겠다

https://react.dev/reference/react/use

use – React

 

5. Suspense로 감싸고 fallback에 로더 넣기

 

그리고 UserGuideContent 를 Suspense 로 감싸고 fallback 안에 아까 준비한 Loader 컴포넌트를 넣어주면 된다. 그러면 자식 컴포넌트에서 데이터 페칭이 진행되고 있을 동안 fallback 의 컴포넌트가 보여지게 된다.

이제 필요없어진 상태들도 정리한다

 

6. 변수명 정리

마지막으로 isGuideBtnPushed로 눌리지 않았다면 버튼, 눌렸다면 내용~ 보다는

showGuideBtn 으로 버튼 보여주기? 버튼: 내용 으로 보다 알기 쉽게 바꿔줬다.

 

총 바뀐 부분이다

목적에 따라 분리하고 페이지 들어갔을 때 원하는 내용이 보일 수 있게 만들려니 컴포넌트 분리를 좀 많이 한 것 같다. 태그랑 내용 정도는 같이 뒀어도 됐을 것 같기도 하다.

10초 가까이 걸린다

 

 

내가 만들었지만 비슷한 폰트 추천 참 잘 해주는 거 같다