전체 글106 Detect Dark mode in CSS & Javascript Dark Mode How do I detect dark mode using JavaScript & CSS 다크모드 시스템은 모든 화면, 컴포넌트, 메뉴 및 컨트롤에 대해 더 어두운 색상 팔레트를 사용하고 더 선명한 배경을 사용하여 전경 콘텐츠를 돋보이게 만든다. 몇몇 서비스에서는 다크모드를 지원하는 UI를 사용자에게 제공하고 있다. 장점 눈의 피로를 줄이고, 밝기를 현재 조명 조건에 맞게 조정 어두운 환경에서 화면을 쉽게 사용할 수 있도록 지원 배터리 전원을 절약함으로써 시각적 인체 공학을 개선하는 데 도움 접근성 및 대비 다크모드는 흰색 텍스트를 표시 할 수있을만큼 어두워야 한다. 텍스트와 배경 사이에 최소 15.8 : 1의 대비 수준을 사용한다. 이렇게하면 본문 텍스트가 WCAG의 AA 표준 인 4... 2020. 9. 23. Javascript 삼각함수 sin, cos, tan 삼각 함수(sin(), cos(), tan(), asin(), acos(), atan(), atan2())는 매개변수와 반환값 모두 호도법(라디안)을 사용한다. 라디안 라디안은 각의 크기를 재는 SI 단위이다. 호도라고도 하며, 기호는 rad이다. 단위원의 중심각의 라디안 값은 그 각이 대하는 호의 길이와 같다. 1라디안은 약 57.3도이다. 라디안 값을 각도 값으로 반환 라디안 값 / (Math.PI / 180) = 각도 값 리다인 값 반환 (Math.PI / 180) * 각도 값 = 라디안 값 sin 곡선 그리기 var ctx = document.getElementById('canvas').getContext('2d'); var width = 1280; var stepX = 10; var x = 14.. 2020. 9. 22. React Lazyload How to set up lazy loading components in React 리액트 자바스크립트 코드 분할 & 레이지 로딩 적용 성능 최적화하기 레이지 로딩(lazy loading) 레이지 로딩은 필요 시점까지 객체의 초기화를 연기시키기 위해 컴퓨터 프로그래밍에 흔히 사용되는 디자인 패턴의 하나로 적절하게 사용될 경우 프로그램의 운영 차원에서 효율적이다. 코드 분할 Code Splitting 앱이 커지면 번들 사이즈도 커진다. 특히 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커져서 로드 시간이 길어진다. 대부분의 경우 사용자는 적어도 처음에는 전체 웹 페이지를 보지 못한다. 이러한 경우 이러한 구성 요소를 렌더링하면 응용 프로그램의 성능이 저하 될뿐만 아니라 많은 리소스가 낭비된다... 2020. 9. 21. javascript find How to properly use Javascript Find 자바스크립트 find 로 배열에서 요소 찾기 Find find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. js Find example const array1 = [5, 12, 8, 130, 44] const found = array1.find(element => element > 10) console.log(found) // expected output: 12 속성 중 하나를 사용하여 배열에서 객체 찾기 const inventory = [ { name: "apples", quantity: 2 }, { name: "bananas", quantity: 0 }, { name: "cherries", quantity: .. 2020. 9. 21. Javascript Some, Every How to properly use Javascript Some 자바스크립트 Some, Every 사용하기 Some some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다. js Some example const array = [1, 2, 3, 4, 5] // checks whether an element is even const even = element => element % 2 === 0 console.log(array.some(even)) // expected output: true 배열의 요소 테스트, 하나라도 10보다 큰지 판별 function isBiggerThan10(element, index, array) { return element > 10 } ;[2,.. 2020. 9. 21. detect iPhone X device with JavaScript 자바스크립트로 아이폰X 디바이스 감지하는 방법 IPhoneX Resolution 아이폰X 해상도 IPhone X : 1125 X 2436 IPhone XS : 828 X 1792 IPhone XMAX : 1242 X 2688 const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream const ratio = window.devicePixelRatio || 1 const screen = { width: window.screen.width * ratio, height: window.screen.height * ratio, } const iosX = screen.width == 1125 && screen.height === 2436.. 2020. 9. 21. commit messages Patterns for writing better git commit messages 더 나은 git 커밋 메시지를 작성하기 위한 패턴 Types asdasdasd feat : A new feature 새로운 기능 개발 fix : A bug fix 버그 수정 refactor : refactoring production code 코드 리팩토링 chore : Build process, no production code change 패키지 or 빌드 프로세스 또는 보조 도구 변경 pakage.json, .gitignore docs : Documentation only changes 문서 만 변경 README.md perf : A code change that improves performance 성능을 향상 .. 2020. 9. 21. React useCallback 사용하기 useCallback const memoizedCallback = useCallback(() => { doSomething(a, b) }, [a, b]) 메모이제이션된 함수를 재사용 useCallback example import React, { useCallback } from "react" export default function MyParent({ term }) { const handleClick = useCallback( item => { console.log("You clicked ", item) }, [term] ) return } // Recreate increment on every change of delta! const increment = useCallback(() => setC(c.. 2020. 9. 21. React useMemo 사용하기 // a, b가 바뀔때만 리렌더링 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]) 메모이제이션된 값을 재사용 의존성 값 [a, b] 가 변경 되었을때 재계산하여 렌더링 시 고비용 계산을 방지 배열이 없을 경우 렌더링 때마다 새 값 계산 메모이제이션(memoization) 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 useMemo example import React, { useMemo } from "react" const users = [ { id: "a", name: "Robin" }, { id: "b.. 2020. 9. 21. replace & replaceAll 문자열 치환하기 replace를 replaceAll 처럼 사용하여 문자열 치환하는 방법 //#를 공백으로 변경 str.replace("#", "") //첫번째만 공백으로 변경되고 나머지는 변경 되지 않는다. 정규식 이용해서 gi 로 감싸기 // #를 감싼 따옴표를 슬래시로 대체하고 뒤에 gi 를 붙이면 // replaceAll 과 같은 결과를 볼 수 있다. str.replace(/#/gi, "") 슬래시 / 바꾸기 ;/[/]/g 여러 문자 바꾸기 ;/[/,#,;,*]/g 정규식의 gi 의미 g : 발생할 모든 pattern에 대한 전역 검색 i : 대/소문자 구분 안함 m: 여러 줄 검색 (참고) 2020. 9. 21. Slice & Splice slice 와 splice 차이 및 사용방법 slice begin 부터 end까지 (end 미포함) end 생략시 : 배열의 끝까지 ( length) 음수 : ex) slice(2, -1) 세번째부터 끝에서 두번째 요소까지 const animals = ["ant", "bison", "camel", "duck", "elephant"] console.log(animals.slice(2)) // expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)) // expected output: Array ["camel", "duck"] splice 배열의 기존 요소를 삭제 교체 추가 const months = ["Jan".. 2020. 9. 21. Npm Yarn CLI 단축 명령어 Npm (Node Package Manager) 노드 패키지 매니저 자바스크립트 프로그래밍을 위한 패키지 관리자 자바스크립트 런타임 환경 node.js의 기본 패키지 관리자 Yarn 의 장점 다운로드한 패키지 캐시 운영 병렬화 리소스 활용 극대화 설치 시간 단축 코드 실행전 설치된 패키지 무결성 확인 이전에 패키지 설치한 경우 오프라인으로 재설치 npm & yarn npm yarn 의미 npm init yarn init 초기화 npm install yarn 또는 yarn install package.json의 패키지 설치 npm install --save [package name] yarn add [package name] 의존성으로 추가 npm install --save-dev [package name.. 2020. 9. 21. JS Pattern IIFE: Immediately Invoked Function Expression Self-Executing Anonymous Function 으로 알려진 디자인 패턴 즉시 실행 함수 표현: 정의되자마자 즉시 실행되는 Javascript Function ;(function() { statements })() 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function) 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지, IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다. 즉시 실행 함수를 생성하는 괄호() 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다. // 표현 내부의 변수는 외부로부터의 접근이 불가능하다. ;(function(.. 2020. 9. 21. currentTarget Target 차이 currentTarget Target 차이 Difference Property Click the inner square Click outside of the inner square currentTarget Outer square Outer square target Inner square Outer square currentTarget 이벤트가 바인딩 된 요소 the element that the event was bound to. It never changes. In the sample code above, e.currentTarget is the element. target 사용자가 클릭 한 요소 사용자가 정확히 클릭하는 위치에 따라 원래 요소 또는 하위 요소가 될 수 있다. the element us.. 2020. 9. 21. CSS variables How to use Custom properties CSS variables var() Custom properties (--*): CSS variables 사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용 와 --같이 접두사가 붙은 속성 이름 은 함수를 사용하는 다른 선언에서 사용할 수있는 값을 포함하는 사용자 지정 속성 을 --example-name나타낸다. :root { --main-color: #488cff; --second-color: #ffff8c; } #firstParagraph { background-color: var(--first-color); color: var(--second-color); } 정의 : 사용자 지정 속성은 전용 표기법을 사용해 정의 .. 2020. 9. 21. JS Map, Filter, Reduce How to properly use Javascript Map, Filter, and Reduce 자바스크립트 고차함수 map, filter, reduce 사용하기 Sample Player list Array const players = [ { id: 10, name: "Jan Vertonghen", status: "Goal keeper", totalMatch: 400, retired: true, }, { id: 2, name: "Paulo Wanchope", status: "Attacker", totalMatch: 200, retired: false, }, { id: 41, name: "Ronny Johnsen", status: "Goal keeper", totalMatch: 300, retired: .. 2020. 9. 21. 이전 1 2 3 4 다음
