본문 바로가기
반응형

분류 전체보기706

[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.
[VSCode] 개발할 때 유용한 확장 프로그램 추천 (UPDATE: 2022-06-09) VSCode를 본격적으로 사용하기에 앞서 유용한 확장 프로그램 몇가지를 추가하고 시작해보자. (마지막 수정일자 : 2022.06.09 / 계속해서 추가할 계획... 이것저것 수집해보자) 확장 프로그램 검색 및 추가하기 위해서는 [Ctrl + Shift + x] 단축키를 눌러주거나, 좌측 메뉴에 무슨 블럭처럼 생긴걸 눌러주면 이동할 수 있다. 1. Korean(사용법) Language Pack for Visual Studio Code https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko Korean(사용법) Language Pack for Visual Studio Code - Visual Studio Mar.. 2022. 2. 28.
[JavaScript] element.classList - 특정 엘리먼트의 클래스 속성 제어하기 javascript로 엘리먼트의 접근하여 특정 클래스를 제어하는 방법에 대해 알아보자. ▷ 구문 const elementClasses = element.classList; classList자체는 엘리먼트의 클래스 목록에 접근하는 방식인데, 사실상 클래스 목록을 가져오는 역할만 하고 그 안에 내장되어있는 메서드를 통해 해당 엘리먼트의 클래스를 제어하는 것이다. Element.classList의 주요 메서드는 다음과 같다. add(String [, String [, ...]]) : 지정한 클래스 값을 추가하며(여러개 동시 삽입 가능), 만약 추가하려는 클래스가 엘리번트의 class 속성에 이미 존재한다면 무시한다. remove(String [, String [, ...]]) : 지정한 클래스 값을 제거하며(.. 2022. 2. 27.
[JavaScript] document.(querySelector/querySelectorAll) - DOM 요소에 구체적으로 접근하기 javascript로 dom 요소를 제어할때 사용되는 메서드인 document.querySelector() 와 document.querySelectorAll()에 대해 알아보자. 평소 자주 사용하던 getElementById, getElementsByClassName, getElementsByTagName 과 비슷하면서도 다르며, 좀 더 구체적으로 dom 요소에 접근하는것을 도와주는 메서드이다. ▷ 구문 document.querySelector(selectors); document.querySelectorAll(selectors); selectors : 하나 이상의 선택자를 포함한 DOM 요소 문자열이다. ▷ 예제 1) querySelector / querySelectorAll 사용법 div-1 div_.. 2022. 2. 24.
[JavaScript] document.getElementsByTagName() - 특정 tag명을 가진 dom 요소들을 찾기/가져오기 (ft. element.getElementsByTagName()) javascript로 dom 요소를 제어할때 사용되는 메서드중 하나인 document.getElementsByTagName()에 대해 알아보자. 메서드명 그 의미를 그대로 가지고 있어, 특정 tag명을 가지고 있는 dom 요소에 접근하기 위한 메서드이다. ▷ 구문 document.getElementsByTagName(name); name : 찾으려는 태그 요소명을 의미한다. (특수 문자 * 은 모든 엘리먼트를 나타낸다.) ▷ 예제 1) document.getElementsByTagName() 사용법 div-1 div_2 span p span // 기본 사용법 document.getElementsByTagName('div'); // HTMLCollection(4) [div, div, div, div#wra.. 2022. 2. 24.
[JavaScript] document.getElementsByClassName() - 특정 class를 가지고 있는 dom 요소들을 찾기/가져오기 (ft. element.getElementsByClassName()) javascript로 dom 요소를 제어할때 사용되는 메서드중 하나인 document.getElementByClassName()에 대해 알아보자. 메서드명 그 의미를 그대로 가지고 있어, 특정 class를 가지고 있는 모든 dom 요소에 접근하기 위한 메서드이다. 지금까지 그냥 아무생각없이 사용해왔는데, 한번 공부할 겸 정리하고자 한다. ▷ 구문 document.getElementsByClassName(names) names : 찾으려는 요소 클래스를 의미하며, 대소문자를 구분하는 문자열을 사용한다.(여러 클래스 이름은 공백으로 구분된다.) ▷ 예제 1) document.getElementsByClassName() 사용법 div-1 div_2 sp1 sp2 // 기본 사용법 document.getElem.. 2022. 2. 24.
[JavaScript] document.getElementById() - 특정 id를 가지고 있는 dom 요소를 찾기/가져오기 javascript로 dom 요소를 제어할때 가장 많이 사용되는 메서드중 하나인 document.getElementById()에 대해 알아보자. 메서드명 그 의미를 그대로 가지고 있어, 특정 id를 가지고 있는 dom 요소에 접근하기 위한 메서드이다. 지금까지 그냥 아무생각없이 사용해왔는데, 한번 공부할 겸 정리하고자 한다. ▷ 구문 document.getElementById(id); id : 찾으려는 요소 id를 의미하며, 대소문자를 구분하는 문자열을 사용해야하는데 id는 기본적으로 문서 내에서 유일해야 한다. (처음 발견하는 id 하나만 반환하며, 주어진 id가 없을 경우 null을 반환한다.) ▷ 예제 1) document.getElementById() 사용법 div-1 div_2 div3 // 기.. 2022. 2. 24.
반응형
TOP

티스토리툴바