회원사 Item Introduction page 만들기 시리즈 III - Django Template Tags

 지난 포스팅에서 back office를 구성하기 위한 로그인 기능 구현을 진행했습니다.

 이제 원하는 방식의 페이지 표출을 위해 프론트엔드를 슬슬 만질 차례가 되었습니다.

 

 사실 개인적으로 재밌기는 백엔드 코드 만질 때가 제일 재미있기는 합니다만, 어찌되었든 End-User는 Back-end에서 무엇이 돌든 내가 보고 싶은걸 당장 볼 수 있어야 하고, 원하는 정보에 빠르고 쉽게 도달할 수 있기만을 바란다는 것은 너무나도 명백한 사실입니다.

 

 해서 개취는 백엔드이지만, 프론트엔드 구성에 있어서 불가피하게 심혈을 기울이는 시간을 더 쏟게 되는 것 같습니다.

 

 실제 웹개발을 해보면 DB CRUD와 data manipulation 그리고, function의 결과물을 잘 return하도록 하는 것만 잘 되면 백엔드 만질 일은 거의 일어나지 않는 것 같습니다.

 

 대신, 에러 없이 잘 가공된 데이터를 프론트엔드로 전달한 후 프론트엔드에서 어떤 식으로 표출할 것이냐에서 많은 조정이 일어나기 때문에, 실제 어떤 기능을 개발해서 프론트엔드로 표출되는 것까지 구현하는 시간비율을 따져보면, 제 기준으로는 9할이 프론트엔드이고 1할만 백엔드 코드 만지는데 쓰는 느낌입니다. 물론, 머리를 쥐어짜내어 알고리즘을 구성하는 Brain Functioning 과정에서의 노력비율은 정반대의 비율인 듯 하네요..

 

 다음번에 기회가 된다면 실제 소요시간을 측정해 보고 싶긴 한데, 거의 위 비율이 들어 맞는 듯 합니다.

 

 

 

 Bootstrap5 / Django Template Tags / JavaScript 

 

 위 소제목의 조합이 제가 가장 즐겨 쓰는 조합의 Front-End 구성 방식입니다.

 Front-end만 전문적으로 만들어 오신 분들 입장에서는 '구리다'고 느끼실 듯도 합니다.

 

 React네 Vue네 TypeScript네 하면서 최신이면서, 범용되고 있는 Stack들 놔두고 오래된 Front-end 구현 방식을 쓰고 있으니깐요.

 

 하지만, DRF가 아닌 Django를 기반으로 구축하는 입장에서, 게다가 Full-Stack으로 웹사이트를 개발 중일 때엔, 사실 순식간에 주류 stack에 변화가 일어나는 Front-end의 모든 최신 stack들을 따라가는게 꽤나 낭비적으로 보일 때가 많습니다.

 

 물론 신규 stack들이 편리한 면 / 유리한 면도 당연히 있겠지만, Back-end에서 전달하는 return 값들의 형식에 맞추고, 보안까지 생각하면서도, 빠르게 그리고 완성도 높게 Front-end를 구성하기에는 익숙하게 진행해 왔고, version 변경도 크게 신경 쓸 일이 많지 않은 위 조합이 저에게는 딱 적당하였습니다.

 

 마찬가지로, 저처럼 Back-end가 더 취향이신 분들이 굳이 Front-end 최신 경향을 다 따라갈 필요는 없다고 생각합니다.

 

 무엇보다 Django로 웹사이트를 빌딩한다면, Dajngo Template Tag와 filter를 사용하는 것만으로 Back-end 코드 구성 고민을 대폭 줄여낼 수 있다는 점에서도 저로서는 위 조합을 강추할 수 밖에 없습니다.

 

 

 

 

 

 보안적인 면은 어떨까요?

 

 TradeNPU에 ChatGPT와 구글 Gemini 채팅 기능을 integration할 때 당시 Front-end 구현을 위해 한참 자료를 찾아보던 중이었습니다. 

 어느날, 다행스럽게도, 해외 개발자가 Javascript를 철저히 사용해서, 프론트엔드에서 해당 채팅창과 함께, ChatGPT API를 통해 대화를 주고, 응답을 받아오는 기능을 개발한 방법과 자료 올려놓은 것을 발견할 수 있었습니다.

 

 처음 자료를 찾았을 땐, 너무나 기쁘긴 했는데, 해당 코드를 전부 다 훑고 나서 TradeNPU에 적용하려고 보니, 중요한 문제점 하나가 발견되었습니다. 

 Front-End 단에서 돌다보니, ChatGPT API접근을 위한 Credential들이 JavaScript코드로 그대로 노출되어 들어간다는 점이었습니다. 이미 잘 아시다시피, 구글 크롬이나 MS Edge에서는 F12키 누르면 개발자 모드가 열리면서 적어도 프론트엔드의 코드 구성 내용은 적나라하게 다 볼 수 있는 문제가 있습니다.

 

 그런데, Credential이 노출된 상태로 이 기능과 페이지를 release를 하면... 생각만 해도 끔찍합니다.

 

 JavaScript를 강화해서 쓴다는 데에는 이러한 한계가 명백히 존재한다는 사실을 강하게 깨달았던 경험이었습니다. 

 물론, JavaScript 안에서 써야하는 Credential과 같은 민감정보를 밖으로 빼내어 감추는 방식에 대한 reference도 나중에 찾았지만, 그걸 구현하기 위한 작업이 또한 가미된다는 점.. 그마저도 완벽하게 보안이 되는 걸로 보이지는 않는다는 점에서 취약성이 매우 우려 되었습니다.

 이러한 이유로, TradeNPU에서는 해당 부분에 대해 대폭적인 조정을 통해 Credentail이 철저히 가려지는 방식으로 작업을 마무리 하게 되었습니다.

 

 결론적으로, JavaScript는 프론트엔드에선 필수라지만, 보안을 생각하면 JavaScript코드로 모든 것을 해결하려는 것은 좋지 않은 선택이 됩니다.

 

 

 그것 뿐일까요. 

 JavaScript가 원래도 자료형 정의와 관련으로 결함이 있다고는 매우 잘 알려져 있습니다. 자료형의 잘못된 인식으로 결함있는 코드를 짜도 심지어 에러 없이 돌아간다는 것도 문제이기도 하구요. 

 

 거기에 더해서, 구글 크롬 개발자모드를 열어 보았을 때, 많은 JavaScript코드로 구성된 Front-End 페이지를 열어보면 그렇지 않은 페이지에 대비해서 로딩 속도도 상당히 느리다는 것을 종종 발견합니다. 

 3rd party JS를 많이 참조해 가면서 쓰기도 하고, 사용자의 컴퓨터 리소스도 먹고 하는  그런 여러 요인이 페이지 로딩속도에 영향을 주는 것입니다.

 

 

 위와 같은 경험에 근거해서, 저는 아직도 JavaScript와 그 관련 파생 JS들에 대해 큰 관심이 없습니다. 오히려, JavaScript코드를 줄일 수 있는 한은 최대한 줄이는데 치중합니다.

 그리고선 JavaScript가 필요한 위치는 Django Template Tags를 사용합니다.

 그러한 방식을 취했을 때 오히려, 페이지 로딩속도도 더 빠르고, 백엔드의 코드라인도 덩달아 줄어들기 때문에 저로써는 이 방식을 택하지 않을 수가 없습니다.

 

 

 그래서 저에겐 '사용된 기술 Stack이 구리다'는 건 전혀 문제되지 않습니다.

 오히려 걱정해야 하는 건 '구현 방식은 구려도, 비지니스 모델은 구려서는 안된다'라는데 있다고 생각합니다.

 

 

 전문 IT개발자들일수록 이 점 간과하지 말고, 자신의 최신 기술 Stack만 뽐낼 것이 아니라, "비지니스를 꼭 이해해야 한다는 점과 수익모델이 무엇인가"에 대한 고민이 철저히 녹아든 구현을 해나가야 한다고 강조하고 싶습니다. (개인 의견이니, 너무 공격하지 말아주시길..) 

 

 

 

 Django Template Tags, Custom Tags & Filters

 

 

 디자인 페이지 구성을 함에 있어서, 내장된 Template Tag만으로는 정확히 타겟팅된 데이터를 표출하기가 어렵기는 합니다. 말그대로 Function을 돌려서 재가공을 필요로 하는데, 그걸 Back-end에서 다 짜는게 오히려 비효율이라는 사실을 경험을 통해 알게 되었습니다. 

 

 차라리, Front로는 데이터를 통으로 던져주고, Front-end에서 해당 Function을 Custom Tag를 짜서 돌리는게 maintenance측면에서 유리해 집니다.

 

 TradeNPU가 Data Manipulation/processing을 수도 없이 사용하기 때문에, 더더욱 그러한 사실을 잘 확인할 수 있었습니다.

 

 그래서, Data Science 관련된 사이트를 구성한다면 더더욱 Custom Tags를 잘 활용할 줄 알아야 하겠습니다.

 

 

 

 이 후 포스팅에서는 Customs Tag를 사용한 예제 몇개를 들어서, 용법과 활용점에 대해 언급해 보도록 하겠습니다.

 

 그리고, 실제 페이지 디자인 구성하면서 Template Tags, Customs Tags와 Filter를 통해 어떻게 하면, JavaScript코드를 가능한한 많이 줄여낼 수 있느냐도 하나의 아이디어로서 제시해 드리고자 합니다.

 

 

  다음 시리즈 포스팅에서는 이제 적용할 Bootstrap 페이지를 들고 와서, 대강의 모양을 짜내는 과정을 다뤄 보겠습니다.

 

 

 

 

NPU(엔피유) 관세사무소

대표관세사 고장주

Tel) 031-986-7190

E-mail) sales@npucus.com

[NPU관세사무소 홈페이지] https://www.npucus.com/

[NPU관세사무소 프로모션 페이지] https://www.tradenpu.com/npu_cus/

[무역비지니스 인텔리전스 서비스 | TradeNPU] https://www.tradenpu.com​

[파이썬 실용 예제. 무역과 공공데이터] https://pdatinmylife.tistory.com

​

Certified Customs Broker JangJu Goh

Executive Customs Broker @ NPU Customs Consulting

CEO @ JG TradePlus

​

sales@npucus.com

Trade Compliance / Customs clearance management at foreign company

Working experience of Air export freight forwarding

Data Visualization / Independent development of business automation application – copyright of JGPO_Manager, JG Data Center, AutoCC and etc.

B2B consignment & direct export/import, B2C Overseas Buying Office consulting

Alibaba.com B2B trade / taobao B2C trade / Amazon.com global selling etc. Online trade regulation consulting.

Import license / Quarantine

English communication available

​

[TradeNPU for partnership proposal - JGTP] https://www.tradenpu.com/jgtp/