전체 글29 useUpdateEffect react 의 useEffect 는 처음 마운트할때와 의존성 배열에 있는 값이 바뀔 때 실행된다. useUpdateEffect 는 react-use 같은 라이브러리에서 커스텀 훅으로 제공되기도 하지만 간단하게 프로젝트에 정의해서 사용할 수도 있다. import { useEffect, useRef } from 'react' function useUpdateEffect(callback: () => void, deps: any[]) { const ref = useRef(false) useEffect(() => { if (ref.current) { callback() } else { ref.current = true } // eslint-disable-next-line react-hooks/exhaustive-.. 2023. 11. 3. Anti-aliasing 맥 os 를 사용하면 적용된 폰트가 무엇이든 이쁘게 보인다. 심지어 굴림, 돋움 같은 기본 폰트도 자동으로 안티 앨리어싱이 되어서 부드럽게 표현된다. 안티 앨리어싱이란 계단 현상 방지 기술 인데, 쉽게 말해 픽셀의 각진 부분을 스무스하게 바꾸어 주는 기술이다. 위 이미지의 오른쪽이 안티앨리어싱을 적용한 모습이다. 맥 os 를 사용하면 자동으로 안티앨리어싱을 적용해서 표현해주지만 windows 는 그렇지가 않다. 윈도우에서 돋움, 굴림 폰트를 사용해보면 매우 작게 혹은 매우 크게 확대하면 각져보인다. 돋움, 굴림 폰트 뿐만 아니라 대부분의 폰트가 저런 현상을 보인다. 이 현상을 해결하려면 글자를 살짝만 돌려주면 된다. transform: rotate(0.04deg); 2023. 10. 23. local git 자격 증명 삭제 (윈도우 자격증명, 맥 키체인) mac 1. terminal 에서 "keychain access" 혹은 "키체인 접근" 검색 2. 키체인 접근의 검색에서 github 검색 3. terminal 에서 다음 명령줄 실행 $ git credential-osxkeychain erase host=github.com protocol=https > [Press Enter] 4. 키체인 접근에서 github.com 이 사라진 것 확인 윈도우 1. 자격 증명 관리자 검색 2. Windows 자격 증명 클릭 3. git 관련 자격 증명 제거 2023. 5. 10. hosts 파일 변경하기 hosts 파일이란 ? 우리가 어떠한 특정 도메인에 리소스를 요청할 때 그 과정에서 DNS 서버에서 도메인 네임에 해당하는 ip address 를 반환받는 서버를 거치게 되는데 DNS 서버를 가기전에 다음과 같이 생긴 hosts 파일을 먼저 참조하게 된다. # 으로 시작하는 줄은 무시하게 되어 있으며 동작에 영향을 주지 않는 간단한 가이드이다. 위의 예에서는 # 이 없는 줄인 127.0.0.1 test.io 라고 적힌 줄만 읽게 되는데 "test.io 라고 하는 도메인을 찾아갈 때는 127.0.0.1 의 주소로 찾아가라" 라는 뜻이다. hosts 파일 경로 C:\Windows\System32\drivers\etc hosts 파일 용도 웹서버와 관련된 테스트 내부망에서 DNS에 등록되지 않은 사이트 이용 .. 2022. 12. 27. 화면 reflow 가 일어나는 경우 렌더 트리와 각 요소들의 크기와 위치를 다시 계산해주는 과정을 Reflow라고 한다. Reflow가 일어나는 대표적인 경우는 다음과 같다. DOM 노드의 추가, 제거 DOM 노드의 위치 변경 DOM 노드의 크기 변경(margin, padding, border, width, height 등..) CSS3 애니메이션과 트랜지션 폰트 변경, 텍스트 내용 변경 이미지 크기 변경 offset, scrollTop, scrollLeft과 같은 계산된 스타일 정보 요청 페이지 초기 렌더링 윈도우 리사이징 이외에도 화면의 구조가 변경되었다면 Reflow가 발생한다고 이해하면 된다. 2022. 11. 22. normalize.css /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ==================.. 2022. 8. 26. 이전 1 2 3 4 5 다음
