반응형 Tools76 [PhpStorm] snippet 추가 하기 (ft. Live Templates) Live Templates 추가하기 VSCode만 사용하던 나에게 PhpStorm이란 녀석은 참으로 낯설었다. WebStorm은 그나마 많이 들어봤는데 같은 곳에서 만들었나 보다. WebStorm을 사용해보지 않아서 PhpStorm과 동일한지는 알 수 없지만 같기를 소망한다. VSCode에서 확장플러그인을 설치하면 편리하게 snippet들을 제공해주어 개발에 편리한데, 이 phpstorm에는 이런 게 없나 찾아보다가 snippet과 동일한 Live Templates라는 녀석을 찾아내었다. 확인해보니 기본적으로 템플릿은 만들어주는 약어들이 등록되어 있었으나, 회사의 개발 환경이 Nuxt + Composition API + Typescript + SCSS이다 보니 이에 맞는 템플릿이 존재하지 않았다. 그래서.. 2023. 1. 8. [VSCode] eslint error: Delete `␍` prettier/prettier eslint와 prettier를 같이 사용하면서 작업을 하는 도중 갑자기 Delete `␍` prettier/prettier 라는 에러가 발생하였다. 찾아보니 prettier 2.0이상 부터 endOfLine 기본 옵션이 'auto' 에서 'lf' 로 변경되어서 발생하는 에러라고 한다. .eslintrc.js 파일에서 아래와 같이 설정해주면 문제가 해결된다. rules: { "prettier/prettier": ["error", { "endOfLine": "auto" }], }, 2022. 6. 15. [VSCode] sample/dummy text 집어넣기 (ft. Emmet) 더미 텍스트가 필요한 경우 VSCode 같은 것들에는 Emmet이 기본적으로 지원되는 에디터인데, 그 기능을 사용하여 손쉽게 더미 텍스트를 만들 수 있다. * Emmet에 대해 상세하게 알고 싶으면 아래 링크를 통해 확인해봐도 좋을 것 같다. https://code.visualstudio.com/docs/editor/emmet Emmet in Visual Studio Code Using Emmet abbreviations inside Visual Studio Code. code.visualstudio.com lorem 이라고 입력한 후 탭 혹인 엔터를 클릭하면 기본적으로 설정되어 있는 더미 텍스트가 생성된다. Lorem ipsum dolor sit amet consectetur adipisicing el.. 2022. 5. 16. [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(4) - 웹팩과 바벨 동시 사용 시 트랜스파일링 변환 오류 이전 글 [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3) - 바벨 기본 설정 에서 바벨 설정 후 웹팩 빌드를 하였는데, 이상하게 IE에서 오류가 발생해 작동을 안하는 현상이 발생하였다. 화살표 함수가 그대로 존재하기 때문에 에러가 발생한것인데, babel 설정에 target을 줘도 문제가 해결되지않았다. 도대체 왜 이런것일까...? 이것때문에 몇시간을 소비했는지 모르겠다. 찾아보니까 웹팩에 문제가 있었더라 Webpack v5 부터 트랜스파일을 기본적으로 es6로 한다고 한다. 버전이 올라가면서 변경될것인지 아니면 계속 이상태로 갈것인지는 알 수 없으나, 일단 변경을 해주는게 맞다 싶다. 그래서 webpack.config.js 파일에서 target 설정을 줄 수 있는데, https:.. 2022. 3. 2. [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3) - 바벨 기본 설정 바벨을 설정하기에 앞서 바벨에 대해서 알아두면 좋은데, 쉽게 말하면 최신 사양의 자바스크립트 코드 (ES6+)를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링) 시켜주는 녀석이라고 할 수 있다. 실제로 공식 웹사이트에서도 다음과 같이 설명하고 있다. Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you: 이제 바벨 설정을 하나씩 해보도록 하자. 1.. 2022. 3. 2. [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(2) - 웹팩 기본 loader 설정하기 VSCode에서 웹팩(Webpack)을 설정하게되면 webpack.config.js 웹팩 설정파일을 사용하게 된다. 이 webpack.config.js 파일에서 loader를 설정하는 방법에 대해 알아보자. loader를 설정하기에 앞서 loader 설정을 왜 해주는지에 대해 설명하자면, js끼리만 import해서 사용한다면 웹팩을 빌드하면 상관 없지만 여기에 css 같은것들이 들어가면 오류가 발생하기 때문이다. 웹팩은 자바스크립트 뿐만 아니라, 이 loader를 통해 css나 이미지, 웹폰트, vueJS 등 다양한 종류의 파일을 함께 번들링할 수 있는데, 사용법만 알면 그 외에는 동일하게 처리하면 되기 때문에 가장 흔하게 사용되는 css관련한 loader에 대해서만 정리하고자 한다. 1. CSS 로더를.. 2022. 3. 1. [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(1) - 웹팩 기본 설정 VSCode에서 웹팩(Webpack)을 설정해보자. 당연하게도 node.js를 통해 뭔가를 설치하고 설정하려면 package.json이 있어야한다. package.json이 있다면 이제 1. 명령어를 통해 웹팩 라이브러리를 설치한다. (둘 중 하나만) npm install --save-dev webpack webpack-cli npm install -D webpack webpack-cli 이러면 설치가 진행되며, 설치가 완료되고 나서 package.json을 살펴보면 다음과 같이 나와있다. { "name": "prj01_vanillajs_es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \".. 2022. 3. 1. [VSCode] package.json 설정 - NodeJS를 사용한 npm 패키지관리 VSCode에서 프로젝트에 각종 확장 모듈등을 설치하고자 할때 NodeJS의 npm을 많이 사용하게 된다. 그리고 그러한 모듈들을 관리하고자 하는 역할을 하는 녀석인데 필요하기도하고 한번 정리하고 넘어가도록 하자. (뭔가를 사용할때 뭔지 모르고 사용하면 답답해서 정리하고자 한다.) 1. 우선 npm을 사용하기 위한 Node.js를 설치해주어야 하는데, https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 왼쪽의 16.14.0 LTS 버전을 받아서 사용해주도록 하자. (안정성 측면에서 높기 때문에 이전 버전을 사용한 것이고 최신 버전을 사용하고자 한다면 우.. 2022. 3. 1. [VSCode] HTML 기본 템플릿 자동완성 기능 사용하기 VSCode로 HTML 파일을 생성하면 처음에 역시 아무것도 존재하지않는데, HTML을 구성하는 태그들을 반복해서 작성하는건 매우 귀찮은 일이니 VSCode에서 제공하는 자동완성 기능을 사용해보자. 사용법은 매우 간단하다. 1. 우측 하단에 파일 형식이 HTML이 맞는지 부터 확인한다. (가끔 다른 형태의 HTML인 경우에는 자동완성 기능이 작동하지 않는다고 하니까 하는 확인절차다.) 2. 그리고 "!" 느낌표를 입력하고 엔터를 눌러주면... (저렇게 느낌표를 입력하고 자동완성 창이 나온 상태에서 엔터를 눌러주라는 의미이다.) * 추가적으로 "html:5"를 입력해도 가능하다 3. 기본 태그 자동 완성! 4. 그리고 필요에 따라 수정해서 사용하면 된다. (예를 들어 lang='en' 을 lang='ko'.. 2022. 3. 1. 이전 1 2 3 4 ··· 9 다음 반응형
