https://blog.banksalad.com/tech/font-preload-on-safari/

컴포넌트들은 RN에 의해서 리렌더링이 일어나는데, 리렌더링은 상황에 따라서 반복해서 발생한다. 이런 상황에서 inline style은 javascript 엔진 쪽 스레드에서 UI 스레드 쪽으로 브리지를 경유하여 옮겨가므로, 내용이 컴포넌트 로직에의해 바뀌지 않을때에는 앱의 디스플레이 속도가 느려진다. 반면에, StyleSheet.create로 생성된 스타일 객체는 UI 스레드 쪽에 캐시되므로 앱 전체의 디스플레이 속도가 빨라진다. 그래서 내용이 변하지 않는 스타일 (정적 스타일) 객체는 StyleSheet.create 방식으로 구현하는 것이 효과적이다. (동적 스타일은 inline-style 방식으로 구현하자.)

리액트 네이티브는 웹 브라우저에서 단순히 자바스크립트 엔진만 떼어낸 것이다. 그래서 HTML은 물론이고 CSS 엔진또한 존재하지 않는다. 그래서 리액트 네이티브는 Yoga라는 이름의 CSS엔진을 직접만들었다 ㅎㄸ Yoga 엔진은 페이스북이 컴포넌트의 배치와 스타일링을 위해서 C++언어로 구현한 라이브러리이다. Yoga엔진ㅇ느 웹 브라우저의 CSS엔진과 비슷하게 동작하지만 완전히 똑같지는 않다. (특히나 flexbox layout 부분에 차이가있음.) div같은 html요소에는 style이라는 속성이 있듯이, RN 컴포넌트의 style 속성에 스타일값을 할당하면, 네이티브 모듈쪽에서 yoga엔진이 AOS,IOS의 UIKit 프레임워크가 요구하는 스타일링을 수행하게 된다.

렌더러 react는 가상 DOM 구조를 react-dom이라는 렌더러 패키지를 사용하여 물리 DOM 구조로 렌더링하는 방식으로 동작하는 프레임워크이다. (홈페이지에는 라이브러리라고 되어있으나, 이제는 프레임워크라고 불러도 무방할듯) 이와 달리 react native는 react-native라는 렌더러 패키지를 사용하여 렌더링하는 방식으로 동작하는 프레임워크이다. 그래서 react는 DOM렌더러 react native는 native렌더러라고 불린다. 브리지방식 렌더링 모든것이 자바스크립트로 동작하는 react에서는 Raect.render라는 DOM렌더러의 동작을 코드로 확인할 수 있지만, 리액트 네이티브에서 native 렌더러의 모습은 확인할 수 없다. 왜냐하면 리액트의 네이티브 프로젝트의 android,..

정의 다양한 플랫폼 환경에서 사용자들의 비밀번호를 제공하지 않고도 권한 부여를 하기 위한 표준이다. 탄생배경 "서드파티 어플리케이션에 아이디와 비밀번호를 제공하지 않겠다" 개인정보를 여러곳에 입력하게 되면 피싱에 취약하기도 하고, 어플리케이션의 보안이 취약하다면 그대로 노출될 위험이 있다. 최초에 Twitter의 주도로 OAuth 1.0이 탄생하게 되었다. OAuth 1.0 1.0은 user, consumer, service provider 이렇게 3요소로 구성이된다. 하지만, OAuth 1.0은 구현이 복잡하고, 웹이 아닌경우의 지원이 부족했다. 그리고 access token이 만료되지 않는다. OAuth 2.0 - 1.0에 비해서 기능이 단순화 되었고, 확장성도 갖춘 설계 - https가 필수 - 암..

http http (hypertext transfer protocol)은 웹상에서 client-server와 통신을 위한 protocol이다. http1.1 http1.1은 기본적으로 Connection 당 하나의 요청을 처리하도록 설계되어 있다. 그래서 동시전송이 불가능하고 요청이 응답이 순차적으로 이루어진다. http1.1의 문제점 1. HOL이 발생한다. HOL은 Head Of Line의 약자로 특정 응답의 지연을 뜻한다. 이미지 3개를 요청하는데, 첫번쨰 이미지의 용량이 크다면 2,3번째 요청이 지연된다. 2. RTT 증가 RTT는 Round Trip Time의 약자이다. (패킷왕복시간) 하나의 connection에 하나의 요청을 처리하므로 매번 요청할때마다 connection을 생성하고 3-wa..

마음으로는 알고 있지만, 말로 어떻게 설명할지 헷갈리는 box-sizing에서의 content-box, border-box를 정리해보고자 한다. box-sizing 속성은 CSS의 테두리 영역 크기를 결정한다. content-box: css width와 height를 컨텐츠 영역에만 적용한다. border, padding, margin은 따로 계산되어서 전체 영역이 설정값보다 커질 수 있다. border-box: css width와 height를 전체 영역에 적용한다. border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 작아질 수 있다. 즉, 컨텐츠의 크기 = 전체크기 - border - padding - margin 이다. 참고 https://dasima.xyz/..

블로그에 포스팅할 것을 찾다가 그동안 정리 못한 export default와 그냥 export의 차이점에 대해서 정리해보고자한다. 아래 아티클을 참고했다. https://yhancsx.github.io/js/tree-shaking/ Javascript Tree Shaking front-end 최적화 방안 중 하나인 tree shaking에 대해 공부해 보자. yhancsx.github.io https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad Why we have banned default exports in Javascript and you should do the same ES..