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

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

DEVELOPMENT 127

[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

Flutter FCM(Firebase Cloud Messaging) 알림(Notification) 사용방법

Flutter Notification 추가해 보자!알림은 이걸로 해보세요!요즘 업무에서 플러터를 활용하여 앱을 만들어 배포를 해야 하는 일이 생겨 공부를 하고 있는데 이 중에서 앱의 가장 큰 장점 중 하나인 알림을 보내야 하는데 어떻게 하면 좋을지 고민을 하다가 검색을 해보니 FCM이라는 것을 많이 활용하여 만드는 것 같아 이걸로 적용을 하기로 했습니다. 처음 사용하는 분들도 이 글을 보고 도움이 될 수 있도록 정리를 해보려고 합니다.목차FCM(Firebase Cloud Messaging)우선, 파이어베이스[#]로 접속을 합니다, 파이어베이스의 경우 구글 계정이 있으면 사용을 할 수 있습니다. 상단 오른쪽을 클릭하여 선택을 하면 구글 계정 로그인을 할 수 있습니다. 로그인 후 Console로 이동을 합니..

DEVELOPMENT 2024.06.22

플러터(Flutter) 하단 네비게이션바(BottomNavigationBar) 설정방법

플러터(Flutter), 하단네비게이션바,BottomNavigationBar 앱 하단 부분에 버튼을 추가해 보자! 요즘 플러터를 배우고 있는데 생각보다 재미있습니다. 물론 기존 계속 봤던 언어가 아니다 보니깐 사용을 할 때 아직까지 익숙하지 않고 어렵다 보니 조금 힘들긴 하지만 언제나 새로운 기술을 배우고 새로운 것을 접한다는 것은 정말 좋습니다 그렇게 플러터를 사용하여 앱을 만들다 하단 부분 버튼을 추가하는 방법을 찾다가 내비게이션 바라는 것을 찾게 되었습니다. 해당 버튼을 사용하는 방법에 대해서 알아보도록 하겠습니다. 목차 BottomNavigationBar 우리가 흔히 앱을 사용하다 보면 맨 하단에 고정된 버튼들이 보입니다, 이런 버튼들을 보통 네비게이션바라고 표현을 하기도 합니다. SourceCo..

DEVELOPMENT 2024.02.10

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

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

DEVELOPMENT 2024.02.09

PostgreSQL - DATE_TRUNC 알아보기

postgresql, 날짜형식, 더하기, 빼기, 쿼리, SQL 날짜 자르기 어떻게 하면 좋을까요? 쿼리를 사용하다 보면 날짜 형식을 서로 다른 형식으로 되어있는 것을 비교하는 경우가 많이 있습니다. 이럴 때 쉽게 자를 수 있는 방법이 있으면 좋을 거라는 생각을 하게 됩니다. 날짜 비교를 할 수 있는 다양한 방법을 지원을 하고 있는데 이번엔 그중 DATE_TRUNC에 대해서 알아보도록 하겠습니다. 목차 DATE_TRUNC 사용해보기 PostreSQL기준으로 설명을 먼저 드리면 공식문서[#]를 참고하여 설명합니다. DATE_TRUNC(FIELD, SOURCE [, TIME_ZONE ]) 필드(Field)에 넣을 수 있는 것은 아래와 같이 존재하고 있습니다. 1. microseconds 2. milliseco..

DEVELOPMENT 2023.11.05

쿼리스트링(Query String) 간단하게 알아보기

프로그래밍개발 쿼링스트링에 대해서 알아봅시다 웹 개발을 할 때 생각보다 Ajax를 이용할 때 주로 많이 봤을 방법인 Get방식으로 넘기는 방법 한 번씩 보셨죠? 그렇게 사용을 할 수 있는 방법에 대해서 알아보려고 합니다. 쉽고 간단하게 설명해 보도록 하겠습니다. 목차 쿼리 스트링(Query String) 쿼리 스트링은 사용자가 입력 데이터를 전달하는 방법 중 하나이며 해당 데이터를 가장 단순하게 전달할 수 있는 방법입니다. 웹 개발을 할 때 보통 우리가 사용하고 있는 Ajax 등을 보게 되면 주로 GET방식으로 데이터를 요청할 때 사용하는 방식 중 하나입니다. 우리가 주소(URL)에서 볼 수 있듯이 http://odinbox.co.kr/path?test 이런식으로 나오는 것을 이야기합니다. 쿼리 스트링 ..

DEVELOPMENT 2023.09.29

PostgreSQL - WITH RECURSIVE 알아보기

postgresql,WITH RECURSIVE,재귀적,계층형,반복문 계층형, 재귀적 쿼리 - WITH RECURSIVE SQL을 사용을 하다 보면 쓰게 될 WITH RECURSIVE를 알아보려고 합니다. 계층형 및 재귀적 쿼리를 사용할 때 주로 사용을 하는 WITH RECURSIVE구문에 대해서 사용방법과 함께 실제로 어떻게 쓰면 될지에 대해서 알아봅시다. 목차 WITH RECURSIVE postgresql 기준으로 작성이 되었고, Oracle, SQL도 잠깐 설명을 하도록 하겠습니다. postgresql 공식문서[#] SQL 공식문서[#] WITH RECURSIVE ODINBOX_SEL AS ( SELECT 1 AS NUMBER UNION ALL SELECT NUMBER + 1 FROM ODINBOX_..

DEVELOPMENT 2023.09.18

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

콘솔로그,브라우저도구,크롬,디버깅 개발자도구 금지합니다! 개발을 하다 보면 한 번쯤 신경 쓰이는 것은 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