전체 글54 다크모드 적용 방법 기본적으로 사용자 시스템 기반으로 다크모드를 설정하려면 dark라는 접두사를 사용해서 쉽게 다크모드를 저용할 수 있음. Writes Upside-Down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. CSS의 미디어 쿼리인 prefers-color-scheme를 사용하면 사용자의 OS를 기반으로 한 다크모드를 활성화할 수 있음.만약 토글링으로 해주고 싶다면?추가적인 설정을 해줭함.테일윈드 설정에서 darkMode속성을 활성화하고/** @type {import('tailwindcss').Config} */.. 2024. 11. 27. [형을 위한 리액트] 2. JSX 형을 위해서 썼지만 정작 형은 안 보는 형을 위한 리액트1. JSX의 원리JavaScriptXML로 자바스크립트를 HTML 처럼 작성할 수 있게 해주는 문법임. 자바스크립트의 확장 문법.Bebel과 같은 트랜스파일러가 리액트가 실행될 때 JSX문법을 React.createElement() 함수를 실행시켜 변환시켜줌.코드 예를 보면,아래와 같이 하나의 컴포넌트가 jsx를 반환하는 코드를 작성하면,return ( Hello, world! This is a paragraph. );바벨이 아래와 같이 코드를 변환시켜줌. createElement를 실행하면 가상돔을 구성하는 구성요소.import { jsx as _jsx } from 'react/jsx-runtime';_jsx( 'div', {.. 2024. 10. 15. [형을 위한 리액트] 1. 리액트를 왜 쓰는지 리액트는 자바스크립트로 동적인 ui를 쉽게 제작할 수 있도록 해주는 라이브러리가장 흔한 특징은 버츄얼돔으로 최적화 업데이트, spa(으)로 새로고침없이 동적인 ui를 보여줌 컴포넌트 기반 아키텍처, 단방향 데이터 흐름, jsx 활용문법등 이런걸 알아보기전 간단한 사용법으로 편리함을 보고감1. 기존의 작성 방법의 변화일단 이런 투두리스트에서 투두를 하나씩 추가할 때 자바스크립트를 사용함. 바닐라 자바스크립트 공통 html To-Do List Add Task 자바스크립트로 작성하는 방법에는 두 가지 방식이 있음.하나는 돔을 만들어서 돔을 추가하는 방식.//돔 기반 버전document.addEventListener('DOMContentLoade.. 2024. 10. 7. 데코레이터 사용법 데코레이터는 타입스크립트 5.0에서 추가됐습니다. 데코레이터는 클래스의 기능을 증강하는 함수로 여러 함수에서 공통으로 수행되는 부분을 데코레이터로 만들어두면 좋습니다.아래 코드는 클래스 메서드들에는 중복되는 start, end 로그가 있습니다. class ANoDeco { eat() { console.log('start'); console.log('eat'); console.log('end'); } work() { console.log('start'); console.log('work'); console.log('end'); } sleep() { console.log('start'); console.log('sleep'); console.log('.. 2024. 4. 25. 이전 1 2 3 4 ··· 14 다음
