[프로그래머스 과제테스트 연습] 고양이 사진 검색 사이트 (+) - 프론트엔드 (리팩토링)

개요

문제를 풀면풀수록 느끼는 것인데

너무 박힌 틀안에서 고치다시피 하다보니 변경할때 건드려야 할 것이 너무 많아지는 것이다

그래서 아예 구조를 새로 설계하고 문제를 그 위에서 풀면 더 좋을거같다는 생각이 들어서 해보기로했다

 

폴더 구조

현재 src 와 src/utils에 대부분의 파일이 몰려있는데, 이를 분리할 필요가 있다

일단 components 폴더는 필수인것같다..

 

src

ㄴutils (api, store, ...)

ㄴcomponents

   ㄴModal

   ㄴHeader

   ㄴMain

 

이렇게하고 components내부에도 좀 분리해두면 좋을거같다

Modal, Header, Main으로 나눌까 싶다

 

파일 구조

Modal

모달이 띄어지면 배경화면이 살짝 검게되고 중앙에 모달을 넣는 방식은 공용일것같다

class명을 맞춰서 활용할수 있게 해볼까

Main, Header

App.js에서 아예 메인파일들로 레이아웃을 맞추고

그 메인 파일안에서 세부적인것 조정을 하면 좋을것같다

메인파일의 명칭은 Main.js, Header.js로 할까싶다

패턴 찾기

현재로서는 App.js에 너무 지저분하게 코딩이 되어있다는 생각이 든다

최대한 넣을 수있는거는 컴포넌트 내의 메소드로 만들게 하고 

필요한 컴포넌트를 필요한 곳에서 주입하는 의존성 주입 패턴을 사용하면 좋지않을까싶다

 

그리고 좀더 찾아보니 중개자(Mediator) 패턴이라는 종류가 있어서 알아보았다

컴포넌트간 상호 작용을 하나의 클래스에 위임하여 그 클래스가 하게하는것!

이런것으로 파사드 패턴(Facade Pattern)과 옵저버 패턴(Observer Pattern)이 있다고한다

비행기 끼리 소통하는 것이 아닌 관제탑을 거쳐서 하게하는 것

 

근데 지금은 App.js가 관제탑 역할을 하고있는것같다

흠 그런데 동작들이 딱히 단순하지가 않아서 적용할수있는건지 모르겠다는 생각이 들긴한다

 

일단 내가 제일 거슬리는건 onSearch등의 이벤트 핸들러를 컴포넌트에 바로 내장하는것이긴하다

App.js에서든 어디든 따로 정의를 하고 그걸 사용하게하는게 좋을거같다

 

App.js의 역할을 분명히 하는 것도 필요할것같다

일단 컴포넌트의 생성과 초기 설정을 App.js에서 해주고 있는것들이 있는데

사실 필요없는 초기설정도 있다

그냥 컴포넌트 자체에서 설정할수있는것들..

그냥 이후에 setState만 줘도 될거같은 것들은 초기 세팅을 좀 내부에서 하도록하자

 

그리고 App.js가 너무 중간역할을 하는 느낌인데

이런건 상태관리 패턴으로 해결이 될수있는거같긴하다

App.js에서 setState가 너무 아무 역할을 안한다고 생각하기도해서.. 이것도 좋을듯하다

흠 그런데 App.js에서 관리할 데이터가 없다고해서 상태관리 파일에서 관리할 상태가 있는 것일까?

공유할만한 데이터가..

딱히 있다고 생각되진 않는다

 

일단 좀 건들여보면서 해볼까싶다