Gemini CLI - 백엔드 개발자가 React를 빠르게 학습할 수 있었던 이유

 

 

들어가면서

저는 거의 자바 스프링을 기반으로 한 백엔드 개발만 해왔습니다. 하지만 언제까지고 API만 만들고 있을 순 없죠. 제가 만든 서버를 지인들이, 그리고 제가 더 편하게 쓸 수 있도록 간단한 프론트엔드를 직접 만들고 싶다는 욕심이 생겼습니다.

수많은 기술 스택 속에서 제가 선택한 도구는 `React + TypeScript`였습니다. 채용 시장의 목소리도, 대중성도 이 조합을 가리키고 있었죠. 문제는 `어떻게`였습니다. HTML, CSS, JavaScript를 만져본 게 언젯적인지...

이 글은 `Gemini CLI`라는 강력한 AI 도구와 함께, 제가 어떻게 프론트엔드의 벽을 넘고 있는지에 대한 기록입니다.

 

 

 

1. JavaScript와 TypeScript

Java 개발자에게 JavaScript는 애증의 언어 아닌가요? 문법은 비슷한 것 같은데, 타입은 없고, this는 제멋대로 바뀌고... 혼란 그 자체였습니다. TypeScript가 그에 대한 해결책이 될 수 있지만, 결국 JavaScript라는 기본기가 받쳐줘야 합니다.

저는 이 과정을 인프런의 무료 강의로 큰 그림을 잡되, 세부적인 개념과 궁금증은 모두 Gemini에게 물어보며 진행했습니다. 

 

`개념에 대한 학습으로 AI 도구를 사용한다면, 꼭 Gemini CLI가 필요한 건 아닙니다.`

프로젝트를 기반으로 할 때 장점이 큰 도구이죠. 내 프로젝트를 파악해, 파일을 직접 수정해 주고, 커맨드도 직접 수행하는 장점이 있답니다.

 

 

 

Gemini 활용법: 나만의 1:1 전담 튜터 만들기

 

`1. Java 개발자의 언어로 설명해줘!`

• "자바 개발자가 이해하기 쉽게 JavaScript의 Promise 개념을 설명해 줘. Spring의 @Async와 비교해서 알려주면 더 좋아."
• "자바의 interface와 TypeScript의 interface는 뭐가 같고 뭐가 달라? 예시 코드로 보여줘."

`2. 익숙한 코드를 낯선 언어로 바꾸며`

• "이 JavaScript 코드를 TypeScript를 사용해서 더 안전하게 리팩터링 해줘. 모든 변수와 함수 반환값에 타입을 지정해 줘."

 

`3. 원인 모를 에러 메시지를 만났을 때`

• "React에서 'Objects are not valid as a React child' 에러가 발생했어. 이게 무슨 뜻이고, 주로 어떤 상황에서 발생해? 해결 방법 예시 코드 좀 보여줘."

 

이렇게 Gemini를 옆에 끼고 공부하면, 막연했던 개념들이 구체적인 코드로 연결되고, 궁금증이 생기는 즉시 해소되면서 학습 속도에 불이 붙기 시작합니다.

 

 

 

2. 프로젝트로 학습하는 React: 컴포넌트와 상태 관리 입문

https://github.com/google-gemini/gemini-cli

위 링크에서 Gemini CLI를 install 커맨드로 설치할 수 있습니다. 현재는 무료입니다.

프로젝트를 기반으로 학습하면서 본격적인 Gemini CLI의 장점이 느껴진답니다.

 

 

2-1. 강의에서 설명하는 프로젝트 Git Clone

저는 어떤 기술에 입문할 때, 간단한 프로젝트를 가져와 분석하는 것으로 시작하는 것을 좋아합니다. 이후 기능을 추가하면서 응용하게 된다면 해당 기술을 빠르게 내 것으로 만들 수가 있는 것이죠. 처음부터 강의를 보며 코드를 따라서 타이핑하는 것은.. 이해에 도움이 되지 않을뿐더러 시간적으로도 굉장히 비효율적입니다. 특히, 강의가 진행되며 리팩토링이 빈번하기 때문인 이유도 있죠.

 

 

 

2-2. 프로젝트 파일에 설명 주석 추가

프로젝트를 분석하기 위해서, 핵심 파일에 주석을 직접 작성해 주라고 요청합니다.

강의 내용을 기반으로, 주석과 함께 파악하는 것이 핵심입니다.

 

 

 

2-3. 프로젝트 구조 및 동작 방식 설명

주석 통해 개별 파일을 분석하는 것으로는 부족합니다.

프로젝트의 구조를 파악해서 순서대로 뜯어봐야겠죠?

 

 

2-4. 추가 기능 구현하기

어떤 추가 기능을 하면 좋을지 물어봤는데, 반은 맞고 반은 틀렸네요. 🥲

 

추가 기능은 혼자 힘으로 구현하고, 디버깅해 보는 것`이 핵심입니다.

AI의 힘을 빌려서 빠르게 습득한 지식을 기반으로, 온전히 나의 스킬을 만들 수 있는 단계입니다.

 

 

 

마무리

Gemini CLI, Claude와 같은 파일 편집 AI 도구를 활용해서 개발 속도가 2배 이상 올라갈 것 같아요.

 

하지만, 프로젝트가 간단한 것임에도 불구하고 모든 것을 파악하지는 못하더라고요.

• 정확한 프롬프트 작성 능력
• AI의 답변이 틀리거나 빠트린 것이 있는지에 대해, 개발자 스스로 확인할 수 있는 능력

을 기반으로 `부분적인며 반복적인 작업`을 도움받을 수 있을 것 같아요.