chat GPT를 활용하여 템플릿엔진(타임리프)에서 react(react-native)로 리팩토링해보기

일단 나는 react나 vue.js와 같은 프론트엔드 프레임워크에 대해서 잘 알고 있지는 않다. 그래서, 개인프로젝트하거나 서버API를 화면을 통해 테스트를 할때에 주로 타임리프와 같은 템플릿엔진을 사용해 화면을 만든다.

 

최근에는 기존에 만들어둔 템플릿엔진을 통한 화면들을 react로 리팩토링 해보고자 끙끙댔었는데, chat GPT의 도움을 받아 변환시켜보니 매우 수월하게 작업을 완성시킬 수 있었다.(변환된 코드를 보고싶으면 여기 github코드를 참고하시길바랍니다.) 

 

그러나, react에 대한 지식이 부족하다보니 코드는 변환시켰지만 큰 틀에서 프로젝트 구조는 다소 유치한 수준이라는 감안하길 바란다.

 

더불어, react에서 react_native 코드도 변환시켜보니 같은 React이다 보니 보다 더 수월하게 코드를 생성되었다. AI툴을 사용한다면 기존의 템플릿엔진 - > react -> react_native로의 변환을 통해 기존 레거시 화면을 가지고 있던 서비스들이 상당히 쉽게 웹/앱 현대화를 할 수 있지 않을까 생각한다.

 

아래의 첫번째 사진과 같은 스프링의 타임리프 html 문서를 두번째 사진의 react구조로 단순 변경하는 작업이었다.(JSP에도 똑같이 적용이 가능할 것이다.)

 

chatGPT에 아래와 같이 질문하였다.

 

그러자, 아래와 같이 깔끔하게 코드를 뽑아주었다.

 

react의 기본적인 구조만 알고 있으면, chatGPT의 도움을 받아 위와 같이 쉽게 react기반의 프론트엔드 리소스로 변환이 가능했다. 물론, parameter를 어떤식으로 주고 받을지, css와 공통 리소스를 어떻게 관리할지에 대한 지식이 있어야 훨씬 깔끔한 react 프로젝트가 될 것 같다.

 

최근 chatGPT 출시 이후부터 chatGPT를 적극 사용하며 느끼는 부분은, code level의 단순 작업은 AI의 도움을 적극적으로 받는 것이 확실히 여러모로 더 생산적이라는 생각이 들었다. 그러나, react의 큰 틀의 프로젝트를 어떻게 설계할지와 같은 부분이나, 백엔드 단의 data설계, 서버설계 등의 영역은 직접적인 도움을 받기는 어려웠다. 

 

이런 측면에서 보았을때, 개발자에게 앞으로 요구되는 능력은 코딩레벨 보다는 프로젝트의 큰 그림을 그릴 수 있는 아키텍트로서의 역량의 비중이 더 높아지지 않을까 싶다. 또한, 백엔드, 프론트엔드, 앱개발 등의 스페셜한 영역의 구분 보다는 제너럴리스트들이 더 각광을 받지 않을까 싶다.

 

최근 10년간 백엔드, 프론트엔드로 각자의 역할을 명확히 구분이 지어지던 시대를 지나서, 다시 통합적인 full stack 개발자에 대한 needs가 올라가지 않을까 생각한다. 백엔드도 적당히 알고, 프론트엔드도 적당히 알고 있다면 AI 툴의 도움을 받아 상당한 수준의 퀄리티를 지닌 완성된 제품을 빠르게 만들어내는게 가능해질것 같기 때문이다.