React - 웹 프론트엔드 프레임워크

React를 배우기로 하다

Django를 사용해 웹앱을 개발하겠다고 선언한지 어느덧 한 달이 다 되어간다. 시니어 개발자들은 고작 프레임워크 하나 익히는데 이렇게 오랜 시간을 쓴 것에 대해 의아해할 것이다. 핑계 아닌 핑계를 대자면, 우선 나라는 인간 자체가 순수 컴퓨터공학 전공자가 아닌 데다, 웹 개발 경험이 전무하다. (다시 생각해보니 그냥 내가 게을렀던 것 같다.) 장고를 시작한 계기가 파이썬이라는 스크립트 언어를 이용하는 프레임워크기 때문에 상대적으로 익히기 쉽다고 생각했지만, 웹 개발의 첫 단계부터 차근차근 밟아나가는 것이 나에게 가장 필요한 부분이었다. 다행히 구제불능인 나를 도와주는 시니어 개발자가 있었기에 망정이지, 아니었으면 진행은 더욱 더뎠을 것이다.

깔끔한 django admin page

장고를 배우면서 깨달은 점 몇 가지

1. 내가 원하는 웹앱까지 만들려면 생각보다 많은 걸 공부해야 한다.

2. 그럼에도 장고를 쓰는 게 Java + 서블릿, JSP, 스프링 쓰는 것보단 진입장벽이 낮고 개발 속도도 빠른 것 같다.

3. 장고 프로젝트 구조를 알고 나면 이해하기가 훨씬 편해진다.

4. 장고에서 제공하는 admin page가 꽤 깔끔한 편이다.

5. django template language까지 알아야 할 것 같다.

6. Settings의 각 변수가 의미하는 바를 어느 정도는 알고 있어야 할 듯하다.

7. django class를 상속받아 만든 모델 또는 뷰 클래스의 부모 클래스 속성을 활용할 수 있어야 한다.

그럼 장고가 충분히 유용하다는 걸 알았고 사용법도 익혔으니 앱을 만들어볼까. 그런데 몇 가지 문제가 생겼다.

django template engine? SPA?

장고를 이용해 만든 웹페이지 일부

장고에서는 dynamic HTML을 지원하기 위해 'django template engine'을 제공하고 있다. 하지만 동적 웹페이지를 만들기 위해 'jinja2'라는 templating engine도 널리 사용되고 있었기 때문에 django에서는 jinja2를 지원하기 위한 라이브러리도 제공한다. 둘 중 하나를 사용해도 우리가 원하는 앱을 만드는 데는 아무 불편함이 없다. 하지만 최근 프론트엔드 개발 트렌드는 SPA(Single Page Application) 형태이며, 이를 따르는 것이 개발의 편의성과 자기계발 측면에서 더 낫다고 판단했다. 즉, back-end framework로 django를 선택하고, front-end framework로 SPA계열 프레임워크 중 하나를 익혀야 한다는 뜻이다.

React 로고

최근 웹 프론트엔드에는 3대장으로 군림하고 있는 Angular, React, Vue가 있으며, 유물이 되어버린 jQuery도 하나의 선택지다. jQuery는 SPA가 아니니 일찌감치 빼버리고, 나머지 3개 중 하나를 택해야 하는데 React가 가장 나은 선택인 것 같다. Learning Curve를 보면 제일 배우기 쉬운 건 Vue고, 가장 어려운 건 Angular다. 오랫동안(?) 내 성향을 관찰해 온 xx(익명)은 내가 low-level 경험이 있기 때문에 고수준인 angular는 다루기 어려울 것이라 판단했다. 그리고 react는 react native로 확장되어 Facebook, Instagram 앱을 만드는 데도 사용되는 등 활용도가 높기 때문에 충분히 배워볼 만한 프레임워크라고 했다. 여기까지만 들어도 충분히 설득이 되었기 때문에 React를 익히는 것이 다음 과제로 선정되었다.

React: https://reactjs.org/

그럼 수많은 이미지를 어떻게 보관하고 넘겨줄 것인가? 파일 시스템에 넣는 건 좀 아닌 것 같고, cloud storage를 이용하는 것이 대세니 이를 따르기로 한다. Amazon S3에서는 파이썬 사용자를 위해 boto3라는 AWS SDK를 제공하고 있으며, 이를 이용하면 업로드와 다운로드 정도는 간단하게 구현할 수 있다.

boto3를 이용해 Amazon S3에 파일 업로드하는 예제. 쉬워도 너무 쉽다!

AWS boto3: https://boto3.readthedocs.io/en/latest/

대략적인 구조

정리해보면 다음과 같다.

1. React (Front-end)

2. Django (Back-end)

3. AWS s3 (Storage)

웹 개발 경험이 없기 때문에 이런 구조조차 생각하는 것도 한참이 걸렸지만, 재미가 붙으면 금방 하겠지 뭐.

우선 React부터

결론은 Django로 back-end를 개발하는 것뿐 아니라, React를 사용해 front-end를 개발하는 것도 필요하다. React를 익히느라 시간이 좀 더 걸리더라도, 개선된 UI를 제공하여 사용자에게 편의성을 제공해주는 것도 개발자가 할 수 있는 역할 중 하나라는 걸 깨달았다. 다음엔 React를 공부하면서 깨달은 점에 대해 쓸 예정이다. React의 특징과 간단한 사용법 및 내가 만들 앱에서의 용도에 대하여.

장고 압박 메시지들...

그리고 장고를 빨리 익히는데 도움을 주신 시니어 개발자 한 분께 감사드린다. 매일마다 진행상황을 체크해주시고, 취중에도 장고가 즐거운지 물어봐주신 그분 덕에 많은 것을 배울 수 있고 개발동력을 얻을 수 있었다. 전편에도 언급한 적이 있지만, 실력 있는 개발자를 알 수 있었던 것 자체가 올해 나에게 찾아온 큰 행운 중 하나가 아닌가 싶다.