분류 전체보기216 [css] min() / max() 2개 이상의 대소비교가 가능한 값이 주어졌을 때, 최소값 또는 최대값을 반환 min(100px, 60%) 예를 들어, min(100px, 60%)를 생각해봅시다. 만약 부모 엘리먼트의 크기가 100px이라면 해당 엘리먼트의 크기는 부모의 60%인 60px이 되기 때문에, 60%가 더 작은 값으로 선택이 될 것입니다. 반면, 부모 엘리먼트의 크기가 그 두배인 200px이라면 자식 엘리먼트의 크기도 그 두배인 120px이 되기 때문에, 100px이 더 작은 값으로 선택이 될 것입니다. width: 70%; max-width: 1000px; 위 소스는 아래와 같이 min으로 바꿀 수 있다. min(70%, 1000px); 문제! 최소 padding-top을 만드려면?? 평소에는 padding-top: 20% .. 2020. 11. 4. [Hooks] 4 : useCallback 일반 함수는 컴포넌트가 리렌더링 될때마다 새로 생성된다. useCallback은 함수를 재사용하여 렌더링을 최적화할 때 사용한다. 기본형태 : useCallback(function, deps) deps: 검사할 값이 담긴 배열 const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], // deps ); 함수 안에서 사용하는 상태값이나 props가 있다면 꼭 deps 안에 넣어줘야 해당 값을 최신 값으로 사용하게 된다. react.vlpt.us/basic/18-useCallback.html 18. useCallback 를 사용하여 함수 재사용하기 · GitBook 18. useCallback 을 사용하여 함수 재사용하기 useC.. 2020. 11. 3. javascript prototype 스터디 자바스크립트는 프로토타입 기반 언어이다. 클래스가 없기 때문에 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조)함으로써 상속과 같은 효과를 얻는다. 생성자 함수 Constructor를 new 연산자와 함께 호출하여 새로운 인스턴스를 만들 수 있다. 이 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데, 이 녀석은 Constructor의 prototype 프로퍼티를 참조한다. prototype도, 이를 참조하는 __proto__도 객체이다. prototype 객체 내부에 instance가 사용할 메서드를 저장하고 instance에서 __proto__를 통해 이 메서드를 사용한다. 실무에서는 __proto__ 대신 Object.getPrototypeOf() 혹은 Obje.. 2020. 11. 2. vscode lint 세팅 각 프로젝트마다 lint 세팅 달리해야 할 때 .vscode 폴더의 setting.json에서 { "editor.formatOnSave": false, } 2020. 11. 2. image-set image-set()기능은 사용자의 장치에 가장 적합한 이미지 해상도를 제공하여 브라우저가 장치 및 설정에 가장 적합한 이미지를 선택하는 이미지 옵션 세트 (각각 관련 해상도 선언 포함)를 제공합니다. background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi); developer.mozilla.org/en-US/docs/Web/CSS/image-set image-set() The image-set() CSS function notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily .. 2020. 10. 27. Node.js 버전 변경하기 npm install -g n n 6.10.3 this is very easy to use. then you can show your node version: node -v v6.10.3 2020. 10. 22. 네이버 웹마스터도구 사이트 검색 반영 안될 때 http://naver.me/GT7jmYbx 2020. 10. 19. React 컴포넌트 특정 영역 외 클릭 감지 const mymenuRef = useRef(null); function closeMyMenuOnOutside(ref: any) { useEffect(() => { function handleClickOutside(e: any): void { if (ref.current && !ref.current.contains(e.target)) { closeMyMenu(myMenuDispatch); } } document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [ref]); } closeMyMenuOnOutside(.. 2020. 10. 19. styled-components 라이브러리 만들기 // style.ts const mt = (size: number) => css` margin-top: ${size}px; `; const mr = (size: number) => css` margin-right: ${size}px; `; const mb = (size: number) => css` margin-bottom: ${size}px; `; const ml = (size: number) => css` margin-left: ${size}px; `; export const Style = { margin: { mt, mr, mb, ml, }, }; // styled-components import { Style } from '../' .mb-0 { input { ${Style.margin.mb(0).. 2020. 10. 16. 이전 1 2 3 4 5 6 7 ··· 24 다음
