프론트엔드24 다크모드 적용 방법 기본적으로 사용자 시스템 기반으로 다크모드를 설정하려면 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. [NextJS] e2e - PlayWright 설치 및 메인화면 띄우기(1) playwright는 병렬 테스트가 가능하며, 속도도 cypress보다 빠르고, 마이크로소프트에서 지원해 주기 때문에 playwright로 시작 설치 npm init playwright@latest 위의 명령어를 입력하면 아래처럼 다른 것들도 물어보는데 Choose between TypeScript or JavaScript (default is TypeScript) > 언어 선택 Name of your Tests folder (default is tests or e2e if you already have a tests folder in your project) > 테스트 폴더 이름 지정 Add a GitHub Actions workflow to easily run tests on CI > CI 작성해줌 .. 2024. 2. 6. 이전 1 2 3 4 ··· 6 다음
