프로그래밍 공부 노트

vscode에서 코드를 작성할때 자동완성 기능 단축키로 control + space를 사용했는데  맥 초기화 및 업데이트 이후부터 자동완성 기능이 fn + control + space를 눌러야만 동작했다. 사진처럼 vscode에 shortcuts을 확인해봐도 control + space 인데 말이다. vscode trigger suggest 해결 방법은 아래와 같다. 1. Go to system preferences -> keyboard -> input sources 2. add a new input source (I did english ABC)  3. Go to shortcuts tab (inside of keyboard settings) 4. Click on input sources on the left 5. disable the "select previous input source" shortcut 참고자료: https://github.com/microsoft/vscode/issues/103855#issuecomment-671062294  

예전에 컴퓨터를 새로 구매하면서 VSCode 설정을 동기화 해본 경험이 있다. 하지만 최근 주니어 개발자로 취업하고 회사에서 업무용으로 지급받은 맥에도  VSCode 설정도 동기화 해야했는데 자주하는 경험이 아니다보니 또다시 찾아보게되어 추후에도 쉽게 찾아볼 수 있도록 블로그에 작성하게 되었다. VSCode 설정을 동기화 하는 방법은 2가지가 있다.  1. VSCode에 내장되어있는 Syncs 기능 사용하기 2. VSCode Extensions에 있는 Settings Sync 사용하기 나의 경우 회사에서는 개인적으로 사용하는 계정을 일체 사용하지 않을것이기 때문에 2번 방법을 사용했다. 1번 방법의 경우 동일한 github 계정을 사용해여야 동기화가 가능하다. 1번. Settings Sync 익스텐션 설치하기 https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync 2번. Github에서 Personal Access Token 생성하기 Settings -> Developer Settings -> Personal access tokens -> Generate new token -> Note(식별 내용 작성) -> Expriration 설정하기(원하는 만료기간 설정) -> gist 체크 박스 체크 -> Generate token 클릭 주황색으로 가려진 토큰은 복사해서 보관해둬야 한다. 발급된 토큰은 한번만 확인할 수 있다. 새로 고침시 비공개처리 된다. 3번. gist 접속해서 Create sercret gist 생성하기 구글에 gist 글 검색한다. 들어가서 생성버튼을 누르고 제목, 내용? 양식은 없으며 본인이 알아볼 수 있는 식별 내용 작성하고 Create sercret gist 클릭 생성한 gist를 눌러보면 URL Params 끝에 Gist Id 가 작성되어있다.  4번. VScode에서 Shift + Option + U를 눌러 설정 업로드하

VSCode를 사용하면서 확장기능들중 잘 사용하고있는 Prettier가 갑자기 동작을 하지않았다. Prettier를 재설치해보고 VSCode를 껏다켜보고 컴퓨터도 재부팅 해봤지만 똑같이 동작하지 않았다. 1. VSCode settings 에서 Format on Save 를 검색하고 체크박스가 표시되어있는지 확인하고 안되어있다면 체크하기 체크가 되어있었고 해제했다가 다시해봤지만 그대로였다. 2. settings -> json 검색 -> Launch -> edit in settings.json -> editor.formatonsave:true 이미 true로 설정되어있었다. 마지막으로  3. settings -> Default Formatter 검색 버튼눌러서 "esbenp.prettier-vscode" 선택 해당부분이 나는 null로 되어있었다. esbenp.prettier-vscode 를 선택하고 해당 문제를 해결할 수 있었다.

프로그래밍 공부를 하면서 종종 들어봤던 이야기 중 하나는 "프로그래밍에서 디버깅이 절반이다." 라는 말이었다. 매번 결과 값을 확인 할 때 console.log()를 작성하여 확인하거나, 크롬 개발자 도구에서 나오는 에러 코드를 확인하고 찾아서 해결했는데 디버깅을 배워두면 앞으로 에러를 해결하는데 도움이 될것같다는 생각이 들었고, 내가 작성한 코드가  어떤 순서로 동작하는지 확인하기도 좋다고 생각되어 이번 기회에 공부하게 되었다. 1. VSCode 홈페이지에서도 디버깅(Debugging) 관련한 참고 문서가 아주 잘 정리되어있다. https://code.visualstudio.com/docs/editor/debugging 2. 구글 Chrome Developer 홈페이지에 디버깅 관련해서 참고하기 좋은 문서가 있어서 아래의 링크를 참고했다. https://developer.chrome.com/docs/devtools/javascript/ https://developer.chrome.com/docs/devtools/javascript/breakpoints/ https://developer.chrome.com/docs/devtools/javascript/reference/