Leona Lee

Leona Lee님의 아티클

Leona Lee

Leona Lee

ChatGPT와 FE 개발 환경 세팅하기

하루가 다르게 새로운 기술이 나오는 요즘 시대에 수개월 동안 하나의 프로젝트를 하고 새 프로젝트를 세팅하려고 할 때면, 내가 익숙하게 사용한 기술들이 도태되지는 않았을까 아니면 또 핫한 기술들이 생겨서 시도해 볼 것이 있을까 고민에 빠지게 된다.

새로운 프로젝트를 해도 일단 react와 typescript를 사용해야지, 그리고 요즘 vite와 swc에 대한 이야기가 많이 보이더라. 그리고 그동안 익숙하게 사용한 styled-components 같은 css-in-js 성격의 것들은 속도 문제로 더 나은 방안을 찾고 싶은데 하는 등 프로젝트 폴더를 만들기도 전에 최근 기술 동향 조사에 시간 가는 줄 모른다.

불필요한 시간을 줄이고 생산성을 높여보자는 생각으로 ChatGPT의 도움을 받아 환경을 세팅해 보기로 했다. 우선 react+typescript+vite 초기 환경 설정에 대해 질문했다.

Q. Can you tell me the way that initial react+typescript+vite development environments?

231006-screen1.png

제법 정확한 방법들을 알려줬다. 하지만 무언가 하나 이상했다. 나는 react+typescript+vite를 사용한 하나의 프로젝트를 원했는데, react+typescript 프로젝트와 vite 프로젝트를 따로 알려주는 것이다. 그래서 하나의 프로젝트를 원한다고 다시 질문을 했다.

Q. Why are you giving me two projects? I want a single front-end development project.

231006-screen2.png

AI가 사람인 척 빠른 사과를 하며 이번엔 제대로 된 환경 세팅 방법을 알려주었다. 그런데 npx create-vite로 생성하는 방식은 이전 방식이고, vite 공식 문서에서 보여주는 최신의 방식은 그냥 yarn create vite를 사용한다.

하지만 ChatGPT의 마지막 학습 데이터를 물어보는 질문에는 2021년 9월로 대답한 것을 보니 위에 알려준 방식도 그 이전에 방식이라 생각해서 이해할만했다.

프로젝트를 생성하자마자 style builder 또한 너무 다양해서 어떤 것을 사용할지 고민이 되어 환경 세팅에 필요한 질문들을 추가로 더했다.

Q. What is the best style builder in React?

231006-screen3.png

친절하고 자세하게 특징들을 요약해 주는 것을 보니 글쓰기 방식에 대해 배워야겠다는 생각이 들었고, 라이브러리를 선택하는 데 도움이 되었다.

그 밖에 storybook, 테스팅 툴 등을 물어보고 환경 세팅을 마쳐야겠다.

이전에는 열심히 구글 검색의 도움을 받아 개발했던 방식이었는데, 이제 ChatGPT라는 친절한 동료와 대화하며 업무를 하는 느낌이 들었다. AI가 이런 수준까지 올라왔다는 것이 조금 소름 끼칠 것 같긴 하지만, 인공의 것에 홀리지 말고 집중하고 개발해야겠다.

5
0