디버깅 잘 하기 (feat. 개발자도구, debugger)

오늘은 업무 도중 개발자와 퍼블리셔는 정말 한끗차이같지만 사고방식이 다르다는 걸 느낀 계기 및 부족한 부분을 학습하기 위해 (그 순간 머릿속에 스친 insight⚡️) 블로그 소재 & 공부로 활용!!


왜 안되지?

회사에서 자바스크립트 파일을 수정하던 도중 잘 나왔는데, 개발단에 붙으니 에러가 나서 지난 주부터 금주 동안 계속 수정중에 있었다. 영향도 있는 페이지까지 계속 체크하고 테스트 하던 중에 마지막에 PC에선 되는데 Mobile에서는 안되는거다. 공통으로 쓰는 파일인데.. 그래서 개발자 분과 같이 모니터를 보면서 찾는데 디버깅하는데 있어서 내가 노하우나 생각이 부족했음을 느낄 수 있었다. 그리고 개발자 분이 하는 방법을 계속 관찰했다. (구 디자이너였던 습성인지 뭔가 자꾸 자세히 관찰하는 버릇..😅)
특히 인상적이었던 게 오류를 찾을 때 데이터 타입(빈문자열이나 객체 등을 보고 undefined인지 null인지 생각)을 통해 생각하시거나 이클립스에서 걸리는 모든 개발단 화면을 찾아 디버깅하거나 콘솔이나 네트워크 탭을 활용해 찾는 도움(!)을 받았고(다행히 오류는 수정했지만..😢) 거기서 내가 그동안 소스 분석이나 동작만 신경쓰느라 JavaScript 디버깅할 때 개발자도구 활용을 잘 못하고 있다는 걸 느꼈다. (친구 역시 너가 프론트엔드 개발자가 되는데 가장 장벽이 JavaScript일 거라며, JavaScript에 자신감이 붙는 순간 더 늦지 않게 빨리 전직하는 것이 좋다고 해줬으나.. 단순히 템플릿처럼 jQuery 복붙 & 계산기 조작(feat. 경아 님 표현력)하는 듯이 말고) 그리고 무엇보다 아직은 저렇게 개발자식으로 사고하는 건 익숙하지 않다.. 아까도 속성 값 넣을 때 매개변수가 하나여도 두개다 받을 수 있다는 것도 알려주셨고 일단은 도움 받긴 했는데 스스로 판단하려면 아직도 먼 길 같다.. 그래도 조금씩 학습해서 이제 JavaScript에는 기본적으로 뭐가 있고 활용하는지 알겠는데 개발자스럽게 판단이 아직 안 선다는 게..

사고방식 바꾸기

많은 분들이 웹페이지를 만들기 위해서 프론트엔드 개발을 학습을 시작하시는데요. 그러면서 순서대로 HTML 배우고, CSS 배우고, 일단 이 HTML과 CSS 같은 경우에는 기본적인 구조를 가지고서 예쁘게 꾸미는 일반적으로 이미지를 가지고 사고하는 방식을 사용하게 됩니다. 그래서 이러한 방식들이 기본적으로 크기는 얼마고, 색상은 무엇이고, 위치가 어디다 이러한 보편적으로 익숙한 개념들을 다루기 때문에 비교적 어렵지 않은 선에서 CSS 학습까지는 잘 마치세요.

그런데 문제가 한가지 있습니다. 바로 JavaScript 학습을 시작하시면, 많은 분들이 프론트엔드 개발을 포기하신다는 거에요. 그 부분에서 제가 생각하는 문제점을 말씀드리고 싶어요.

일단 디자인에 익숙하신 분들은 크기, 색상, 위치, 모양 같은 이렇게 화면을 구성하는 레이아웃과 관련된 방식으로 사고해서 개발하게 됩니다. (디자인 = 레이아웃 중심)

그런데 JavaScript로 들어가는 순간 사고하는 방식이 달라져야해요. 그래서 Script로 된 내용을 이해해야 하고 그렇게 된 내용을 이해하는 사고방식은 더 이상 크기, 색상, 위치가 아니라 데이터가 기준이 됩니다. (JavaScript = 데이터 중심)

그러다 보니까 실제로 JavaScript가 어려워서 거부감을 갖는 것 보다는 사고하는 방식이 달라짐에 의해서 기존에 배운 내용과 괴리감을 느끼게 되고, 그만큼 내용이 어렵게 느껴진다는 것입니다. 제가 여러분에게 말씀드리고 싶은 프론트엔드 개발이라는 것은 결과적으로 HTML, CSS뿐만 아니라 JavaScript까지 전부다 다룰 줄 알아야 제대로 진행할 수 있는 진정한 프론트엔드 개발이 되는 것이구요.

학습을 진행하는 데 있어서 생각의 방식에 차이가 있다는 것을 미리 아셔야 한다는 것. 그래야지만 학습에 거부감을 낮추고 조금 더 효율적으로 각각의 언어들을 학습할 수 있다는 것을 말씀드리고 싶었어요.

대표적인 사례를 소개해드리면 디자이너를 베이스로 시작하시는 분들은 JavaScript로 넘어가면서 굉장히 어려워 하시고, 다른 개발을 베이스로 시작하셨던 분들은 오히려 CSS를 학습하시는 것을 굉장히 어려워 하세요. 그래서 어려움을 느끼는 실질적인 이유는 사고하는 방식이 다른 개념의 언어를 학습하기 때문이다라고 이해하시면 되겠습니다. 그래서 실제로 프론트엔드를 공부하시면서 거부감을 느끼는 것은 이러한 사고가 변경되는 것에서 오는 괴리감때문에 오는 것이지 충분히 극복 가능한 문제이므로 포기하지 마시고 끝까지 완강하실 수 있으면 좋겠습니다.


출처 - 패스트캠퍼스 한 번에 끝내는 프론트엔드 개발 초격차 패키지
강사 님 Blog & YouTube

내가 전직을 결심 후 처음 사본 강의인데, 강사님도 나처럼 디자이너로 시작하여 현 프론트엔드개발자&강사로 활동중이시다. 그래서인지 디자이너에서 개발자가 될 때 느끼는 어려운 점을 누구보다 잘 이해하고 있어 랜선으로나마 강의에서 온기(!)가 느껴졌다.

나는 아직 과도기니까.. (디자이너&퍼블리셔 >> 개발자를 향하여~!)
그래서 내 친구 역시 아마 올해는 내내 정체성의 혼란이 올 것이라고 예상해줬지만..

그렇다면 오늘 알아볼 내용은...


개발자도구 잘 활용하기 (feat.디버깅)

디버깅 프로그래밍의 절반