반응형 개발이야기/Etc.39 웹 개발시 도움이 되는 꿀팁🍯 디자인 모드(Design Mode) 적용 웹 브라우저에서 임시로 화면을 수정하는 기능으로 개발자도구 콘솔창에 document.designMode="on" 을 입력하면 된다 디자인 모드를 끄고 싶다면 반대로 document.designMode="off" 를 입력하면 된다 브라우저 콘솔 활용 1. debugger 개발자 도구에서 원하는 객체의 값을 출력하는 용도로 쓰이는 console.log() 확인해야할 객체가 여러 개인 경우 console.log()를 하나하나 일일히 찍어야 하지만 debugger라는 명령어를 입력하면 간편하게 디버깅 작업을 할 수 있다 2. console.table() / console.dir() console.log()를 사용하는 일이 생길 때에는 console.tabel() 또는 c.. 2022. 7. 20. 맥(Mac)용 웹스톰(WebStorm) 단축키 정리 VSCode로 코드를 짰었는데 회사에서 웹스톰을 쓰게 되어 에디터를 변경했다 그런데 이게 무슨 일? VSCode 단축키랑 웹스톰 단축키랑 완전 달라달라!!! 그리하여 맥용 웹스톰 단축키를 서치해서 정리해보았다 ✔️ 맥용 웹스톰 단축키를 살펴보기 전에 맥심볼 기호부터 체크! ⌘ : Command / ⇧ : Shift / ⌃ : Control / ⌥ : Option / ↵ : Enter, Return / ⇥ : Tab 기능 설명 단축키 (Navigator에서) 새 파일 생성하기 Control + Return preference 열기 Command + , 전체 검색 Shift + Shift 정의로 이동 Command + B / Command + Click 코드 라인 상하로 옮기기 Shift + ⌥ + 위/아래.. 2022. 6. 23. 기본 노드(global nodejs) 버전 변경 하기 node js 버전 확인 및 변경하는 방법은 아래 포스팅을 참고해주세요 NVM을 이용한 Node JS 버전 변경하기 Node JS 버전 확인하기 $ node -v NVM 설치하기(brew 이용하여 설치 https://brew.sh/index_ko) brew를 설치한 후 아래 코드 실행 $ brew install nvm NVM 환경변수 설정하기(zsh) $ vi ~/.zshrc zshrc 설정 파일.. hyung1.tistory.com NVM으로 노드 기본 버전 변경하기 nvm alias default v12.22.1 명령어를 이용하여 사용하고자 하는 노드 버전을 설정해주면 새로운 터미널을 열 때마다 새로 설정해둔 노드버전으로 적용된다 2022. 3. 29. 에러메시지 error: Command failed with exit code 1 프로젝트 시작시 발생한 에러 error: Command failed with exit code 1 1. yarn 으로 생성된 node_modules, yarn.lock 지우기 rm -rf node_modules rm -rf yarn.lock 2. yarn 공유 캐시 파일 지우기 yarn cache clean 3. yarn 재설치 후 시작하기 yarn yarn start or 1. yarn 업데이트 후 yarn 시작하기 yarn update yarn start 2022. 3. 28. NVM을 이용한 Node JS 버전 변경하기 Node JS 버전 확인하기 $ node -v NVM 설치하기(brew 이용하여 설치 https://brew.sh/index_ko) brew를 설치한 후 아래 코드 실행 $ brew install nvm NVM 환경변수 설정하기(zsh) $ vi ~/.zshrc zshrc 설정 파일에 아래 코드를 복붙한다 export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh 아래 명령어로 환경변수 파일 적용한다 $ source ~/.zshrc NVM 설치 확인하기 $ nvm --version // or $ nvm -v 특정 버전의 node.js 설치하기 $ nvm install 16.13.0 설치된 특정 버전의 node.js 사용하기 먼저 설치되어 있는 node.js 버전.. 2022. 3. 21. 퍼블리셔와 프론트엔드 개발자가 알면 좋은 추천 크롬 확장프로그램! 해당 크롬 확장프로그램은 내가 써보고 괜찮다고 생각했던 것들 위주로 작성함~ 이 밖에도 추천하고 싶은 크롬 확장프로그램이 있다면 댓글에 남겨주세요😉 크롬 웹 스토어 바로가기 CSSViewer CSS뷰어는 간단한 CSS 속성 뷰어 확장프로그램! 마우스를 올린 영역의 폰트, 텍스트, 색상, 박스, 위치 등에 대한 정보를 보여준다 간단하고 빠르게 CSS 속성을 볼 수 있어 아주 유용한 확장프로그램~ CSSViewer A simple CSS property viewer. chrome.google.com HeadingsMap 페이지 Heading 구조를 보여주는 확장프로그램! 이 확장프로그램은 전에 한번 소개글을 쓴 적이 있으니 자세한 설명은 해당 글에서 확인~🙂 (HeadingsMap 소개글로 이동) Headi.. 2021. 12. 10. 이전 1 2 3 4 5 6 7 다음 반응형
