개발자

자바스크립트 디버깅 하는 방법 알아보기 (dir, table, chrome debugger, vscode debugger..)

이번에 인터뷰를 보면서 물어보던 것 중 하나가 자바스크립트 디버깅 어떻게 하냐라는 질문이 나와서 답변했던 것을 좀 정리해서 설명해 보려고 합니다. 자바스크립트를 시작하고 맨 처음에 배우는 것 중 하나가 console.log입니다. 예제를 따라 할 때도 항상 나오는 친구입니다. 자바스크립트 변수에 값을 확인할 수 있는 방법 중 가장 쉽고 기초적인 방법이기 때문입니다. 주니어를 넘어 시니어가 된다고 해도 console.log와 떨어질 수 없습니다. 하지만 console.log 말고도 디버깅하는 방법이 없을까 궁금해지기 시작합니다. console.log가 항상 보기 좋게 출력되지도 않고 여러 variable을 console.log 해보기에는 은근히 에너지가 많이 들기 때문입니다. 디버깅을 할 때 console..

크롬 개발자도구(Chrome devtools) 사용법 간단히 알아보기

안녕하세요 캐나다에서 개발로 밥 먹고 사는 피들입니다. 프론트 앤드 개발자라서 크롬 개발자 도구는 거의 항상 사용하고 있습니다. 개발자 도구가 없었다면 어떻게 개발을 하고 있을지 상상도 가지 않습니다. 개발을 하는 도중에 콘솔로 찍어볼 때도 필요하고 애러가 어디에서 생겼는지 자바스크립트 코드 간단하게 돌려보기, 퍼포먼스 체크 등 할 수 있는 일이 무궁무진합니다. 제가 모든 것을 커버하지는 못하겠지만 많이 사용하는 도구들에 대해서 설명 및 사용방법에 대해서 알아보도록 하겠습니다. 크롬 개발자 도구를 여는 방법 멋있게 단축키로 열기 Mac - Command + Shift + c Pc - Window + Shift + c 마우스 화면에 오른쪽 클릭 후에 아래 보이는 inspect 클릭 개발자 도구 위치 지정하..