26년 5월 1주 주간 회고

이제 입사한지 2달차 

매주 일하면서 배운 내용을 기록하고자 한다

 

첫 시작..

 

두줄 요약

claude와 codex의 합작

프론트를 몰라도 프론트 개발자가 되다..

 

 

이번주 업무

입사한 뒤로 원래 AI 에이전트 개발을 맡고 있다가

여러 사유로 기존 VUE + Spring Boot(BFF) 로 작동하던 프론트를

최신 기술 스택(React)으로 마이그레이션 하는 업무를 3주째 진행중이다.

 

느낀 점

사실 난 지금까지 백엔드만 공부했다.

근데 취업하고보니 얼떨결에 프론트만 개발한다..

그래도 나름 다행인점?..은

커널 360 부트캠프 하면서 바이브 코딩으로 프론트 개발을 해본 적이 있다는 점?..

그때 해봐서 그런지 딱히 부담감을 느끼거나 큰 어려움을 느낀 적은 아직 없는 것 같다.

(AI가 그만큼 똑똑한 것일지도,,)

 

하지만 지금 내 상태는 단순히 코더라고 밖에 할 수 없다

제대로 로직도 모르고 그냥 AI한테 온전히 지시만 하는 지시자..

완전한 풀스택 개발자가 되기 위해 React 관련 공부를 시작해야겠다.

 

기술적 고민

1.MSW

항상 백엔드만 하다가 프론트를 개발하다 보니

프론트는 작업을 2번해야하는 번거로움이 있다는 점을 새삼 깨닫고 있다.

 

1. 화면 개발(API 없이 MOCK 데이터로 개발)

API가 개발되면?

2. 다시 API 연동을 위해 추가 개발

출처: 올리브영 기술 블로그

이런 번거로움을 새삼 느끼면서 내 전담 프론트 개발자 였던 황모씨에게 미안함을 느끼게 되었다.

이러한 문제는 프론트 개발자라면 항상 겪어야 하는 것일까?

그래서 찾아보았따.

https://github.com/mswjs/msw

GitHub - mswjs/msw: Industry standard API mocking for JavaScript.

 

바로 MSW(MOCK SERVICE WORKER)

MSW란 클라이언트가 요청을 전송하면 service Worker가 요청을 가로챈(intercept) 후

Mocking된 응답 값을 반환함으로써 서버와의 통신을 모방하는 오픈소스 라이브러리이다.

 

이러한 라이브러리를 사용한다면 프론트엔드 개발자는 작업을 2번할 필요 없이

단순히 처음부터 API 연동을 반영하며 개발을 진행할 수 있다.

단, API 명세서가 나와있다는 가정하에...

 

2. Wasm

2년전 인턴시절 WASM에 대해 분석하고 사내 세미나에서 발표했던 경험이 있다.

wasm 이란

WASM(WebAssembly)은 브라우저에서 거의 네이티브 속도로 실행되는 컴파일된 코드 형식이다.

설명하자면 너무 길긴한데..

프론트에서 화면의 내용을 PDF, docx, xlsx로 변환하는 기능을 구현해야했다.

단순히 js 라이브러리를 사용해서 생성하는 방식도 가능하겠지만

WASM을 사용해 좀 더 빠르게 할 수 있지 않을까? 라는 고민을 하게되었다.

GPT는 페이지수가 많거나 만들어야할 내용이 많다면 적용을 고려해볼만하다고 하지만

페이지수가 적고 내용이 적다면 오버 엔지니어링이 될 수 있다고 한다..

좀 더 고민해봐야겠다.

3. PLAYWRIGHT MCP

Playwright MCP = AI 코딩 도구가 브라우저를 직접 조작할 수 있게 해주는 연결 서버이다.

사실 설치만 해놓고 제대로 써본 적은 없었는데

프론트 작업중에 

CODEx 가 갑자기 알아서 사용하길래 한 번 사용해봤다.

근데 이거 미쳤다.

알아서 브라우저 열어서 캡쳐해서 디자인 확인하고

요청 응답 분석해서 뭐가 문제인지 파악하고

직접 화면 클릭해서 요소도 분석하고..

근데 토큰을 엄청 먹더라..

 

그래서 지인 프론트 개발자의 꿀팁을 얻어냈다

mcp 말고 CLI사용하면 토큰이 덜 든단다..

다음주에 출근하면 그렇게 써봐야징~

 

일단 이번 주 회고 끝~

 

사실 더 쓸려 했는데 약속 생겨서 나가야함