분류 전체보기

자바스크립트 디버깅 하는 방법 알아보기 (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 클릭 개발자 도구 위치 지정하..

계발자를 위한 vscode extensions 추천 리스트 2023

많은 사람들이 이제 다른 에디터에서 비주얼스튜디오 코드(vscode)로 넘어오는 것 같습니다. 저도 예전에는 webstorm을 사용하고 편리해서 다른 것을 사용하지 못했는데 이제는 vscode가 더 편하고 여러 플러그인을 설치하면 더 많은 기능을 사용할 수 있기 때문에 이제는 vscode를 떠나지 못할 것 같습니다. vscode extionsions(비주얼 스튜디오 코드 확장프로그램)을 몇 개월마다 확인해보면 정말 많은 편이 extension들이 많이 나오는 것 같습니다. 제가 최근에 발견한 것과 사용하고 있던 extension을 추천하려고 합니다. 목차 Bookmarks Turbo Console Log Github Copilot Better comment Colorize Gitlens vscode-pe..

react-native cli로 시작하기 - node, rbenv, eslint prettier, 절대 경로 설정하기

나중에 어떻게 될지 몰라서 일단은 Expo를 사용하지 않고 react native cli를 사용해서 프로젝트를 세팅해보려고 합니다. 이미 프로젝트는 다 셋업 했는데 사실 시작하기가 그렇게 쉽지는 않더라고요. 리엑트 네이티브 현업에서 사용했지만 처음부터 새로 시작해보는 경우는 이번이 처음이라 많이 버벅되기도 했고 설치하는 것 도 마냥 쉽지만 않았습니다. Realm은 로컬 데이터 스토리지로 사용을 하려고 도입했습니다. Realm을 사용하는 방법이 그렇게 많이 나와 있지는 않아서 처음에 조금 해맸는데 다들 이 글을 보시고 빠르게 셋업 하셨으면 좋겠습니다. * 모든 셋업은 맥북 m1 기준으로 작성하였습니다. 언어는 typescript를 사용합니다. 목차 - Node 설치 - ruby rbenv 설치해서 루비 버..