본문 바로가기
반응형

JavaScript14

IntelliJ & Webstorm import시 double quotes 대신에 single quotes 기본값으로 사용하기 IntelliJ나 Webstorm을 통해 JS / TS를 개발하다보면 import 구문에서 " 로 인해 불편할때가 많은데요. 이를테면 팀 컨벤션으로 import를 Single Quotes 로 해놓은 경우에는 자동 import 를 통해 "로 import 되면 매번 수동으로 Single Quotes 로 바꿔야만 합니다. 1. Auto Import 하는법 먼저 Jetbrains IDE의 Auto Import 는 다음과 같이 사용할 수 있는데요. 아래와 같이 Import되지 않는 클래스나 function에 포커스를 두고, 단축키를 통해 import를 수행합니다. option + Enter: 제안 목록 보기 option + shift + Enter: 전체 full import 여기서 단일 import인 optio.. 2021. 8. 6.
프론트엔드 모니터링에서 Script error. 만 나올때 프론트엔드 모니터링을 보다보면 다음과 같이 Script error. 만 나올때가 있습니다. 나머지 에러들은 정확하게 에러가 노출되지만, 특정 케이스에 한해서 Script error. 만 나오게 되는 것인데요. 왜 모니터링에서는 Script error. 만 나오며, 이를 해결하기 위해선 어떻게 해야하는지 알아보겠습니다. 1. 배경 소개 예를 들어 다음과 같은 sdk.js 파일을 사용하는 웹 페이지가 있다고 가정해봅니다. sdk.js function foo() { console.log($('#a').text()); } index.html test 코드는 간단합니다. sdk.js 와 jquery를 호출하고, 이를 index.html이 sdk.js의 foo funciton을 호출 sdk.js는 jquery를 의.. 2021. 6. 20.
Quokka 플러그인 소개! 안녕하세요? 이번 시간엔 IntelliJ의 Quokka 플러그인을 소개드리려고 합니다. 모든 코드는 Github에 있기 때문에 함께 보시면 더 이해하기 쉬우실 것 같습니다. (공부한 내용을 정리하는 Github와 세미나+책 후기를 정리하는 Github, 이 모든 내용을 담고 있는 블로그가 있습니다. ) 소개 Javascript 개발을 진행하다보면 여러 이유로 프로토 타입을 개발을 위한 격리된 공간이 필요할때가 있습니다. 특정 라이브러리의 함수가 어떤 결과를 출력하는지 잠깐 확인하고 싶을때 JS를 강의하거나, 배우기 위해 결과를 바로 실행해보고 싶을때 새로운 언어의 기능이나 프레임워크를 실험해보고 싶을때 보통 이런 이유로 온라인 편집기 (브라우저 개발자 도구의 Console, jsbin)를 사용합니다. 하.. 2018. 4. 12.
Airbnb의 eslint를 IntelliJ에 적용하기 안녕하세요? 이번 시간엔 airbnb의 eslint를 IntelliJ에 적용하는 예제를 진행해보려고 합니다. 모든 코드는 Github에 있기 때문에 함께 보시면 더 이해하기 쉬우실 것 같습니다. (공부한 내용을 정리하는 Github와 세미나+책 후기를 정리하는 Github, 이 모든 내용을 담고 있는 블로그가 있습니다. ) 들어가며 팀내에서 프론트엔드 코딩 컨벤션을 정하자는 이야기가 나왔습니다. 구성원 모두가 백엔드 개발자이며, 메인 언어가 되는 Java를 다들 최근에 시작하셔서(기존엔 ASP, PHP) Java & 백엔드 학습으로도 시간이 부족하기에 프론트엔드 쪽은 거의 등한시 하고 있었습니다. 그러다 최근에 큰 프로젝트가 끝나고 회고 시간에 백엔드 코드에 비해 프론트엔드 코드가 컨벤션없이 작성되어 퀄.. 2017. 10. 3.
나만의 CLI 만들기! 나만의 CLI (Command Line Interface) 만들기 최근 들어 반복적인 작업이 생기면 이걸 스크립트로 어떻게 자동화 할 수 있을까 고민하게 되었습니다. 자동화 스크립트는 쉘스크립트나 파이썬이 대표적으로 떠오르지만, 웹개발을 주로 한 덕분에 자바스크립트에 더 친숙하여 보통은 nodejs가 더 손에 맞는것 같습니다. 이번 시간은 저처럼 자바스크립트만 아는 개발자 분들에게 nodejs를 이용하여 나만의 CLI를 만들어 귀찮은 일들은 전부 스크립트에 맡기는 이야기를 진행할 예정입니다. 모든 코드는 Github에 있으니 전체 코드를 보고싶으시면 참고하시면 될것 같습니다. (공부한 내용을 정리하는 Github와 세미나&책 후기를 정리하는 Github 를 star 하시면 실시간으로 feed를 받을 수 .. 2017. 1. 18.
IE 7,8에서 모던하게 개발하기 #7 - Handlebars.js 적용 현재까지 관련된 포스팅과 코드는 아래를 참고!IE 7,8에서 모던하게 개발하기 #1 (npm/grunt) IE 7,8에서 모던하게 개발하기 #2 (require.js) IE 7,8에서 모던하게 개발하기 #3 (backbone.js -1)IE 7,8에서 모던하게 개발하기 #4 (backbone.js -2)IE 7,8에서 모던하게 개발하기 #5 (backbone.js -3)IE 7,8에서 모던하게 개발하기 #6 (배포환경 구축)IE 7,8에서 모던하게 개발하기 #7 (Handlebars.js 적용)프로젝트 및 코드 Handlebars 적용하기 IE 7/8에서 모던하게 개발하기 시리즈의 마지막 챕터인 Handlebars 적용이다.공식사이트 Handlebars의 경우 많은 회사에서 클라이언트 템플릿 엔진으로 사.. 2016. 10. 24.

728x90