남이 짠 코드를 빠르게 파악하는 법 (To.주니어)

팀을 옮기고 다른 사람이 작성한 프론트/백 코드를 빠르게 파악할 필요가 있었다.
내가 택한 방법은

'문서화'였다.

보통 문서화 하면 귀찮은 거 라는 편견(..)이 있는데, 코드를 파악할 때 무척 유용한 방법이었다. 엄청 실력있는 개발자분들은 코드가 바로바로 머릿속에 들어올지 모르지만 나 같이 작고 귀여운 개발자에겐 무리다! 그래서 한땀한땀 정리하고 기록하며 코드를 파악하는 과정이 필요했다.

사내에 화면별 개발 문서가 있다면 저어엉말 좋겠지만, 없는 상황도 왕왕 존재한다. 이에 코드 파악으로 고통을 겪고 계신 주니어 개발자분들을 위해, 내가 진행했던 프로세스를 공유한다. 별건 아니지만! 그냥 작고 귀여운 주니어 개발자지만! 그냥 이렇게 한 사람도 있구나, 하고 참고하시면 좋을 것 같다. 도움이 된다면 기쁠 것!

나의 프로세스는 다음과 같다.
0. 담당 화면 또는 기능별 게시글을 노션/컨플루언스/원노트 등에 만들어둔다.
1. 현업(혹은 기획자, 인계자 등등)에게 해당 화면/기능의 용도에 대해 설명을 듣는다.
2. BACK : 핵심 API의 사용 테이블과 로직을 확인한다.
3. BACK: 쿼리의 JOIN 조건과 처리 조건을 파악한다.

위 내용을 문서로 작성한다.
[화면용도]
[핵심기능]
[DB]
[조건정의]
[특이사항]
[연계화면]

정도로 기술했다.

이어서

4. FRONT : 컴포넌트 구조를 먼저 파악한다.
5. FRONT : 각 버튼의 이벤트를 파악한다.
6. FRONT : props, state가 어디에서 쓰이는지 보고, API로 보내는 데이터가 뭔지, 유효성검사 등등등을 파악한다.

FRONT는 별도 문서로 작성하기보다, 주석으로 적어두는 게 개인적으로는 편했다. 코드에 주석을 다는 걸 선호하지 않는 문화라면 별도 문서에 작성하거나, 새로 파일을 복붙해서(...) 주석을 다는 것도 방법일 듯하다. 지금 내가 있는 환경은 주석이나 코드스타일 제한이 거의 없어서 가능한 거 같다. 혹시 좋은 방법 있음 알려주심 감사하겠습니다.
참고 : https://dev-dev-dev-dev.tistory.com/54

당신의 주석 한 줄, 다른 개발자의 생명을 살릴 수 있습니다

컴포넌트 구조가 복잡하면 바로바로 머릿속에 그려지지 않는 문제도 있었다.
그 때는 화면을 캡처해서 PPT에 붙여넣은 뒤, PPT로 컴포넌트를 그려가면서 머리에 집어넣었다. 그렇게 그려둔 화면은 그림으로 저장해서 게시글에 넣어뒀다. 아래는 예시.

이렇게 하면 게시글을 반복해서 보면서 자신이 맡은 화면/기능을 보다 빠르게 숙지할 수 있다. 기억나지 않는 것들이 있을 때 빠르게 찾아볼 수도 있음! 해당 기능/화면에 변동사항이 생길 때마다 기록해두면 나중에 찾아보기 편하다는 것도 장점. ㅎㅎ 컨플루언스 등 공유 공간에다가 적어두고 공개하면.. 열공하는 주니어 개발자 이미지는 덤이다... 찡긋.

급할수록 돌아가라는 말이 있듯, 시간이 어느 정도 주어진다면 위와 같은 방식으로 확실하게 코드를 파악하는 것도 좋은 방법이라 생각한다!

혹시 더 좋은 방법이 있다면 언제든지 알려주세요!