능글맞은 구렁이

CallBack Hell(콜백 지옥) 콜백 지옥은 JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다. timer(1000, function(){ console.log('작업'); timer(1000,function(){ console.log('작업'); timer(1000,function(){ console.log('작업'); timer(1000,function(){ console.log('작업'); ....... }); }); }); }); 1. Promise 를 활용해 콜백지옥 탈출 timer(1000) .then(function(){ console.log('작업')..

먼저, 동기(Synchronous) VS 비동기(asynchronous) 란? 쉽게, 동기는 직렬 비동기는 병렬이다. javaScript는 태스크를 순차적으로 진행시키는 동기적 언어이다. 하지만, 보통 서버와 통신할 때 가장 많은 시간이 소요되므로 네트워크 관련 작업들은 비동기적으로 구현되어 있다고 한다. 따라서 자바스크립트 외적인 것, 대표적으로 AJAX가 있다. 비동기로 처리하는 방식은 효율성을 상승시켜 처리 속도를 높여준다. Promise란? Promise는 자바스크립트에서 비동기 처리를 간편하게 처리할 수 있도록 도와주는 객체이다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’ 을 의미합니다. Pending :..

콜백함수란? 콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다. 콜백함수가 왜 필요한가? 자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다. 그러나, 코드가 다른 행위가 일어난 뒤에 실행되는 경우도 있고 순차적으로 실행되지 않을 때도 있다. 이런 걸 비동기 프로그래밍이라고 한다. 콜백은 태스크(작업)가 끝나기 전에 함수가 실행되지 않는 것을 보장한다. 다르게 말하자면 콜백은 그 태스크가 끝난 직후에 실행될 것이다. 콜백은 비동기 자바스크립트 코드를 작성할 수 있도록 해주고 여러 문제와 에러들로부터 안전하게 지켜준다. 자바스크립트에서 콜백 함수를 만드는 방법은 어떤 ..

Key KeyCode ASCII Key KeyCode ASCII 0 48 48 Numpad 0 96 48 1 49 49 Numpad 1 97 49 2 50 50 Numpad 2 98 50 3 51 51 Numpad 3 99 51 4 52 52 Numpad 4 100 52 5 53 53 Numpad 5 101 53 6 54 54 Numpad 6 102 54 7 55 55 Numpad 7 103 55 8 56 56 Numpad 8 104 56 9 57 57 Numpad 9 105 57 A 65 65 Multiply 106 42 B 66 66 Add 107 43 C 67 67 Enter 13 13 D 68 68 Subtract 109 45 E 69 69 Decimal 110 46 F 70 70 Divide 1..

vue 프로젝트를 만들고 npm run serve를 실행하였더니 두둥!! 아래와 같은 에러가 발생하였다. npm ERR! Missing script: "serve" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in 이것은 생성된 프로젝트 밖에서 npm run serve를 실행하였기 때문에 발생한 에러이다. 해결방안은 프로젝트로 위치를 바꾸어주었더니 에러 해결

간단한 모달창 만들기 See the Pen 모달 by jangbora (@jangboraa) on CodePen.

visual Studio Code에서 프로젝트 생성하기 1. 새로운 프로젝트 폴더를 만들어서 열어준다. 2. ctrl+` 또는 메뉴 상단에 view > terminal를 입력하여 터미널 창을 열어준다. 3. 터미널 창에 npm init react-app .를 입력해 주면, 아래의 사진과 같이 로딩이 진행된다. (npm init react-app . : 리액트 프로젝트를 생성해달라는 명령어) ▼▼로딩이 끝나고 성공화면 4. 로딩도 끝나면 리액트 프로젝트가 생성된다. 5. 프로젝트를 실행방법 : terminal에서 npm run start를 입력해준다. 6. 프로젝트 종료방법 : ctrl +c 를 눌러주면 프로젝트가 종료가 된다. intellij 에서 프로젝트 생성하기 1. 상단의 File > New > P..

React란? React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다. React는 단일 페이지 애플리케이션을 빌드하는 데 사용된다. React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있다. React 환경설정(window) ▼▼아래의 주소로 node.js다운받기 (node.js를 지금당장 알아야 React를 할 수 있는건 아니다. 단지, 환경세팅일뿐이다. ) https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치가 끝났다면 잘 설치가 되었는지 확인을 위해 cmd를 열어 확인해준다. -node -v : node 버..

1. createElement를 통해서 div생성과 target div안으로 div생성하는 방법 See the Pen js-createElement by jangboraa (@jangboraa) on CodePen.

BOM : Browser Object Model 브라우저 객체 모델은 브라우저를 객체로 표현한 것이다. window 객체가 최상위 객체 자식 객체 HTML 문서를 나타내는 document 객체 사용자가 방문한 URL을 저장하고 관리하는 history객체 현재 URL에 대한 정보를 가지고 있는 location 객체 브라우저에 대한 정보를 관리하는 navigator 객체등 자바스크립트에서 이러한 객체의 속성과 메서드를 이용하면 웹브라우저를 제어할 수 있다. 형식 window.document.write( ) 그동안 document.write()로 사용을 했는데 그이유는 window가 디폴트 객체이다 보니 생략을 한 것이다 1. window 객체 : alert(), confirm(), prompt() 등등 (원..