ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Vue 개발자가 React로 사이트를 만들어 보았다
    카테고리 없음 2020. 1. 9. 19:04

    들어가며

    이용하는 서비스마다 비밀번호 규칙이 달라 오랜만에 접속하는 서비스는 비밀번호를 잊어버려 패스워드를 재설정하는 일이 빈번하게 발생했다.

    명색이 개발자인데 서비스를 이용하는데 불편하면 안 되지 해서 패스워드를 관리하는 사이트를 만들기로 결심했다.

     

    기능 정리

    비밀번호를 관리하는 데 있어 제일 중요한 부분은 보안이다.

    인터넷상에 비밀번호를 그대로 저장하는 것은 위험하니 비밀번호를 암호화 후에 필요할 때마다 복호화하는 기능과

    아무나 내 비밀번호 리스트를 보이면 안 되니 로그인 기능이 필요했다.

     

    필요한 페이지는 로그인, 새로 만들기, 목록, 수정/삭제의 4개의 페이지만 필요했고,

    Database, Auth는 Firebase로 구현했다. 

     

    create-react-app my-password --template typescript

    프로젝트 폴더가 생성되고 구조를 보니 기본만 있다.

    Linter, Prettier는 그렇다 치고, router나, redux, mobx 같은 state 관리 기능은??

    전혀 없다. 필요하면 찾아 설치해야 한다.

    Webpack 설정을 수정하려면,  npm run eject 해야 한다. 다시 되돌릴 수 없다.

    eject 하지 않고서 설정을 바꾸는 방법도 있긴 하지만... 귀.. 찮...ㅇ

     

    페이지별로 기능이 필요 하니 react-router-dom을 설치했고,

    state 관리를 위해 mobx를 설치하고,

    Database, Auth 기능을 위해 Firebase 설치를 마무리로 모든 라이브러리가 준비되었다.

     

    react-router-dom

    페이지별로 Create.tsx, List.tsx, Modify.tsx, Login.tsx로 나누고, Login 페이지를 제외한 나머지는 Private router 컴포넌트를 만들어 사용자 정보가 있는지 검사한 후에 이동하도록 했다.

     

    URL에 포함되어 있는 Query string을 분석하는 기능도 필요했는데,

    Vue의 경우는 router에 Path paramter, query string과 같은 자주 쓰이는 기능이 포함되어 있지만,

    React는 window.location 정보를 읽어와 직접 Parsing 하거나 QS Library를 이용해야 했다.

     

    Firebase - Realtime database

    Google firebase console로 접속하여 Database를 만들고 Auth에 사용자를 추가하고, 

    Firebase에서 제공해 주는 방법대로 Config와 Source code를 복사/붙여 넣기만 했더니, 막히는 것 하나 없이 아주 심플하고, 깔끔하게 완료했다.

     

    Mobx, Hooks

    React 개발자 사이에서 왜 이 2개의 기능에 환호하는지 알 것 같았다.

    사실 비밀번호 관리 사이트를 React로 만들게 된 계기도 Mobx, Hooks의 기능을 사용해보자 하는 취지에서 시작되었다.

     

    오래전 React로 사이트를 만들어 본 적이 있는데,  State 관리와 Component 간 데이터 통신에 많은 불편함이 있었다.

    constructor에 중복되는 변수/함수 정의하는 부분도 내키지 않았고, Class 기반 Component 제작 방식도 재사용률이 떨어진다고 생각했었는데 mobx의 observer, action 등과, hooks의 useState, useEffect 등의 기능이 있어 너무 편리해졌다.

     

    React의 html 속성 중 class 대신 className으로 써야 되는 건 여전히 불편하다. (방법이 없나??)

    마무리

    환경 구성에서는 vue가 더 편리한 부분이 많지만, 이제는 vue와 react는 문법만 다를 뿐 만드는 방법은 똑같다.

    무엇이 더 좋고 나쁘다 보다 개인 취향과 시장 트렌드에 따라 선택하면 된다.

    요즘은 기술 문서도 친절하게 잘 정리되어 있고, Youtube 에도 유료 강좌 못지않은 무료 강의도 많다.

    생태계도 잘 구축되어 있으니 배우려는 의지만 있으면, 어떠한 프레임워크라도 이제 어렵지 않게 할 수 있다.

     

    1년 후

    nodejs 환경에서 작업을 하는 부분에서 크게 차이가 없지만,

    CDN으로 불러와서 사용하는 경우

    vue는 HTML을 Template로 사용하기 때문에 쉽게 사용할 수 있지만,

    react는 react, react-dom 기본 2개와 jsx 문법을 사용한다면, 추가적으로 babel도 불러와야 한다.

    아무리 간단한 프로젝트라도 DOM의 개수가 많아지면 브라우저 랜더링이 느리게 되는데, preact를 사용한다면 조금 더 빨라질 수 있다.

    댓글

uznam8x