JavaScript 13

JavaScript 다크, 라이트모드 변경 이벤트 처리하기

사용자가 시스템의 화면모드를 라이트 혹은 다크 모드로 변경시 이에 따른 처리를 위해서 자바스크립트로 해당 이벤트를 받아서 처리하는 방법입니다. CSS 다크모드 처리 2가지 방식 다크모드를 처리하는 두 가지 방식에 대해서 설명드립니다. 일반적인 방법은 "@media"태크의 "prefers-color-schem"를 사용하는 방법이며, 또 다른 방법은 " "에 사용하는 파일로딩 방식입니다. 스크립트 ccusean.tistory.com Node.js Prefers-color-scheme 서버에서 처리하는 방법 서버사이드(Server side)에서 사용자의 Color scheme를 미리 알고, 처리할 수 있는 방법을 공유합니다. Mac, iPhone과 같은 경우 이미 오래전부터 "다크테마"라는 것을 제공하고 있습..

프로그래밍 언어 하나로 서버, PC 애플리케이션, Web, App 그리고 AI 모두 만들 수 있는 언어는?

프로그래밍 언어 하나로 서버, PC 애플리케이션, 웹페이지, 휴대폰 App 그리고 요즘 핫 한 AI까지 만들 수 있는 언어는 바로 "JavaScript" 입니다. JavaScript언어 문법을 안다면 아래와 같이 CPU, Memory, Display와 같은 환경이 구축된 환경에서 모든 애플리케이션 제작이 가능합니다. 더 큰 장점은 소스 코딩 한 번으로 Windows, Linux, Mac과 같은 여러 플랫폼에 적용이 된다는 것입니다. Web 개발 HTML, CSS와 함께 동적인 웹페이지를 개발할 수 있습니다. 서버 개발 한 소스로 Windows, Linux, Mac OS에서 구동 가능 Node.js: 서버뿐만 아니라 클라이언트 개발에 사용되며, 주요 라이브러리들이 Node.js에 있으며, 아래에 나열되는 ..

IT 일반 2022.07.22

JavaScript 배열 다루기(추가, 삭제, 찾기, 변형)

자바스크립트에서 배열을 다룰 때 자주 사용하고 유용한 방법을 소개합니다. 추가/삭제 push, pop: 배열의 제일 뒤에 추가/삭제 let myArray = [1, 2, 3] // 배열 제일 뒤에 요소 추가 myArray.push(4) console.log(myArray) // [1, 2, 3, 4] // 배열 제위 뒤 요소 삭제 myArray.pop() console.log(myArray) // [1, 2, 3] unshift, shift: 배열의 제일 앞에 추가/삭제 let myArray = [1, 2, 3] // 배열 제일 앞에 요소 추가 myArray.unshift(0) console.log(myArray) // [0, 1, 2, 3] // 배열 제위 앞의 요소 삭제 myArray.shift() ..

JavaScript Spread 구문

객체와 배열의 요소를 쉽게 병합하는 구문입니다. (나머지 구문과 문법은 같지만 혼돈하지 마시기 바랍니다.) 배열 const myArray1 = [3, 4, 5] const myArray2 = [1, 2, ...myArray1, 6, 7] console.log(myArray2) // [1, 2, 3, 4, 5, 6, 7] 객체 const myObject1 = { name: '꾸션', hairColor: '갈색' } const myObject2 = { ...myObject1, age: 29 } console.log(myObject2) // {name: "꾸션", hairColor: "갈색", age: 29}

JavaScript Destructuring

객체나 배열에서 여러 값을 추출하여 동시에 변수에 할당하는 방법입니다. Destructuring 객체 const myObject = { name: '꾸션', age: 29, } const { name, age } = myObject console.log(name, age) //"꾸션" 29 Destructuring 배열 const myArray = [1, 2, 3] const [a, b, c] = myArray console.log(a, b, c) // 1 2 3 Destructuring 함수 const myObject = { name: '꾸션', age: 29, } function myFunction({ name, age }) { return `${name}: ${age}` } console.log(m..

JavaScript 날짜 시간

Javascript에서는 날짜, 시간을 출력 및 계산할 수 있도록 Date 객체를 제공합니다. Date객체에서 제공하는 날짜관련 함수를 이용해서 날짜, 시간과 밀리초를 출력하는 방법과, 성능 검증 및 테스트에 많이 사용하는 경과시간을 계산하는 방법에 대해서 알아 보겠습니다. 1. 현재시간 출력 1) 날짜시간 (년월일 시분초) let now = new Date() // // 로컬 날짜시간 // console.log(now.toLocaleString()) // 2022. 3. 1. 오후 4:51:43 console.log(now.toString()) // Tue Mar 01 2022 16:51:43 GMT+0900 (대한민국 표준시) const myYear = now.getFullYear() const my..

JavaScript JSON

자바스크립트 사용 환경에서 JSON 데이터와 Javascript 객체 간의 양방향으로 변환하는 방법에 대해서 알아봅니다. 1. Javascript 객체에서 JSON 데이터로 변환 "JSON.stringify" 함수를 사용합니다. const myObject = { name: 'David', age: 23, } // Javascript 객체 const myJsonString = JSON.stringify(myObject) console.log(myJsonString) // {"name":"David","age":23} 2. JSON 데이터에서 Javascript 객체로 변환 "JSON.parse" 함수를 사용합니다. const myJsonObject = JSON.parse(myJsonString) conso..

JavaScript로 sleep함수 구현

자바스크립트로 sleep(delay) 함수를 구현하는 방법은 아래 소스와 같습니다. sleep함수 구현 // 화살표 함수로 구현 const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)) } // 일반 함수로 구현 function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)) } sleep함수 사용 (2가지 방식) 1) async, await 방식 // 화살표 함수로 구현 const func = async () => { await sleep(3000) // 3초 console.log('Do something...') } // 일반 함수로 구현 ..

JavaScript 태그 사용법

1. 기본 2. 파일 불러오는 방식 or myScript.js 내용 document.getElementById("demo").innerHTML = "Hello World!"; 태그 위치 기본적으로 안에 위치하며, 태그 안에 넣을 수도 있습니다. 태그안에서 아래부분에 넣는 경우는 페이지 로딩(표시)을 빠르게 하기 위한 경우에 사용합니다. 보통, 페이지 로딩 후에 필요한 스크립트들을 body아래쪽에 위치 시킵니다. (예: button 클릭 이벤트, 콤보박스 선택 이벤트)