반응형 개발 공부13 [iOS] momentum scroll - scroll API 사용하기 👻 모멘텀 스크롤(momentum scroll)이란? 모멘텀 스크롤은 모바일에서 손가락으로 화면을 터치해 스크롤을 할 때 스크롤에 가속도가 생기면서 화면이 이동하다가 천천히 멈추는 것을 말한다. -webkit-overflow-scrolling: touch; 위의 css를 적용하면 iOS의 웹 페이지에 모멘텀 스크롤을 적용할 수 있다. iOS 13 이상에서는 기본적으로 모멘텀 스크롤이 적용된다. 모멘텀 스크롤을 적용하면 화면이 끊겨보이는 것이 아닌, 자연스러운 스크롤링 효과를 볼 수 있다. 그러나 모멘텀 스크롤링 적용되면 스크롤이 실행 중일 때 scroll API가 정상적으로 작동하지 않는 현상이 발생한다. 탭이 있는 리스트 화면에서 탭을 변경하면 리스트 상단이 보일 수 있게 컨테이너의 스크롤 위치를 { .. 2022. 12. 14. [CSS] 같은 색상의 border와 background-color가 다르게 나타나는 현상 - background-clip border와 background-color를 설정했을 때 같은 색상으로 설정했음에도 border가 더 진하게 보이는 현상이 발생하는 경우가 있다. .box{ width: 100px; height: 50px; background-color: rgba(58, 58, 58, .2); border: 1px solid rgba(58, 58, 58, .2); } border와 background-color를 rgba(58,58,58,0.2)로 같게 설정했지만 border는 background-color보다 더 진하게 보인다. 이는 background-clip 속성과 관련이 있다. 👻 background-clip HTML 요소는 box로 이루어져있는데 background-clip은 배경 이미지나 배경색을 박스의 요.. 2022. 9. 22. [TS] Array filter 타입 추론 - type guard 👻 Array.prototype.filter() JavaScript에서는 filter 메소드를 사용해서 요소를 걸러낼 수 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter Array.prototype.filter() - JavaScript | MDN filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. developer.mozilla.org const arr = [1,2,3,null,undefined] const filteredArr = arr.filter((value)=> Boolean(value)) // filteredArr : [1,.. 2022. 8. 17. Apollo Client - Cache 사용하기 👻 Cache란? HTTP의 캐싱 HTTP는 Cache 기능을 적용해 불필요한 리소스 재요청을 방지한다. 아래와 같은 여러 가지 Cache 방법을 가지고 있다. Cache-Control ETag Last-Modified HTTP는 이러한 정책들을 각각의 URL에 설정하는 형식으로 캐싱이 이루어진다. 즉, 각 엔드포인트마다 Cache 방법을 설정할 수 있다. Rest API는 HTTP의 기능을 모두 사용할 수 있기 때문에 캐싱 역시 가능하다. 그러나 GraphQL은 Endpoint가 하나(/graphql이라는 URL)이기 때문에 HTTP에서 제공하는 캐싱 기능을 사용할 수 없다. 그렇기 때문에 같은 리소스를 요청하더라도 실제로 네트워크를 거쳐야 한다. 이러한 점을 보완하기 위해 Apollo Client에서.. 2022. 8. 14. [MacOS] 맥 Python 3으로 설정하기 MacOS는 기본적으로 Python 2.7이 설치되어있다. 그러나 보통 Python을 사용할 때는 버전 3 이상을 권장한다. 아래 방법은 Homebrew를 이용해 Python을 설치하기 때문에 먼저 Homebrew가 설치되어 있어야 한다. Homebrew를 이용해 Python 설치 brew install python Python이 설치된 위치 확인하기 ls -l /usr/local/bin/python* 위의 명령어를 입력하면 아래와 같이 python이 설치된 경로를 알려준다. Python 버전 변경하기 ln -s -f /usr/local/bin/python[원하는 버전] /usr/local/bin/python ex) 파이썬 3.9 버전을 사용하려면 아래와 같이 입력하면 된다. ln -s -f /usr/l.. 2022. 7. 26. [React] useMemo, useCallback는 언제 써야할까? useEffect vs useMemo, useCallback 프로그램의 사이즈가 커질수록 성능은 점점 더 중요해진다. 이러한 성능을 위해 React에서 사용하는 것이 useMemo, useCallback이다. 👀 useMemo란? useMemo는 memoization된 값을 반환한다. useMemo(() => callbackFn, [dependencies]) useMemo는 함수(callbackFn)를 호출하고 이 함수에서 리턴된 값을 리턴한다. useMemo를 호출할 때마다 dependencies를 먼저 확인한다. 이때 dependencies에서 바뀐 값이 없다면 캐싱된 값(이미 계산된 값)을 리턴하고, 바뀐 값이 존재한다면 다시 함수를 호출하고 새롭게 연산된 값을 리턴한다. 만약 useMemo에서 dependencies 배열이 없다면 매 렌더링마다 콜백 함수가.. 2022. 5. 8. [JS] null과 undefined의 차이 그리고 처리 방식 null과 undefined 모두 변수에 값이 없는 것을 나타내기 위해 사용하지만 그 의미는 다르다. null : 의도적으로 변수의 값이 비어있음을 나타내기 위해 사용. null은 변수가 선언되고 'null'이라는 값이 할당되어 있는 것을 나타낸다. 즉, 아무런 의미가 없는 값이 할당되어있는 것을 말한다. undefined : 변수에 값이 할당되지 않았을 때 사용. undefined는 변수가 선언되고 아무 값도 할당되어 있지 않은 것을 나타낸다. 즉 undefined는 자료형이 없는 상태를 말한다. Null 객체가 없음을 뜻한다. typeof null //"object" const foo = null; // 변수가 선언되고 `null` 값을 할당해야함 if(foo){ //실행되지 않음 } Undefine.. 2022. 2. 24. 이전 1 2 다음 반응형
