00:00:00파이썬의 열혈 팬이신가요? 그러니까, 오로지 파이썬 코드로만
00:00:05모든 걸 해결하고 싶은 그런 분들 말이죠. 만약 그렇다면 딱 맞는 도구가 있습니다. 바로
00:00:11Reflex라는 프레임워크인데요, 풀스택 파이썬 코드를 실제 서비스 가능한
00:00:17웹 애플리케이션으로 전환할 때 발생하는 마찰과 복잡함을 해결하는 것이 목표입니다. 이번 영상에서는
00:00:22Reflex가 무엇인지, 어떻게 작동하는지, 그리고 왜 이렇게 화제인지 알아보겠습니다.
00:00:30Reflex가 해결하려는 가장 큰 문제는 파이썬 개발자가 자신의 코드를 위한
00:00:36기능적인 웹 인터페이스를 만들기 위해 자바스크립트, React, 라우팅, 번들러 등 완전히 다른 스택을 배워야 한다는 점입니다.
00:00:43Reflex를 사용하면 100% 순수 파이썬만으로 풀스택 앱을 빌드할 수 있으므로,
00:00:50문맥 전환 없이 전체 스택에 하나의 언어만 사용하는 데 집중할 수 있습니다.
00:00:56출시 이후 개발자들이 이 프레임워크로 100만 개 이상의 앱을 빌드했으며,
00:01:03포춘 500대 기업의 30%가 내부 툴 제작에 이를 사용하고 있다고 주장합니다.
00:01:10최근에는 AI 분야에도 힘을 쏟고 있는데, 'Reflex Build'라는
00:01:15도구를 출시하여 단 한 줄의 프롬프트만으로 앱을 뚝딱 만들어낼 수 있게 했습니다.
00:01:21또한 다른 SDK 및 도구와의 통합을 지원하여 Databricks, Okta, Stripe, AWS 등
00:01:26유명 서비스에 앱을 쉽게 연결할 수 있습니다. 정말 인상적으로 들리는데요,
00:01:34실제로 어떻게 작동하는지 직접 코드를 작성하며 확인해 보겠습니다.
00:01:40우선 'ReflexTest'라는 새 디렉토리를 만들고 안으로 이동합니다. 그다음,
00:01:44문서에 나온 대로 세 가지 명령어를 실행해 Reflex 프로젝트를 시작할 수 있습니다.
00:01:48먼저 'pip install reflex'를 실행한 뒤 'reflex init'을 입력합니다. 그러면
00:01:53준비된 템플릿 중 하나를 선택할 수 있는데, 이번 데모에서는 간단하게
00:01:57'blank reflex app' 옵션을 선택하겠습니다. 완료되면 코드 에디터로 프로젝트를 엽니다.
00:02:02'reflex_test' 폴더를 열어보면 'reflex_test.py' 파일에 앱 전체가 들어있는 것을 볼 수 있습니다.
00:02:09RX 컴포넌트 섹션과 state 클래스가 보이네요. 터미널에서 'reflex run'을 실행해(영상 자막 오기: reflex build)
00:02:15앱을 구동하면 3000번 포트에서 앱이 실행됩니다. 브라우저에서 결과를 확인해 보죠.
00:02:20이제 Reflex가 상태를 어떻게 관리하는지 보겠습니다. 간단한 count 변수를 추가하는 것부터 시작하죠.
00:02:25이 값을 변경하려면 해당 기능을 수행할 함수도 정의해야 합니다.
00:02:29count 변수 아래에 count를 1씩 증가시키는 increment 함수를 정의합니다.
00:02:34이때 위에 '@rx.event' 데코레이터를 추가하는 것이 권장되는데, 이는 정적 타입 체크를 가능하게 하고
00:02:39이벤트 핸들러가 올바른 개수와 타입의 인수를 받도록 보장합니다. 그다음
00:02:44RX 컴포넌트의 return 문에 간단한 버튼을 추가합니다. 텍스트 필드에 count를 표시하고
00:02:48클릭 시 increment 함수를 트리거할 것입니다. Reflex는 핫 리로딩을 지원하므로,
00:02:53파일을 저장하고 브라우저를 열면 누를 때마다 값이 증가하는 카운트 버튼이 보입니다.
00:02:58이제 좀 더 흥미로운 걸 해보죠. 상태(state)에 아이템 배열을 만들어 보겠습니다.
00:03:02이론적으로는 이런 식으로 인라인 for 루프를 사용해 아이템들을 리스트로 렌더링할 수 있어야 합니다.
00:03:08하지만 이 값은 컴파일 타임에 알 수 없기 때문에 작동하지 않습니다.
00:03:13Reflex의 작동 방식은 앱을 실행할 때 프론트엔드가 브라우저에서 실행되는 자바스크립트 코드로 컴파일되는데,
00:03:18이를 Reflex 용어로 '컴파일 타임'이라고 합니다. 백엔드는 파이썬으로 유지되며
00:03:23앱이 실행되는 동안 서버에서 작동하는데, 이를 '런타임'이라고 부릅니다.
00:03:27따라서 컴포넌트 렌더링 블록 안에서는 순수 파이썬 for 루프를 쓸 수 없지만,
00:03:32렌더링 블록 밖에서는 순수 파이썬 연산이 가능합니다. 그럼 컴포넌트 블록 안에서 아이템을 어떻게 반복할까요?
00:03:37이런 경우에는 아이템을 렌더링할 간단한 'render_item' 함수를 정의해야 합니다.
00:03:42그러고 나서 컴포넌트 렌더링 블록에서 'rx.foreach' 함수를 사용해 루프를 돌립니다.
00:03:47이제 앱에 아이템들이 제대로 렌더링되는 것을 볼 수 있습니다. 조건부 렌더링도 마찬가지입니다.
00:03:53return 블록 안에서 이런 식으로 일반적인 if-else 문을 사용할 수 없습니다.
00:03:58대신 'rx.cond' 함수를 사용해야 하죠. 이제 버튼을 5번 넘게 클릭하면
00:04:02앱에 텍스트가 나타나는 것을 확인할 수 있습니다. 마지막으로 데이터를 가져와서 렌더링하는 방법을 보겠습니다.
00:04:08이번 데모에서는 'random useless facts API'에서 무작위 사실을 가져와 텍스트 박스에 표시해 보죠.
00:04:12먼저 데이터 로딩 중임을 나타낼 불리언 변수와 사실 내용을 담을 빈 문자열을 추가합니다.
00:04:17그다음 비동기 데이터 페칭 함수를 정의하여 데이터 로딩 상태를 true로 설정합니다.
00:04:22그리고 HTTPX 라이브러리를 사용해 무작위 사실을 가져와 'fact' 상태 변수에 저장합니다.
00:04:27데이터가 실시간으로 불러와지는 것을 볼 수 있도록 'asyncio'로 1초의 지연 시간을 주겠습니다.
00:04:33작업이 끝나면 로딩 불리언 값을 다시 false로 설정합니다. 여기서 'yield' 연산을 사용한 것에 주목하세요.
00:04:38이벤트 핸들러에서 UI를 여러 번 업데이트하고 싶을 때마다 yield를 사용하여
00:04:43렌더러에 업데이트 신호를 보낼 수 있습니다. 이 경우 로딩 상태가 바뀌자마자
00:04:48그 변화가 UI에 즉각 반영되기를 원하는 것이죠. 상단에 HTTPX와 asyncio 임포트도 잊지 마세요.
00:04:52마지막으로 렌더링 함수에서 'rx.cond'를 사용해 현재 상태에 따라
00:04:57로딩 스피너나 데이터를 보여줍니다. 페이지가 로드될 때마다 이 함수가 실행되게 하려면
00:05:03페이지 로드 시 데이터 페칭 함수를 트리거하는 데코레이터를 컴포넌트에 추가해야 합니다.
00:05:08이제 페이지를 새로고침하면 무작위 사실이 로드되어 화면에 표시되는 것을 볼 수 있습니다.
00:05:12마지막으로 '.web' 폴더를 살펴보겠습니다. 보시다시피 우리가 작성한 모든 코드는
00:05:18내부적으로 Vite와 Tailwind를 사용하는 React 앱으로 컴파일되어 렌더링됩니다.
00:05:22심지어 경로 처리를 위해 React Router까지 사용하고 있네요. 솔직히 말해서
00:05:27이걸 본 순간 조금 실망했습니다. 커스텀 자바스크립트 컴파일러나 독창적인 무언가를 만들었을 줄 알았거든요.
00:05:33하지만 이건 Reflex가 결국 React 위에 씌워진 또 다른 추상화 계층일 뿐이라는 뜻입니다.
00:05:38그래서 Reflex에 대해 복합적인 감정이 듭니다. 한편으로는 모든 것을 순수 파이썬으로
00:05:42작성할 수 있는 단일 파이썬 풀스택 프레임워크라는 아이디어는 정말 멋집니다.
00:05:47하지만 내부적으로는 네이티브 파이썬을 쓰는 게 아니라 React 앱을 감싸고 있을 뿐이라는 점이 아쉽습니다.
00:05:53이로 인해 새로운 아키텍처를 다시 익혀야 하고 Reflex의 상태 관리 방식을 이해해야 하므로 더 복잡해질 수 있습니다.
00:05:59발생할 수 있는 수많은 예외 케이스를 생각하면, 차라리 검증되고 탄탄한 React를 쓰는 게 나을 수도 있죠.
00:06:05그래서 제가 파이썬 백엔드 프로젝트를 만든다면, 프론트엔드에는 여전히 자바스크립트 프레임워크를 쓸 것 같습니다.
00:06:11Reflex는 저를 완전히 '파이썬 풀스택'으로 전향시키기엔 부족했습니다. 물론 이건 제 개인적인 생각일 뿐입니다.
00:06:16여러분은 Reflex에 대해 어떻게 생각하시나요? 이런 방식의 풀스택 파이썬 프레임워크 아이디어가 마음에 드시나요?
00:06:22여러분의 의견이 정말 궁금합니다. 영상이 즐거우셨다면 영상 하단의
00:06:28좋아요 버튼을 꾹 눌러주세요. 채널 구독도 잊지 마시고요.
00:06:34지금까지 Better Stack의 Andris였고, 다음 영상에서 뵙겠습니다.
00:06:39I'm really curious to know what you think. And folks, if you enjoyed this video, be sure to let
00:06:44us know by smashing that like button underneath the video. And don't forget to subscribe to our channel.
00:06:50This has been Andris from better stack and I will see you in the next videos.