[타임세이버] 끝났다고 생각할 때가 시작이다 - 리팩토링 항목 리스트업

기능적인 구현은 모두 끝이 났다.

디자인도 같이 병행해서 개선하다보니, 생각보다 신경쓸 것들이 더 많았지만 그래도 마무리가 되고 보니 너무 뿌듯했다.

하지만 본격적인 고민은 지금부터 시작이다.

 

내가 만든 웹 사이트가 성능적으로 얼마나 더 개선될 여지가 남았는지 잘 따져보아야 한다.

구현했다 끝~! 하고 덮어놓고 보지 않으면 의미가 없지 않은가 !

그래서 지금부터는 어떤 지점을 개선할 수 있을 지 한 번 리스트업 해보려고 한다.

 

1. 시작할 때 정한 컨벤션을 잘 지켰는가?

• 함수의 정의 방식을 올바르게 사용하고 있는지
• 네이밍 형식을 잘 지켰는지
• import , export 를 적절하게 하고 있는지 (export default)
• 사용하기로 한 라이브러리를 통해 로직을 구현했는지
• 폴더 구조는 올바르게 짜서 사용하고 있는지

등 등 (이외에도 많을 것이다 !)

프로젝트를 시작할 때 정한 컨벤션들을 잘 지키지 못한 경우가 꽤나 많기 때문에 한 번 더 쭉 살펴보면 분명히 많은 부분해서 수정사항이 나올 것이다.

 

 

2. 디자인 패턴 정리 후 적용

• 타이포그래피의 스타일을 선언해두고, import 해서 사용하면 중복되는 스타일 코드를 줄이고 유지보수성도 높아질 것이다. 그리고 전체적으로 통일된 스타일링을 사용하기 때문에 일관성 있는 스타일을 유지하기도 좋을 것이다.
• 컬러칩도 현재는 styled-conponents의 theme 파일에서 사용하고 있었는데, 이렇게 사용하게 되니 import 문이 늘어나게 된다.
  • import 문이 늘어난다는 것은 번들 크기가 증가되고, 성능 및 코드의 복잡성도 높아진다는 의미이기도 하다.
  • 그래서 나는 기본 CSS에서 제공하는 변수 선언으로 색상을 정의하여 사용해보려고 한다.
• 공통되는 스타일 로직은 상위 폴더로 이동하여 import 하여 사용하기
  • styled-components는 스타일 코드를 상속받아서 사용할 수 있는 것이 장점이기 때문에 이를 이용하여 공통되는 코드를 위로 끌어올려 하위의 요소들이 상속받아서 쓸 수 있도록 정리하는 것이 좋을 것 같다.
  • 그렇게 폴더 구조에서도 공통 스타일 코드를 정리하여 사용하면 어디서 이 스타일 코드를 사용하는지 예상이 되기 때문에 정리하면 충분히 도움이 될 것이다.

 

 

3. 사용자 경험을 보완할 수 있는 기능 추가 or 개선

• 대시보드를 생성하거나, 삭제할 때 정상적으로 잘 삭제되었다는 것을 알려주는 Toast UI 등을 추가하려고 한다.
• 랜딩 페이지, 로그인&회원가입 페이지의 로딩 속도가 느려서 이를 개선해야 한다.
  • 현재로서 생각하고 있는 방법은 랜딩 페이지는 SSR로 페이지를 전환하면 개선될 수 있을 것 같다.
  • 로그인&회원가입 페이지는 크기가 큰 이미지를 다운로드해서 사용하고 있어 로딩 속도가 느린데, 통으로 이미지를 사용하지 않고도 충분히 구현할 수 있을 것 같아서 최대한 CSS를 사용해서 리팩토링 해보려고 한다.
• 웹에서 열었을 때 아래처럼 탭에 나오는 파비콘 추가 및 페이지 명칭을 확인할 수 있게하려고 한다. 이는 helmet이라는 라이브러리를 통해 할 예정이다.

• 데이터 요청을 보내는 버튼에 쓰로틀링을 걸어서 네트워크 부하 줄일 수 있도록 하기

4. 에러 처리 보완

• 에러처리는 기능 구현만큼 중요한 영역이라고 생각한다. 적절한 에러처리가 수반되지 않는다면 에러를 맞닥뜨렸을 때의 사용자 경험을 보호할 수 없다.
• 또한, 에러로 인해서 전체 어플리케이션이 종료되는 대참사가 일어날 수 있고, 보안적인 측면에서도 에러 처리는 정말 중요하다. 그렇기 때문에 여러 에러 상황 속에서 이후의 동작을 무엇으로 유도할 지에 대해서 고민해봐야 할 것 같다.

 

 

이렇게 어떤 부분을 개선할 수 있을 지 쭉 적어보았는데, 아직 나의 시선이 좁아서 더 개선할 점을 찾지 못하는 것은 아닐까 생각이 든다. 그래서 다른 서비스들은 어떤 부분을 개선해나가는지 조금 더 알아보고 싶다.

 

앞으로는 이렇게 나열한 개선 사항들을 개선해나가는 포스팅을 할 것 같다.