Project dagachi #3 목업 페이지 구현 및 페이지 연결

시작하며

흔하게 접했고 특별한 기능이 없는 커뮤니티 사이트라고 생각해서 오래걸리지 않을 프로젝트라고 생각했으나 와이어프레임을 설계하고 스키마를 짜는 과정에서 구현해야 되는 페이지가 많다는 것을 깨달았다. CSS에 대해서는 깊게 학습하지 못했기 때문에 목업페이지를 구현하는 과정부터 쉽지 않았던 것 같다.

목업페이지 구현

웹페이지를 구현하기 위해서는 일단 기능 구현이 되지 않은 상태의 목업페이지를 만드는 것이 우선이라고 생각해서 프론트엔드 포지션 팀원 2명과 함께 와이어 프레임으로 구상한 목업 페이지를 React를 사용해서 구현하기 시작했다.

목업 페이지를 만들면서 처음 생각해야 할 점은 어떤 부분을 컴포넌트로 만들지 정해야 하는 것이다. 로그인 화면과 게시판처럼 완전히 분리된 페이지는 별도의 컴포넌트를 생성하는 것이 당연하지만 상위 컴포넌트 내에도 분리시켜야 하는 부분이 존재한다. 예를 들어 게시판 리스트 부분은 서버에서 데이터를 받아와서 10개의 목록을 화면에 표시해야하기 때문에 map을 사용하여 띄우는 것이 편리하다. 그렇기 때문에 목록으로 보여지는 부분은 컴포넌트를 별도로 만들고 하위 컴포넌트로 연결하는 것이 편했다.(우선 더미데이터를 사용하여 페이지 구현했다.) 또 대부분에 페이지에서 보여지는 메뉴 토글버튼과 알림버튼은 컴포넌트로 분리해서 상단에 나란히 배치하기로 하였다.

그리고 다음으로 생각해야 하는 것은 react-router-dom을 사용해서 별도의 path를 설정할지 혹은 삼항 연산자와 State를 활용하여 페이지가 전환되게 할지 였다. 자주 사용했던 커뮤니티 사이트에서 새로고침 버튼을 눌렀을때 어떻게 동작하는 지를 생각하면서 결정하였다. 큰 단위의 기능이 분리된 페이지는 router로 연결하고 그 내부의 페이지는 삼항연산자를 활용하는 방식으로 목업페이지를 구현하였다.

목업페이지를 구현하면서 CSS에 대해 많이 배우게 되었던 것 같다. import된 CSS파일은 모든 컴포넌트에 영향을 주기 때문에 클래스명을 분리해서 설정해야 하고, 부모 태그의 CSS 속성 때문에 자식 태그에 적용이 안되거나 태그 자체가 가지고 있는 속성 때문에 추가로 설정해줘야 하는 부분 등 이전에는 고려하지 못한 부분을 알게 되고, flex와 table에 대해서도 생각하는 대로 활용할 수 있을 정도로 많이 배울 수 있었다.

react-router-dom

목업페이지를 완성한 후 router로 연결하는 작업을 진행하였는데 이중 라우팅을 구현하는 과정에서 Route의 새로운속성을 알게 되었다. 이전에는 Route 태그내에 컴포넌트를 넣는 형태로 연결했었는데 component라는 속성에 컴포넌트를 연결할 수 있다는 것을 알게 되었다. 이전 방법과 다른 점은 props로 Route의 path에 대한 정보가 담겨있는 match라는 변수를 전달받는다는 것이다. 이를 활용하면 이중 라우팅 시에 path를 변수로 설정하여 게시물에 따라 여러 Route의 path를 동적으로 설정할 수 있다. 리덕스를 사용하기 때문에 props를 전달하는 경우는 거의 없지만

<Route path='/board' render={(props) => <PostListContainer boardData={boardData} {...props} />} />

이런식으로 render를 사용하면 match와 다른 props를 전달할 수 있다.

마치며

커뮤니티 사이트를 선택한 것에 후회가 되기도 하지만 프로젝트를 진행하면서 하루하루 발전하고 있다는 느낌이 많이 드는 것 같다. 구글링하는 시간도 점점 짧아지고 디버깅하고 문제를 찾는 능력이 늘어나면서 삽질하는 시간도 줄고 있다. 이제 기능 구현하는 부분을 진행하기 때문에 머릿속에서 구상한 대로 구현될 수 있을까란 걱정도 들지만 가장 핵심이면서 예상치 못한 오류가 발생하기 쉬운 단계라고 생각되기 때문에 더 성장할 수 있는 기회라고 생각한다. 아마 비동기적으로 서버와 통신하고 state를 처리하는 과정에서 문제가 발생할 수 있을 것이라고 예상되어서 관련된 레퍼런스들을 찾아볼 예정이다.