👶 내 포트폴리오와 협업 프로젝트로 간단히 만져본 JavaScript...근데...백엔드 개발자로 입사해서도 만져볼 줄은 몰랐지...
일단 입사하고 바로 비지니스 지식을 주로 쌓기 위해 교육을 받고 드디어!!! 업무를 받았다. 그러나 원했던 백엔드 업무가 아닌 프론트단 업무였다. (물론 프론트가 익숙치 않아 힘들었지만 덕분에 비지니스 지식은 많이 쌓았다. 🙇♀️)
뭔가...처음에는 크게 실망했다! 나도 스프링으로 뭔가를 하고 싶었던 거 같다. 그렇지만 지금 생각해보니, 내가 이곳의 비지니스 지식을 모르는 상태에서 할 수 있는 최선의 업무가 프론트단의 업무이지 않을까 싶다.
엄밀히 말하자면 디자인을 한다거나, 그런 거는 아니고 JavaScript를 통해서 엑섹을 다운 받을 수 있다거나, 조회 버튼을 누르면 원하는 데이터만 조회해서 화면에 출력한다거나. 그런 부분을 하게 되었다.
그러다 보니 사용자측면에서 서비스를 바라볼 수 있게 되고 비지니스지식을 더 빠르게 습득할 수 있었던 거 같다. 이게 가장 큰 수확이었다.
구현하고자 한 기능은 크게 2가지이다.
1. 날짜, 기관코드(명) 검색 시 원하는 데이터만 호출된다.
2. 호출된 데이터는 엑셀로 다운받을 수 있도록 만든다.
위의 상황은 무사히 기능구현은 완료했다.
하지만 생각치도 못했던 부분에서 고민을 많이 했다
바로 JavaScript의 비동기적 특성때문이었다.
문제상황은 다음과 같았다.
🤔 기관코드/기관명을 search바에서 입력 시, 유효값인지를 검사하고자 한다. 즉, 원하는 순서는,
- 유효값인지 검사
- 유효값이라면 해당 입력값을 search로직에 전송
하지만 비동기로 동작하므로 원하는 대로 (search로직에 해당 입력값이 파라미터로 보내지고) - (유효한 값인지 검사하는) 것이 보장되지 못하고 있었다..
정말 부끄럽지만, 함수 내에 또 유효성 검사 함수를 내장시켜서 억지로 동기화하려고도 해보았다..코드도 굉장히 클린하지 못할 뿐더러 비동기화도 안됐던 시도였다.
결국 이를 해결하기 위해
입력이 끝나면 ✨keyup이라는 이벤트를 통해 강제로 입력이 끝났을 시에 해당 값이 유효한지를 검사하도록 만들었다.
이게 가능했던 이유도 기관코드가 최대 5글자였기 때문에 5글자까지 타이핑후 keyup이 불리면서 해당 keyup이벤트 내에 유효성 체크를 해주었다.
다행히 원하는 로직대로 동작해서 이렇게 통과됐던...그런 나의 첫번째 업무였다.
별거아니기도 하고, 또 내 주요업무(백엔드)와는 다소 거리가 멀어서 초반에 멍때리는 시간이 있었다. 어려웠던 이유도 내가 모르는 비지니스 지식이 섞여들어간 화면을 개발하는 거라, 동작이 제대로 되는지 확인하는 것도 선배님들께 여쭤봐야 했기 때문이었다. 다 이런 시기가 있는 거지만, 얼마나 여기서 기초를 다지고 가느냐와 내가 익숙치않은(써보지 않은) 기술을 빠르게 적응할 수 있느냐도 중요하구나..를 깨닫게 되었다.
_앗, 혹시라도 위의 keyup보다 더 좋은 방법을 아시는 분이 계신다면 편하게 댓글 달아주셨으면 좋겠습니다. 고민하면 클린 코드로 한발자국 더 나아가는 것일테니까요.🤞 _
