더블리의 12층

UI개발할때 항상 내부의 기능과 연결이 되어있으면 코드의 유지보수가 어려운데 storybook을 사용하면 isolation이 되서 UI만 따로 구성할 수 있는 장점이 있다. UI컴포넌트들을 생성하고, 그 컴포넌트들을 사용하면 끝! 

동작하는 방식은 yarn으로 설치를 하고 나만의 stroybook을 로컬에 띄우고 UI를 컴포넌트 별로 생성하고 관리하면 된다. 스토리북을 처음에 동작시키면 아래와 같이 브라우저에 표시가 되는데

내가 만약 UI 컴포넌트 별로 여러개의 UI를 만든다면 아래와 같이 구성이 된다. story에는 내가 작성한 코드들이 들어있고, 버튼을 누를때 action이 있다면 actions에 표시가 된다. 

https://storybook.js.org/docs/basics/introduction/

스토리북에 대해서 학습하고 싶으면 아래 튜토리얼을 따라해보자.

https://www.learnstorybook.com/

Airbnb에서도 다음과 같이 자신만의 stroybook을 만들어서 운영하고 있다. 

https://airbnb.io/react-dates/?path=/story/drp-calendar-props--open-up

이렇게 UI 컴포넌트 별로 생성해서 프로젝트에서의 의존성을 줄이는게 좋을것 같다는 생각!

웹 초보인 나로서는 화면과 화면 이동, 그리고 화면의 전환 등 Routing에 대한 어려움이 있다. 텍스트를 눌러서 다른 페이지로 이동하거나 메뉴를 만들어서 메뉴를 클릭하면 다른 페이지를 이동하거나... 별거 아닌것 같은데 눌렀을때 404 뜨거나 하면 그만큼 열불나는게 없다! 이해하려고 하는 시간이 필요함에도 우리는 이해하지 않고 그냥... 꾸역꾸역 하나씩 찍기를 시작하지.. 그래서 좋은 사이트!!! 

https://reacttraining.com/react-router/web/example/auth-workflow

Reacttraining.com에 들어가서 react-router에 대해서 튜토리얼이 정리가 아~주 잘되어있다. 로그인을 했을때 nested, redicrect, Route config 등등 10가지 정도 넘게 방법론에 대해서 코드와 함께 제공되고 있다. 코드도 샌드박스로 제공하고 있어서 코드와 화면을 바로바로 수정해가면서 볼 수 있으니 ... 이건 뭐 거저 주는 느낌? BasicURL ParametersNestingRedirects (Auth)Custom LinkPreventing TransitionsNo Match (404)Recursive PathsSidebarAnimated TransitionsRoute ConfigModal GalleryStaticRouter ContextQuery Parameters

이렇게 예제들을 보면서 코드를 구성해보자~ 일단 무작정 만드는게 좋다. 백날 이해하려고 글을 읽어도... 글만 읽게 되니까! router에 대한 이해는 reacttraining에서 해야지!

항상 웹페이지, 웹앱을 만들고 싶다는 생각이 컸었는데, 이제는 만들수 있을것 같아서 이제서야 시작한다.!! 사람들에게 직접적인 서비스를 할 수 있다고, 그리고 꼭 필요하다고 생각하기 때문에 웹 앱을 만드는 것은 정말 매력적이라고 생각한다. 웹앱과 사실 웹페이지는 다르지만.. 요즘에는 React를 알고 있으면 React-Native를 통해서 ios, android 의 웹앱을 만들 수 있다! React-natvie를 하기 전에 React를 반드시 알아야 할 수 있기 때문에 React를 먼저 시작해볼까 한다. 

React는 facebook에서 만들었고, Angular랑 많이 고민하던데 고민하는 시간에 React를 해보기로한다! 역시 튜토리얼도 너무 잘되어있어서 한번 쭉 읽어보니 그래도 대충 크게 어떻게 학습을 해야할지 윤곽이 잡혔다. 아래 튜토리얼을 무조건 보길 바란다. 무작정 개발하기 보다는 어떻게 앱을 만들고 배포는 어떻게 하는지 환경설정은 어떻게 하는지 등등에 대해서 나와 있어서 한번 꼭 읽어보면 좋은것 같다. 

https://create-react-app.dev/

예전에 봤을때는 이런게 없었는데 이제 이렇게 제공! 보다보면 중간중간에 유용한 패키지나 IDE에 대해서 소개도 하니 한번은 꼭 읽어보는게 좋을듯! 안에 나이트 모드가 있는데, 이런 섬세한 기능까지 제공!

react 공홈에 가면 튜토리얼이 있지만 그 튜토리얼 보다는 위에 튜토리얼이 수백배 나으니 일단 위에 create-react-app.dev를 먼저 살펴보자! 그래도 공홈은 한번 방문..해야하나..

https://reactjs.org/