반응형 vscode12 [Node.js] Node와 NPM 버전 확인 및 최신 버전 업데이트 오랜만에 공부 시작 겸 블로그를 작성한다. 그동안 시간이 너무 없었지만 틈내서 작성한 게 12월 1일인가 그렇다. 마침 급한일은 다 처리를 했으며, 다시 공부할 겸 가볍게 nodejs와 npm 버전 업데이트에 대해 작성하고자 한다. 버전 업데이트 관련한 건 이미 널리 퍼져있는 글들이 많기 때문에 매번 찾기도 귀찮고 완전히 익힐 겸 정리하는 것이다. Node 최신버전으로 업데이트 하기 1. 명령어을 사용 해 Node 버전 업데이트 우선 node를 최신버전으로 업데이트 하기 이전에 현재 버전을 살펴보자. 그래도 나름 v16.14.2 정도면 높은 버전을 사용하고 있다고 할 수 있을 듯하다. 그러고 나서 npm에 남아있는 캐시를 우선적으로 삭제해줘야 한다. 캐시를 지워주지 않는다면 최신 버전 업데이트를 할 때 .. 2022. 12. 20. [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. [SCSS] SCSS 사용할 때 유용한 확장 프로그램 (ft. VSCode) VSCode 카테고리에 유용한 확장 프로그램 추천 게시글이 있으나 SCSS만 따로 정리하고자 새로 작성한다. (마지막 수정 일자 : 2022.06.13) 1. SCSS IntelliSense https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss SCSS IntelliSense - Visual Studio Marketplace Extension for Visual Studio Code - Advanced autocompletion and refactoring support for SCSS marketplace.visualstudio.com 꼭 필요하다 생각하는 확장 프로그램인데, 바로 "자동완성"을 도와주는 역할을 한다. 여기서 말하.. 2022. 6. 13. [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. 이전 1 2 다음 반응형
