전체 글
-
[JS]Javascript 이벤트 전파 막기Dev/JS 2018. 5. 21. 23:29
Javascript 이벤트 전파 막기 이벤트 전파를 막을 수 있는 방법에는 대표적으로 3가지가 있습니다. e.stopPropagation(), e.stopImmediatePropagation(), e.preventDefault() 이번 포스팅에서는 각각의 특징에 대해서 알아보도록 하겠습니다. 1. e.stopPropagation(); e.stopPropagation() 메소드를 호출하면 버블링 단계에서 상위로 가는 이벤트 전파를 막을 수 있습니다. 만약, 1번째 요소에 e.stopPropagation() 메소드를 호출하고, 1번 요소를 클릭하면 호출은 1번 요소만 호출되게 됩니다. 또한, stopPropagation은 한 요소에 여러개의 리스너가 등록되어 있어도, 모두 실행하고 전파를 막습니다. 그래서 ..
-
[JS] Javascript Propagation :: 이벤트 버블링, 이벤트 타겟, 이벤트 캡쳐Dev/JS 2018. 5. 21. 21:54
Javascript Propagation 이란? Propagation 이란 이벤트가 전파되는 모든 경로를 포함하는 말이다. 이때 Javascript 개발을 하면서 많이 들어봤을 이벤트 버블링 이라는 용어가 나온다. 버튼~ 위와 같은 구조를 가졌을 때, 을 클릭하면 상위에 있는 요소들(a, li, ul, div)에 다 onclick 이벤트가 발생하게 된다. 이벤트는 계속 위로 올라가게 되는데, 이때 window 객체를 만나면 이벤트가 종료된다. 클릭한 은 이때 event target이 된다. 그리고 여기서 요소들은 하나의 브랜치를 만들게 되는데, 이 브랜치 안에는event target을 포함하여 window 까지의 모든 요소들이 다 들어가게 된다. 위의 예제에서는 button, a, li, ul, div,..
-
[JS]react-router 적용해보기Dev/JS 2018. 5. 21. 16:31
개요 react-router 란 클라이언트 사이드에서 주소값의 변경에 따라 페이지 혹은 컴포넌트의 변화를 제공하기 위한라이브러리 입니다. 예를 들어 사용자가 회원가입을 위해 /join 에 접근했을 때, react-router는 회원가입 페이지를 렌더링해줍니다. react-router는 페이스북에서 공식으로 지원하고 있는 라이브러리는 아니지만, 많은 사용자를 보유하고 있다고 합니다. 설치 npm 을 사용하여 react-router-dom 을 설치해줍니다. > npm install --save-dev react-router-dom ################################ react-router와 react-router-dom의 차이 : react-router는 코어까지 들어있는 master..
-
[알고리즘]1152번 단어의 개수 - 백준 온라인 저지Dev/Algorithm 2018. 5. 20. 00:42
1152번 단어의 개수 출력하기 - 백준 온라인 저지 이 문제를 보고 간단히 나는 split 함수를 써서 배열의 길이를 출력 하면 될 줄 알았다. 그래서 멍청한 나는 다음과 같이 코딩을 하였다. import java.util.Scanner; public class findWord { public static void main(String[] args) { Scanner scan = new Scanner(System.in); String line = scan.nextLine().trim(); String arr[] = line.split(" "); System.out.println(arr.length); } } 하지만 이렇게 코딩을 하면 예를 들어 'A B' 와 같은 테스트 케이스는 단어의 개수인 2 를 ..
-
[DEV]SPA 알아보기 - Single Page ApplicationDev 2018. 5. 18. 22:24
Single Page Application - SPA에 대해서 알아보자 SPA? SPA란 Single Page Application 의 약자로, 단일 페이지 어플리케이션 이라고 불립니다. 말 그대로'페이지가 1개인 어플리케이션' 입니다. 기존에 있던 웹 페이지들은 여러 페이지로 구성이 되어 있었습니다. 그래서 사용자가 요청할 때마다 페이지가 새로고침 되며 그때마다 서버에 요청하고 응답받은 내용을 브라우저에 표현해주었습니다.하지만 과도한 네트워크 트래픽을 유도하게 되었고, 편의성마저 떨어지게 됩니다. 이는 현재 매우 많은 데이터를 가진 웹 환경을 표현하기에는 문제가 있었고, 이것을 나름대로 캐싱, 압축하는 방법으로 해소하고자 하였지만, 결국에는 한번에 모든 HTML, CSS, JS를 해석한 뒤에 화면에 렌..
-
[알고리즘] 벌집 - 백준 온라인 저지Dev/Algorithm 2018. 5. 10. 14:07
벌집 방 구하기 위의 그림과 같이 육각형으로 이루어진 벌집이 있다. 그림에서 보는 바와 같이 중앙의 방 1 부터 시작해서 이웃하는방에 돌아가면서 1씩 증가하는 번호를 주소로 매길 수 있다. 숫자 N이 주어졌을 때, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈 때 몇개의 방을 지나가는지(시작과 끝을 포함하여) 를 계산하는 프로그램을 작성하시오. 예를 들면 13까지는 3개, 58까지는 5개를 지난다. 입력 : 첫째 줄에 N(1
-
[CSS]Less 알아보기 Less.jsDev/CSS 2018. 5. 10. 11:26
CSS 전처리기인 Less.js에 대하여 알아봅시다. 본 포스팅은 http://lesscss.org/ 를 한글로 번역한 문서입니다. 개요 Less는 CSS의 하위호환된 언어입니다. 본 포스팅은 Less 공식 문서를 번역한 것으로, Less 언어 와 Less.js에 대한 내용으로 구성되어 있으며, 이것은 Less 스타일을 CSS 스타일로 변환해주는 자바스크립트 툴 입니다. 이 글에서는 Less의 간단한 기능들을 살펴보겠습니다. 설치 Node.js 에서 사용하기 > npm install -g less > lessc styles.less styles.css 브라우저에서 단에서 사용하기 변수 변수에 대한 내용은 크게 설명하지 않아도 쉽게 이해할 수 있습니다. @nice-blue : #5B83AD;@light-b..
-
[JS] ECMA2018 : ES9 알아보기Dev/JS 2018. 4. 28. 21:21
ES9 마지막으로 진행된 TC39 회의에서 "ECMAScript 2018 Language Specification" 에 적용할 새로운 기능들이 정해졌습니다. 기능들은 ES8의 통합 이후, 4단계에 도달한 모든 기능들이 선택되었습니다. 이 글에서는 간단한 3가지 기능들을 알아봅니다. ㄴ> 4단계 : TC39 위원회에서는 5단계에 이르는 프로세스를 통해 새로운 기능을 개발합니다. 이때 4단계는 "완료" 단계라고 할 수 있습니다. Rest/Spread Properties 구조가 해체될 때, Rest/Spread Properties 는 선택되지 않은 객체의 남은 프로퍼티들을 새로운 객체에 옮겨집니다. Rest Properties const data = { a: 1, b: 2, c: 3, d: 4}; const ..