13. 배포를 마치고, 되돌아보며

React 를 다루어보고, Next.js 를 바탕으로, 또 어떻게 한 걸음 내딛었다.

 

자바스크립트와 조금 더 친해지고, React 의 생명주기와, Authentication 에 대해 더 깊이 있게 알 수 있었고

 

서버사이드 렌더를 사용해보고, 새 API 들도 사용해보는 좋은 시간이었다.

 

결과적으로는 원하는 대로 기능들을 전부 집어넣기는 했지만, 억지로 끼워넣은 느낌이 강하게 들었다.

 

컴퓨터가 이해할 수 있는 코드는 어느 바보나 다 짤 수 있다. 좋은 프로그래머는 사람이 이해할 수 있는 코드를 짠다. 

- 마틴 파울러

 

 

강하게 머리를 때린 말이었다.

 

내가 넣은 코드들은 하나의 로직을 위해, 여러 컴포넌트를 거친 복잡한(당연히 내 딴에는...) 로직을 거친다.

 

분명 더 깔끔하게 다듬을 수도 있을 것이다. 물론 주석도 잘 활용하면서...

 

 개선해야 할 점을 스스로 몇가지 정리해 보았다.

 

1. 자바스크립트와 React 에 대한 이해도

  당연하지만, 또 당연하게도 더 이해해야 할 부분이다. React는 자바스크립트의 라이브러리이다. 

   결국 기본에 더 충실해야한다.

   그래서, "모던 자바스크립트 Deep Dive" 책을 보며, 조금 더 깊숙하게, 자바스크립트를 파고 있다.

 

2. 디버깅 방법의 필요성

   오류가 참 많이도 발생했다. API, 클라이언트 할 것 없이, 많이도 발생했다.

   그나마 API 의 오류는, throw Error 를 군데군데 던지면서, message 를 담아,

       어디가 잘못되었는지 확인하면서 작성해서, 금방 고쳤다.

    다만, 하루가 지나고 다음 날이 되었을때, 날카롭지 않은 생각으로, 자바스크립트의 코드의 오류를 되돌아보니,

    내가 짰음에도, 이해가 가지 않는 부분이 조금씩 생겼다.

    그래서, "타입스크립트" 를 건드려보고 있다.

 

3. 주석의 부재

 

    주석을 다는 것이 정말 중요하다는 것을 깨달았다.

    한줄씩 써넣은 주석은 며칠이 지나고 다시 코드를 보았을때,촌철살인의 어구와 같이 머리속에 "이해" 를 박아넣었다.

    알아 낸 순간부터, 주석을 넣고 있다.

 

4. 상태관리의 중요성

 

    "랜덤 선택기" 라던가, Notification Modal 을 만들 때라던가, [A - B - C - D ... - F] 처럼 줄줄이 부모에서 자식으로

     이어지는, props drilling 은, 지금이야 조금 복잡한 수준이지만, 10개 20개가 넘어가면 아주 미칠것같았다.

 

    나름의 방법을 생각해 보면, children 의 활용으로 이것을 헤쳐 나갈 수 있다고 생각했다.

 

<Layout> 

import { Fragment } from "react";

import LayoutFooter from "./layout-footer";

import LayoutHeader from "./layout-header";

function Layout(props) {

  return (

    <Fragment>

      <LayoutHeader />

      {props.children}

      <LayoutFooter />

    </Fragment>

  );

}

export default Layout;

 

 

<_app.js>

 

import "../styles/globals.css";

import Layout from "../components/ui/layout/layout";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {

  return (

      <Layout>

        <Component {...pageProps} />

      </Layout>

  );

}

export default MyApp;

 

나의 Layout 에는, props.children, 을 사용하여, 몇단계를 뛰어넘는 props 의 전달을 할 수있다.

 이걸 잘 활용하면, Layout 에, 정보를 전달한 뒤, 모든 하위자식들에게 전달하는 방법을 쓸 수 있다 생각했다.

 

두번째 방법으로는, Context 를 활용하는 방법이 있을 것 같았다.

 createContext 와, useContext 를 사용하여, 모든 앱을 감싸는  ContextProvider 를 이용해, 상태 관리를 하는 방법.

 

세번째 방법으로는 "상태관리 라이브러리" 의 활용이다.

 Redux, mobX, recoil 등을 활용하여, 상태관리를 할 수 있을 것이다.

 일단 Redux 를 배워볼 생각이다.

 

 

갈 길이 멀다.

 

타입스크립트, Redux, 자바스크립트와 React 의 추가적인 공부, 주석 달기

 

그래도 하나씩 차근차근 해가다 보면 또 한 걸음 훅 나아가겠지!

재미있으니까. 그걸로 되었따