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

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

자바스크립트 19

자바스크립트 콜백 함수 완벽 가이드

쉽다면 쉽고 어렵다면 어려운 자바스크립트 콜백여러분이 콜백에 대한 이해를 할 수 있을 거예요!자바스크립트에서 콜백(callback) 함수는 비동기 작업을 처리하는 중요한 개념 중 하나입니다. 특히, 웹 개발이나 서버 사이드 프로그래밍에서 주로 사용되며, 프로그램의 흐름을 효율적으로 관리하는 데 큰 도움이 됩니다. 이 글에서는 콜백 함수가 무엇인지, 어떻게 사용되는지, 그리고 실제 예제를 통해 콜백 함수의 동작 원리와 활용 방법을 설명하겠습니다.목차Javascript callback콜백 함수란? 콜백 함수는 다른 함수에 인자로 넘겨지는 함수입니다. 즉, 어떤 함수가 끝난 후, 특정 동작을 실행하기 위해 넘겨준 함수를 나중에 호출하는 방식입니다. 주로 비동기 작업에서 많이 사용됩니다. 비동기적으로 데이터를 ..

DEVELOPMENT 2024.11.11

자바스크립트 null, undefined, NaN의 차이점 완벽 정리

이걸 알면 어떻게 해결할지 답이 나옵니다! Null? Undefined? 차이가 뭔데? 자바스크립트에서 값을 명시적으로 "없다" 또는 "유효하지 않다"고 표현하는 데 사용하는 값들은 null, undefined, NaN입니다. 하지만 이들이 비슷하게 보일 수 있으나 각각의 의미와 사용되는 상황은 확연히 다릅니다. 특히, null과 undefined는 값이 "없음"을 나타낸다고 하지만 그 의미와 용도가 다르고, NaN은 수치 연산에서 "숫자가 아님"을 나타냅니다. 이 글에서는 null, undefined, NaN의 차이점과 사용 사례를 예제를 통해 자세히 살펴보겠습니다. 목차 Null-Undefined-NaNnull - 값이 없다null은 명시적으로 값이 없거나 비어 있음을 나타내는 특별한 값입니다. 주로..

DEVELOPMENT 2024.11.10

AJAX(Asynchronous JavaScript and XML)에 대해서 알아보기

"비동기 요청을 할 때 어떤 것을 사용하시나요?"AJAX에 대해서 알아봅시다!웹페이지를 개발을 하면 서버와 통신을 할 수 있는 방법 중 여러 가지 방법이 있겠지만 저의 경우 ajax를 자주 사용하고 있습니다. 자주 사용하고 있으니 많이 알고 있냐라는 물음에 의문이 들어 개념 정리해보려고 합니다. 목차AJAX(Asynchronous JavaScript and XML)AJAX가 뭐야?Asynchronous JavaScript transfer (x-fer)의 약자입니다. 말 그대로 javsciprt와 XML형식을 이용한 비동기적 정보 교환 기법이라고 생각을 하시면 됩니다. 예전에는 XML을 기본으로 사용을 하고 있지만 지금은 JSON을 많이 사용을 하고 있습니다.AJAX 개념은 어떨까요?비동기 요청 (Asyn..

DEVELOPMENT 2024.07.30

[HTML] DOM(Document Object Model)에 대해서 알아봅시다.

"다시 기초부터 잡아"DOM(Document Object Model)이 머야!HTML은 모든 사람들에게 프로그래밍을 처음 접하게 되면 접하게 됩니다. 그리고 계속 배우면서 쓰다 보면 자바스크립트 등을 사용을 하면서 다양한 것들을 활용하여 원하는 기능을 도출해야 합니다. 이번에 저 또한  웹 쪽으로 다양한 기능을 연동하여 만들어야 하다 보니 DOM에 대한 개념들을 다시금 한번 더 제대로 잡아야 하는 이유가 생겨 한번 정리를 해보려고 합니다.목차DOM(Document Object Model)잠깐! HTML에 대해서 알아보죠HTML(HyperText Markup Language)는 우리가 흔히 사용을 하고 있는 웹페이지를 만들기 위해 사용하고 있는 기본 언어라고 생각하면 됩니다. 여기서 이 글을 보는 분들 중..

DEVELOPMENT 2024.07.28

Async/Await 문법 알아보기

"처음 하는 분들은 더 헷갈릴 문법!"생각보다 자주 쓰지만 생각보다 헷갈리는 Async/Await개발을 하다보면 자주 사용하는 문법 중 하나인 Async와 Await에 대해서 개념을 정리해보려고 합니다. 이 글이 다른 사람들에게도 도움이 되었으면 합니다. 혹시 보면서 수정 할 내용이나 조금 더 보완을 했으면 좋겠다는 것이 있으면 댓글로 남겨주세요목차async/await자바스크립트 기준으로 설명을 작성해보려고 합니다. 우선, 해당 문법의 경우 비동기 프로그래밍을 위한 구문 중 하나이며 이를 통해 프로미스(Promise)를 더욱 간결하고 직관적으로 사용 할 수 있는 방법 중 하나입니다. 기본적인 개념은 모든 언어에서 비슷합니다만 각 언어 특성상 약간은 다를 수 있으니 큰 개념에선 이렇다라고 이해하시면 됩니다..

DEVELOPMENT 2024.07.21

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