Introduction
안녕하세요, codedbyjst입니다.
시작하는 주제를 뭐로 해야 할지 좀 고민을 해 봤는데요, 우선 이 주제로 시작하는게 맞는 것 같습니다.
'왜 django에서 react로 넘어갔나요?'
사실 기존에 이미 쓰고 있던 프레임워크를 바꾸는 것은 엄청난 결단이 필요한 일입니다.
특히나 기존 프레임워크에 의존도가 높을수록, 프레임워크를 바꾸는 작업은 사실상 처음부터 새로 만들겠다는 거나 마찬가지죠.(실제로 이번 작업에서도 거의 그냥 새로 만들었습니다.)
그만큼 복잡하고 상상만 해도 귀찮은 작업을, 왜 굳이 했을까요?
우선 해당 내용을 설명드리기 위해선 애초에 왜 django로 시작되었는지부터 설명을 드려야 할 것 같네요.
좋습니다! 시작해보죠.
왜 django를 썼나요?
자, 일단 웹 프레임워크에 대한 이야기를 좀 해야 할 것 같은데요.
처음 웹 프레임워크에 입문하려는 개발자에게는 여러가지 선택지가 존재합니다.
vue.js, react.js, Angular, spring같은 유명한 친구들, 지금은 좀 잊혀져가는 ruby on rails같은 친구들,
그리고 물론 django도 있죠!
이렇게나 많은 프레임워크중 왜 저는 하필 django를 선택했을까요?
그 이유들을 설명하기 위해 django의 특성을 조금 알아보도록 하죠.
django 프레임워크의 특성
django 프레임워크는 아래의 특성을 갖고 있습니다.
1. 파이썬 기반입니다!
전 기존에는 풀스택 개발자가 아니였습니다.
그냥 내가 개발한 기능을 유저 친화적으로 배포하려고 하니 눈에 들어온 것이 웹이였을 뿐이죠.
수많은 웹 프레임워크들은 자바스크립트 기반으로 개발되어 있습니다만,
배워놓은 언어라곤 C(C++), Python밖에 없는 저에게는 자바스크립트를 통째로 다시 배우는건 너무 비효율적으로 느껴졌습니다. 특히나 자바스크립트는 겉으로 보기에도 쉬운 언어가 아니거든요!(공포의 asynchronous)
그렇기에 기존 파이썬 개발자로서 django가 가장 먼저 눈에 들어왔습니다.
근데 파이썬 기반 웹 프레임워크가 django만 있냐구요?
Flask란 친구가 있긴 한데, 이 친구는 공식 문서에서도 설명되어 있듯이 마이크로 프레임워크라서
정말 기본적인것만 지원해주거든요.
물론 역으로 말하자면 직접 다 커스텀이 가능하다는 의미이기도 한데... 솔직히 처음 입문하는 사람이 어떻게 알고 그렇게 하겠습니까.
Reddit등에서의 평을 봐도 입문자라면 그냥 django를 써보는게 좋을 거라 해서, flask는 우선 패스!
근데 사실 말이죠,
언어라는건 배우면 되는 겁니다.
만약 django가 엄청나게 복잡한 프레임워크고, 적응하는데 시간이 엄청 걸린다면(어딘가의 spring처럼...읍읍)
차라리 자바스크립트를 배워서 다른 걸 쓰는게 낫지 않겠어요?
그러니까, 가장 중요했던 이유는 바로 다음 이유입니다.
2. Full-Stack-Framework
django는 full-stack-framework입니다.
그 말인즉슨, django 프레임워크 하나 내에서 프론트엔드부터 백엔드까지 완전히 커버된다는 말이죠.
라우팅? 그냥 됩니다.
복잡하게 뭐 고르고 깔고 할 필요 없어요.
db 통신? 그냥 됩니다.
심지어 제공하는 ORM이 너무 훌륭해서 django 외적으로 따로 라이브러리가 출시되서 쓰일 정도로 개발 친화성과 가독성도 훌륭하고, 처음에 db를 만드는 과정까지를 제외하면
'단 한줄의 sql문도 쓸 필요가 없습니다.'
네, 정말이에요. 복잡한 sql 쿼리문? django가 해줄겁니다. 그냥 구현에만 집중하세요.
조건별 렌더링? 당연히 됩니다.
그냥 간단히 if else문으로 특정 html 표시만 조정한다면, template language라는 걸 이용하면(아, 물론 포함되어 있습니다!) 정말 단순히 html만으로도(inline css까지 한다면) '단 한줄의 js 없이도' 꽤나 다채로운 사이트를 제공해줄 수 있습니다.
위에 있는 특징 말고도 그냥 django 자체로 해줄 수 있는 게 엄청 많습니다.
그냥 개발자는 내가 찾는 기능이 있는지 확인하고, 규칙에 맞춰 몇 줄만 적으면 끝입니다!
대부분의 질문에 대해 '네 됩니다. 이렇게 하세요.'라는 stackoverflow의 글들을 보면, 정말 가슴이 웅장해집니다.
위와 같은 특징들로 인해, django는 정말 놀라울정도록 개발 시간을 단축시켜줍니다.
그래서, 아래와 같은 구조의 돈복사닷컴이 탄생했습니다!
근데 그럼 왜 바꿨나요?
좋은 질문입니다. 당연한 의문이죠.
그렇게 django가 좋다면, 굳이 옮겨야 할 이유가 있었을까요?
어... 사실 여러 이유가 있습니다만, 대부분의 이유들은 제가 초보자로서 한 실수들이고(웹개발에 익숙했더라면 피할 수 있었던 문제들),
프레임워크 자체가 직접적인 원인인 이유들은 아래와 같습니다.
1. 느립니다.
🐢
이건 파이썬의 특징이기도 한데요, 느립니다.
db에서 모든 데이터를 가져와 template language처리를 통해 html를 렌더링하기 전까진, 유저는 그냥 response를 대기해야 합니다.
그리고 이 시간이... 생각보다 많이 느립니다. 심지어 전 table 형태로 대부분 정보를 제공하니, 렌더링 시간이 특히나 깁니다.
유저 입장에선 아무런 화면도 안 보이는 시간이 길어지니, 그닥 좋은 유저 경험은 아니었을 겁니다.
(또, 서버 입장에서도 매번 렌더링 연산을 새로 다 해서 줘야하니 힘이 듭니다.)
2. 실시간 갱신에 적합하지 않습니다.
📈
제 사이트의 데이터는 정적이지 않고, 실시간으로 갱신되어지는 데이터들입니다.
근데 django로 개발되고 나면 기본적으론 새로고침을 해야만 새로운 데이터(새롭게 렌더된 html)을 불러올 수 있습니다.
물론 순수 ajax 통신이라던지 부가 app을 이용하면 가능은 합니다만, 제가 보기엔 django스럽지 않은 방식이거든요.(적어도 제가 개발중일땐 마땅한 선택지가 없었습니다)
사실 이러한 사이트는 요새 대세인 spa 방식으로 개발하는게 올바른 선택입니다.
좋아요, 이유들은 알았네요.
기존 프레임워크에 있는 문제점을 파악하고, 다른 언어를 배울 용기도 얻었으니 이제 다른 프레임워크로 옮기면 되겠어요.
그렇다면 왜 하필 굳이 react였어야 했을까요?
React 프레임워크의 특성
앞서 말했듯, 리액트 말고도 선택지는 많습니다.
정말 수많은 인기있는 프레임워크들 중, 저는 왜 react를 선택했을까요?
1. '자바스크립트' 라이브러리!
사실, react.js는 프레임워크가 아닌 라이브러리입니다.(적어도 개발자분들은 그렇게 주장하십니다)
이에 대해선 논쟁이 참 많습니다만(이와 관련된 재밌는 영상이 있습니다!),
여튼 중요한 것은 리액트는 그저 '자바스크립트'로 작동한다는 겁니다.
Angular는 '완전한 프레임워크'로써(자바스크립트계의 django라 보시면 됩니다) 정말 방대한 기능성을 기본적으로 제공하지만, typescipt라는 언어를 강제로 사용해야 합니다.
Vue는 Vue내부적으로 사용하는 문법을 배워야 합니다.
하지만 React는 그저 자바스크립트 라이브러리일 뿐입니다. typescript라는 언어를 배울 필요도, vue문법을 배울 필요도 없습니다.
그냥 자바스크립트만 잘 하면 됩니다.
어차피 웹 개발을 제대로 하기 위해 자바스크립트를 배워야 하는 저에게 있어선 가장 입문하기에 마음 편한 선택지였습니다.
또, 오직 view만을 강조하는 라이브러리이기에 다른 추가적인 기능들은 그냥 내가 더 선호라는 라이브러리를 갖다 쓰면 됩니다.
물론 이것은 node.js(+npm)의 도움과 함께 이루어집니다!
2. Virtual DOM
리액트가 가진 가장 큰 특징이죠. 사실상 이것으로 인해 django가 가졌던 문제 2개가 동시에 해결됩니다.
React는 Virtual DOM이란 개념을 사용하여 오직 변동이 생긴 부분만을 실제 DOM에 적용합니다.
예를 들어, 아래와 같이 bithumb 페이지에서 upbit 페이지로 이동하는 경우를 생각해봅시다.
기존 django에선 어떤 방식으로 동작했을까요?
upbit를 클릭하면 -> 아예 새로운 페이지가 render되어 돌아올때까지 대기하다가(기존화면에서 하얀 화면으로) -> 새로 전부 그려지겠죠.
하지만 React에선 어떠한 깜빡임(화면 새로 그릴때 하얀 화면이 뜨는 것)도 없습니다.
그저 달라진 부분만 연산되어 대입되어지기 때문이죠.
처음 이런 식으로 구현되었을때, 정말 가슴이 뛰었습니다.
기존과 비교해서 너무나 훌륭한 유저 경험이었거든요. 심지어 더 빨랐구요.
이러한 특성으로 인해, React는 SPA를 제작하기에 정말 훌륭한 도구입니다.
3. 앱으로 제작!
사실 django의 단점으로 넣을까 하다가, 애초에 웹 프레임워크한테 이걸 요구하고 단점으로 만드는건 좀 아닌 듯 싶어서 여기에 넣었습니다.
사실 돈복사닷컴이 처음 출시되었을 때도 앱으로 만들라는 말을 정말 많이 들었습니다.
물론 만들 순 있었습니다. 그냥 단순히 웹뷰로 웹페이지를 띄우는 방식으로 만들면, 별 코딩도 필요 없구요.
다만 이렇게 될 경우 ux반응성이 그냥 단순히 웹페이지를 보는 식이라 훌륭하지 못할게 뻔했고, 앱버전을 쓰려는 유저는 더 편안한 ux를 원할텐데 애초에 별로인 ux를 형태만 바꿔 갖다줘도 만족스럽지 못할게 뻔했습니다.
하지만 리액트로 한 번 코드베이스를 만들고 나면, 앱으로 만드는건 정말 쉬워집니다.
리액트 네이티브는 리액트 코드베이스로 유니버셜 앱을 제작할 수 있도록 해줍니다.
웹 앱을 만들고 나면, 안드로이드, ios, windows 앱을 한방에 만들 수 있게 되는 겁니다!(단순한 웹뷰가 아닌, 네이티브 앱으로요!)
아직 돈복사닷컴은 앱버전은 만들어지지 않았습니다만, 앱버전을 만들고자 한다면 큰 코드베이스 변경 없이 만들 수 있다는 점이 정말 좋습니다.(안드로이드,ios,windows 앱 개발을 각각 새로 배우는건... 정말 상상만 해도 어지럽네요.)
Conclusion
이렇게 해서, 왜 django에서 React로 갔는지 알아봤습니다.
돈복사닷컴의 현재 구성도는 아래와 같습니다.
사실 위에 얘기하지 않은 이유들이 몇 가지 더 있습니다.
1. 어차피 API 서버를 제작하여 별도로 운영하려 했기 때문에 backend와 frontend의 분리가 필요했음.
2. 코드들이 물리적으로 분리되어(다른 폴더로 운영) 관리할때 편함.
3. react 특성으로 인해 데이터를 api서버에서 받아오기 전에도 박스 레이아웃 등은 유저가 미리 볼 수 있음.(유저 친화성)
4. 기존 코드가 주석처리가 제대로 되어있지 않아 유지보수 어려운 김에 엎음
과 같은 이유들이 있긴 합니다만... 위에는
왜 굳이 'django'에서 'React'로 갔는가?
를 중심으로 글을 썼습니다.
나머지 이유들에 대해선 기회가 되면 또 글을 쓰도록 할게요.
물론 그렇다고 해서 제가 앞으로 할 모든 프로젝트는 React로 작성한다는 의미가 아닙니다!
django는 나름대로의 메리트가 확실합니다. 개발이 정말 빠르고, 강력한 툴들이 기본적으로 제공되거든요.(django의 admin 패널은 정말 최강입니다.)
제가 보기엔 djnago의 코드가 더 직관성도 좋구요.
빠른 개발이 필요하고, SPA의 특징이 필요한 상황이 아니라면 늘 django를 최우선으로 고려할 것 같습니다.
제 개발 철학은
'상황에 따라 적절한 도구를 이용하자'이기 때문에,
상황에 따라 가장 적합한 도구를 이용하게 될 듯 합니다.
여튼, 긴 글 읽어주셔서 정말 감사합니다!
처음 생각과 달리 글 쓰는게 며칠씩이나 걸려서 좀 당황스럽기도 하고 그렇네요. 역시 뭐든지 처음은 좀 어렵네요.
그래도 계속 쓰다보면 나아지겠죠!
다음 개발일지에서 뵙겠습니다!
'돈복사닷컴 > 개발일지' 카테고리의 다른 글
| DB에 배열을...넣어? (0) | 2022.02.04 |
|---|---|
| 돈복사닷컴, 새롭게 돌아왔습니다! (0) | 2022.01.15 |