Refactoring/Enhancement 작업하기 - 필드에서 사용하는 꿀팁 대 방출, 잘 안되면 일단 껐다 켜 보기 ;)

오늘은 이전에 개발한 AI 웹 어플리케이션의 소스코드를 개선하는 **리팩토링(refactoring)** 작업과 새로운 기능을 추가하는 **확장(enhancement)** 작업을 진행했습니다.

리팩토링 작업에서는 Streamlit의 `session_state`가 서로 다른 페이지 간에 메시지 데이터를 공유하는 문제를 해결했습니다. API 키는 공유가 필요한 부분에서만 동일하게 사용하고, 각 페이지에서 개별적으로 관리해야 하는 메시지 부분은 분리하여 처리했습니다.

확장 작업으로는 기존에 Anthropic의 Claude 모델만 사용 가능했던 것을 OpenAI의 ChatGPT도 사용할 수 있도록 기능을 추가했습니다. 이를 통해 더 다양한 모델을 활용할 수 있게 되었습니다.

그 외에도 Visual Studio Code에서 변경된 파일을 커밋하고 GitHub에 푸시하는 방법, 그리고 GitLens를 사용해 로컬 파일과 서버 파일을 비교하는 방법 등 실무에서 유용하게 사용되는 팁들을 공유했습니다.

또한, 기대한 결과가 나오지 않았을 때 차분하게 문제를 검증하고 해결해 나가는 과정을 보여드렸습니다. 이는 개발자에게 필수적인 문제 해결 능력을 키우는 데 도움이 될 것입니다.

LangGraph에 새로운 툴을 추가하는 방법을 배우기 위해 Quick Start 튜토리얼의 소스코드를 Streamlit과 결합해 웹 페이지에 표시하도록 구현한 소스코드도 함께 확인하실 수 있습니다.

이 소스코드에는 하나의 에러가 있는데, 이 에러는 여러분과 함께 해결해 볼 과제로 남겨두었습니다. 다음 시간까지 함께 고민해 보시길 바랍니다.

전체 영상을 보시려면 여기를 클릭하세요:

 

https://youtu.be/N4t-YQufGLg?si=ySA0Toof6Ng69APf

 

 

Today, I focused on refining the AI web application we previously developed by undertaking some critical refactoring and implementing enhancements.

 

The refactoring work addressed an issue where session_state in Streamlit was unintentionally sharing message data across different pages. By ensuring that shared API keys are used consistently while individual messages are managed separately, the application now functions more reliably across various pages.

 

On the enhancement side, I expanded the application's capabilities by integrating OpenAI's ChatGPT alongside Anthropic's Claude, offering more flexibility in model usage.

 

In addition to these improvements, I also covered some practical tips for developers. These include committing changes in Visual Studio Code, pushing updates to GitHub, and using GitLens to compare local and server-side files. These insights are grounded in real-world scenarios and are essential for efficient development workflows.

 

Moreover, you'll see how to methodically troubleshoot when results don't match expectations—a vital skill in any developer's toolkit.

 

As part of my journey into LangGraph, I also combined the Quick Start tutorial code with Streamlit to create an interactive web page. This integration serves as an excellent example of adding tools to enhance LangGraph functionality.

Lastly, I've left one error in the code as a challenge for you to solve before our next session. It’s an excellent opportunity for us to explore problem-solving together.

 

Check out the full video here: https://youtu.be/N4t-YQufGLg?si=uPlA2xqlUDUZFrgw