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. 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 이전 1 ··· 85 86 87 88 89 다음
