코드리뷰 피드백이 외계어로 들릴 때

코드리뷰 피드백이 외계어로 들릴 때

코드리뷰 피드백이 외계어로 들릴 때 PR 올렸다. 마음 졸이며 기다렸다. 30분 뒤 선배 댓글이 떴다. "This component violates single responsibility principle. Consider extracting the logic into a custom hook with memoization to prevent unnecessary re-renders. Also, the dependency array here could cause stale closures." 읽었다. 세 번 읽었다. 여전히 모른다. 뭐라는 건데. 일단 '네 수정하겠습니다' 댓글을 남겼다. 손가락이 떨렸다. 지금 뭐라고 했는지는 모르지만 일단 수정한다고 약속했다. 이게 뭐하는 일인지 모르겠지만 일단 한다고 했다.매일 밤 용어 구글링 시간 퇴근하고 집에 왔다. 메모장을 꺼냈다. 오늘 배운 용어들을 정리할 시간이다.Single Responsibility Principle (SRP) Memoization Dependency Array Stale Closures Custom Hook다섯 개다. 어제는 일곱 개였다. 모레는 몇 개일까. 유튜브 검색했다. "single responsibility principle react" - 10분짜리 영상이 나왔다. 3분 봤다. 졸았다. 다시 봤다. 역시 졸았다. 블로그 글 봤다. 코드 예제가 있었다. 예제도 모르겠다. 예제를 이해하려면 다른 걸 알아야 하는데 그것도 모른다. 뭐부터 배워야 하는 건지 모르겠다. 결국 메모장에 적은 다섯 개 중 두 개만 이해했다. 아 맞다. 이해하지 못한 걸 이해했다고 생각했다. 실은 유튜브 영상이 재밌어서 계속 봤던 거다. 메모장 앱을 닫았다. 내일도 같은 일이 반복될 거다.선배가 말하는 건 항상 '이거 간단한 건데' 오전 10시. 선배가 내 자리에 왔다. "여기 봐봐. 이거 간단한 건데." 간단한 게 절대 아니다. 선배가 설명했다. 뭔가 자신감 있게 설명했다. 나는 고개를 끄덕였다. 끄덕이면 이해한 척 할 수 있다. 선배도 그걸 믿는다. "여기서 useCallback을 쓸 필요 없고..." 잠깐. useCallback? 언제 배웠지. 내가 이걸 이미 알아야 하는 사람인가? "...메모이제이션은 이 경우엔 과하고..." 또 메모이제이션이다. 어제도 들었다. 뭐하는 건지 아직도 모르는데. "...쉽게 생각하면 돼." 아. 쉽게 생각하면 되는구나. 그럼 나는 지금 뭘 어렵게 생각하고 있는 건가. 선배가 나왔다. 나는 화면만 봤다. 선배가 말한 게 뭔지 하나도 모르겠지만, PR 댓글은 이미 달렸다. 나는 이미 '네 수정하겠습니다'라고 했다. 구글 검색창을 열었다. "useCallback 언제 쓰는 거" - 검색했다. 15개의 블로그 글이 나왔다. 첫 번째 글을 3분 봤다. 역시 모르겠다. 두 번째 유튜브 영상을 1분 봤다. 진짜 모르겠다. 선배는 간단하다고 했다. 그럼 내가 문제인가.물어보고 싶은데 못 물어본다 회의실에서 코드리뷰 미팅이 있었다. 선배가 내 PR을 화면에 띄웠다. "여기서 의존성 배열에 isLoading을 빼야 해. 불필요한 리렌더링이 생긴다고." 의존성 배열. 또 그거다. 나는 지난 3개월 동안 수십 번 useEffect를 썼다. 매번 '뭐가 들어가야 하지?' 하고 생각했다. 선배들이 자동으로 넣는 건 줄 알았는데 지금 얘기를 들어보니 전략이 있다는 건가. 나는 손을 들어야 한다. "선배, 의존성 배열이 정확히 뭐 하는 거예요?"라고 물어야 한다. 근데 못 물었다. 왜? 이미 8개월 일했으니까 알아야 할 거 같아서. 이미 '네 알겠습니다'라고 대답했을 때가 있어서. 회의실에 있는 4명의 눈이 나를 볼 것 같아서. '이건 신입도 아는 거 아닌가' 할 눈빛. 그래서 나는 또 고개를 끄덕였다. 또 '네 수정하겠습니다'라고 했다. 또 메모장에 '의존성 배열 - isLoading 빼기' 라고 적었다. 퇴근하고 유튜브 검색했다. "의존성 배열 제대로 이해하기" - 1시간 20분짜리 영상이 나왔다. 10분 봤다. 졸았다. 내일도 못할 거다. 모르는데 아는 척하는 게 죄인 줄 알지만, 모른다고 말하는 게 더 큰 죄인 것처럼 느껴진다. [IMAGE_4] 그럼 어떻게 하지? 어제 밤. 침대에 누웠다. 천장만 봤다. 3개월 뒤 수습 평가가 있다. 지금처럼 모르는 척하면서 일하면 평가 때 걸릴까? 아니면 지금 물어보면 걸릴까? 둘 다 걸릴 것 같다. 그래서 내가 택한 방법은 이거다. 일단 모든 피드백에 '네 수정하겠습니다'라고 한다. 그다음 집에 가서 뭐가 뭔지 모를 때까지 검색한다. 조금 이해되면 코드를 수정한다. 선배는 '오 얘 빠르게 배우네'라고 생각한다. (아니다, 선배는 모를 거다.) 하지만 이 방법엔 문제가 있다. 내가 고를 수 없다. 모를 때마다 물어보는 대신, 내가 알 때까지 검색하기만 한다. 근데 모를 때는 많고, 알 때는 거의 없다. 선배한테 물어보는 게 더 빠르다. 5분이면 될 걸 1시간을 검색한다. 근데 못 물어본다. 입버릇처럼 나오는 말이 있다. "이거 제가 해볼게요." 그 말만 하면 선배는 안심한다. 그럼 나중에 못 해도 시간이라도 벌 수 있다. 어떻게든 피하려고 한다. 물어보는 수치심을 피하려고. 하지만 그러다 보니 내가 더 뒤처진다. 코드리뷰 피드백은 여전히 외계어다. [IMAGE_5] 어쨌든 내일도 출근한다 아침 8시 50분. 준비됐다. 샤워했고, 밥 먹었고, 커피도 마셨다. 오늘도 PR을 올릴 거다. 선배가 코멘트를 남길 거다. 나는 이해 못 할 거다. 그리고 '네 수정하겠습니다'라고 댓글을 남길 거다. 그 다음엔 메모장을 켜서 오늘의 용어를 정리할 거다. 그리고 퇴근 후 검색할 거다. 3분 정도는 이해할 거고, 나머지는 그냥 넘어갈 거다. 내일도 같은 일이 반복될 거다. 근데 뭔가 다른 기분이다. 왜냐면 어제 배운 게 있기 때문이다. 아주 조금이지만. 지난주에는 이해 못 했던 걸 이번주에는 조금 이해했다. 아마 다음주에는 조금 더 이해할 거다. 그렇게 천천히 외계어가 한국말로 바뀔 거다. 선배는 내가 모른다고 생각하지 않는다. 나는 모른다고 생각한다. 그 사이에 뭔가 있다. 아마 그게 신입의 8개월이다. 슬랙을 켰다. 좋아요 3개. 뭐 그런대로 괜찮네. 출근한다.코드리뷰는 아직도 무섭지만, 어제보다는 조금 덜 무섭다. 그게 충분하다.

ChatGPT 복붙으로 터진 첫 버그, 그리고 배운 것들

ChatGPT 복붙으로 터진 첫 버그, 그리고 배운 것들

ChatGPT 복붙으로 터진 첫 버그, 그리고 배운 것들 알람이 울린다. 9시 5분. 출근하면 슬랙부터 본다. 어제 올린 PR에 선배가 뭔가 남겼나 싶어서. 손가락이 떨린다. 항상 이 시간이 제일 두렵다. "이신입, PR 봤어? 페이지 에러 나는데." 화면이 하얀색으로 변한다. 앞뒤가 안 맞는다. 어제는 분명 잘 돌아갔었는데.어제는 분명 잘 돌아갔는데 PR을 올린 건 어제 6시 50분. 퇴근 15분 전이었다. 로컬에서는 돌아갔다. 충분히 테스트했다고 생각했다. 아니, 테스트를 제대로 한 건 아니고 새로고침 한 두 번 했으니까 괜찮겠지, 이 정도 생각했다. 기능은 간단했다. 사용자가 버튼을 클릭하면 데이터를 받아와서 화면에 띄우는 거. 페이지네이션도 들어가고 필터링도 들어가고. 그런데 시간이 없었다. ChatGPT를 켰다. "React에서 페이지네이션 구현하는 코드 보여줘." 2초 만에 100줄이 떴다. 복사. 붙여넣기. 폴더 구조에 맞게 좀 수정했다. 임포트 경로 몇 개, 컴포넌트 이름 몇 개. 나머지는 그대로였다. 뭘 하는 코드인지는 정확히 모르겠지만, 일단 로컬에서는 돌아갔다. 그게 기준이었다. "이거 봤어?" 선배 목소리가 무섭다. 모니터를 본다. 빨간 에러 메시지가 가득하다. 뭐가 뭔지 모른다. 에러 메시지는 외계어다 "TypeError: Cannot read property 'map' of undefined" 이 문장 자체가 문제다. 뭐가 undefined라는 거지? 코드를 본다. ChatGPT가 생성한 코드. 100줄. 나는 2줄 밖에 이해 못 한다. "이거 어디가 문제야?" 선배가 물어본다. "아... 네네. 제가 확인해보겠습니다." 이 문장을 말하고 나면 마음이 더 심란해진다. 기한을 정했기 때문이다. 자존심 때문에. 선배는 다시 자기 자리로 돌아간다. 나는 코드를 본다. 또 본다. 또 본다. 뭐가 문제인지 모르겠다. 일단 에러 메시지를 구글에 검색한다. "Cannot read property map of undefined react" 블로그 글이 많다. 다 이해 못 한다. 스택오버플로우를 본다. 사람들이 답변해준 코드들. 나의 코드와는 다르다. 내 코드의 어느 줄이 문제인지 모르겠다. 그냥 ChatGPT에 다시 물어본다. "위 코드에서 map 에러가 나는데 어떻게 해?" ChatGPT가 또 다른 코드를 준다. 복사. 붙여넣기. 돌린다. 에러가 달라진다. 이건 진전이다.3시간 돌다가 된 건 아무것도 없다 12시 30분. 점심 전이다. 아직도 에러다. 내가 한 거는 ChatGPT에 계속 물어보고 계속 복붙한 거다. 뭐가 다른지, 뭐가 나아졌는지도 모르고. 에러 메시지는 계속 바뀐다. 마치 내가 진전을 이루고 있는 것 같은 착각을 준다. 하지만 정말로는 아무것도 고쳐진 게 아니다. 그냥 다른 에러가 난 거다. 선배가 커피를 마시러 나온다. "아직?" "네... 거의 다 됐습니다." 거짓이다. 선배는 웃는다. 약간 씁쓸한 웃음이다. "뭘 했는데 안 돼?" 이 질문을 받으면 정신이 든다. 뭘 했는데 안 돼? 좋은 질문이다. 나는 대답할 수 없다. 정말로 뭘 한 건지 모르기 때문이다. "아... 일단 에러 메시지를 다시 확인해보겠습니다." 선배는 내 모니터 화면을 본다. 2초. "여기 봐. 이 state가 여기서는 배열이어야 하는데, 너는 뭘 넣었어?" 손가락이 가리키는 곳. 코드의 한 부분. 나는 그 부분을 본다. 아, 맞다. 내가 ChatGPT에 준 건 사용자 정보 배열이었는데, 여기서는 상품 데이터를 받아오는 API를 쓰고 있다. 구조가 다르다. "아... 네. 알겠습니다." "이게 뭘 하는 코드인지 알고 썼어?" "네..." 거짓이다. 코드를 읽기 시작했다 선배가 나간 후. 나는 ChatGPT가 생성한 코드를 다시 본다. 이번엔 다르게. 한 줄씩. 첫 번째 줄. const [data, setData] = useState([]);이건 안다. State를 선언하는 거다. 빈 배열로 시작한다. 두 번째 줄. const [page, setPage] = useState(1);페이지도 state인가. 숫자다. 1부터 시작. 네 번째 줄. useEffect(() => { // API 호출 }, [page])useEffect다. 의존성 배열에 page가 있다. 아, 페이지가 바뀔 때마다 이 함수가 실행되는 거구나. 그 안에 API 호출 코드가 있다. fetch(`/api/products?page=${page}`)아, 그래서 page 값이 URL에 붙는 구나. 그리고 받아온 데이터를 setData로 저장한다. .then(res => res.json()) .then(data => setData(data.items))아. data.items. 그래서 상품 배열이다. 그런데 내 API에서는 응답이 다르게 생겼다. { result: [...] }data.items가 아니라 data.result다. 그래서 undefined가 난 거다. map을 undefined에서 실행했으니까. 처음으로 에러가 이해가 된다. 나는 코드를 수정한다. data.result로 바꾼다. .then(data => setData(data.result))돌린다. 에러가 없다. 페이지가 뜬다. 상품 목록이 보인다. 5개. 페이지네이션 버튼도 있다. 2번을 클릭한다. 다른 상품 5개가 보인다. 된다. 진짜 된다.배운 게 뭔지 자꾸 잊는다 내가 오늘 배운 것들. 첫 번째. ChatGPT가 주는 코드는 만능이 아니다. 당연하지만 당연하지 않다. 두 번째. 코드를 알고 써야 한다. ChatGPT가 준 코드도, 유튜브 강의도, 블로그도 마찬가지다. 뭘 하는 건지 모르면, 뭐가 잘못됐을 때 못 고친다. 세 번째. 에러 메시지는 절대 거짓을 말하지 않는다. "Cannot read property 'map' of undefined" 이 메시지는 정확했다. 내가 이해를 못 한 거다. 네 번째. 선배한테 물어보는 게 빠르다. 3시간을 ChatGPT와 싸우고 있었는데, 선배 한 마디에 2분 만에 원인을 찾았다. 하지만 내일은 또 까먹을 것 같다. 그래서 메모를 남긴다. 노션에. "State와 API 응답 구조를 맞춰야 한다. 내 API는 data.result다." 그리고. "코드를 읽자. 한 줄씩." 메모를 하고 나면 뭔가 된 것 같은 기분이 든다. 하지만 이 기분도 금요일엔 사라질 거다. 퇴근하고 생각한 것 맥주잔을 들었다. 동기 태영이가 물었다. "너 오늘 뭐 했어?" "버그 고쳤어." "뭐가?" "ChatGPT 코드 때렸다." 태영이가 웃는다. "아, 나도 그런 경험 있어. 진짜. 내가 준 코드가 production에서 터진 적 있어." 또 다른 동기 지훈이가 끼어든다. "근데 지금 와야 ChatGPT 코드를 쓰면서도 자기 것처럼 행동해야 할 때가 있잖아?" 모두 웃는다. 이상한 웃음이다. 태영이가 맥주를 마신다. "그래도 너는 고쳤으니까 다행이지. 내 동생은 지금도 못 고쳤대. PR이 1주일 동안 열려 있대." "선배가 뭐라고?" "그냥 '이거 뭐 한 거야?'만 물어본다고." 우리는 계속 마신다. 맥주는 쓰다. 이건 맥주의 맛이 아니라, 우리 일의 맛인 것 같다. 내일 또 같은 실수를 할 거다 알 수 있다. 내일 또 새로운 기능이 생길 것이고. 시간이 부족할 것이고. ChatGPT를 켤 것이고. 또 복붙할 것이다. 하지만 오늘은 조금 다를 것 같다. 어쨌든 코드를 읽어야 한다는 걸 안다. 한 줄씩. 뭘 하는지는 모르겠지만, 적어도 어디가 문제인지는 찾을 수 있을 것 같다. 선배 앞에서 당황하지도 않을 것 같다. 아니, 당황할 거다. 하지만 이번엔 그냥 넘어가지 않을 것 같다. 이게 제일 중요한 거 같다.내일도 버틴다. 오늘보다 조금 똑똑해져서.