블로그

onClick of both child and parent triggered when child is clicked class Sample extends React.Component { constructor(props) { super(props); this.handleChild = this.handleChild.bind(this); this.handleParent = this.handleParent.bind(this); } render() { return ( hello ); } handleParent(e) { console.log('parent'); } handleChild(e) { console.log('child'); } } output when child is clicked child parent ..

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 자바스크립트에서 비동기적 처리를 진행하는 과정, 방식에 대해서 제가 이해한 부분을 이야기 해 볼까 합니다. * Phlilp Roberts의 What the heck is the event loop anyway? 영상을 참고 했습니다. Phlilp Roberts : What the heck is the event loop anyway? | JSConf EU 2014 https://www.youtube.com/watch?v=8aGhZQkoFbQ 자바스크립트는 내부적으로 stack, webapis, task queue, event loop 를 가지고 있습니다. stack 은 코드를 실행하는 작업장으로, 해당 작업은 스코프 단위로 수행합니다. wepapis 는 ..

들어가기 전에 이 포스팅은 자바스크립트 개발자라면 알아야 할 33가지 개념을 번역한 것입니다. (https://github.com/leonardomso/33-js-concepts, https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec) 오역이나 의역이 있을 수 있습니다. 지적해주시면 확인 후 바로 정정하겠습니다. original source of this posting is from https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions..

자바 스크립트 파일 저장 (8) 그래 ./ 현재있는 디렉토리를 의미합니다. https://code-examples.net 나는 알고있다. ../ 길은 올라간다. 그러나 의미는 정확히 / 의미한다? 나는 최근에 튜토리얼을 훑어 보았고 같은 위치에있는 파일을 가리키는 것처럼 보였으므로 전혀 필요하지 않습니까? 그게 전부라면 그걸 사용해서는 안 될까요? 다음 목록을 빠른 참조로 사용할 수 있습니다. / = Root directory . = This location .. = Up a directory ./ = Current directory ../ = Parent of current directory ../../ = Two directories backwards 유용한 문서 : https://css-tricks..

(안내) 호이스팅의 원리에 대한 글을 추가로 포스팅했습니다. (19.10.13) 자바스크립트의 변수는 다른 언어들과 조금 다르게 동작합니다. 이는 때때로 개발자로 하여금 의도하지 않은 결과를 발생시키기도 합니다. es2015 이후로 let이나 const를 사용하여 예방할 수 있지만 Closure같은 문법들의 효용성을 이해하기 위해서 고전 자바스크립트가 가졌던 특징을 다지고 가는것이 좋겠습니다. var 변수의 의도치 않은 현상 잠시 아래 코드를 보겠습니다. if(true){ var name = 'yuddomack'; } console.log(name); for(var i=0; i

appendChild는 DOM 함수이고 append는 JavaScript 함수 append() 함수를 더 선호한다. append를 할 때 문자열을 삽입할 수 있다. 먼저 이렇게 만들 수 있다. document.getElementById('myId').append('Hello'); 하지만 이렇게는 만들 수 없다. document.getElementById('myId').appendChild('Hello'); 아래와 같은 예외 발생 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. 왜? appendChild 함수에는 parameter(매개변수)와 같은 element(요소)가 필요하다...

+(string concatenation operator) with object will call the toString method on the object and a string will be returned. So, '' + object is equivalent to object.toString(). And toString on object returns "[object Object]". With , the object is passed as separate argument to the log method. +를 사용하면 toString() 메소드를 호출한 상태로 log 메소드에 인자로 전달됨. ,를 사용하면 별도의 객체로 toString() 메소드를 호출하지 않고 log 메소드의 인자로 전달됨. ..

Do not confuse the primitive Boolean values true and false with truthiness or falsiness of the Boolean object. Any value that is not false, undefined, null, 0, -0, NaN, or the empty string (""), and any object, including a Boolean object whose value is false, is considered truthy when used as the condition. For example: var b = new Boolean(false); if (b) // this condition is truthy https://devel..

브라우저의 쿠키(cookie) 데이터저장소를 이용하면 최근에 본 페이지나 키워드등을 저장할 수 있습니다. 온라인쇼핑몰이라면 관심상품으로 등록할 수도 있을테고... 온라인 사전 사이트라면 기존에 검색했던 내용들을 저장할 수 있을 것입니다. # 자바스크립트에서 쿠키(cookie) 사용하는 방법아래는 자바스크립트에 수 많은 이들이 사용하는 쿠기를 저장하고 불러오는 setCookie(), getCookie() 사용자 함수입니다. 아래 코드를 사용해 간단하게 쿠키를 불러오거나 읽어올 수 있습니다. 간단한 cookie 사용법 및 문법은 아래와 같습니다. document.cookie = "쿠키이름=쿠키값" Ex) document. cookie = "test=abcde"; 이를 함수로 만든 자세한 코드와 사용방법 및 ..

현재 웹 페이지가 어떤 웹 브라우저로 열렸는지 확인하려면 간단히 userAgent값을 확인하면 됩니다. userAgent 값에 브라우저를 구분하는 고유의 값들이 들어 있습니다. 예를 들면 현재 페이지가 구글 크롬(Chrome)에서 열렸는지 체크하려면 다음과 같이 작성합니다. var agent = navigator.userAgent.toLowerCase(); if (agent.indexOf("chrome") != -1) { alert("크롬 브라우저입니다."); } 사파리나 파이어 폭스 역시 다음과 같습니다. if (agent.indexOf("safari") != -1) { alert("사파리 브라우저입니다."); } if (agent.indexOf("firefox") != -1) { alert("파이어폭..