May 23 - personal page construction with react-redux

상황 정리를 해 보자면...

 

1. React 는 편리한 JS 의 library 입니다.

1.1 Redux 도 JS 의 library 입니다.

1.2 Redux 는 여러모로 파일 생성 과정에서 머리가 덜 아파 보입니다. 특히 프로그래머의 시점에서.

- App 의 global state 가 store 라는 곳에 저장되어 있습니다.

- container components 를 store 에 연결 시켜줌으로서, redux store 의 내용물에 접근이 가능합니다.

- mapStatetoProps 를 사용하여 component 의 props 에 대한 mapping 이 가능합니다.

- mapDispatchToProps 를 사용하여, dispatch 함수들을 callback props 으로서 표현하고자 하는 components 들에게 넘겨 줄 수 있습니다. 이렇게, 하위(order: parent -> child) 컴포넌트 들에게도 actions 을 reducer 에 보낼 수 있는 능력을 부여 함으로서 global state 에 대한 업데이트가 가능 합니다.

1.3 그럼, 이제 이 redux 를 어떻게 개인 페이지에서 사용을 할 수 있을지에 대해 고민해보겠습니다.

1.3.1 우선, react 에서 따로 글로벌 state 처럼 만들어서 퍼트리는 형식의 파일을 생성 하는 번거로움을 경험해봤다면, 다소 이 redux 의 global state 개념은 familar 할 것입니다.

1.3.2 이 redux 는 제법 당당하게 그러한 방식을 권장하는 것 같아 보입니다. 어쩌면 여기서 나온 개념인지도 모를 일 입니다. 따라서, 생성하고자 하는 메뉴 목록을 다음과 같이 해보고자 합니다.

현 시점에서는 지난번의 실수처럼 github publishing 시, url 첫 화면에서 원치않는 페이지가 표시되는 것을 원천 차단하고자 합니다. 특히 전 프로젝트의 경우, 진행이 될 수록 점차 혼동이 생겼기에 (결국 머리 아파서 새로이 지금 재도전) Redux 개념이 여러모로 도움되리라 더욱 확신합니다.

 

그럼, 이상적인 안전일은? 이번에도 마찬가지로 일단은 일주일입니다. 빨리 끝나면 좋겠지만 모를 일 입니다. 따라서 5월 29일까지 인걸로 해두도록 하겠습니다.

 

분명 지금 저 작업을 하면서 또 다시 에러에 부딪히리라 예상됩니다. 하지만, 나름 근 10개월 간 여러 에러들을 헤쳐나가 본 경험이 있으므로 이번에는 지난 번과는 또 달라졌을거라 기대 해 보며 다시 시작해보고자 합니다.

 

현재의 우려사항:

- react-redux 사용 중에, UI 구현에 대한 미지의 영역 (처음 해보네요. 왠지 JS 만으로 store 내에서 어떻게 UI 구현이 어느정도 가능해 보이는데, 이건 섣불리 판단하지 말아야 겠습니다.)

- 지난번 개인 페이지 프로젝트에서 가장 난관에 봉착한 것은 다름아닌 CSS in JS 에 대한 위치 영역이었습니다. 다만 이번에는 Provider 부터 여럿 위치 기억 부분에서도 용이하므로 순탄한 진행을 기대해봅니다.

- 욕심을 내지 말아야 할 것 입니다! 생각보다 지난 프로젝트에서도 기간이 걸린 가장 큰 원흉은 UI 디자인 구현 부분이었습니다. 우선은 연결에 집중하고자 합니다. 그게, 최우선이자 최소 조건이어야만 할테죠.