본문 바로가기

전체보기

 (286)
웹팩 시작하기 웹팩을 간단히 구현해보자. 1. 프로젝트 폴더를 만든다. 2. 프로젝트 폴더에서 npm init -y로 package.json 파일을 만든다. 3. 웹팩을 설치한다. npm install --save-dev webpack npm install --save-dev webpack-cli 4. dist/index.html 파일을 생성하고 아래의 코드를 넣는다. 5. src/index.js 파일을 생성하고 아래의 코드를 넣는다. import _ from 'lodash'; function component() { const element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'world'], ' '); // lodash 사용 ..
BEM에 대해서 BEM이란 CSS의 이름을 짓는 방법론이다. Block, Element, Modifier의 줄임말로 각각을 __나 --로 구분해서 표현한다. 1. Block Block은 다른 것에 영향을 받지 않는 독립적인 컴포넌트다. 예를 들어 일반적인 header와 footer는 완전히 나눠져 있고 서로 영향을 받지 않도록 구성할 수 있어 Block이다. BEM은 Block을 기준으로 CSS의 이름을 짓기 때문에 재사용이 용이하고 class 속성만 보더라도 어떤 것인지 쉽게 파악할 수 있게 해준다. 물론 Block 안에 독립적인 Block이 올 수도 있다. 그리하여 class 이름의 제일 앞에 Block 이름을 넣고 다음에 올 Element와 구분하기 위해 언더바 두 개를 넣어준다. 띄어 쓰기는 -로 표현한다. bl..
일렉트론 시작하기 일렉트론을 이용하면 자바스크립트로 데스크탑 앱까지도 구현할 수 있다. 방법도 너무 쉬우니 하나하나 따라해보자. 크게 두 부분으로 나뉜다. 가. 개발 단계에서 앱으로 실행 되게끔 만드는 방법 나. 사용자가 설치하고 실행할 수 있는 앱으로 빌드하는 방법 개발 단계에서 앱으로 실행 되게끔 만드는 방법 첫 번째는 일렉트론 공식 매뉴얼을 보면 잘 나와있다. https://www.electronjs.org/docs/tutorial/first-app 이하는 공식 매뉴얼의 내용을 축약했을 뿐이다. 1. 프로젝트 폴더를 만든다. 2. 프로젝트 폴더 위치에서 터머널에 npm init을 입력해 package.json 파일을 생성한다. 3. package.json에 다음을 추가한다. { /* ... */ "main": "ma..
Web Audio API 사용법, 페이드아웃 적용하기 웹에서 단순히 배경 음악 재생 정도로 그치지 않고 소리에 다양한 효과를 주려면 Web Audio API를 사용해야 한다. 어떻게 돌아가는지 알려면 아래 페이지에서 앞 부분을 읽어 보자. https://www.w3.org/TR/webaudio/ 위 페이지에서 오디오의 signal flow라 할 수 있는 라우트를 어떻게 처리하는지 이해하고 각 메소드가 어떤 역할을 하는지 훑어 보자. 필요한 메소드가 무엇인지 파악했다면 메소드를 어떻게 사용하는지 구글에 검색해보자. MDN에 예제가 잘 나와 있다. 여기서는 Web Audio API를 이용해서 mp3 파일을 어떻게 불러오고 재생하는지와 간단한 오디오 효과로서 페이드아웃을 적용하는 방법에 대해서 다루겠다. 오디오를 불러오고 재생하는 방법은 다음 영상에서 잘 설명해..
DOM 엘리먼트를 추가하는 다양한 방법 노드 객체를 생성하는 방법 document.createElement('div') div 엘리먼트 노드를 생성한다. document.createTextNode('안녕하세요') '안녕하세요'라는 텍스트 노드를 생성한다. 노드나 문자열을 추가하는 방법 element.append(...node) element의 자식으로 node(text node, element node)를 추가한다. text node 대신 문자열을 바로 추가할 수도 있다. 자식의 제일 끝에 붙는다. element.prepend(...node) 자식의 제일 앞에 붙는다. element.before(...node) element의 바로 앞에 붙는다. element.after(...node) element의 바로 뒤에 붙는다. element.rep..
DOM 엘리먼트의 다양한 길이 값을 가져오는 방법 element.offsetParent 엘리먼트의 위치에 영향을 주는 가장 가까운 조상을 가져온다. 조상 중 position 속성에 absolute, relative, fixed, sticky가 있는 것을 말한다. 없다면 body, table, th, td 엘리먼트 중 가까운 조상을 가져온다. element.offsetLeft offsetParent를 기준으로 왼쪽에서 오른쪽으로 얼만큼 떨어져 있는지를 알려준다. element.offsetTop offsetParent를 기준으로 위쪽에서 아래쪽으로 얼만큼 떨어져 있는지를 알려준다. element.offsetWidth border를 포함한 엘리먼트의 가로 길이 element.offsetHeight border를 포함한 엘리먼트의 세로 길이 element.cl..
DOM 엘리먼트를 가져오는 다양한 방법 Selector로 찾는 방법 document.getElementById(id) 태그에 지정된 id 값으로 엘리먼트 노드 객체를 참조할 수 있다. element.querySelectorAll(css) 엘리먼트의 자식 중에 css 선택자에 해당하는 것들을 모두 가져온다. element.querySelector(css) 엘리먼트의 자식 중에 css 선택자에 해당하는 것을 찾으면 검색을 멈추고 가져온다. element.closest(css) 엘리먼트 자신부터 시작해서 가까운 조상을 하나씩 조회하며 css 선택자에 해당하는 것을 찾으면 검색을 멈추고 가져온다. 인접한 엘리먼트를 찾는 방법 element.parentElement 엘리먼트의 부모를 가져온다. element.previousElementSibling 엘..
웹에서 화면 변경시 화면의 크기 값을 가져오는 방법 window.innerWidth나 window.innerHeight를 쓰면 현재 웹 페이지의 너비와 높이를 알 수 있다. 사용자가 화면 크기를 조절할 때마다 값을 가져오고 싶다면 여기에 onresize라는 이벤트를 이용한다. window.onresize = function () { console.log(window.innerWidth); } 참고 : https://www.w3schools.com/JSREF/prop_win_innerheight.asp https://www.w3schools.com/jsref/event_onresize.asp

티스토리툴바