73일차 [React Native 기초]
2022. 01. 20 목요일
1. Today's Key Points!🔑
- react native 날씨 앱 만들기
- CS50 프로그래밍 응용
- [프로그래머스] k진수에서 소수 개수 구하기
2. 정리해보자!🧹
1. React Native
노마드 코더가 무료로 제공하는 강의를 통해서 react native로 날씨 앱을 만들어보았다. 나의 미래를 생각했을 때 앱까지 만들줄 알면 더 좋은 개발자가 될 수 있을 거라 생각이 들어서 react native를 경험해 보고 싶었다.
이 강의에서 두 가지 앱을 만드는데 오늘은 날씨앱을 만들었다. 사실 앱을 만들었다기 보다는, 만들어진 앱에 나의 코드만 작성해서 만든 것이다. 실제로 내가 앱을 만드려면 Java, Xcode 를 설치해야하는 등 앱을 만들기 위해서 필요한 인프라들을 설치해줘야 한단다. 그래서 그 과정을 다 생략하고 테스트로 만들어볼 수 있는 곳에서 먼저 만들어보고, 내가 따로 앱을 만들때 인프라들을 설치해볼 예정이다.
Expo라는 앱을 통해서 내가 작성한 코드가 바로 반영되서 폰으로 확인할 수 있다. 우선 아래와 같이 터미널에 입력해주고, Expo 앱을 핸드폰에 설치해준다.
npm install --global expo-cli그런다음 create react app 해주듯이 아래와 같이 터미널에 입력해서 react native를 만들어준다.
expo init my-app(만들어질 폴더명)더 자세한 방법은 노마드 코더 강의를 보면 알 수 있다.
React Native는 React를 할 줄 알면 바로 적응할 수 있었다. 앱을 만들기 전에 React Native에 흐름을 배웠다. 간단하게 요약하자면 우리가 Javascript를 사용해서 코드를 작성하면 그 코드가 iOS나 안드로이드 같은 운영체제와 대화할 수 있도록 해주는 것이 React Native다. 그리고 React Native 앱은 단순히 폰 안에 있는 브라우저가 아니다.
꼭 알아두어야 할 점!
- React Native는 웹사이트가 아니다. HTML이 아니기 때문에 div, span 같은 HTML element들을 사용하지 못한다.
React Native에서 사용되는 컴포넌트들이 있다. 한가지 예를 들면 div역할을 하는것이 View이다. 그런데 이런 것들을 사용하려면 import해서 사용해야 한다.- import { StyleSheet, Text, View } from "react-native";
- React Native에 있는 모든 text는 Text component에 들어가야 한다. <View>Hello World!</View> 이렇게 못씀.
- <Text>Hello World!</Text> 이렇게 써야한다.
- React에서 element에 바로 style 주듯이 CSS 작업을 할 수 있는데, React에서 사용하던 모든 스타일을 사용할 수는 없다. 근데 웬만한건 다 있다고 한다.
- element에 바로 style주는 것 이외에도 StyleSheet.create라는 것으로 CSS작업을 해줄 수 있는데 이걸로 style object를 만들 수 있다. StyleSheet을 사용하면 자동완성 기능을 사용할 수 있기 때문에 어떤 속성들이 있는지 확인하며 CSS를 만들어줄 수 있다.
// 생략 return <View style={styles.container}></View> } // container, city, cityName, ... 이런 것 들이 결국 className같은 역할을 하는 것이다. const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "tomato", }, city: { flex: 1.3, justifyContent: "center", alignItems: "center", }, cityName: { fontSize: 50, fontWeight: "500", color: "white", }, weather: {}, day: { width: SCREEN_WIDTH, padding: 40, }, temp: { marginTop: 20, fontSize: 100, color: "white", }, description: { marginTop: -20, fontSize: 30, color: "white", }, tinyText: { fontSize: 20, color: "white", }, });
- StatusBar라는 component가 있는데, 이것은 레이아웃에 영향을 주는 컴포넌트는 아니다. 모바일 상단에 보면 시계, 와이파이, 배터리 같은 상태를 보여주는 컴포넌트를 다뤄야할 일이 있을 때 사용한다.
Layout System
웹 레이아웃을 만들때랑 앱 레이아웃을 만들때랑 약간의 차이가 있다.
- 앱에서 box역할을 하는 View의 기본 display는 flex다(flex밖에 없다고 한 것 같다). 그리고 웹과는 다르게 flex-direction의 기본값이 column이다.
- 모바일 스크린 크기가 매우 다양하기 때문에 레이아웃을 구성할 때 width, height는 거의 쓰지 않는다. 고정값으로 만들어버리면 기기마다 보여지는 디자인이 달라질 수 있기 때문이다. 그래서 flex속성을 사용해서 레이아웃 크기를 조절해준다.
- ex) <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
- 앱에서는 overflow로 스크롤을 생기게 할 수 없다. 그래서 ScrollView라는 컴포넌트가 있는데, 이 컴포넌트는 style을 줄 때 방식이 다르다. contentContainerStyle 속성에 평소 style 주듯이 사용해야한다. 이러한 부분들은 공식문서에 보면 나와있다. 그래서 공식문서를 보고 직접 부딪혀가면서 몸으로 체득해야 된단다.😭
- ScrollView에는 flex 사이즈를 줄 필요가 없다. 왜냐하면 스크린보다 커야하기 때문이다.
결과물
2. CS50 프로그래밍 응용
C언어를 기반으로 기본적인 코드 작성을 하는 법을 알려주는 것이 중점인 파트인듯 하다. 그래서 개념적인 부분보다는 코드작성에 대한 내용이 대부분이라 따로 정리를 하진 않을 것이다.
이 부분 강의를 들으면서 javascript는 배우기 쉬운 언어라는 것을 느꼈다. 변수를 선언해줄 때 javascript에서는 그냥 let, const 같은 것을 쓰는데, C에서는 int, char같이 명확하게 어떤 자료형인지를 명시해줘야 했다. 그리고 문자열의 길이를 알려고 할 때나 대문자를 소문자로 바꾸는 등 이러한 메소드들은 javascript에서는 내장되어있는 함수들을 사용하면 되는데, C에서는 어떤 함수마다 필요한 라이브러리가 있고, 어떤 라이브러리를 include해와야 어떤 함수들을 사용할 수 있는지를 알아야했다.
3. [프로그래머스] k진수에서 소수 개수 구하기
알고리즘 카테고리에 분류해서 정리할 것이다.
