전체 글

[브라우저 이해하기] 2. 브라우저 엔진 들여다보기 (Webkit)

브라우저를 구성하는 요소들중 단연 중요한것은 '엔진'일 것이다. 사용자가 주소를 입력하는 시점부터, 브라우저 영역안에 웹 컨텐츠들이 보여지기까지 어떤 일들이 일어나는지를 이해하기 위해 꼭 짚고 넘어가야할 요소이다. *본문의 내용들은 Html5rocks에서 Tali Garsiel과 Paul Irish가 작성한 'How Browsers Work: Behind the scenes of modern web browsers' 본문에서 상당부분 참고, 인용하였음 브라우저를 구성하는 엔진'들' 브라우저는 사실 여러 엔진'들'로 구성되어 있다. 예시로 Chrome 브라우저를 살펴보면 브라우저 엔진은 Chromium, 렌더링(레이아웃) 엔진은 Blink, JS 런타임(JS 엔진)은 V8이라 불린다. 브라우저 엔진이란? ..

[브라우저 이해하기] 1. 브라우저와 엔진의 종류

다양한 브라우저 환경은 Web FE 개발자로써 고통받았던 영역이자(특히 IE...), 훌륭한 사용자 경험을 위해 이해해야할 필수적인 영역이기에 정리해보고자 한다. 브라우저의 종류와 점유율 현 시점에서 브라우저의 종류와 엔진을 점유율 순으로 살펴보면 다음과 같다. 순위 브라우저명 렌더링 엔진 JS 엔진 점유율 1 Chrome Blink (fork Webkit) V8 62.78% 2 Safari Webkit Nitro 19.3% 3 Firefox Gecko SpiderMonkey 4.2% 4 Edge Blink (fork Webkit) V8 4.05% 5 Samsung Internet Blink (fork Webkit) V8 2.77% 6 Opera Blink (fork Webkit) V8 2.26% .....

[믿지 말고 검증하라] 블록체인이 만들 미래 금융의 모습

Don't trust. Verify. 믿지말고 검증하라. 암호화폐 커뮤니티에서 자주 인용되는 말이다. 로널드 레이건 대통령이 소련과의 핵 군축 논의과정에서 수차례 인용했던 '믿어라, 그러나 검증하라 (Trust, but verify)'라는 속담에서 비롯되었다. 우리는 카O오, 토O 등 앱으로 편하게 돈을 송금하고, 편하게 금융서비스를 이용하는 시대에 살고 있다. 그러나 실제로 은행이 내 돈을 어떻게 보관하고 있으며, 어떤 과정을 거쳐 송금이 이루어지는지, 수수료는 어떻게 책정되는지 자세히 알지 못한다. 고객에게 모든 정보를 공개할 의무는 없기 때문이다. 우리는 검증할 수단과 방법이 제한적이기에 믿는 것 외엔 선택지가 없었다. 난 무정부주의자는 아니다. 하지만 역사적인 관점에서 지나치게 중앙집중화된 권력은..

[React Native] ios개발시 실제기기에서 로컬서버 접근 안되는 문제 해결방법

RN 개발시 로컬서버에 아래처럼 접근해서 쓰고있었다. 예시) 서버주소 : http://localhost:1337 안드로이드 : # 에뮬레이터용 adb -e reverse tcp:1337 tcp:1337 # 실제기기용 adb -d reverse tcp:1337 tcp:1337 iOS : 는 그냥 시뮬레이터에서 아무설정 없이도 잘된다. 문제는 iOS 실제기기에 연결하려니 Network Request Fail 에러가 계속 발생했다. 처음엔 보안설정 문제인줄 알고 설정을 만지작 거렸으나 별 효과가 없었다. 조금 찾아보니 iOS에선 안드로이드의 adb reverse 같은 리버스프록시를 허용하지 않는듯 하다. (iOS 시뮬레이터에서 localhost접근이 되는 이유는 에뮬레이터와 달리 분리된 환경이 아니어서 인듯 ..

[React Native] 파일 다운로드시 ios 파일탐색기에서 안보이는 문제 해결방법

rn-fetch-blob 라이브러리를 활용해 다운로드를 구현했는데, ios에선 다운로드 받은 파일이 보이지 않았다. (rn-fetch-blob을 활용한 파일다운로드 구현법은 이 글을 참고하자) React Native 파일 다운로드 구현 (rn-fetch-blob VS react-native-fs) React Native에서 간단한 파일 다운로드를 구현할 일이 있어 패키지를 검색하던중 가장 star가 많은 두 패키지를 비교하였다. npm trend 비교 www.npmtrends.com/react-native-fs-vs-rn-fetch-blob react-native-f.. codecraft.tistory.com 원인은 iOS의 파일브라우저는 탐색을 허용해놓은 앱의 파일만 긁어서 보여주기 때문이었고, inf..

[React Native] ios 앱 배포하기 - 빌드부터 스토어 업로드까지

애플 개발자 등록을 마친상태에서 앱 업로드하는 방법을 적어본다. 1. 인증서 발급 먼저 인증서 발급을 위해 아래 사이트로 이동한다. developer.apple.com/account/resources/certificates/list 상단의 + 버튼을 눌러 인증서를 추가한다. (Xcode11 이상의 경우) Apple Distribution을 선택하고 Continue를 누른다. 그런다음 Mac에서 '키체인 접근' 앱을 열고, '인증서 지원' - '인증 기관에서 인증서 요청'을 선택 사용자 이메일 주소, 일반 이름을 입력하고, '디스크에 저장됨'을 체크한 상태로 계속을 눌러 파일로 저장한다. 저장된 파일을 Choose File을 눌러 업로드후, Continue 버튼을 누르면 인증서 발급이 완료된다. 우측 상단..

[React Native] ios 빌드시 main.jsbundle does not exist. This must be a bug with 에러 해결방법

나의 경우 아래와 같은 에러로 인해 jsbundle 파일이 만들어지지 않고 있었다 const data = _interopRequireDefault(require("chalk")); ^^^^^ SyntaxError: Use of const in strict mode. Sentry관련 소스에서 비롯되는 문제로, Debug symbol upload를 수행할때 구버전의 node를 사용하여 발생하는 문제였다. `nvm ls`명령어로 살펴보니 0.10 버전대의 node가 기본값으로 설정되어있었고, `nvm use stable` 명령어를 통해 현재기준 stable인 12.18버전대로 수정하였다. 그런데도 문제가 해결이 안되어 살펴보니 nvm 환경변수가 .bash_profile에만 설정되어있었고, .zshrc에 환경변..

[React Native] react-native-naver-map ios 빌드시 Undefined symbols for architecture x86_64: 에러

RN 개발중 naver map을 추가하기 위해 아래 패키지를 깔았다 github.com/QuadFlask/react-native-naver-map QuadFlask/react-native-naver-map 🗺️naver map for react-native. Contribute to QuadFlask/react-native-naver-map development by creating an account on GitHub. github.com 안드로이드는 잘되는데, ios 빌드시 아래와 같은 에러가 발생한다. Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_NMFCameraPosition", referenced from: objc-class-ref i..