Today I learned - Problem Solving Skills

#programming #problemsolving #angular #frontend

효율적인 문제해결 과정이란 무엇일까?

흔히 말하는 "삽질"을 줄이고 눈 앞에 닥친 문제를 어떻게 하면 빨리 해결할 수 있는지 현업에서 겪은 일을 통해 깨달은 3가지 방법을 소개하려고 한다.

최근 dropdown typeahead 기능을 구현하는 작업을 했다. 부모 component로 부터 option값들을 전달받아야 했는데, object로 부터 빈 array만 받아오는 것이었다.

빈 값만 전달받기 때문에 dropdown에 뿌려줄 목록은 안나오는 상황이었고, 그 부분에서 막혀 계속 헤매고 있었다. 답답해서 시니어 개발자 분께 여쭤보니 일단 모든 곳에 로그를 찍어보라고 하셨다.

문제 원인은 생각보다 너무 단순했다. value change 이벤트를 받을 때 값이 변경되기 때문에 그 때 option 값들을 할당해주면 되는데, component가 init 될 때만 값을 받아와서 당연히 빈 값만 셋팅 되었던 거였다.

첫번째 depth에서 선택한 값에 따라 2depth, 3depth의 dropdown 옵션들이 달라지는 로직이기 때문에 이벤트가 어디서 오는지 파악하고, 로그만 찍어봤어도 바로 해결되었을 문제...!!

이 사건으로 깨달은 나의 개선해야할 점을 정리해 봤다.

막연한 가정하지 않기

일단 모르겠으면, console log 찍어보기

다른 사람이 작성한 코드를 참고할 땐, 제대로 분석하고 그 흐름을 이해해서 필요에 맞게 쓰기

1. 막연한 가정하지 않기

이 상황에선 이렇게 데이터가 출력되겠지, 여기선 아직 데이터 set 안됐겠지 등 암묵적으로 가정하고 문제를 해결하려고 했기 때문에 삽질한 시간이 더 길어졌다.

2. 일단 모르겠으면, console log 찍어보기

옆자리 시니어 개발자 분께서 제일 강조하신 말씀이다..ㅎㅎㅎ "막연한 가정하지 않기" 와 이어지는 부분으로, 일단 log를 찍어보고 데이터의 흐름을 파악하는게 중요하다고 말씀하셨다.

3. 다른 사람이 작성한 코드를 참고할 땐, 제대로 분석하고 그 흐름을 이해해서 필요에 맞게 쓰기

이번에 작업한 부분은 formly라는 라이브러리로, JSON 데이터를 인식해 form UI 형태로 만들어주는 걸 사용중이었다. formly에서 typeahead가 가능한 dropdown을 구현하기 위해 해당 코드를 참고해서 적용했다.

RxJs의 Subject와 Observable을 변수로 이용해서 사용하는데, 사실 동작하는데만 초점을 맞추고 그냥 아무 생각없이 가져와서 어떻게든 우리 코드에 우겨넣으려고(?)했던 것 같다.
참고한 코드를 분석해서 왜 이건 이런식으로 썼을지 고민은 하지 않고 기능을 구현하는데 급급했다.

이런 부분에서 약간 꾸지람을 들었다.😅😅 (동작 원리를 제대로 파악하고 있지 않는데 어떻게 활용해서 그 코드를 쓸 수 있겠냐고...)

주니어 개발자로서, 매 순간 과정에서 배워야 할 점이 생긴다. 이번에 깨달은 문제 해결 방법 3가지를 새기면서, 앞으로는 같은 문제가 생겨도 더 쉽게 접근하고 해결할 수 있기를 바래본다.