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

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

자바스크립트 14

자바스크립트(JavaScript) 문자열 자르는 방법

자바스크립트,프로그래밍,문자열,메서드,METHOD 문자열을 잘라 내가 원하는 모양으로 사용할 수 있다고? 프로그램을 만들다 보면 받아온 데이터를 핸들링하여 나타낼 데이터를 가공해야 할 일이 생각보다 꽤 많이 있습니다. 그중에서도 데이터를 받아 자르는 방법에 대해서 알아보도록 하겠습니다. 목차 문자열 자르기 자바스크립트로 활용하여 문자열 자르기를 하려고 합니다, 물론 다양한 방법이 있겠지만 제가 간단하고 쉽게 할 수 있는 방법으로 알려드리려고 합니다. 시작 전 기본개념 당연히 잘 알고 있는 부분이라고 생각은 하고 있지만 우선 기본적으로 알고 계셔야 하는 부분은 위 개념을 알고 계셔야 문자열을 자르거나 합칠 때 어려움이 없습니다. 예를 들어 N이라는 것을 찾고 싶다면 3으로 찾으면 됩니다. 우리가 흔히 알고..

DEVELOPMENT 2024.02.09

개발자 도구, 콘솔 막는 방법

콘솔로그,브라우저도구,크롬,디버깅 개발자도구 금지합니다! 개발을 하다 보면 한 번쯤 신경 쓰이는 것은 F12를 통해서 내가 만들고 있는 홈페이지가 위협을 받는듯한 느낌이 드는 경우가 있습니다. 이럴 때 어떻게 대처를 하면 좋을까라는 고민을 하다가 F12를 누르면 경고문과 함께 사이트가 멈추는 듯한 느낌이 보여줄 수 있으면 좋을까라는 고민을 하게 되었습니다. 아마 이 글을 보는 여러분도 한번쯤 고민을 해봤을 거라고 생각을 하며 적용방법에 대해서 간단하게 설명을 하려고 합니다. 물론 지금 이 방법이 완벽한 방법도 아니고 이렇게 한다고 해도 마음먹고 하는 분들을 막을 수 없지만 적어도 울타리 하나가 더 생겼다는 거에 위안을 삼는.....것도 좋지 않을까라는 생각 하시면 좋지... 않을까라는 생각입니다. 목차 ..

DEVELOPMENT 2023.08.13

자바스크립트 UUID 생성 방법

javscript,uuid 고유 식별을 할 수 있도록 나눠봅시다. 개발을 하다 보면 유일성이 필요한 경우가 굉장히 많다 물론 날짜를 기준으로 나눌 수 있겠지만 날짜 기준과 함께 한번 더 고한 식별자를 가지는 것도 분명 필요합니다. 이럴 때 사용을 할 수 있는 것은 바로 UUID라는 것입니다. UUID가 어떤 것인지 알아보겠습니다. 목차 JavaScript UUID UUID 범용 고유 식별자(UUID :: Universally Unique identifier)라고 하며 우리말로 쉽게 생각하면 소프트웨어 구축에 쓰이는 식별자로써 분산환경에서 개별 시스템이 id를 발급을 하도록 유일성이 보장이 되어야 하는데 이럴 때 사용을 할 수 있는 것이 바로 UUID를 사용을 하고 있는 것입니다. UUID는 128비트의 ..

DEVELOPMENT 2023.07.02

내가 이해하기 쉽게 정리하는 프로미스(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 등등 이벤트 속성은 전부 소문자로 처리한다. ..