언제나노마드

[JavaScript] File 다루기/base64/blob/FileReader

안녕하세요 하늘은맑고 입니다 File을 다루는 내용을 간단히 정리했습니다. Binary 모든 데이터는 0과 1로 구성되어있는데 Binary 이진데이터를 의미합니다. Base64 Base64 는 Binary 데이터 즉, 이진데이터를 다룰 수 있도록 텍스트(문자열) 형식으로 변환된다. 링크나 상대경로와는 다르게 이미지 데이터 자체를 저장 할 수 있게 해준다. 해서, a, img 태그 내 src에 바로 사용 가능하다.src="data:image/png:base64, ........" base64를 직접 다루는 경우 : 크기가 직은 이미지 컨트롤, 이미지가 들어간 임시페이지 컨트롤, 이미지가 들어간 메일 내용을 html로 작성해서 보낼경우 단점은 33% 크기가 증가하고(로딩 증가), 문자열이 매우 길어 가독성이..

[JavaScript] GPT로 Utils 함수 만들기 (이번주 날짜 얻기)

안녕하세요. 하늘은맑고 입니다. GPT를 사용해 JavaScript 이번주 날짜를 얻어는 함수를 만들어 보려합니다. 먼저 변수로 특정날짜를 받고, 이번주의 첫일(일)을 얻어보는 함수를 GPT에 맡기려고합니다. GPT 질의 GPT 질문 " javaScript 로 오늘 날짜를 넣으면 이번주 첫번째 날인 일요일을 리턴하는 함수" GPT 리턴 내용 function getFirstDayOfThisWeek() { const today = new Date(); const dayOfWeek = today.getDay(); // 0은 일요일, 1은 월요일, ..., 6은 토요일 // 현재 요일부터 이번 주의 첫 번째 날까지의 날짜 차이를 계산 const diff = today.getDate() - dayOfWeek; /..

[JavaScript] 이벤트 추가하기 + 자주쓰는 이벤트 종류

안녕하세요. 하늘은맑고 입니다. 오늘은 자바스크립트로 웹 브라우저 문서의 node에 이벤트를 추가해보고 자주쓰는 이벤트의 종류와 웹브라우저의 다양한 값(스크롤, 마우스 위치)을 획득해보겠습니다 본 포스팅은 DOM 컨틀롤을 이해를 바탕으로 합니다 [JavaScript] DOM 컨트롤 Event 추가 //이 some 클래스를 갖는 노드에 이벤트 추가 자주쓰는 Event 종류 'click' : 클릭 시 'scroll' : 스크롤 이동 시 'transitionend' : transition 이 끝나는 시점 'transitionstart' : transition 이 시작하는 지점 'animationend' : animation 이 끝나는 시점 'animationstart' : animation 이 시작하는 시점 ..

[JavaScript] 이벤트 위임 기법

안녕하세요. 하늘은맑고 입니다. 이벤트를 많이 사용하실텐데요. 이벤트 위임 기법을 소개 드릴려고합니다. 저도 이 기법을 알고는 제가 짠 javaScript 코드 들을 전부 리펙토링 해야겠다는 생각과 앞으로 이벤트 걸때 잘 고려할 수 있겠다는 생각의 확장이 있었습니다. 여러분도 보시고 나면 신세계일 거에요. 기본이지만(?) 모르는 분이 은근 많을 것 같습니다.(저도 몰랐어요. 여기까지 생각이 안닿았습니다) 이벤트 위임 기법 구현 목적은 child 클래스를 갖는 요소를 클릭했을때 해당 요소를 삭제해주고자 합니다. 원래는 child 마다 addEventListner를 해주었는데요. 주석처리를 한 부분입니다. 이 부분을 부모에게 이벤트를 걸어서 간단히 처리했습니다. 이벤트는 e.target으로 판단합니다. * ..

[JavaScript] script 파일 로드 빠르게

안녕하세요. 하늘은맑고 입니다. 이번에는 script태그 선언하는 위치, 혹은 js파일을 src로 가져오는 위치에 따른 속도차이와 오류를 말해볼까합니다. 즉, 오류 없이 좀 더 빠르게 하려면 어떻게 해야할까? 를 생각해보면서 웹브라우저의 구동 방식의 일부분을 들여다 봅니다. script 태그 위치 먼저, event를 추가하는 코드를 head 태그 내에 선언해주면 웹 브라우저가 HTML parse 하고 DOMContentLoaded 하기 전에 실행됩니다. defer 옵션으로 백그라운드에서 script코드가 실행됩니다. aync 옵션 async 옵션은 의미 그대로 비동기라 언제 로드될지 모릅니다. 더 빠를 수도 늦을 수도 있겠죠. 그래서 보통 본 문서와 상관이없는 script를 로드할때 사용합니다. 예를 들..

[JavaScript] DOM 컨트롤

업데이트 : 2023.12.18 / DOM.style 안녕하세요. 하늘은맑고 입니다. DOM에 접근하는 방법은 javaScript document.querySelector ~로 접근했었는데요. 이번에는 접근한 DOM에 속성값도 획득해보고, 추가해보겠습니다. 본 포스팅은 DOM 접근방식을 이해를 바탕으로 합니다. [JavaScript] DOM 접근방식 속성 값 추가 const char = document.querySelect('.characters'); char.setAttribute('data-id', 123); // class="characters" data-id="123"> .setAttribute로 data-id라는 속성을 추가해주고, 값은 123을 주었습니다. 속성 값 획득 const char =..

[JavaScript] Object 응용 함수 만들기

안녕하세요. 하늘은맑고 입니다. 오늘은 JavaScript에서 ES6 문법을 조금 응용해서 여러 함수들이나 변수들을 모아서 하나의 Object 로 만들어 사용하는 방법을 공유할까 합니다. // key값이 함수명이 됩니다. export const chartObj = { // option을 변수로 받아서 객체의 options key의 value로 할당하고 리턴해줍니다. tooltipOption: (option) => {return { options: option } } // async도 가능합니다. postData: async(data) => {return await postCompanyId(data)} // 아예 다른 함수에 던져줄 수도 있겠죠 thorwFun: (data) => return handleF..

[javaScript] DOM 접근 방식

업데이트 - 2023-12-12 / 내용 추가 정리 - 2023-12-20 / DOM 개념 추가 안녕하세요. 하늘은맑고 입니다. DOM 접근방식 내용을 업데이트를 했습니다. DOM = Document Object Model. 웹 브라우저가 화면에 보여주는 페이지들은 DOM Tree로 구성되어 있는데 하나 하나의 노드들이 object 입니다. 단순히 tag에(node, object) 에 접근하는 방법이라고 생각하면 좋을 것 같습니다. 접근해서 javaScript로 속성, class를 추가, 수정하면서 좀 더 interactive web을 만들 수 있게 됩니다. 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가..