[CS지식] Non Bloking VS Asynchronous / 논블로킹 vs 비동기
Blocking , Non-Blocking VS Synchronous, Asynchronous 자바스크립트는 Non-Blocking 방식으로 작동하는 언어로서 .... 자바스크립트의 이점은 비동기(Asynchronous) I/O 에서 .... 언뜻 보면 굉장히 비슷한 개념인 것 같기도 하고, 그다지 신경쓰지 않고 넘어가게 되는 부분이다. 일반적인 경우에서는 블로킹 == 동기 , 논블로킹 == 비동기 라고 표현을 해도 사실 커뮤니케이션에 큰 문제는 생기지 않는다. 면접 질문에서 위와 같은 맥락의 질문을 받아 적잖이 당황하고, 조금 늦었지만 이제라도 확실히 알아가고자 여러 자료를 찾아보았다. 그림 으로 이해하는 데에는 이 자료 , 개념 자체를 이해하는 데에는 이 자료 가 많이 도움이 되었다. (감사합니다 🙏..
2021. 5. 20.
[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?
preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이..
2020. 1. 19.
[JS] Arrow Function / 화살표 함수란 ❓
화살표함수(Arrow function)는 ES6부터 쓸 수 있는 일종의 익명 함수이다. 일반적인 화살표함수의 모습은 이러하다. const fun1 = () => { return true; } 화살표 함수와 기존 함수의 차이점은? 왜 화살표 함수가 생겼을까? 1. this의 차이. 기존 함수는 this 가 호출시에 동적으로 결정되고, 화살표함수는 선언시에 정적으로 this가 결정된다. 기존 함수 (동적인 this) var obj = { state: 0, addState: function(){ btn.addEventListener('click', function(){ this.state += 1; }); } }; 화살표 함수 (정적인 this) var obj = { state: 0, addState: fun..
2020. 1. 8.
[JS] 자바스크립트 함수 종류 / 화살표 함수 차이점 ❓
방법 1. function 함수이름 {} function fun1() { return true; } function fun1(a,b) { return a+b; } 파싱하는 단계에서 함수가 정의된다. 방법 2. var a = 함수 (익명함수) var fun2_1 = function() { return true; } var fun2_2 = function(a,b) { return a+b; } 변수에 함수를 할당한다. 런타임 단계에서 함수가 정의된다. 그렇기 때문에, 방법 1과 다르게 함수 선언 순서에 따라 함수가 잘 작동하지 않을 수 있다! 방법3. Function을 이용한 객체로서의 선언 var fun3 = new Function("a", "b", "a+b"); 잘 안쓰인다고 한다. 방법4. 화살표함수 v..
2020. 1. 6.
[JS /자바스크립트] setInterval⏱, clearInterval⏱ / 주기별로 실행하기
setInterval() 이란? 일정한 간격으로 함수를 실행할 수 있게끔 해줍니다. setInterval(handler, 시간) 시간은 1ms 단위이며, 1초마다 실행시키고싶으면 1000ms 를 쓰면 됩니다. * handler 는 반복적으로 실행할 함수 clearInterval() 이란? setInterval 로 주기적으로 실행했던 것을 멈추게 합니다. clearInterval(setInterval로 생성된 함수) 이를 이용한 시간을 나타내주는 예시 코드입니다. HTML 파트 Hello. Click here! 00:00 Stop Time JS 파트 const clockContainer = document.querySelector(".js-clock"); clockTitle = clockContainer...
2020. 1. 1.
[CS지식] Non Bloking VS Asynchronous / 논블로킹 vs 비동기
Blocking , Non-Blocking VS Synchronous, Asynchronous 자바스크립트는 Non-Blocking 방식으로 작동하는 언어로서 .... 자바스크립트의 이점은 비동기(Asynchronous) I/O 에서 .... 언뜻 보면 굉장히 비슷한 개념인 것 같기도 하고, 그다지 신경쓰지 않고 넘어가게 되는 부분이다. 일반적인 경우에서는 블로킹 == 동기 , 논블로킹 == 비동기 라고 표현을 해도 사실 커뮤니케이션에 큰 문제는 생기지 않는다. 면접 질문에서 위와 같은 맥락의 질문을 받아 적잖이 당황하고, 조금 늦었지만 이제라도 확실히 알아가고자 여러 자료를 찾아보았다. 그림 으로 이해하는 데에는 이 자료 , 개념 자체를 이해하는 데에는 이 자료 가 많이 도움이 되었다. (감사합니다 🙏..
[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?
preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이..
[JS] Arrow Function / 화살표 함수란 ❓
화살표함수(Arrow function)는 ES6부터 쓸 수 있는 일종의 익명 함수이다. 일반적인 화살표함수의 모습은 이러하다. const fun1 = () => { return true; } 화살표 함수와 기존 함수의 차이점은? 왜 화살표 함수가 생겼을까? 1. this의 차이. 기존 함수는 this 가 호출시에 동적으로 결정되고, 화살표함수는 선언시에 정적으로 this가 결정된다. 기존 함수 (동적인 this) var obj = { state: 0, addState: function(){ btn.addEventListener('click', function(){ this.state += 1; }); } }; 화살표 함수 (정적인 this) var obj = { state: 0, addState: fun..
[JS] 자바스크립트 함수 종류 / 화살표 함수 차이점 ❓
방법 1. function 함수이름 {} function fun1() { return true; } function fun1(a,b) { return a+b; } 파싱하는 단계에서 함수가 정의된다. 방법 2. var a = 함수 (익명함수) var fun2_1 = function() { return true; } var fun2_2 = function(a,b) { return a+b; } 변수에 함수를 할당한다. 런타임 단계에서 함수가 정의된다. 그렇기 때문에, 방법 1과 다르게 함수 선언 순서에 따라 함수가 잘 작동하지 않을 수 있다! 방법3. Function을 이용한 객체로서의 선언 var fun3 = new Function("a", "b", "a+b"); 잘 안쓰인다고 한다. 방법4. 화살표함수 v..
[JS /자바스크립트] setInterval⏱, clearInterval⏱ / 주기별로 실행하기
setInterval() 이란? 일정한 간격으로 함수를 실행할 수 있게끔 해줍니다. setInterval(handler, 시간) 시간은 1ms 단위이며, 1초마다 실행시키고싶으면 1000ms 를 쓰면 됩니다. * handler 는 반복적으로 실행할 함수 clearInterval() 이란? setInterval 로 주기적으로 실행했던 것을 멈추게 합니다. clearInterval(setInterval로 생성된 함수) 이를 이용한 시간을 나타내주는 예시 코드입니다. HTML 파트 Hello. Click here! 00:00 Stop Time JS 파트 const clockContainer = document.querySelector(".js-clock"); clockTitle = clockContainer...