Javascript10 [Javascript] Tailwind와 함께 다크모드 구현 최신 브라우저에서는 다크모드 구현을 위한 기능들을 제공하고 있다. 그래서 간편하게 다크모드 기능을 구현할 수 있다. 다크모드 구현에 앞서 알아야 할 내용부터 정리를 해보자. ✅ color-schemeMDN에서는 color-scheme을 사용하면 해당하는 색채 조합으로 웹페이지를 렌더링해준다고 설명하고 있다. 좀 더 쉽게 설명하면 light 또는 dark 로 설정된 값에 맞추어 시스템 전반에, 설정한 컬러 조합으로 렌더링해주는 것이다. 즉, color-scheme만 사용하면 간단하게 다크모드를 구현할 수 있다. 아래는 다크 테마를 적용한 예시이다. 해당 웹페이지는 다크 테마를 사용하겠다는 것을 브라우저에게 알려주는 내용이다. 그럼 브라우저는 다크 테마에 해당하는 컬러를 조합해서 각 요소들을 렌더링해준다. .. 2025. 5. 17. [Javascript] 원시타입에 전개연산자 사용 객체 또는 배열에 전개 연산자를 사용해서 쉽게 병합 또는 복사할 수 있는 기능을 제공한다. 🎈 원시타입값을 객체에 전개 연산자 사용아래와 같이 원시 타입의 값을 전개연산자를 사용하면 어떻게 될까? const obj = { ...1, ...'', ...undefined, ...null} 처음에는 오류가 날 것으로 생각하였다. 하지만 객체에 원시값을 전개 연산자를 사용하더라도 오류가 나지 않고 값이 무시된다. 빈 객체가 생성되는 것을 확인할 수 있다.console.log(obj); // {} 이걸 알기 전에는 오류가 날 것이라 생각해서 전개 연산자를 사용할 땐 값이 없는 경우도 존재한다면, 빈 객체로 초기화를 하도록 코드를 작성하였다. 아래의 예제 처럼 조건에 따라 병합 여부를 결정하는 경우에 조.. 2025. 4. 27. [Node] 이메일 전송 이메일을 보내기 위해서는 SMTP를 사용해야 한다. 지메일 또는 네이버에서는 기본적으로 SMTP 서버를 활용해서 메일을 전송하게 된다. 지메일의 SMTP를 사용하기 위해서는 앱 비밀번호를 생성해야 한다.프로필에서 계정 관리보안2단계 인증하단에 앱 비밀번호💡 앱 비밀번호 위치는 달라질 수 있음. 비밀번호를 기억해놓자. 🎈 nodemailer노드에서 메일 전송을 위해서는 nodemailer 라이브러리를 사용하면 간편하게 메일을 전송할 수 있다.설치아래와 같이 설치해준다.yarn add nodemailernpm install nodemailer 사용방법메일을 보내기 위해서는 먼저 transporter 객체를 생성해주어야 한다.const transporter = nodemailer.createTranspo.. 2025. 4. 13. [Javascript] 소수점 표현 자바스크립트에서는 정수와 실수에 대해서 분리하지 않고 오로지 number 타입만 가지고 있다. 즉, 모든 숫자는 실수라고 생각하면 된다. 🎈 실수의 계산정수값에 대한 계산은 오차가 발생하지 않는다. 아래와 같이 1 더하기 1은 항상 2가 나온다. 절대 3이 나올 수 없다.1 + 1 === 2 // true 하지만 실수값에 대한 계산은 우리가 생각하는 값과 차이가 존재한다. 현실세계에서 아래와 같이 0.1과 0.2를 더하면 누구나 0.3이라고 대답할 것이다. 하지만 자바스크립트로 아래의 코드를 실행해보면 false가 나오는 것을 확인할 수 있다.0.1 + 0.2 === 0.3 // false 이는 소수의 표현 방식이 우리와 다르기 때문이다.컴퓨터는 2진법을 사용한다.10진법의 소수 중 일부는 2진법 변.. 2025. 4. 11. [Javascript] 클립보드 🎈 Document.execCommand예전에는 Document.execCommand 메서드를 사용해서 복사 및 붙여넣기 기능을 사용하였다. 아래는 복사 버튼을 클릭 시, id가 email인 태그의 값을 복사하는 기능이다. email@email.com 복사 Document.execCommand 메서드를 활용해서 다음과 같이 복사 기능을 사용할 수 있다. 복사 버튼 클릭 후 붙여넣기 기능을 수행하면 email@email.com가 클립보드에 정상적으로 복사된 것을 확인할 수 있다. 📯 Document.execCommand의 문제점 첫번째, Dom을 대상으로만 사용이 가능하다. 위의 코드를 보면 알 수 있듯이, Dom이 선택 된 상태에서만 가능하기 때문에 강제로 선택상태로 만든 후 복사가 완료되면 선.. 2025. 4. 6. [Javascript] EyeDropper API 아래 이미지와 같이 컬러피커를 개발할 일이 있었다. 빨간 원으로 표시되어 있는 아이콘을 활용해서, 주변 컬러를 직접 선택할 수 있는 기능을 개발해야하였다. 어떻게 개발을 해야할지 막막했었는데 검색을 해보니 간단하게 EyeDropper API 를 통해서 개발할 수 있다는 것을 알게 되었다. 🎈 EyeDropper API이 API는 구글과 엣지에서만 지원하는 기능이다. 아래와 같이 간단하게 사용할 수 있다.const eyeDropper = new EyeDropper();let color = '';eyeDropper .open() .then((result) => { color = result.sRGBHex; console.log(color); }) .catch((e) => { });});.. 2025. 3. 15. 이전 1 2 다음
