2019년 05월 22일
계속 업데이트 되는 문서입니다.
배경색이 그라데이션으로 출력되는 View
import { LinearGradient } from "expo";
...
<LinearGradient colors={["red","blue"]} />
expo 에서 제공하는 여러 폰트의 아이콘 모음이다.
아래 링크에서 아이콘 및 라이브러리를 확인하고 import하면 작동한다.
vector-icons
import { Ionicons, AntDesign } from "@expo/vector-icons";
...
<Ionicons color="white" size={144} name="ios-rainy" />
Text 태그 내 사용 시 배경색을 투명으로 변경한다.
{backgroundColor: "transparent"}
2019년 05월 24일
## 1. Sourcemap 이란? 많은 개발 환경은 Webpack 등으로 빌드 과정을 거치고있다. 만일 빌드 후 취합되거나 변환 된 CSS, JavaScript 파일들이 오류가 발생한다면, 개발자 도구에서는 빌드 된 파일에서 오류를 출력하고 있을 것이다. 하지만 우리가 원하는 것은 **빌드 전 오류난 파일 및 라인**을 알고싶은 것이다. 예를 들면, SCSS에 오류가 있고 Webpack으로 빌드를 진행하면 웹페이지에서 오류를 알려주는 부분은 빌드가 완료된 CSS를 출력한다. JavaScript도 마찬가지로 오류가 나면 취합하고 minify된 JS를 출력하고있다. 이럴때 Soucemap을 설정하면, **코드상의 위치를 기억하고 알려주기 때문에 빌드 전 어떤 파일, 라인에서 오류가 났는지 확인할 수 있다.** ## 2. 설정 ### 2.1 Webpack Dev 환경에서만 작동하도록 설정하였다. ```json { "devtool": env.mode === "development" ? "source-map" : "" } ``` ### 2.2 Typescript ```json { "compilerOptions": { "sourceMap": true } } ```
2019년 05월 22일
## React Native & Expo 특징 #### React Native - div, span 등 웹 태그 사용이 불가능하다. - CSS 사용이 가능하다. ( 100% 동일하지는 않으며, Flexbox 사용이 가능 ) - 리액트 네이티브가 지원하는 태그는 빌드 시 Android / iOS에 맞게 변환해준다. - 오류를 엄격하게 체크한다. - CSS shorthand property가 작동하지 않는다. #### Expo - Android, IOS 테스트가 가능하다. - 모바일에서 코드를 스캔하여 앱을 다운받고 실시간으로 수정사항 반영이 가능하다. ( Live Reload ) - 배포 시 앱을 업데이트 하는 것이 아닌 서버에 코드를 업데이트하는 방식이다. - 따라서 앱 스토어의 승인 절차가 필요없고, 유저는 서버에서 코드를 다운받는다. - Online Coding : snack.expo.io ## 설치 [Expo Learn](https://expo.io/learn) ```bash npm install expo-cli --global expo init react-native-weather ? Choose a template: expo-template-blank ? Choose which workflow to use: managed ✔ Please enter a few initial configuration values. Read more: https://docs.expo.io/versions/latest/workflow/configuration · 100% completed ? Yarn v1.13.0 found. Use Yarn to install dependencies? Yes ``` ##...
2019년 05월 19일
문제 게임 캐릭터를 4가지 명령어를 통해 움직이려 합니다. 명령어는 다음과 같습니다. U: 위쪽으로 한 칸 가기 D: 아래쪽으로 한 칸 가기 R: 오른쪽으로 한 칸 가기 L: 왼쪽으로 한 칸 가기 캐릭터는 좌표평면의 (0, 0) 위치에서 시작합니다. 좌표평면의 경계는 왼쪽 위(-5, 5), 왼쪽 아래(-5, -5), 오른쪽 위(5, 5), 오른쪽 아래(5, -5)로 이루어져 있습니다. 이때, 우리는 게임 캐릭터가 지나간 길 중 캐릭터가 처음 걸어본 길의 길이를 구하려고 합니다. 예를 들어 위의 예시에서 게임 캐릭터가 움직인 길이는 9이지만, 캐릭터가 처음 걸어본 길의 길이는 7이 됩니다. (8, 9번 명령어에서 움직인 길은 2, 3번 명령어에서 이미 거쳐 간 길입니다) 단, 좌표평면의 경계를 넘어가는 명령어는 무시합니다. 명령어가 매개변수 dirs로 주어질 때, 게임 캐릭터가 처음 걸어본 길의 길이를 구하여 return 하는 solution 함수를 완성해 주세요. 제한사항 dirs는 string형으로 주어지며, ‘U’, ‘D’, ‘R’, ‘L’ 이외에 문자는 주어지지 않습니다. dirs의 길이는 500 이하의 자연수입니다. 해결방법 처음 걸어본 길만 구한다는 것을 중점으로 개발하면 손쉽게 풀린다. 똑같은 길을 걷는 조건은...