HTML5, CSS3, 자바스크립트 Javascript 등
이벤트 버블링 하위 요소의 이벤트가 상위까지 전달되는 현상입니다. 예를 들어 위의 그림에서 <a> 태그를 클릭했는데 <a> 태그에 걸려있는 이벤트가 실행되는 것에 더해 상위 요소 <li>, <ul> 에 걸려있는 이벤트까지 같이 실행되는 현상을 말합니다. 자바스크립트에서 이것을 방지하려면 event.stopPropagation()를 사용합니다. 아래는 이벤트 버블링이 적용되는 코드입니다. <a> 만 클릭해도 모든 이벤트가 발동됩니다. const 더보기…
먼저 상위(부모) 컴포넌트의 이름은 Topic, 하위(자식) 컴포넌트의 이름은 TopicSearch라고 가정합니다. 먼저, 상위 클래스에서 컴포넌트를 삽입할 때 v-on:xxx(약어 @xxx)를 사용해 커스텀 이벤트를 만듭니다. Topic.vue (일부) <template> <div class=”topic”> <TopicSearch v-on:search=”doSearch” v-on:allOrder=”doAllOrder”/> </div> </template> 여기서 search. allOrder 는 나중에 this.$emit에서 사용할 이벤트 이름이며. doSearch, doAllOrder는 상위 컴포넌트에 있는 메소드 이름입니다. 왼쪽이 더보기…
자바스크립트 npm으로 만든 프로젝트에서 package.json의 정보 가져와 웹 페이지에 보여주는 방법입니다. package.json을 import문을 사용하여 불러오면 객체로 사용할 수 있습니다. 다른 json 파일도 마찬가지입니다. import React from ‘react’; import Container from ‘@material-ui/core/Container’; import packageJson from ‘./../../package.json’ const Home = () => { const dependencies = packageJson.dependencies const depElements = [] for(let 더보기…
리액트(React) 새로운 앱 생성하는 방법입니다. 리액트 앱 생성 npx create-react-app [앱_이름] 터미널을 열어 생성하고자 하는 폴더의 상위 폴더에 이동한 후 위의 명령어를 터미널에 입력하면 생성이 됩니다. (Node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위 버전인 경우) 또는 다음 명령어를 입력해 생성할 수 있습니다. npm install -g create-react-app 더보기…
출처: 바로가기 예를 들어, 어두운 배경색에서는 밝은 글자색을 보여주고 싶고, 밝은 배경색은 어두운 글자색을 보여주고 싶다고 하겠습니다. 그런 조건에서 봤을 때 아래 예제는 글씨색이 눈에 잘 들어오지 않습니다. 어두운 배경색에는 아래처럼 밝은 글자색을 보여줘야 합니다. 색상에 16진수(예: #ffffff) 형태로 주어졌을 때 영상의 밝기차에 대한 정보(luma)를 결정하는 함수는 다음과 같습니다. function getTextColorByBackgroundColor(hexColor) 더보기…
BASE64란 8비트 바이너리 데이터(예를 들어 실행파일이나, ZIP파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 스트링으로 바꾸는 인코딩 방식을 가리키는 개념입니다. 다시 말해서, 바이너리를 읽을 수 있는 스트링 형태로 바꾼 자료형을 BASE64라고 합니다. (자세한 설명) 예전에 스프링 부트에서 MultipartFile을 이용해 파일 업로드를 하는 방법에 대한 더보기…
이 방법은 npm의 Vue CLI를 통해 개발하는 경우 및 처음에 Vue.js 프로젝트를 생성할 때 Vue Router가 포함되지 않은 경우를 기준으로 작성되었습니다. 1) npm에서 Vue Router 설치 npm install vue-router –save 2) router 관련 설정 js 파일 생성 이름 및 경로는 자유롭게 지정할 수 있습니다. 3) 라우터 설정 더보기…
이전 글 스프링 부트(Spring Boot) 미디 플레이어 만들기 (1): Timidity++, LAME을 이용해 미디(midi) 파일을 mp3로 변환하는 메소드 만들기 스프링 부트(Spring Boot) 미디 플레이어 만들기 (2): 업로드 페이지, 임시 재생 플레이어 만들기 현재까지 완성된 미디 플레이어 (임시) 바로 가기 다음 곡 연속 재생 기능 이전 버전에서는 한 곡만 재생하고 끝이었는데, 더보기…
자바스크립트로 테이블을 역순으로 정렬하는 예제입니다. 참고로 테이블을 작성할 시에는 <table> 태그 밑에 <thead>와 <tbody>로 제목 부분과 내용 부분을 나누는 것이 관리 측면에 좋습니다. DOM 배열은 forEach등을 사용할 수 없으므로 Array.from($domArrr)로 forEach 등을 사용할 수 있는 배열로 변환합니다. 이것을 reverse()한 다음에 다시 테이블 <tbody> 밑에 append하면 됩니다. 그리고 reverse()를 sort()로 바꾸면 더보기…
먼저 무한스크롤은 JQuery에서도 다양한 플러그인이 있고, 그 외에도 검색하면 많은 라이브러리들이 있기 때문에 무한스크롤을 직접 구현하기보다는 이러한 외부 라이브러리를 사용하는 것을 우선 추천드립니다. IntersectionObserver에 대한 내용은 이전 글에서 설명되어 있습니다. 자바스크립트: IntersectionObserver (1) 이미지 lazy-loading 구현 IntersectionObserver을 이용한 무한 스크롤은 MDN 문서에서도 공식적으로 권장하고 있는 사항입니다. Implementing “infinite 더보기…