Tech Article/Javascript(7)
-
[js] Truthy in Boolean
아래들은 js에서 모두 true를 반환함 이유 js는 Boolean에서 type coersion (= force)를 하기 때문 if (true) if ({}) if ([]) if (42) if ("0") if ("false") if (new Date()) if (-42) if (12n) if (3.14) if (-3.14) if (Infinity) if (-Infinity) Reference 공식문서 : Truthy
2021.04.22 -
[Redux] Redux의 간단한 사용법 (codepen 예제 포함)
Redux codepen예제 : redux로 간단하게 action, reducer를 만들고 store로 dispatch 함 codepen에서 redux 사용하는 방법: js에서 아래 이미지와 같이 추가하여 사용 Reducer reducer로 업데이트 할때는 항상 new array, new object를 return 해야함. reducer가 call 될때 초기값에 데이터가 따로 없으므로(undefined 상태임) 초기값을 넣어줘야함 Redux Cycle name description action creator action을 return하는 function action object로 type, payload를 갖고 있음 dispatch store의 function으로 state 업데이트 할 수 있는 유일한 ..
2021.04.18 -
[Javascript] this에 대한 이해와 call(), apply(), bind() 메소드 사용방법
this와 call(), apply(), bind() this는 javascript의 이해하기 어려운 내용 중 하나입니다. 저 또한 this를 이해하지 못하였을 때, this에 대한 두려움이 많았습니다. 하지만 단 한번 제대로 이해를 하고 나니 오히려 js가 더 재밌게 느껴졌습니다. this에 대해 이해를 아직 잘모르신다면 반드시 짚고 넘어가도록 권하고 싶습니다. Content 크게 아래와 같은 내용으로 나눠서 설명하였습니다. call()에 대한 이해 apply()에 대한 이해 bind()에 대한 이해 function에서의 this class에서의 this Description this란 MDN에서 이렇게 설명한다. the value of this is determined by how a function..
2020.11.01 -
[Javascript DOM] DOM Manipulation(DOM 조작하기)
Proclaim tistory에서는 hash link가 지원되지 않는 것 같습니다. 따라서 hash link로 편하게 이동하기 위해서 gist에 같은 내용을 올려두었습니다. DOM Manipulation(DOM 조작하기) and Javascript DOM의 element를 선택하고 조작하는 방법을 알아본다. document의 Node 및 Element의 method에 대해 알아보고, 간단한 예제로 실습해봅니다. 1. dom element를 선택하기 getElementById getElementsByClassName getElementsByTagName querySelector querySelectorAll 2. 선택한 element의 인접 element(혹은 node)를 선택하기 parentNode pa..
2020.10.29 -
[Javascript DOM] The DOM (Document Object Model)이란?
Proclaim 이 글의 코드는 참고자료에서 인용한 것임을 미리 알려드립니다. 글이 매우 길기 때문에,시리즈(DOM Series)로 분할하였습니다. DOM 시리즈와 관련된 모든 링크는 이 페이지에 올릴 예정입니다. DOM(Document Object Model) in Javascript DOM이란 Document Object Model으로 HTML document의 standard API이다. Web Page는 HTML로 나타나는 Document이고, 그것을 바꿀 수 있게 해주는 것이 DOM이라고 보면 된다. 우리는 아래와 같은 것들을 DOM에 접근하여 바꿀 수 있다. HTML elements HTML attributes CSS styles HTML events 위와 같은 것들을 add(create), ..
2020.10.25 -
Execution context
들어가기에 앞서.. 본 내용은 한번 읽고 이해하기 쉽지 않습니다. 다소 어려운 내용임을 감안하고 읽어주시기 바랍니다. javascript engine의 동작순서로 다소 추상적인 내용으로 다가올 수 있습니다. 이 글은 내용은 최대한 짧게 용어위주로 요약한 글입니다. 이해가 되지 않는다면 키워드별로 검색을 해서 상세하게 이해하시는 것을 권장하고 싶습니다. ❔ Execution context(EC)는 javascript 코드가 실행되는 방식입니다. (javascript engine이 동작하는 방식) 먼저 아래에서 다룰 term(용어)부터 정리해보겠습니다. (영문과 한국어를 자주 섞어쓰는 이유는, 두가지 언어가 어떻게 호환되는지 알아야 구글링이 원활하기 때문입니다. 불편하더라도 양해부탁드립니다.) === 실행되..
2020.10.22