정보처리기사 공부를 하다가 일을 하나 벌였습니다. 5개년 기출을 넣어두고 주기적으로 업데이트되는 학습 앱을 직접 만들기로 한 겁니다. 기출 문제집과 PDF를 오가며 공부하다 보니 “이거 앱이면 훨씬 낫겠는데”라는 생각이 계속 들었고, 개발자가 그 생각을 하면 결론은 하나죠. 이 글은 그 프로젝트의 첫 기록입니다.
왜 React부터 다시 시작하는가
저는 4년차 Java/Spring 백엔드 개발자입니다. 화면은 주로 SI 프레임워크(Nexacro, WebSquare)로 만들어왔고, 모던 프론트엔드를 밑바닥부터 제대로 배운 적은 없습니다. 지금 진행 중인 PLM 마이그레이션 프로젝트에서 Next.js를 쓰고 있긴 하지만, 구현의 상당 부분은 AI 에이전트와의 페어로 진행합니다.
그런데 그 과정에서 계속 걸리는 게 있었습니다. 에이전트가 짜준 코드를 검증하려면 결국 내가 기초를 알아야 한다는 것. 컴포넌트가 왜 다시 렌더링되는지, 이 상태가 왜 여기 있으면 안 되는지를 모르면 승인·기각 판단이 감에 의존하게 됩니다. 그래서 이번 학습 앱은 반대로 갑니다 — 에이전트에게 코드를 시키지 않고, 밑바닥부터 직접 만듭니다.
첫날 세팅 기록
시작은 교과서적으로 Vite + React + TypeScript 템플릿입니다.
npm create vite@latest react-basic
# React / TypeScript 선택
npm install # 152 packages, 취약점 0
npm run dev # VITE v8.1.5 ready in 402 ms → localhost:5173린터 선택에서 잠깐 고민이 있었습니다. Vite 템플릿이 요즘은 Oxlint를 옵션으로 주는데, 속도는 매력적이지만 결국 ESLint를 골랐습니다. 이유는 세 가지 — 에디터 확장 생태계가 ESLint 기준이고, 업계 표준이 아직 ESLint이고, 채용 공고에 나오는 것도 ESLint이기 때문입니다. 배우는 입장에서는 “더 빠른 도구”보다 “현장에서 만나게 될 도구”가 맞다고 판단했습니다.
학습 방식: AI에게 코드를 시키지 않고, AI를 튜터로 쓴다
이 프로젝트에서 AI 에이전트의 역할은 코드 생성기가 아니라 튜터입니다. 방식은 이렇습니다.
- 에이전트가 과제를 냅니다 — “main.tsx와 App.tsx를 읽고, App 함수가 리턴하는 게 뭐로 보이는지 답해라.”
- 제가 코드를 직접 읽고, 수정하고, 브라우저에서 확인한 뒤 답합니다.
- 답을 가져가면 그때 다음 개념(JSX) 설명이 시작됩니다.
PLM 프로젝트에서는 “AI가 구현하고 사람이 검증”하는 구조인데, 학습에서는 정확히 뒤집었습니다. 결과물이 목표가 아니라 내 머리에 남는 게 목표라서요. 같은 도구도 목적에 따라 쓰는 방식이 완전히 달라진다는 걸 체감 중입니다.
로드맵
- React 기초 — 컴포넌트, JSX, 상태, 이벤트 (지금 여기)
- TypeScript로 안전하게 다루기
- 기출 문제 데이터 구조 설계 — 5개년 기출을 구조화된 데이터로
- 학습 앱 구현 — 문제 풀이, 오답 노트, 주기 업데이트
정보처리기사 공부와 React 공부를 한 프로젝트로 묶은 셈이라, 어느 쪽이 먼저 끝날지는 모르겠습니다. 진행 상황은 이 블로그에 계속 기록합니다.
덧붙여
백엔드 경력이 있는 상태에서 프론트를 새로 배우니, 낯선 것과 익숙한 것이 섞여 있습니다. npm 스크립트는 Gradle 태스크와 비슷하고, 컴포넌트 트리는 어딘가 서블릿 계층 구조를 닮았습니다. 이런 “기존 지식에 걸어서 배우기”가 얼마나 유효한지도 이 시리즈에서 같이 검증해보려 합니다.