[개발일지] 오류를 해결하기 위한 과정 PART 1.

들어가기에 앞서.. 

 

 이 카테고리의 첫 글입니다. 저는 서울에서 거주 중인 7년 차 개발자입니다. 지방에서 상경해서 정신없이 살아온 것 같은데 어느덧 경력이 이렇게 흘렀네요. 일을 하면서 기록의 중요성을 체감하고 개발일지를 블로그에 적어볼까 합니다. 이 카테고리에서는 주로 개발과 관련된 주제를 적어나갈 예정이지만, 빅데이터나 인프라와도 관련이 있기 때문에 개발과는 다른 인프라, 환경에 대해서도 다룰 가능성이 있습니다. 형식은 일지 겸 일기 형식이 되겠네요. 그럼, 저의 기록이 블로그를 보시는 분들에게 최대한 인사이트를 얻으실 수 있도록 노력하겠습니다. 

 

 

---

오류 분석과 해결 업무 요청이 들어왔습니다.

 

 회사에서 일을 하던 도중, 제가 참여하지 않았던 프로젝트의 오류 해결 요청이 들어왔습니다. 사실 이 업무 요청은 몇 주 전에 있었는데요. 제가 회사에는 주 3일만 업무를 하고, 나머지 이틀은 다른 곳에서 파견나가 일하다 보니 연속적으로 일을 할 수 없는 상황이었습니다. 다른 일을 처리하느라 이 문제를 요청한 시간보다 늦게 전달받았습니다. 

 

해당 프로젝트를 회사가 개발했다는 것을 소식을 통해 인지는 했지만, 제가 개발하지 않았던 프로젝트였기 때문에 시스템과 환경에 대해서 아는 것이 전혀 없는 상황에서 이슈사항만 받은 상태입니다.

 

이슈사항

 

해당 프로젝트는 스마트팜과 관련된 웹 어플리케이션입니다. 문제가 되는 이슈사항은 웹 UI에서 데이터를 확인하기 위해 차트 팝업 노출 시 오류가 발생한다는 문제였습니다. 운영 서버로 들어가 해당 UI에서 직접 확인해봤습니다.

 

오류가 'Alert'창으로 노출되었습니다.

이슈에 관련한 정보가 이것밖에 없습니다. 위 메시지만 보고 바로 연상이 되지 않습니다.

그러나 특정 페이지, 특정 차트에서만 위 문제가 발생하기 때문에 순간적으로 차트 데이터에 문제가 있을 가능성이 있겠다고 생각이 스쳤습니다. 하지만 제가 개발한 웹 어플리케이션이 아니기 때문에 아직은 추측일 뿐, 확인된 것이 없습니다.

 

이 UI만으로는 정보가 부족합니다. 정확하게 찾아봐야겠습니다.

 

환경

개발 환경을 간략히 정리하면 다음과 같습니다.

• OS: CentOS7
• DB: PostgreSQL
• WAS: Tomcat v8.5
• Web Framework: 전자정부 프레임워크(Spring)

DB와 WAS가 개발 서버와 운영서버로 분리되어 운용되고 있었습니다. 사용자가 거의 없고 현재 고객에게 서비스를 하지 않는 웹 애플리케이션이었기 때문에 시간과 서버에 대한 압박은 없었습니다. 

 

---

 

브라우저에서 오류 현상 확인

 

크롬에서 f12 키를 눌러 개발자도구에서 오류 메시지가 있는지 확인합니다.

 

음.. 너무 깔끔합니다.

 

 

오류를 해결하기 위한 첫 번째는, 오류 메시지를 정확하게 파악하는 것입니다. 경력이 올라가고 경험을 쌓다 보면은 비슷한 문제에서 과거의 경험으로 빠르게 문제를 인지할 수 있습니다. 하지만 문제를 빠르게 인지했다 하더라도 로그와 오류 메시지를 통해 정확하게 확인하는 것이 중요합니다. 자신만의 경험만을 믿고 진행하는 것은 엉뚱한 곳을 찾아 헤맬 수 있으므로 주의해야 합니다. 

 

 

자바스크립트에서는 오류 메시지가 없습니다. 개발자 도구에서 '네트워크' 탭으로 이동합니다.

 

콘솔에서 네트워크 탭으로 이동하면 위 화면아 노출됩니다.

 

네트워크 탭에 처음 진입하면 위 화면과 같이 아무것도 기록되어 있지 않습니다. 왼쪽 상단 빨간 버튼(녹화) 버튼을 클릭 후 해당 현상을 다시 재현하거나 새로고침(f5)을 누른 후 해당 현상을 재현하면 해당 시점의 주고받았던 API리스트와 파일들을 확인할 수 있습니다. 

 

 

주소 값은 모자이크 처리했습니다.

데이터를 호출하는 URL 호출을 하였는데 상태코드:200이 떨어졌습니다. 

 

응답을 살펴보니 서버에서 오류 메시지를 내려주고 있었네요.

응답 페이지에서 오류 메시지가 확인됩니다. 이는 프론트엔드, 자바스크립트에서 코드에 따라 오류 메시지를 출력하는 것이 아닌, 서버에서 직접 오류 메시지를 내려줍니다. 오류라고 한다면 상태 코드도 200이 아닌 다른 값으로 변경해줬으면 좋았을 텐데 아쉽습니다. 

 

그리고 현재 정보가 아무것도 없기 때문에 CODE 값 ''E" 가 어떤 오류를 의미하는지 알 수 없습니다. 브라우저만으로는 한계가 있네요. 

 

그전에, 크롬 개발자 도구에 대해 자세히 알고 싶은 분을 위해 링크를 걸어둡니다.

 

https://developer.chrome.com/docs/devtools/overview/

 

API 응답 코드 정의도 중요합니다. 정리가 잘 된 블로그를 참고하시면 도움이 될 것입니다.

 

http:// https://sanghaklee.tistory.com/61 

 

 

그럼, 좀 더 찾아봐야겠습니다. 

 

---

 

서버 로그 확인

 

 브라우저에서는 별 다른 것을 확인하지 못했습니다. 이제는 서버 로그를 살펴볼 차례입니다. 

분석을 시작하기 전에 프로젝트 관련 문서를 받았습니다. 그리고 실제 운영서버에 ssh로 접속하여 로그를 확인합니다. 

 

로그 폴더에서 살펴보니 에러가 보이지 않습니다. 혹시 모르니 Grep 명령어로 다시 한번 확인해 봅니다.

 

 

$ grep -Hni "키워드" "경로"

 

위 커맨드로 파일에 error 문구가 있는지 확인했지만 한 건도 없습니다. 너무 깔끔하네요. 

 

로그에도 오류가 없다니.. 오류 확인에 한계가 생겼습니다. 빠르게 개발환경을 세팅하고 소스와 DB를 보면서 확인해야 하겠습니다. 

 

 

---

개발 환경(Eclipse)에서 오류 확인

 

 개발 환경 Eclipse 세팅에 대해서는 생략하도록 하겠습니다. 개발 소스에 로그가 구현되어 있는데 로그를 파일로 남기는 기능이 빠져 있거나, 아예 로그를 소스에 찍지 않은 경우가 있기 때문에 개발환경에서 소스를 직접 보면서 하나씩 로그를 찍는 상황까지 고려할 수 있습니다. 점점 더 일이 커지네요.

 

저의 노트북에는 프로젝트 소스파일이 없어 사내 SVN으로 다운로드하였습니다. 문서를 살펴보니 매일 배치로 센서 데이터를 DB에 저장하고 있었습니다. 개발 DB는 운영 DB와 달리 데이터가 존재하지 않아 정확한 오류 확인을 위해서는 운영 DB -> 개발 DB로 데이터를 이관하는 작업이 필요해 보였습니다. 

 

다행히 테이블 개수와 데이터 양이 많지 않았습니다. 데이터와 테이블의 양이 많지 않을 경우 ETL작업은 DBeaver나 Jetbrain사의 DataGrip과 같은 Tool로도 간단하게 데이터와 테이블을 옮길 수 있습니다. 저는 DataGrip이 설치되어 있었기 때문에 DataGrip으로 진행하였습니다. 

 

복사하고자 하는 테이블을 클릭 후 마우스 오른쪽을 클릭합니다.

 

DataGrip에서는 "다음으로 테이블 복사" 기능으로 간편하게 테이블과 데이터를 복사할 수 있습니다. 하지만 간과한 것이 있었으니.. 이 방법은 저의 노트북 리소스를 사용한다는 점입니다. 

 

아무리 기다려도 이관이 끝나지 않습니다.

사내에 남는 노트북을 사용하는 중이라 노트북의 성능이 좋지 않았습니다. 16GB 램에 CPU i5-2450m입니다. 작업을 시작하는 순간 노트북 속도가 급격하게 떨어졌습니다. 제가 쓰는 노트북은 너무 오래된 노트북이라 배터리 충전도 되지 않아 유선을 연결하지 않으면 노트북이 구동이 안될 정도입니다. 

 

 

결국 데이터 이관은 동료 직원에게 부탁해서 빠르게 처리했습니다. 

 

Local 환경에서 Tomcat을 구동하여 해당 현상을 재현했습니다.

으아아~ 로그가 빠르게 올라가고 있습니다.

 

 

오류가 발생하면서 로그가 멈췄습니다. 확인해보니 서버 로그나 브라우저에서는 확인할 수 없었던 문구가 보였습니다. 

 

 

드디어 오류를 확인했습니다. 

 

 

 

오류를 확인하는 데에는 많은 시간이 걸리지 않았지만, 개발 환경 세팅하기 위해 소스를 다운로드받고 DB를 연결하고 Eclipse를 설치하는 동안 시간이 많이 소요되었습니다.

내용이 길어지네요. 다음 글에 이어서 쓰도록 하겠습니다.