인프런 커뮤니티 질문&답변

yezi9733님의 프로필 이미지
yezi9733

작성한 질문수

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

django, next.js 관련 질문 있습니다.

해결된 질문

작성

·

247

0

안녕하세요 강의 잘 보고 있습니다.
강의가 업데이트 될 때까지 django에 대해서 좀 더 연습해보려고 개인프로젝트 준비중에 앞서 질문드릴게 있습니다.

1. django를 개발할때 유용한 라이브러리들을 추천 받고 싶습니다.

매번 코드 변경 후 브라우저를 새로고침 해야하는게 너무 불편해서 개선할 방법을 찾다가 django-browser-reload 라는 템플릿 내용이 변경될 때 마다 자동으로 브라우저를 새로고침 해주는 라이브러리를 알게되어서 만족하며 사용하고 있습니다.

강의에서 소개해주신 라이브러리들도 굉장히 편하더라고요 물론 사용할 때는 사용법도 익혀야 한다는 점이 있지만 그런 라이브러리와 달리 django-browser-reload 처럼 간단하고 개발자의 편의성을 개선할 수 있는 라이브러리가 또 무엇이 있는지 궁금합니다.

crispy-form은 편리합니다. 다만 html과 달리 forms에서는 css_class를 사용하여 레이아웃을 지정할 때 어떠한 css class가 존재하는지 알려주지 않는다는것이 아쉽네요. 개선할 방법이 있을까요?

Javascript의 prettier처럼 django templates에서 html 파일을 저장하는 액션이 발생할 때 자동으로 코드 정리 할 수 있는 포멧터도 있을까요?


2. 이후에 다룰 섹션 16 SPA 하이브리드 방식으로 장고/리액트 중심의 서비스 만들기에서 입력 form은 django form을 사용하여 작성해서 사용자가 form을 사용 할 때에만 django 페이지로 이동하고 그 이외에 디자인을 세심하게 해야 되는 페이지들은 drf + next.js로 다루게 되는건가요?

React 기반 프레임워크에서 form 유효성 검사를 하는것은 생각보다 까다롭더라고요.

그런데 django form을 사용하게되면 그 부분을 빠르게 처리 할 수 있고 나머지 페이지들에 대해선 django component를 사용해서 템플릿을 구성하는거 보다는 React 기반에서 컴포넌트를 구성해서 페이지를 렌더링 하는게 더 편할거 같다고 생각했습니다.

만약 해당 방법대로 프로젝트를 구성하게 된다면 장점도 있겠지만 단점도 존재하게 될텐데 단점들은 무엇이 있을까요?

답변 1

0

이진석님의 프로필 이미지
이진석
지식공유자

안녕하세요.

django-silk 라이브러리가 페이지 프로파일링하기에 편리합니다. 이 외에도 https://github.com/orgs/jazzband/repositorieshttps://github.com/adamchainz/?tab=repositories 에서 다양한 장고 라이브러리를 만들어서 공유하고 있으니, 쭈욱 살펴보시는 것을 추천드립니다. 그리고 https://django.wtf/ 사이트에서 깃허브 스타 수 기준으로 핫한 장고 라이브러리 리스트도 제공되니 같이 살펴보세요.

파이썬 파일 내에서 CSS 클래스에 대한 자동완성 부분은 IDE에 추가 설정을 해볼 수도 있지 않을까 싶은데요. 아직 잘 모르겠습니다. 살펴보고 방법을 찾게되면 공유드리겠습니다.

파이참 프로페셔널에서는 django를 공식지원하니깐요. 장고 템플릿에 대해서도 reformat을 지원해줍니다. Reformat Code 메뉴는 상단 Code 메뉴에 있구요. Settings -> Tools -> Actions on Save 메뉴에서 "Reformat code" 옵션이 있습니다. "Reformat code" 옵션을 체크해주시면, 장고 템플릿 등에서 파일 저장 시에 Reformat code도 같이 수행됩니다.

하이브리드 방식에서 장고와 리액트 간의 비중은 서비스에서 정하기 나름일텐데요. 강의에서는 장고 위주로 페이지를 운영하면서, 장고 템플릿 내에서 리액트 컴포넌트를 사용하구요. 특정 페이지를 Next.js를 통해서 서빙하면서 장고 인증 세션을 같이 사용하는 방법에 대해서 다룰 예정입니다. // 리액트와 같은 프론트엔드 기술들의 유행들은 자주 바뀌니깐요. Next.js 유행도 언제 바뀔 지 모릅니다. 장고로 중심을 잡아주고, 장고 중심으로 서비스를 개발하는 방법을 다루려 합니다. 필요에 따라 다른 프론트엔드 라이브러리와 섞어서 개발을 할 수도 있겠죠.

말씀하신 것처럼, 장고 폼을 사용하고 그 외 조회용 페이지에서 리액트를 사용하는 접근도 좋은 접근입니다. 장단점은 어떤 입장에서 보느냐에 따라 다를기에, 저는 선택의 문제일 뿐이라고 생각하거든요. 그래서 마땅히 단점이라고 생각되는 부분은 잘 모르겠습니다.

그런데 장고 폼에서는 각 필드값이 변경될 때의 유효성 검사에 대해서는 좀 더 보완이 필요하거든요. 장고와 리액트를 보다 긴밀하고 간결하게 연계하여 폼 처리를 하는 부분에 대해서는 저도 아직 다방면으로 연구 중입니다. 이 부분에 대한 연구 때문에 본 강의 준비에 더욱 시간이 걸렸었는데요. 일단 강의를 완료지은 후에, 추가 컨텐츠로 제공해드릴 예정입니다.

여러 좋은 질문들 주셔서 감사드립니다.

댓글로 다양한 의견 나눠보면 좋겠네요. 👍

 

yezi9733님의 프로필 이미지
yezi9733
질문자

답변 감사드립니다. 덕분에 궁금증이 해결되었네요.

전에 파이참에서 Actions on Save의 Reformat code를 체크해도 작동하지 않길래 원래 지원하지 않나 싶어서 검색하다 파이썬 사랑방에 게시된 글을 보고 djlint를 사용했었습니다.

이번 답변을 통해서 파이참에서 해당 기능을 제공한다는것을 확인한 뒤 .idea 파일을 삭제하고 Reformat code 다시 적용해보니 djlint를 사용하지 않아도 잘 작동하네요.

제공된 링크 덕분에 여러 라이브러리를 확인할 수 있었습니다. 감사합니다.

django-ninja-extra라는 API 관련 편리한 라이브러리가 있던데 django, drf 기본에 대해서 적당히 익숙해지면 한번 사용해봐야겠습니다.

장고에서 세션 인증을 적용하게 되면 소셜 로그인도 장고 단에서 처리하기 편하게 되겠군요. 장고 form과 세션 인증을 활용한 방법을 덕분에 여러 시행착오를 거칠 일 없이 강의에서 쉽게 배울 수 있겠네요.

현재 연습용 프로젝트는 무거운 bootstrap 대신 django-tailwind를 사용하여 구성했는데 파이썬 사랑방도 django-tailwind를 사용하셨더라고요. 여기서 몇 가지 질문이 있습니다.

1. tailwind를 사용하면 대부분 인라인으로 작성하게 될 텐데 유지보수는 어떻게 하시나요?

2. 단순히 제목과 이미지만 올리는 게 아니라 마크다운으로 게시글을 편집할 수 있으면 좋을 텐데 직접 구현하기에는 난이도가 높아 보입니다. 파이썬 사랑방을 만드실 때는 어떤 라이브러리를 사용하신 건가요?

3. 이후에 개인 블로그를 직접 만들어서 학습내용을 정리하기 위해 사용해보려고 합니다. django + react로 gitblog를 만드는것도 가능할까요?

이진석님의 프로필 이미지
이진석
지식공유자

1. 저는 컴포넌트 단위로 관리하고 있는 데요. 예를 들어 Submit 버튼도 JustOneClickableSubmit 같이 커스텀 컴포넌트를 만들어서, 컴포넌트 단위로 field_classes 속성을 통해 tailwind css를 지정합니다. FormHelper에서의 tailwind css 지정은 gap 등 간단한 레이아웃 조정 클래스만 사용하고 있습니다. // 장고가 아니더라도 tailwind css는 컴포넌트 단위로 개발하는 것이 유지보수하기 좋은 듯 합니다.

2. pyhub.kr 에서는 simple-mde 라이브러리를 crispy forms를 통해서 사용할 수 있도록, SimpleMdeWrapper 레이아웃 파이썬 클래스를 만들었구요. simple-mde 옵션도 모두 래퍼 클래스를 통해 지정하고 있습니다. // simple-mde 에서는 이미지 붙여넣기 기능도 지원하거든요. 해당 이벤트 핸들러도 처리해서 장고 단에서 이미지를 업로드받구요. JSON 응답으로 이미지명과 이미지 주소를 하여, simple-mde 에디터에서 보여줍니다. // 문자열 필드를 FormHelper로 SimpleMdeWrapper 레이아웃을 적용하면, 그 즉시 마크다운 에디터가 적용되고 있습니다.

3. 모든 결정에는 트레이프 오프가 있을 뿐, 어떤 기술 스택으로든 모두 개발이 가능합니다.

화이팅입니다. :-)

 

yezi9733님의 프로필 이미지
yezi9733
질문자

tailwind를 사용하면 crispy_form으로 form 작성시 텍스들도 전부 dark모드에 맞게끔 css를 적용해줘야하는점이 있네요.

답변 감사드립니다! 참고하도록 하겠습니다.

yezi9733님의 프로필 이미지
yezi9733

작성한 질문수

질문하기