인프런 커뮤니티 질문&답변
작성한 질문수
React와 Django-템플릿, HTMX 간의 관계 및 역할에 대한 질문
작성
·
95
0
안녕하세요,
먼저 자세하게 django에 대해 강의해주셔서 감사합니다.
강의가 제게 다소 어렵고 양이 방대하여 핵심을 놓치는 부분이 있어 저의 필요와 목적에 의한 질문을 드리게 됐습니다.
핵심적으로 드리고 싶은 질문은 다음과 같습니다.
리액트와 django의 관계
(리액트 컴포넌트가 적합한 부분, 리액트 컴포넌트에서 장고 템플릿+폼, 뷰와 모델, DB까지의 흐름)리액트 없이 django 기능만 이용하여 datagrid(view), datatable 형식을 사용하는 것이 좋은 방법인지에 대한 강의자님의 의견
django의 템플릿 문법으로 작성된 기본적인 디자인 구성이 된 웹 템플릿을 구하거나 접근하는 방법
웹 개발 숙련도가 매우 미숙하고 질문이 모호해 우선 양해 말씀 구합니다. 상기 질문에 대해서 배경을 부연 설명드립니다.
[1번 관련 질의 배경]
리액트가 통합된 프로젝트 실습이 todolist 정도인 것 같아서 블로그나 포토로그 등의 앞선 장고 프로젝트에 이를 응용하는게 어렵다고 느껴졌습니다. 혹시 리액트와 django 관계에 대해 조금 더 자세하게 참고할 만한 강의를 짚어주시거나 소스를 알려주실 수 있으실까요?
[2번 관련 질의 배경]
data-grid / data-table / spreadsheet (표 형태의 데이터를 읽고 수정하는 방식) 형태를 사용하고자 여러 파이썬/장고 라이브러리를 찾아봤으나 pool이 매우 좁고 예시도 매우 부족해 보였습니다. 그러나 react, js 중심으로 프론트 사이드를 구축할 경우 선택지가 매우 다양하고 상태 관리가 안정적일 수 있다는 생각이 들었습니다. (hansongrid, ag grid, MUI datagrid, react datagrid, react spreadsheet grid ...)
그리드 어플리케이션 구축은 어떻게 진행하면 좋을까요?
[3번 관련 질의 배경]
디자인에 소요되는 리소스 측면에서도 장고의 템플릿 문법 보다는 리액트 프레임워크에 적합한 웹사이트 디자인도 더 풍부하고 다양한 것 같습니다. CSS에 상당히 부담을 느껴서 여기에 들이는 노를 줄이고 싶은데 혹시 참고할 만한 사이트나 추천해주시는 방법이 있으실까요?
********답변에 앞서 미리 감사드립니다!********
답변 2
1
안녕하세요. 질문에 감사드립니다. :-)
#1. 리액트/장고 연계에 대한 이해도를 높이기 위해서, 포토로그에 대한 리액트 버전은 준비해서 본 강의를 통해 조만간 공개해볼 수 있도록 하겠습니다. 요청해주셔서 감사합니다. :-)
#2. Grid 솔루션은 웹 프론트엔드 영역이니까, 파이썬/장고 라이브러리로서 찾아보시기 보다, 파이썬/장고 키워드를 빼시고 찾아보시는 것이 더 정확할 것입니다. 리액트는 UI 라이브러리일 뿐이구요. 리액트를 쓴다고 해서 반드시 SPA로 웹페이지를 구현해야하는 것은 아닙니다. 리액트 전용으로 제공되는 라이브러리가 있더라도, 이를 빌드해서 일반 웹페이지 내에 참조토록 팩키징할 수도 있습니다. 혹은 리액트 구현이 필요한 페이지만 리액트 SPA로 구현해볼 수 있습니다.
살펴보니 hansongrid 라이브러리는 plain js 버전을 지원하네요. 이처럼 plain js를 지원하지 않는 라이브러리도 이를 지원토록 팩키징을 해볼 수 있습니다.
장고 컴포넌트로 grid 등을 팩키징을 해서 라이브러리 만들어 공개하면 좋겠다는 생각이 드네요.
이러한 활용에 대해서도 하나씩 차근차근 강의를 통해서 살펴보려 합니다. 이렇게 질문을 남겨주셨으니, 해당 부분은 우선순위를 높여 준비해보겠습니다.
#3. 다양한 CSS 적용 부분은 tailwind css가 요즘 많이 사용되는 듯 보입니다. 다양한 컴포넌트 예시도 있구요. 리액트는 웹 UI 라이브러리일 뿐 CSS 적용과는 별개이기에, 리액트와 디자인 리소스 활용과는 별개입니다.
tailwind css 컴포넌트 예시를 보시면 html 버전과 리액트 버전을 같이 보여주고 있습니다.
https://daisyui.com/components/alert/
리액트로도 컴포넌트를 만들 수 있고, 최근 공개된 django-cotton 라이브러리로도 손쉽게 컴포넌트를 만들 수 있는 데요. 저는 tailwind css와 django-cotton 기반으로 다양한 컴포넌트를 만들어 공개해볼 계획을 가지고 있습니다. 제가 개발중인 django-pyhub-ai 라이브러리에서도 tailwind css와 django-cotton를 활발히 활용하고 있습니다.
더군다나 요즘 ChatGPT나 Cursor 등의 다양한 AI 툴들이 코드 생성 기능이 좋은데요. tailwind css 기반으로 코드를 생성해달라고 하면, 바로 쓸 수 있을 정도로 생성을 잘 해줍니다. "tailwind css 기반으로 username/password 로그인 폼 HTML 코드를 생성해줘." 라고 물어보시고 생성되는 코드를 확인해보세요.
강의에서는 이미 bootstrap5를 다룬 상황에서 tailwind css 까지 다루면 혼란이 있을 듯 하여 다루진 않았었는 데요. 이 역시 강의에 추가할 계획입니다.
제 답변이 충분했을 지 모르겠습니다. 살펴보시고 더 궁금한 부분 있으시면 추가 질문 남겨주세요.
질답으로 이해도를 더욱 높여가보시며 문제를 해결해보시죠.
예를 들어 장고 내에서의 tailwind css 설정법에 대해서 질문 남겨주셔도 좋습니다. 개발 목적으로 간단하게는 템플릿 상단에 <script src="//cdn.tailwindcss.com"></script> 만 추가해주셔도 기본 동작은 합니다.
깊은 질문에 정말 정말 감사드립니다.
질문주신 부분을 해결해가실 수 있도록 열심히 준비해보겠습니다.
화이팅입니다!!
0
안녕하세요, 인프런 AI 인턴입니다. 이영송님.
질문이 매우 구체적이어서 이해하는 데 도움이 되었습니다. 각 질문에 대해 가능한 도움을 드리겠습니다.
리액트와 Django의 관계
Django는 서버 사이드 웹 프레임워크로, 데이터베이스와의 상호작용 및 서버 측 로직을 처리하는 데 강점을 가지고 있습니다. 반면, React는 사용자 인터페이스를 구축하기 위한 프론트엔드 라이브러리로, 클라이언트 측에서의 동적인 UI를 구축하는 데 적합합니다. React를 Django와 함께 사용하는 경우, Django가 백엔드에서 데이터와 비즈니스 로직을 처리하고, React가 프론트엔드에서 사용자와의 상호작용을 처리하게 됩니다. 더 나아가 Django의 REST API 및 DRF(Django Rest Framework)를 활용하면 React와의 비동기 데이터 통신도 원활히 할 수 있습니다. Django 템플릿 대신 React 컴포넌트를 사용하는 경우도 많으며, 이는 SPA(Single Page Application) 작성 시 특히 유용합니다.리액트 없이 Django만으로 data-grid 사용
데이터 그리드 또는 데이터 테이블을 Django에서 직접 구현하려면 JavaScript, jQuery 플러그인, 또는 Django 기반의 라이브러리를 사용할 수 있습니다. 하지만, React나 다른 프론트엔드 프레임워크를 사용하는 것이 데이터 상태 관리나 사용자 인터페이스 측면에서 더 유리할 수 있습니다. 예를 들어, DataTables는 jQuery를 사용하지만, Django 템플릿과 통합하여 활용할 수 있습니다. React의 경우, 더 세밀하고 복잡한 UI를 구성하는 데 강점이 있어 React 기반 라이브러리를 사용하는 것이 더 나을 수 있습니다.Django의 웹 템플릿 디자인 구하기
Django 템플릿 문법으로 작성된 기본 디자인을 구하려면 Creative Tim, BootstrapMade와 같은 무료 템플릿 사이트를 이용할 수 있습니다. Django와 함께 사용할 수 있는 다양한 Bootstrap 템플릿이 제공되며, 이를 참고하여 CSS 작업 시간을 절약할 수 있습니다. 추가적으로, Django Template Projects과 같은 사이트에서 기본적인 템플릿을 다운로드 받고 커스터마이즈하는 것도 좋은 방법입니다.
관련 게시물에는 아래를 참고해보세요:
- template vs react,vue ??? - Django와 React나 Vue를 비교하는 질문에 대해 다루고 있습니다.
- django, next.js 관련 질문 있습니다. - Django와 Next.js, React의 결합에 대해 논의되는 게시물입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
안녕하세요 강의자님!
빠른 답변과 상세한 내용에 대해 감사드립니다.
제 질문이 다소 모호하고 추상적이었는데 핵심적인 부분을 잘 짚어주셔서 답변 해주신 내용을 참고하여 프로젝트를 진행해볼 수 있을 것 같습니다.
리액트, 그리드 솔루션과 장고의 관계에 대해서는 아직도 다소 어렵다고 느껴져서 실제 진행해보며 어려운 부분들이 생길 때 코드와 함께 질문드리거나 답변 주신 내용을 다시 확인해보겠습니다!
첨언하여 말씀해주신 추가 컨텐츠를 다루는 강의가 나오게 된다면 무조건적으로 수강할 것 같습니다ㅎㅎ
파이썬과 장고에 대한 높은 수준의 통합적인 강의 제공해주셔서 다시 한 번 감사드립니다!