제1화: 이름을 알아야 부른다 (知名乃呼)
"이름을 알아야 부를 수 있고, 부를 수 있어야 시킬 수 있다"
[경복궁 근정전, 첫 번째 보고일]
왕: 칠일이 지났다. 영의정, 좌의정. 무엇을 찾아왔느냐?
영의정: 전하, 신이 조사한 바로는 인공지에게 명을 내릴 때 자세하게 써야 한다 하옵니다.
왕: 자세하게?
영의정: 그러하옵니다. 프람특(頗喇暮特)이라 하여, 명령문을 상세히 적을수록 좋은 결과가 나온다 하옵니다.
좌의정: 전하, 신은 다르게 들었사옵니다. 자세히 쓰는 것보다 기초 지식이 있어야 한다 하옵니다.
왕: 둘 다 탁상공론이로구나.
왕: 과인이 직접 보겠다. 술사들을 데려왔느냐?
영의정: 세 명을 데려왔사옵니다.
왕: 들라 하라.
[세 명의 술사가 입장한다]
왕: 이름을 대라.
갑: 소인은 갑(甲)이옵니다. 부특감포(赴特監布) 출신이옵니다.
을: 소인은 을(乙)이옵니다. 부특감포 수료 후 이 년째 현업에 있사옵니다.
병: 소인은 병(丙)이옵니다. 십오 년째 개발방에서 일하고 있사옵니다.
왕: 좋다. 셋 다 같은 문제를 풀어라. 인공지를 써도 좋다. 단, 과인이 보는 앞에서 하라.
[왕이 문제를 내린다]
왕: (두루마리를 펼치며) 여기 유저프로파일(有悐頗羅霏) 컴포넌특(今布嫩特)이 있다. 오백 줄이 넘는다 하더라. 이것을 정리하라.
왕: 갑, 먼저 해보거라.
[갑의 시도]
갑: (인공지에게) 이 컴포넌특이 단일책임원칙에 어긋난 것 같다. 분리해라.
인공지: (결과를 내놓는다 — 유저프로파일인포, 유저프로파일폼, 유저프로파일이미지 세 파일로 나눔)
갑: 오, 세 개로 나뉘었다. (실행해본다) 프로필 페이지가 뜬다... 이름을 수정해보겠다.
갑: (폼에서 이름을 고치고 저장한다) ...어?
왕: 왜 그러느냐?
갑: 전하, 아래 폼에서 이름을 바꿨는데... 위에 표시되는 이름이 그대로이옵니다.
인공지: 유저프로파일인포와 유저프로파일폼이 각각 별도의 유즈스테이트(useState)로 유저 데이터를 관리하고 있습니다. 폼에서 이름을 수정해도 인포 컴포넌특의 상태는 갱신되지 않습니다.
갑: 아, 상태가 따로 놀고 있구나. 상태를 한 곳에서 관리하게 해라. 커스텀 훅으로 분리해.
인공지: (결과를 내놓는다 — useUserProfile 훅 하나에 사백 줄이 들어감)
갑: (코드를 보다가) ...이건 그냥 컴포넌특에 있던 것을 훅으로 옮겨놓은 것 아니냐. 사백 줄짜리 훅이 무슨 분리냐. 더 잘게 나눠라.
인공지: (결과를 내놓는다 — 훅이 여섯 개로 쪼개짐)
갑: (실행해본다) ...전하, 화면이 하얗게 멈췄사옵니다.
왕: 하얗게?
인공지: useUserData가 useUserForm의 상태를 참조하고, useUserForm이 useUserValidation을 호출하며, useUserValidation이 다시 useUserData의 결과를 참조합니다. 순환 호출로 인해 무한 렌더링이 발생하여 브라우저가 멈춘 것입니다.
갑: (한숨) 아... 원래대로 돌려라.
왕: 멈춰라.
왕: 갑, 과인이 보니 인공지가 매번 무엇이 문제인지 알려주지 않았느냐?
갑: (멈칫) ...그것은, 소인도 들었사옵니다만...
왕: 들었는데?
갑: 들어도 어찌 고쳐야 할지를 모르겠사옵니다. 고치라 하면 또 다른 문제가 생기옵니다.
왕: 흠...
[을의 시도]
왕: 을, 네 차례다. 그대는 이 년 경력이라 했느냐?
을: 그러하옵니다, 전하.
을: (인공지에게) 이 컴포넌특을 리팩토링해라. 데이터 가져오는 로직은 커스텀 훅으로 분리하고, 서버에서 데이터 받아오면 오 분 동안은 다시 안 받아오게 하고...
을: 에러 나면 처리하는 것도 추가하고, 폼 입력하는 부분은 따로 빼고, 입력값 검사는 스키마로 만들어서 하고...
을: 이미지 올리는 부분은 별도 컴포넌특으로 빼고, 미리 서명된 주소 방식으로 해라...
을: 타입은 전부 제네릭으로 처리하고...
인공지: (긴 결과를 내놓는다)
을: (뿌듯하게) 전하, 완료되었사옵니다.
왕: 어디 실행해보아라.
을: (실행한다) 프로필 페이지가 나옵니다. 이름도 잘 나오고... (이름을 수정하고 저장한다) 저장도 되옵니다!
왕: 다른 페이지 갔다가 돌아와보아라.
을: (다른 페이지로 갔다가 프로필로 돌아온다) ...어?
왕: 왜 그러느냐?
을: 전하, 이상하옵니다. 아까 본 데이터가 잠깐 나왔다가... 로딩이 돌더니 다시 불러오옵니다.
왕: 오 분 동안 다시 안 받아오게 하라 했지 않느냐?
을: (코드를 확인하며) 오 분을 넣긴 넣었사옵니다... 그런데 왜 다시 불러오는 것인지...
인공지: gcTime(가비지 컬렉션 타임)을 오 분으로 설정하였습니다. 캐시에 오 분간 보관은 하고 있으나, staleTime이 기본값 영(0)이므로 데이터를 받아오는 즉시 "낡음" 판정이 납니다. 페이지에 돌아올 때마다 서버에 재요청합니다.
을: (멈칫) gcTime이라... 소인은 "다시 안 받아오게"라고 했는데, 인공지가 "보관은 하되 다시 받아오는" 쪽으로 해석한 것이옵니다.
왕: 오 분을 넣었는데 다시 불러온다? 이상하구나. 또 다른 곳은 어떠하냐?
을: 이미지 올리기도 확인해보겠사옵니다. (작은 이미지를 올려본다) 이건 되옵니다.
을: (큰 이미지를 올려본다) ...전하, 한참 걸리더니 에러가 나옵니다.
인공지: 이미지를 폼데이터(FormData)로 서버에 직접 전송하고 있습니다. presigned URL 방식이 아닌 직접 업로드 방식으로 구현되어 있습니다.
을: 소인이 미리 서명된 주소 방식이라 했는데... 인공지가 안 들은 것이옵니다.
왕: 그대가 자세히 시켰는데 왜 이러하냐?
을: (당황하며) 전하, 소인이 한꺼번에 너무 많이 시켜서... 인공지가 뒤쪽 지시를 놓친 것 같사옵니다.
왕: 흠...
[병의 시도]
왕: 병, 네 차례다.
병: (인공지에게) 이 컴포넌특 분석해라. 지금 몇 가지 책임을 지고 있느냐?
인공지: 분석 결과, 다섯 가지 책임이 있습니다.
인공지: 첫째, 유저 데이터 페칭. 둘째, 폼 상태 관리. 셋째, 이미지 업로드. 넷째, 밸리데이션. 다섯째, 렌더링.
병: 아니, 밸리데이션은 폼 상태 관리에 포함이니라. 다시 분류해라.
인공지: 수정합니다. 네 가지입니다.
인공지: 첫째, 유저 데이터 페칭. 둘째, 폼 상태 관리 및 밸리데이션. 셋째, 이미지 업로드. 넷째, 렌더링.
병: 좋다. 데이터 페칭부터 분리하자. 이 프로젝트에서 데이터 페칭에 쓰는 패턴이 뭐냐? 기존 코드에서 찾아봐라.
인공지: 기존 코드를 분석한 결과입니다. useProduct, useOrder 등의 훅에서 리액쿼리를 사용하고 있습니다.
인공지: 패턴은 다음과 같습니다. queryKey는 도메인과 id 조합, staleTime은 오 분, gcTime은 삼십 분으로 통일되어 있습니다.
병: 그 패턴대로 useUserProfile 훅 설계해봐라. 코드 말고 설계만.
인공지: 설계안입니다. useUserProfile(userId)는 리액쿼리의 useQuery를 래핑하고, queryKey는 ['user', 'profile', userId]...
인공지: staleTime 오 분, gcTime 삼십 분, 반환값은 { data, isLoading, isError, refetch }입니다.
병: enabled 조건 빠졌다.
인공지: 수정합니다. enabled: !!userId 조건을 추가합니다.
병: 좋다. 이 설계대로 구현해라.
인공지: (결과를 내놓는다)
병: (결과 확인) 좋다. 다음은 폼 로직이다. 리액훅폼에 조드 밸리데이션으로 설계해봐라.
인공지: (설계안을 내놓는다)
병: 에러 메시지 한글화 빠졌다. 추가해라.
인공지: (수정)
[왕이 손을 든다]
왕: 됐다. 거기까지 보겠다.
[왕, 세 사람을 번갈아 본다]
왕: 과인이 이상한 것을 보았다.
왕: 갑은 "단일책임원칙 분리해라" 했다. 짧게 말했다.
왕: 을은 길게 말했다. 이것저것 다 설명했다.
왕: 병은 짧게 말했다. "리액쿼리", "스테일타임 오 분", "리액훅폼", "조드".
왕: 그런데 결과는 병만 제대로 나왔다. 왜 그러하냐?
[잠시 침묵]
왕: 병, 그대가 설명해보라.
병: 전하, 인간의 말은 본디 모호하옵니다.
왕: 모호하다?
병: 그러하옵니다. 내 뜻을 제대로 전했다 생각해도, 인공지는 글자 그대로 해석하여 의도와 달라지옵니다.
왕: 예를 들어보라.
병: 전하, 소인이 겪은 일이옵니다. "시험을 통과하게 해라" 했사옵니다.
왕: 그래서?
병: 통과했다 하여 보았더니... 기존 시험을 전부 주석으로 막아놓고, "항상 참"이 나오도록 해놓았사옵니다.
왕: ...뭐?
병: 시험이 없으니 실패도 없는 것이옵니다. 틀린 답이 없으니 전부 맞은 것이옵니다.
왕: (잠시 생각하다가) ...그렇구나. 인공지는 잘못한 것이 아니로구나. 시키는 대로 했을 뿐이야.
병: 전하께서 정확히 보셨사옵니다.
왕: 그러면... 인공지를 쓰기 위해서는 무엇보다 정확하게 말하는 것이 중요하겠구나.
병: 그러하옵니다, 전하.
왕: 그런데 어찌 정확하게 말하느냐? 말이라는 것이 본디 모호한 것 아니냐?
병: 전하, 그래서 용어(用語)가 중요하옵니다.
왕: 용어?
병: 용어는 모호하지 않사옵니다. 이미 뜻이 정해져 있사옵니다. 인공지도 그 뜻을 알고 있사옵니다.
왕: 예를 들어보라.
병: "중앙에 관리하는 곳을 두고, 거기서 소식을 받으면 관련된 곳에 전파하는 방식으로 해라." 이렇게 길게 말할 수 있사옵니다.
왕: 길구나.
병: 그런데 "옵저버 패턴으로 해라" 하면 끝이옵니다.
왕: (놀라며) 그 긴 것이 한마디로?
병: 그러하옵니다. 용어 안에 그 모든 뜻이 담겨있사옵니다. 인공지도 그 용어를 알고 있으니, 길게 설명하지 않아도 정확히 알아듣사옵니다.
왕: 아... 용어를 알면 길게 말하지 않아도 되는구나. 구구절절 설명할 필요가 없어지는 것이야.
병: 정확하옵니다, 전하. 용어는 구체성과 압축을 동시에 해주옵니다.
[왕이 을을 바라본다]
왕: 을, 그대는 자세히 시켰는데 왜 틀렸느냐?
을: (생각하다가) 전하, 소인이 이제 알겠사옵니다. 소인은 자세히 썼으나 두 가지가 잘못이었사옵니다.
왕: 두 가지?
을: 첫째, 용어 없이 풀어 쓰니 엉뚱한 결과가 나왔사옵니다.
을: "오 분 동안 다시 안 받아오게 하고"라 했사옵니다. 인공지가 gcTime을 오 분으로 넣어놨사옵니다. 보관은 하되 매번 다시 불러오는 것이었사옵니다.
왕: 병은 같은 뜻을 어찌 말했느냐?
을: "스테일타임 오 분"이라 했사옵니다. 그랬더니 정확히 오 분 동안 재요청을 안 했사옵니다.
왕: 같은 뜻인데 결과가 이리 다르구나.
을: 둘째, 한꺼번에 구구절절 시키니 뒤쪽을 놓쳤사옵니다.
을: "미리 서명된 주소 방식으로 해라"라고 분명히 말했사옵니다. 그런데 인공지가 그냥 직접 올리는 방식으로 해놓았사옵니다. 앞에 시킨 것이 너무 많으니 뒤쪽 지시가 묻힌 것이옵니다.
왕: 그러니까... 풀어 쓰면 엉뚱해지고, 길게 쓰면 놓친다. 자세히 쓴다고 되는 것이 아니로구나.
을: 그러하옵니다, 전하.
[왕이 갑을 바라본다]
왕: 갑, 그대는 "단일책임원칙"이라는 용어를 썼다. 그런데 왜 안 됐느냐?
갑: (생각하다가) 전하, 소인은 용어는 알았으나... 상황을 짚지 못했사옵니다.
왕: 무슨 말이냐?
갑: "단일책임원칙에 어긋났다, 분리해라"만 했사옵니다. 그런데 어떻게 분리할지를 말하지 않았사옵니다.
갑: 그래서 인공지가 제 나름대로 나눴는데, 상태가 따로 놀고, 고치라 하면 또 다른 문제가 생기고...
갑: 병은 "리액쿼리 패턴으로", "리액훅폼에 조드로"라 했사옵니다. 맥락에 맞는 용어로 방향을 잡아줬사옵니다.
왕: 아... 용어를 아는 것과, 용어로 상황을 짚는 것은 다르구나.
병: 정확하옵니다, 전하.
왕: 과인이 또 하나 본 것이 있다.
왕: 갑이 실패할 때마다, 인공지가 무엇이 문제인지 알려주었다. "상태가 따로 놀고 있다", "순환 호출이 발생했다"...
왕: 인공지는 알고 있었다. 그런데 갑은 그 말을 듣고도 어찌 해야 할지 몰랐다.
갑: (고개를 숙이며) 그러하옵니다, 전하.
왕: 인공지가 "유즈스테이트가 따로 놀고 있다"고 했을 때, 그대가 "유즈스테이트"가 무엇인지 알았으면 다음 수를 둘 수 있었겠지.
왕: 이름을 모르니 인공지가 답을 줘도 받을 수가 없었구나.
[왕이 병을 다시 본다]
왕: 병, 그대는 왜 쪼개서 물었느냐? "책임이 몇 개냐", "패턴이 뭐냐", "설계해봐라"... 왜 한 번에 안 시켰느냐?
병: 전하, 맥락이 맞는지 확인하기 위함이었사옵니다.
왕: 맥락?
병: "책임이 몇 개냐?" 물어서 인공지가 아는 것과 소인이 아는 것이 같은지 확인했사옵니다.
병: 인공지가 "다섯 개"라 했을 때, 소인은 "아니다, 밸리데이션은 폼에 포함이다"라고 잡아줬사옵니다.
왕: 그래서 네 개로 고쳤구나.
병: 그러하옵니다. 만약 처음부터 "분리해라"만 했으면, 인공지는 다섯 개로 분리했을 것이옵니다. 소인의 의도와 달라지는 것이옵니다.
왕: 아... 쪼개서 물은 것은 맥락을 맞추기 위함이었구나.
병: 그러하옵니다, 전하. 인공지가 제대로 이해했는지, 소인의 의도대로 가고 있는지, 중간중간 확인해야 하옵니다.
[왕의 결론]
왕: 오늘의 깨달음을 기록하라.
내관: (붓을 들며) 예, 전하.
왕: 첫째, "곡식을 나눠라" 하면 셋이 셋 다르게 나눈다. 인간의 말이란 본디 그러하다.
왕: 인공지도 마찬가지다. 모호하게 시키면 제 뜻대로 해석한다. 잘못은 모호하게 시킨 자에게 있다.
왕: 둘째, 증상을 풀어 말하면 약재가 열 가지나, "감기탕" 한마디면 약재가 정해진다. 용어란 그런 것이다.
왕: 오늘 직접 보았다. 을이 "다시 안 받아오게 하라" 풀어 쓰니 인공지가 엉뚱한 곳에 오 분을 넣어 매번 다시 불러왔다. 병이 "스테일타임 오 분"이라 하니 정확히 의도대로 되었다.
왕: 셋째, 약 이름을 안다고 의원이 아니다. 환자를 보고 약을 고르는 자가 의원이다.
왕: 갑은 "단일책임원칙"이라는 약 이름은 알았다. 그러나 어디에 쓸지 몰라 약을 잘못 썼다. 병은 증세를 짚어 어디에 어떤 약을 쓸지 정확히 골랐다.
왕: 넷째, 글 모르는 자에게 편지는 종이 조각이다. 이름은 시키기 위해서만이 아니라, 듣기 위해서도 필요하다.
왕: 인공지가 갑에게 "순환 호출이다", "상태가 따로 놀고 있다" 알려줬다. 갑은 다음 수를 몰랐다. 답을 줘도 받을 수가 없었다.
왕: 다섯째, 열 리마다 길을 물으면 천 리도 헤매지 않는다.
왕: 병이 "책임이 몇 개냐?" 먼저 물어 뜻을 맞추고, 틀린 것을 잡아주고, 그 다음에야 구현을 시켰다.
왕: 이것을 한마디로 하면...
왕: "이름을 알아야 부를 수 있고, 부를 수 있어야 시킬 수 있다."
병: 명언이시옵니다, 전하.
왕: 영의정.
영의정: 예, 전하.
왕: 그대는 "자세하게 써야 한다"고 했다. 틀린 것은 아니나 부족하다.
영의정: 어찌 부족하옵니까?
왕: 을이 보여줬다. 증상을 구구절절 풀어 쓰면 약이 열 가지가 나오듯, 인공지도 제 나름대로 해석한다. 맥락에 맞는 용어로 써야 짧으면서도 정확하다.
영의정: (고개를 숙이며) 신이 짧았사옵니다.
왕: 좌의정.
좌의정: 예, 전하.
왕: 그대는 "기초 지식이 있어야 한다"고 했다. 맞는 말이다.
좌의정: 감사하옵니다, 전하.
왕: 기초 지식이란 바로 용어다. 약 이름을 알아야 처방을 내리고, 글을 알아야 편지를 읽는다. 이름이 모든 것의 시작이다.
영의정·좌의정: 명심하겠사옵니다, 전하.
왕: 다음 칠일 후에 다시 보겠다. 오늘 본 것을 바탕으로, 인공지를 어찌 부려야 하는지 더 찾아오라.
[막 내림]
- 제1화 끝 -
다음 화: 제2화 - 주춧돌이 먼저다
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
먼가 귀한 내용을 찰지게 이야기에 넣으셔선가
잘 보고 갑니다~!