Etc26 TIL | Reflow, Repaint Reflow, Repaint JS 코드에 의해 DOM or CSSOM을 변경하는 DOM API가 사용될 경우, DOM or CSSOM이 변경된다. 이때 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 트리를 기반으로 레이아웃과 페인트 과정을 브라우저 화면에 다시 렌더링하게 되는데, 이러한 과정을 리플로우(Reflow), 리페인트(Repaint)라고 한다. Reflow 레이아웃의 재계산하는 것을 말하며, 다음과 같이 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 재배치를 위한 위치 계산 작업이 이루어진다. DOM 노드의 추가, 제거 DOM 노드의 위치 변경 DOM 노드의 크기 변경(margin, padding, border, width, height 등..) CSS3 애니메이션과 트랜지.. 2022. 8. 28. TIL | 패키지 잠금파일 Npm의 유의적 버전 표기, 패키지 잠금파일(package-lock.json, yarn.lock) 버전의 범위 잠금파일을 알아보기 전, npm이 모듈의 버전을 관리하는 방식을 먼저 알아보자 "dependencies": { "react": "^17.0.2", }, 위 예시는 npm을 통해 설치한 react의 버전이 17.0.2이라는 것이다. 이때 npm은 버전을 관리하기 위해 유의적 버전(Sementic Version) 규칙 아래 패키지 버전을 관리한다. 유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리하는 방법이다. 위 리액트 버전을 예시로 들 경우 주는 17, 부는 0, 수는 0이다. 각각의 버전을 변경하는 기준은 다음과 같다. 주 버전(Major .. 2022. 3. 26. TIL | GraphQL Subscriptions GraphQL Subscriptions GraphQL Subscriptions? 특정 이벤트가 발생할때 서버가 클라이언트로 데이터를 보낼 수 있도록 GraphQL에서 제공하는 기능이다. 서버와 클라이언트가 실시간 연동을 하게끔 하기 위해 웹소켓을 기반으로 한다. subscriptions을 사용함으로써, 일반적인 흔히 사용되는 request - response 통신에서 벗어날 수 있다. 대신 클라이언트에서 원하는 이벤트를 지정하여 서버와의 연결을 지속할 수 있다. 이후 해당 이벤트가 발생할때마다 서버는 클라이언트에 데이터를 전달한다. 결론적으로, 실시간 데이터 통신을 위해 사용된다.(알람, 푸시, 배송상태 등에 적용할 수 있다.) Setting with Apollo client subscriptions 설.. 2022. 3. 13. TIL | Tailwind CSS Tailwind CSS Overview Tailwind CSS? A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Utility-first CSS framework, 즉 미리 정의된 CSS의 특성들을 class 를 통해 불러와 적용시키는 형태의 CSS 프레임워크이다. 일반적인 CSS와 Utility-first CSS 스타일을 비교하였을때, 비교적 적은 코드로 빠른 시간 안에 레이아웃을 구현할 수 있다. 비교적 낮은 러닝커브 Tailwind CSS을 사용하기 위해서는 패키지.. 2022. 3. 10. TIL | Webstorm IDE Setting Share WebStorm IDE Setting Share 최근 Webstorm을 사용할 일이 생겨, Webstorm 세팅 후 vscode의 setting sync처럼 setting을 공유할 수 있는 방법을 정리해보았다.(vscode와 단축키가 많이 달라 적응하는데 시간이 꽤나 걸릴 것같다.) 1. WebStorm setting 파일을 업데이트할 repository 생성 및 파일 업데이트 File - Manage IDE Settings - Settings Repository를 통해, setting 파일을 업데이트할 repository를 연동할 수 있다. (이 과정에서 access token 작업도 필요하니, 이 부분은 그냥 진행해주면 된다. ) repository와 연결후, OVERWRITE REMOTE를 클릭하게.. 2022. 3. 1. TIL | MSW(Mock Service Worker) MSW(Mock Service Worker) 테스트코드 강의를 들으면서 사용해보게 된 MSW(Mock Service Worker)에 대해 간단히 정리해보았다. MSW란? Mock Service Worker의 준말로, 이를 사용하면 실제 api를 호출하지 않고 데이터를 요청할 수 있다. 정확하게 말하자면 api 요청을 가로챈 후 service worker가 mocking data를 전달해주는 것이다. (Service Worker의 가짜 데이터를 넘겨준다.) 애플리케이션 내부에 직접 Mock데이터를 심거나 Mock 서버를 별도로 만들 필요 없이 실제 API를 사용하는 것처럼 네트워크 수준에서 Mocking이 가능하다. MSW Request Flow msw 라이브러리를 통해 애플리케이션의 네트워크 요청을 감지.. 2022. 2. 7. 이전 1 2 3 4 5 다음