# AI, 코드, 인간의 협업을 통한 대용량 JS 파일 리팩토링 경험

> Clean Markdown view of GeekNews topic #13713. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=13713](https://news.hada.io/topic?id=13713)
- GeekNews Markdown: [https://news.hada.io/topic/13713.md](https://news.hada.io/topic/13713.md)
- Type: news
- Author: [spilist2](https://news.hada.io/@spilist2)
- Published: 2024-03-09T08:54:27+09:00
- Updated: 2024-03-09T08:54:27+09:00
- Original source: [stdy.blog](https://www.stdy.blog/news-large-js-file-refactoring-with-three-way-collaboration-kr/)
- Points: 23
- Comments: 2

## Topic Body

(아침에 일어나서 다시 보니 기존 글에 포맷팅 오류가 있고, 또 너무 길게 썼길래 요약본으로 다시 올립니다)  
  
ChatGPT 초심자들이 ‘복잡한 문제’를 ChatGPT와 풀고자 할 때 흔히 3가지 실수를 범하는 걸 봤음  
  
1. ChatGPT가 **‘정답을’** 단번에 줄 거라고 기대  
2. ChatGPT가 정답을 **‘단번에’** 줄 거라고 기대  
3. 이 기대가 쉽사리 충족되지 않아 실망하고, ChatGPT를 단순한 문제에만 사용하거나, 수동적으로만 사용하거나, 아예 사용을 중단함  
  
이들은 결과적으로 AI를 이용한 생산성 향상 기회를 다수 놓치게 됨  
  
이건 몇 달 전까지 내 모습이기도 했음  
  
- 앱 초기 로딩 속도가 느려서 번들 크기 분석을 했더니 엄청나게 큰 JS 파일이 나왔음. 18,500줄짜리 이 파일의 대부분을 삭제할 수 있다는 걸 발견  
- 처음에는 눈으로 봐가면서 손으로 삭제했지만 너무 지루하고 자꾸 실수함  
- ChatGPT로 작업 시작. 하다 보니 나도 초심자처럼 ‘정답을 단번에’ 줄 거라고 기대하며 작업하고 있었다는 걸 깨달음  
- 인지 후 ‘3자간 협업 전략’을 씀으로써 엄청난 진전을 빠르게 경험  
  
### 작업 경과  
  
나 대신 리팩토링좀 해줘  
  
- 함수 하나 주고, 원하는 방식 설명하고, 리팩토링해달라고 함 → 실패. 컴파일도 안 됨  
- 코드 구조를 이해해서 변경하는 게 아니라 한 줄씩 내려가면서 지우는 방식이었음  
  
리팩토링하는 코드를 짜줘  
  
- 직접 하지 말고, JS로 리팩토링하는 코드 달라고 함 → 실패. 이것 또한 한 줄씩 내려가면서 지우는 방식이었음  
- 생각해보니 이런 대용량 리팩토링을 ChatGPT가 충분히 학습하지 못했을 것  
  
AST로 리팩토링하는 코드를 짜줘  
  
- 나는 한 줄 한 줄이 아니라 블록을 지우길 원했음. 즉 코드의 문법적 이해가 필요했으니 AST를 이용하면 좋겠다고 생각  
- ChatGPT에게 ESLint 개발 경험 있는 엔지니어의 역할을 부여하고, AST를 이용해서 짜달라고 했더니 훌륭한 babel 기반 보일러플레이트가 나옴. **커다란 진전**  
- babel 경험이 없어서 ChatGPT와 함께 학습하며 로직을 추가해나갔는데 결국 어려움에 봉착. 복잡한 로직 다루기가 어려웠음  
  
AST로 내가 이렇게 해봤어. 이 부분이 잘 안 되는데 너라면 이거 어떻게 해볼래?  
  
- 내가 또 정답을 단번에 얻으려고 했다는 걸 깨닫고 전략 수정. traverse를 1번만 할 필요가 없다고 생각하니 술술 풀림.  
- 한번 간단히 돌려보고 결과 보면서 로직을 쌓아나가는 방식으로 빠르게 진행  
- 부분부분 잘 안 되는 곳은 그 특정 목적을 어떻게 구현할지 ChatGPT에게 물어보면서 함  
- 마지막에 규칙으로 만들기 어려운 부분은 눈과 손으로 마무리. 이 때는 이미 코드 양이 엄청 적어져서 가능했음  
  
### 결과  
- 18,500줄 짜리 코드가 1,335줄이 되고, 메인 청크 번들 크기는 약 7.8% 감소  
- 초기 로딩에 필요한 JS 파일 크기 및 로직이 줄어들면서 초기 로딩 속도 소폭 향상  
- 길고 복잡한 레거시 코드를 AST로 리팩토링해본 경험과 자신감을 얻음  
- 대부분의 복잡한 문제를 AI + 코드 + 인간 이라는 3자간 협업을 통해 효과적으로 해결할 수 있겠다는 자신감을 얻음  
  
AI와 함께 복잡한 문제를 효과적으로 풀기 위한 멘탈 모델  
  
1. AI가 잘 하는 일, 코드가 잘 하는 일, 인간이 잘 하는 일이 무엇인지 이해한다.  
2. 내가 풀려는 문제를 분석해서 AI/코드/인간이 잘 하는 영역을 구분한다.  
3. AI가 첫 코드를 잘 만들 수 있게 도와주고, 그 코드를 작게 실행해보면서 AI와 함께 개선하고, 중간중간 + 마지막에 인간이 하기 더 쉬운 건 내가 직접 한다.

## Comments



### Comment 23648

- Author: agart319
- Created: 2024-03-12T08:24:25+09:00
- Points: 1

잘읽었습니다

### Comment 23580

- Author: moderator
- Created: 2024-03-09T09:37:02+09:00
- Points: 1

중복된 글을 삭제하였습니다.