혁신을 이룹니다, 오딘박스(OdinBOX)

언제나 어디서나 오딘박스와 함께!

자바스크립트 11

내가 이해하기 쉽게 정리하는 프로미스(Promise) 알아보기

자바스크립트,EMCA,JS,AJAX,비동기처리,동기처리,프로그래밍,백엔드 이해가 안될 때 이 글 하나면 충분해요! 저도 그랬어요 개발을 하게 되면서 동기와 비동기를 처리하기 위해서 여러 가지 방법을 사용하여 진행을 하지만 효율적으로 관리를 할 수 있는 방법은 아무래도 Promise를 사용하는 것이 맞다고 생각을 한다 개념도 그렇고 Promise 말고 다른 방법도 많지만 흔히 사용하게 되는 콜백 함수를 사용하게 되면 무한 콜백이라는 끔찍한 상황에 맞이하게 된다 나 또한 부끄럽지만 아직 배울게 많다 보니 무한 콜백에 빠져 아찔한 화면을 본 적이 있기도 하고 혼자 검색하면서 프로미스 이론을 봤는데 잘 이해가 되질 않았는데 혼자 천천히 다시 하면서 이해한 개념에 대해서 말해보려고 합니다. 최대한 이론에 중심 해..

DEVELOPMENT 2022.10.02

글자 타이핑하는 효과를 주는 라이브러리 사용방법

라이브러리,자바스크립트,JS,JAVASCRIPT,오픈소스,깃허브 조금 더 이쁘게 보일 수 있는 방법은? 홈페이지를 만들게 되면 기능도 물론 신경을 써야 하지만 이용자가 들어오게 되면 먼저 보게 되는 디자인 요소를 생각해야 하는데 저 또한 홈페이지를 만들게 되면 제일 먼저 신경을 써야 하는 부분은 디자인이라고 생각합니다. 아무리 기능이 좋다고 하더라도 디자인이 좋지 않다면 이용하는 이용자 입장에서 매우 힘들 수 있다고 생각이 들기 때문입니다. 그래서 다양한 오픈소스 라이브러리들이 많지만 오늘은 타이핑 효과를 사용할 수 있는 라이브러리에 대해서 소개해드리려고 합니다. 목차 typewriter-effect 해당 라이브러리는 실제로 제가 홈페이지에서 사용을 했던 라이브러리입니다. 홈페이지에 처음 접속을 하게 되..

DEVELOPMENT 2022.06.26

티스토리 자동목차(TOC) 만드는 방법

자동목차,TOC,jquery,javascript,자바스크립트,html,소스코드,블로그팁,노하우 블로그 목차로 포스팅을 좀 더 편하게 해보자 블로그 글을 올릴 때 조금 더 가독성이 있게 하려면 어떻게 해야 할까 고민을 하다 생각한 것은 목차를 만들어보면 어떨까라는 것입니다. 일단 목차가 있으면 필요한 부분을 바로 볼 수 있기도 하고 글이 정돈된 모습이 보기에 편하다는 장점이 있습니다. 일일이 손으로 목차를 만들고 하는 것은 번거롭고 시간도 많이 걸립니다. 그래서 자동목차(TOC)로 만들어놓으면 다른 부분은 크게 신경 안 쓰고 포스팅 후 작성이 됩니다 그러면 자동 목차를 만드는 방법을 설명을 해드리겠습니다. 목차 준비물 티스토리 [#] jQuery.TOC [#] 적용방법 jQuery.TOC 적용방법 다운로드..

IT/Blog 2021.05.12

[Node.JS] Node.JS로 이메일을 보낼 수 있는 방법

Node JS를 이용하여, 이메일 보내자 Node.JS nodemailer Module 먼저 NodeMailer 모듈을 사용하려면, npm을 이용하여, 설치를 해야합니다. 혹여나, npm이 설치되지않은 분이라면, npm을 먼저 설치하고 오셔야합니다. - 보통은 node.js 설치시 되어져있을겁니다. - npm(Node Package Manager/Modules)이란? Node.js 기반의 모듈 집합 저장소라고 생각하는게 편할 것같습니다. 정상적으로 설치가 되저여 있는지 확인하려면 $node -v를 입력하면, 현재 버전이 출력이 됩니다. "npm install nodemailer" 입력 후 실행 합니다. var nodemailer = require('nodemailer'); 이메일을 이제 보내보도록 하겠습..

클라이언트사이드프로그래밍, 11-21 수업 내용

클라이언트사이드 parseInt("60px") 을 입력하면 숫자만 가져오게 된다. 그러면 위에 문구에서는 60만 결과값으로 가져오게 된다. HTML ( 마크업 언어 -> 코딩 한 것을 화면 출력 ) Element.innerHTML Element 속성(property) innerHTML 특정 요소 내용 가져와! 특정 요소 내용 바꿔! innerHTML = ""; HTML 요소 접근하여, 해당 텍스트 내용을 바꾸려면 '속성'을 사용해야한다. document.getElementById를 사용한다. [Source Code] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3..

클라이언트사이드프로그래밍, 11-18

클라이언트사이드 week12_01.html (했던 것들 한번씩 복습하기) 마우스핸들러 사용하는 법을 배움 [이번 시간 실습 예제] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 div { border : 1px solid blue; width : 100px; height : 100px; text-align : center; vertical-align : middle; line-height : 100px; left..

11-11, 클라이언트사이드프로그래밍

클라이언트사이드 이벤트(event) -> 이벤트가 발생하면 원하는 JavaScript 코드를 실행되도록 할 수 있음. [자바 스크립트는 Jquery를 위해서 배웠다 ] 이벤트? 사용자가 웹브라우저에서 하는 모든 행위를 상세하게 구분하여 이벤트로 규정 (마우스클릭) onmousedown onmouseup onclick ondblclick (마우스이동) onmouseover onmouseout등등 (키보드누르기) onkeydown onkeyup onkeypress 폼(form) 입력(input) onblur onfocus onfocusin onfocusout onsubmit onchange 윈도우 조작 onresize onscroll onload onunload 등등 이벤트 속성은 전부 소문자로 처리한다. ..

클라이언트사이드프로그래밍 - 09.30

클라이언트사이드 화살표 함수 (익명 함수를 조금 더 간단하게 만든 것 ) let 변수명 = ()==>{} let doubleX = (n) == > {return 2*n} [??].toString < 안에 머가 있는지 알 수 있음. 매개변수초기화 function doubleX(n) {return 2 * n;} doubleX(5) 10 정상적인 호출의 결과 doubleX() 호출은 가능함 NaN( Not a Number) 매개 변수 생략한 호출에 대비하는 방법 함수 본문에서 점검하고 처리할수있따. function doubleX(n) { //매개 변수 초기화 if(!n) { n=0; } return 2*n; } 디폴트(default)매개 변수 가능 ECMAScript6 function doubleX(n=0){..

19-09-26,클라이언트 사이드 프로그래밍

클라이언트사이드 2반 함수 를 사용하지 않으면? main()이 너무 길고 복잡해져 소스코드를 이해하기 힘듬 같은 기능의 코드도 필요할 때마다 매번 반복 입력해야 함 기존 코드의 일부를 재활용하려면 방대한 양의 main에서 찾아내야함 소스 코드의 양에 비례하여 변수도 늘어나 중복을 피해 변수명 정하는것도 번거로움 생성 방법 선언적 함수 function 함수명() {필요한 식} [전통적(일반적)인 함수] function doubleX(n) {return 2*n) 함수명 : doubleX 함수명(식별자)작성 규칙 관례 참조 매개변수 (n) 식별자 이름만 결정 함수본문{} 실행 후결과를 반환 function 함수.toString() - > `내용 익명 함수 let 변수명 = function() {}

첫 강의, node.js 아톰 소개

클라이언트사이드 node.js 설명 : https://velopert.com/ 로드맵 : https://www.thinkwise.co.kr/ Node.js 설치 : https://nodejs.org/en/ 아톰 에디터 : https://atom.io/ Node.js 구글 크롬의 자바스크립트 엔진(V8 Engine) 기반의 서버 사이드 플랫폼 2009년 (Ryan Dahi) 개발 Node.js [Chrome V8 JavaScript 기반으로 빌드된 JavaScript 런타임] 이벤트 기반-논 블로킹(I/O모델) = 가볍고 효율적 Node.js 패키지의 '생태계' NPM -> 대규모 오픈 소스 라이브러리 Node 웹서버 X Node.Js는 그저 코드를 실행할 수 있는 하나의 방법에 불과한 JavaScript..