Tech Log

일전에 React로 토이 프로젝트를 만드려고 한 적이 있었다. 그 때는 폰트 적용하는 것이 그닥 어렵지 않았던 것 같았는데.. React Native로 iOS 어플리케이션의 폰트를 적용하는 방법이 약간 번거로웠다. 이 또한 기록해두면 나중에 또 폰트 적용할 때 도움이 되지 않을까 싶어 포스팅해본다. 1. 서체 설치 당연한 것이지만 먼저 앱에 적용하고 싶은 폰트를 찾아, 맥에 설치해야 한다. 트루타입 파일(ttf)이든, 오픈타입 파일(otf)이든 찾아서 설치해주면 된다. 해당 파일을 클릭하고 '서체 설치' 버튼을 누른다. 2. 서체 파일 앱 내에 추가 프로젝트 디렉터리로 이동하여 해당 디렉터리의 ios 파일 내에 폰트 파일을 추가해야 한다. Finder로 직접 추가해줘도 되고, 해당 포스팅에서는 터미널에서..

평소에 그냥저냥 쓰고 있던 LG 그램이 갔다. 윈도우 11로 업데이트 하자마자 상태가 많이 안좋아졌다. 따라서 평소에 Mac OS를 쓰고 싶었기 때문에 그냥 맥북을 사기로 했다. 개발하는데 있어 Apple Silicon에 대한 두려움이 있었으나, 그렇다고 인텔 맥북을 살 수는 없었기에 M1 맥북을 샀다. 맥북을 샀으니 개발 환경도 새로 구축해줘야 했다. 만들어줘야 할 환경 중 하나가 리액트 네이티브였다. M1에서 리액트 네이티브를 하려면 제약이 많아, 개발 환경 만들기가 어렵다는 얘기를 많이 들었다. 비장한 각오를 다지며 개발환경 구축에 돌입했다. 단계가 많아 목차로 정리해보았다. Xcode 설치 iTerm2 설치 oh-my-zsh 설치 homebrew 설치 node 설치 cocoapods 설치 watc..

scrollView 와 FlatList 모두 화면에 많은 양의 데이터를 나타내고자 할 때 사용되는 컴포넌트이다. 공통점 데이터가 많아 화면을 넘어가려할 때 화면에 스크롤을 만들어준다. 차이점 ScrollView 처리해야 할 데이터의 양이 적은 경우에만 사용 ScrollView의 경우 ScrollView에 속한 자식 컴포넌트들을 한 번에 렌더링한다. 따라서, ScrollView를 이용하여 많은 양의 데이터를 나타내려고 하면 속도와 성능이 저하된다. 한 번에 많은 데이터를 처리하려 하고 상당한 메모리를 잡아먹기 때문이다. FlatList 데이터의 길이가 유동적일 때/알 수 없을 때 사용 FlatList의 경우 ScrollView와 다르게 렌더링이 느리게 된다. 또한, 화면 밖에 있어 나오지 않는 항목들은 삭..

App.js에 코드를 작성하면 실제 디바이스 화면을 나타낼 수 있다. App.js는 크게 import문, body문, body문을 꾸미는 styles로 구성된다. 리액트 네이티브에서는 웹에서 많이 사용하는 HTML 태그 대신에 리액트 네이티브에서 정한 태그(컴포넌트)만 사용할 수 있다. 이러한 리액트 네이티브의 컴포넌트는 App.js의 body문에 작성한다. 또한, 컴포넌트는 import문에서 가져온다음 사용되기도 한다. View 리액트 네이티브의 컴포넌트 중에서 가장 근본이 되는 것은 View 이다. View는 전체적인 레이아웃을 잡아주는 역할을 한다. 웹에서는 div와 가장 유사하게 사용된다. 중첩이 가능하다. 아래와 같이 사용한다. View는 다른 컴포넌트들을 감싸준다. import React fr..