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

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

JavaScript 9

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

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

DEVELOPMENT 2024.02.09

자바스크립트 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

웹(WEB/UX) 디자인 관련 참고할만한 사이트

웹,UI,UX,반응형,모바일,PC,데스크톱,디자인사이트,그래픽,JS,HTML,CSS WEB UI/UX 디자인 참고 해보세요! 웹사이트 디자인을 위해 혼자 창작으로 해내는 것도 좋겠지만 다른 웹사이트들은 어떤 식으로 만들어져 있는지 확인을 하면서 참고를 하는 것도 정말 필요한 과정 중 하나입니다. 예를 들어 자신이 만드려고 하는 홈페이지가 커뮤니티 관련 홈페이지라고 한다면 관련 커뮤니티 홈페이지를 확인을 하면 되지만 불편하기도 하고 다양한 사이트를 보는 것이 자신이 사이트를 만들 때 디자인 관련하여 더욱 도움이 된다고 생각합니다. 그럴 때 바로 필요한 사이트를 여러분에게 소개를 해드리려고 합니다. 웹사이트모음 굿디자인웹 국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹 www.gdweb.co.kr - 굿디..

DEVELOPMENT 2022.01.06

Bootstrap :: Modal 활용하는 방법

HTML,홈페이지,웹,개발,프로그래밍언어,자바스크립트(JS),Jquery)제이쿼리,웹,팝업,모달 팝업보단 모달을 쓰자! 일반적으로 우리가 웹페이지를 이용하다 보면 자주 볼 수 있는 화면이 있는 팝업과 함께 모달이 존재합니다. 저의 경우 처음 HTML이라는 것을 접했을 때는 팝업(pop-up)을 이용하여 어떤 필요한 정보를 출력을 하였는데 우리가 인터넷을 쓰다 보면 팝업창이 뜨면 내용을 정확히 보지도 않고 닫거나 불편하고 여러모로 크게 좋진 않아 어떻게 하면 좋을까 고민을 하다 모달(modal)이라는 것을 알게 되었습니다. 그래서, 여러분에게 팝업과 모달의 차이점에 대해서 간단히 알아보고 모달 사용방법에 대해서 알아보도록 하겠습니다. 목차 모달(Modal) VS 팝업(pop-up) 팝업(pop-up) 우선..

DEVELOPMENT 2021.08.27

[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'); 이메일을 이제 보내보도록 하겠습..

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

클라이언트사이드 https://www.w3schools.com/ 하다가모르는거있으면 참고 splice 기억하자 c.(splice(startIndex, 제거할 개수, [추가할 항목들]) 배열 중간에 추가 삭제하는 것 c = [1, 2, 3, 4, 5] c.splice(1, 1) 제거 [2]ㅂㅂ c.splice(1,0,2) 추가하는 방법 [1.2.3] 중간고사 ㄱ c.splice(2,1,"ULSAN") 변환 c.splice(c.length-1,1) 제일 마지막꺼 ㅂㅂㅂ c.pop()이랑 똑같음 Client Side programming - 초보 > for 반복문 원하는 횟수만큼 반복 처리를 하고 싶을 때 사용 for 기본문법 for(초기문,조건문;종결문) { //반복처리내용 } 스코프 변수를 사용할 수 있는..

첫 강의, 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..