소스 분석 하는 방법...

처음 입사를 하고 가장 어려웠던 과제,
사내 코드를 분석하는 일이었습니다. 
내가 짠 코드도 못알아보는데 남이 짠 코드라니...!! 정말 막막했는데요.
지금와서 생각해보니 코드분석은 프로젝트 구조 및 구성요소를 이해하는데 가장 큰 도움이 되었던 것 같습니다. 

 

프로젝트 코드 분석 순서 요약

1. 프로젝트의 목적을 이해한다. 
2. 구조를 파악한다. 
3. 관련 개념을 익힌다. (EX. 도서, 강의, 유튜브, 질문...등)
4. 자료구조를 파악한다. (주석, 파일, 함수, 호출위치)
5. 화면과 서버간 데이터 흐름을 파악한다. (디버깅 혹은 F12 개발자 도구 활용)

 

프로젝트 코드 분석하는 법

 

경우 1 설계문서가 존재하는 경우 

저는 문서가 없어서 하나하나 뜯어봐야했지만 화면설계서 등 문서가 있었다면, 이렇게 했을 것 같습니다. 
 
1. 제품의 전체 구조 파악하기 
초보자의 경우 전체적인 흐름을 알아야 세부적인 흐름이 이해되기 때문에 코드 분석 시 생각보다 중요한 과정입니다.
1.1 상위 메뉴 하위 메뉴 구성 
1.2 화면 목록 > 페이지별 화면 정보 및 비고 정리 
 
2. 클래스다이어그램 그려보기  
거창해보이지만 플로우차트 그리는 개념이라고 생각하면 됩니다. 
2.1 어느 기능과 어느 기능이 밀접하게 연관되어 있는지 그림으로 그려 정리하는 방법 
기능들이 어떻게 연결되어있는지 대략적으로 이해할 수 있는 단계입니다. 
헤당 페이지에서 필요로 하는 필드값도 정리해두면 좋다는데, 다 적으려면 시간이 오래걸릴  것 같습니다. 
 
3.  코딩 규약, 정책, 권한 설계 등을 확인하기
문서를 읽어보고 실제 ide로 프로젝트를 열어 코드들이 어떻게 규칙적으로 짜여져 있는지 확인하면 됩니다. 
 
4. 화면에서 어떤 행동(action)을 하면 어떤 결과(result)가 나오는지 정리하기
실무에서 가장 중요한 부분이라고 생각합니다. 
이 부분을 이해하는데 시간이 가장 오래걸리고 봐야할 파일도 많았습니다. 
아마 JS에 대한 지식이 부족해서 그런 것 같습니다. 
이 단계에서 데이터들이 어떻게 움직이는지 이해하게 됩니다. 
 
5. 유효성 검사 (사용자로부터 적절한 값을 받지 못한 경우의 로직 정리)
초보라면 유효성 검사까지 정리하긴 좀 어려울 것 같습니다.
내 얘기니 오해는 하지 마시길...
상황 설명, 알림 문구, 처리 로직 정리를 하면 됩니다.  
이 부분을 정리해둔다면 나중에 사용자가 제품 사용 중 문제가 생긴 경우, 원인을 빨리 파악할 수 있을 것 같습니다. 
 
경우 2 설계문서가 없는 경우
프로젝트에 대한 어떠한 정보도 없기 때문에...
프로젝트의 빌드 정보를 가장 먼저 보는 것이 그나마 좋은 방법이라고 생각합니다. 
 

1. 작성언어와 프레임워크, 특정 라이브러리의 사용 여부를 조사합니다. 

어떻게 빌드되었냐에 따라 패키지 구조와 코드 규약의 틀이 정해져 있는 경우가 많으므로 꼭 거쳐야 하는 첫 단계입니다.
 

2. 어떤 기능을 하는 프로젝트인지 입출력 방식이 어떻게 되는지 정리합니다. 

프로그램이란 어차피 입구 → 처리 → 출구 에서 벗어날수 없으므로
처리 부분이 이떻게 기술되어있는지 보고,
기능이 어디에 구현되어있는지 몸통을 찾습니다.
이 때 기능구현의 패턴을 찾으면 (패턴이 있는 프로젝트 한정)
대부분 비슷한 패턴으로 각각의 기능이 구현되었을 것이므로
기능이 많더라도 프로젝트를 이해하는 속도가 빨라집니다. 
 

3. 화면과 서버가 어떻게 연결되는지 파악합니다. 

- 화면에 나오는 데이터는 어디서부터 받아온 값인지 
- 서버로 전달된 데이터는 어떻게 사용되는지 
- 화면에서 입력받은 값은 DB에 어떻게 저장되는지 확인합니다. 
> 디버깅을 통해 해당 코드의 기능, 주고받는 값들을 확인합니다. 
 
 

[웹/앱 설계의 기본] 화면설계서 작성방법

웹 기획에 필요한 문서 정리 (메뉴 구조, 기능정의서, 화면설계 등)