개발 공부 기록

Chrome Animation Tool Chorme의 개발자 도구에서 애니메이션을 상세하게 볼 수 있는 기능이 있습니다. 해당 기능을 통해 코드 편집기에서 코드를 수정하지 않고, Chorme에서 쉽게 애니메이션 타이밍을 조절할 수 있습니다. 우선 크롬 개발자도구에서 애니메이션 탭을 열어줍니다. 애니메이션 탭을 활용하기 위해서는 탭이 열린 채로 페이지가 로드되어야 합니다. 중간에 열게 되면 비어있는 탭이 나타나는 경우가 있는데 이때 새로고침하여 애니메이션 정보를 불러올 수 있습니다. 생성된 애니메이션 썸네일 바를 클릭하여 애니메이션 상세 정보를 볼 수 있습니다. - 색상이 진한 부분 : 애니메이션 - 색상이 연한 부분 : 반복되는 애니메이션 - 색상이 채워진 원 : 애니메이션의 시작/끝 - 비어있는 원 :..

https://gist.github.com/jsturgis/3b19447b304616f18657 public test videos public test videos. GitHub Gist: instantly share code, notes, and snippets. gist.github.com

https://github.com/HazAT/badge GitHub - HazAT/badge: Add a badge to your app icon Add a badge to your app icon. Contribute to HazAT/badge development by creating an account on GitHub. github.com prod와 dev 환경을 구분하여 배포하고, 몇번째 dev 버전인지 헷갈릴때 쓰면 좋은 라이브러리

https://appicon.co/ App Icon Generator appicon.co iOS 앱 아이콘 생성시 다양한 사이즈가 필요하다. 이때 사용하면 좋은 사이트!

Run Cat은 AppStore에서 설치 가능하다. Cat은 Mac의 CPU 사용량에 따라 다른 속도로 실행되며, 현재 CPU 사용량이 얼마나 되는지 Cat을 보면 알 수 있다. 고양이도 원하는 타입으로 변경 가능하다.

Could not connect to development server. 문구와 함께 안드로이드 디바이스에서 React Native Local Server를 못잡는 경우 $ adb devices List of devices attached 디바이스명 device $ adb -s 디바이스명 reverse tcp:8081 tcp:8081 위 명령어를 통해 디바이스에 React Native 서버의 포트를 연결시켜준다.

@types/react 나 @babel/core 등 패키지명 앞에 @이름/ 가 붙는 것을 종종 본 적이 있다. 이는 무엇이며 왜 사용하는 것일까? - 이것을 scoped packages라고 부른다. - @조직이름/패키지이름으로 표현 - npm의 orgs scope에 들어있는 패키지들을 표현 - 동일한 namespace에서 쉽게 패키지 찾기 https://docs.npmjs.com/about-org-scopes-and-packages

함수형 컴포넌트를 사용하면 더 좋은 이유? 함수형 컴포넌트의 경우 state, lifeCycle 관련 기능 사용이 불가능하였으나, 2019년 v16.8부터 hook을 지원해주면서 이 부분이 해결되었다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 로직을 갖고 있다. 반면에, 함수형은 hook들을 필요한 곳에 사용하며 로직의 재사용(custom hook)이 가능하다는 장점이 있다. 함수형 컴포넌트는 선언이 좀 더 용이하며 클래스형 컴포넌트에 비해 메모리 자원을 덜 사용한다. React 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 사용할 것을 권장하고 있다. ⇒ 컴포넌트 선언이 편리하며 메모리 자원을 덜 사용하고, 로직의 재사용이 용이하기 때문에 때문에 함수형 컴..