Step 1) 화씨 온도를 섭씨로 바꾸기

• API->Current Wather->API doc->좌측의 Other features->Units format을 클릭한다.

• &units=metric 을 추가한다. 그 후 시뮬레이터를 실행시키고 콘솔 로그를 확인해보면 아래와 같이 temp가 섭씨 온도(14도)로 바뀐것을 확인할 수 있다.

Step 2) Temperature Component 생성

• Weather.js 파일을 새로 만든다.
• props가 필요하므로 prop-types를 install 하기 위해 vscode terminal에

$ npm install prop-types

를 입력한다.

• Weather.js 파일에 아래와 같이 코드를 작성한다.

• App.js파일에 작성한 Weather.js 를 아래의 방법으로 import 한다.

import Weather from "./Weather";

• temperature 정보를 가져오기 위해

우리는 data.main.temp 가 필요하다.

• 위와 같이 App.js 코드를 수정한다.
• 수정 후 시뮬레이터를 실행하면

이렇게 온도 (temperature) 가 스크린에 출력된다.

• 그런데 이 과정에서 간단한 문제로 오류가 나서 애를 먹었다.

[오류 해결]

• Invariant Violation : Element type is invalid : expected a string (for built- in components) or a ~ (이하 생략) 이라는 오류가 발생했다.
• 문제는 자동으로 Weather가 import 되지 않고 수동으로 import ~ 라고 타이핑해서 링크가 되지 않아 발생한 것이었다.
• App.js 파일의 맨 아래 부분에 render() 안에서 ‘null’을 <Weather /> 로 바꿀 때, 하나씩 수동으로 타이핑하면 코드를 인식하지 못하는 것 같다. <Weather></Weather> 로 자동 생성 되도록 하면 자동으로 App.js 파일의 상단에 Weather가 import 됨을 확인할 수 있다. 그럼 오류가 해결된다.

Step 3) condition name (날씨 종류) 정보 가져오기

• API->Current weather data->Parameters of API resonse->List of condition codes 를 클릭한다. (링크 : https://openweathermap.org/current#list)

• weather condition codes 를 클릭한다. (링크 : https://openweathermap.org/weather-conditions)
• Thunderstrom, Drizzle, Rain, Snow, Atmosphere, Clear, Clouds 와 같은 날씨의 유형을 코드에 적용한다.

• 그러나 이 방법은 condition name을 얻는 최선의 방법이 아니다.
• 콘솔 로그를 보면 딱 하나의 Array 가 있는걸 확인할 수 있는데

객체 하나를 가진 Array가 하나 있다. 이 배열안의 객체 안의 main이 우리가 얻고자 하는 condition name 이다.

• 그럼 weather 배열로부터 main 부분을 가져와보자.

• 코드를 조금 더 보기 쉽게 살짝 수정하였다.
• line 28을 보면 weather 배열의 첫번째 요소(객체 Object)로부터 main 값을 가져왔음을 볼 수 있다.

Step 4) import vector-icon

• Icon을 다루기 위해 Weather.js 에 아래와 같이 코드를 작성한다.
• 참고 : https://docs.expo.io/versions/v33.0.0/guides/icons/#_next

import { Ionicons } from '@expo/vector-icons';

• 아이콘 디렉토리를 살펴보자 (https://expo.github.io/vector-icons/)
• condition name에 각각 맞는 아이콘을 찾는다.
• MaterialCommunityIcons Family 중에 골라보자.
• 위에서 작성한 코드에서 중괄호에 있는 Ionicons를 MaterialCommunityIcons 로 바꾼다.

import { MaterialCommunityIcons } from '@expo/vector-icons';

• 이제 아이콘을 가져와보자.

예시

• 비오는 날씨를 예로 들면, 우리는 위의 화면에서 제일 하단에 위치한 ‘MaterialCommunityIcons Family’ 의 ‘weather-lightning-rainy’ 를 가져올것이다.

출처 : 노마드코더 - React Native로 날씨앱 만들기

<Getting the Weather>

Step 1) API KEY 가져오기

• https://openweathermap.org 에 접속한다.
• 상단의 sign in 을 클릭한다. (회원 가입을 하도록 한다.)

• API keys를 클릭한다.
• API keys 가 없으면 새로 생성한다.
• API key를 복사해서 App.js 파일에 붙여넣자. (line 7)

Step 2) API 호출하여 정보 얻기

• https://openweathermap.org/api에 접속하여 ‘Current Weather Data -> API doc’ 를 클릭한다.

• 우리가 사용할 것은 ‘By geographic coordinates’방식이며 위의 방법으로 api 를 호출해주면 된다.
• 먼저 API call을 참고하여 브라우저에서 시도해보면 결과는 아래와 같다.

• API Key를 포함해서 다시 시도해보자.
• API Key를 포함하여 테스트하는 방법은 API 탭을 클릭한 후 하단으로 스크린을 내리고 ‘How to start -> Example of using API key in API call’에 나와있다.

• &APPID = {APIKEY}를 브라우저 주소창에 추가하여 결과를 보면 아래와 같다.
• 날씨에 관한 전반적인 정보를 얻을 수 있다.

Step 3) App 내부에 URL fetch하기

• fetch를 위해 Axios를 설치한다.
• vscode terminal 에 아래의 명령을 실행한다.

$npm install axios

• 그 후 코드를 아래와 같이 수정한다.(line 6, 13–17, 27)

• 이때 주의할 점은, 변수를 문자열에 포함시키기 위해 URL을 백틱(`)으로 감싸야한다는 것이다(line 15). 참고로 백틱은 맥에서 option키를 누르고 숫자 1 옆에 있는 ₩ 를 누르면 된다.

출처 : 노마드코더 - React Native로 날씨앱 만들기

<Geolocation 알아보기>

• 참고 : https://facebook.github.io/react-native/docs/geolocation

• 위와 같이 제공하는 메소드들 중에 우린 ‘getCurrentPosition()’이 필요하다.

Step 1) expo-location 설치

• 참고 : https://docs.expo.io/versions/v35.0.0/sdk/location/

vscode 터미널을 새로 열어서

$expo install expo-location

을 입력한다. 노드 버젼으로인해 또 에러가 나서

$ nvm install node

위의 명령어를 먼저 실행한 후 location을 설치할 수 있었다.

Step 2) expo-location 사용을 위해 import

• App.js 파일에 import 한다.
• expo는 우리가 원하는 기능만을 선택해서 import하여 쓸 수 있게 해 준다.

$ import * as Location from 'expo-location';

• 그 후 ‘getCurrentPositionAsync()’ 가 잘 작동하는지 체크하기 위해 아래와 같이 코드를 수정해본다.

그 후 저장을 하면 (cmd+s)

위와 같이 permission error가 뜬다.

Step 3) Permission Error 해결

• Permission이 resolve 되었을 때는 promise를, denied 되었을 땐 reject를 return 하므로 ‘try-catch’ 구문으로 예외 처리를 해 준다.
• 먼저 Alert를 import 한 후에 아래의 코드와 같이 작성한다.

$ import {Alert} from 'react-native';

그 후 저장하면 핸드폰의 expo 앱에서

위와 같은 창이 뜬다. 우리가 보통 어플리케이션을 다운로드한 후 처음 실행했을 때 permission을 구하는 자주보던 익숙한 창이다.

보통 ‘허용’을 클릭하지만 예외가 잘 처리됐나 확인하기 위해 ‘허용 안 함’을 클릭해 보았다.

그럼 위와 같은 창이 뜨게 되고, 예외가 잘 처리되었음을 확인할 수 있다.

ios app은 한 번 ‘허용 안 함’을 누르면 그 다음번에 앱을 실행해도 permission을 구하는 창이 다시는 뜨지 않으므로 폰의 ‘설정 -> expo ->위치 -> 사용하는 동안’ 에 수동으로 체크해줘야한다.

Step 4) console log에서 현재 위치 가져오기

콘솔 로그를 확인해보면,

첫번째는 response가 없어서 undefined로 찍혔고(필요 없으니 코드를 삭제한다.) 두번째는 Location이 찍혔음을 확인할 수 있다.

우리는 ‘latitude’와 ‘longitude’가 필요한데 원래 디폴트 값은 샌프란시스코라서(apple이기 때문)

위와 같으나, 본인은 현재 나의 위치를 따로 설정해서 latitude는 ‘35.1496’ longitude는 ‘126.9156’으로 뜬다.

본인 현재 위치의 위도 경도 값을 찾는 방법은 아래와 같다.

1. https://ip-api.com/에 접속한다.

2. 시뮬레이터에서 ‘Debug->Location->Custom Location’을 클릭한다.

3. 1번에서 확인한 위도와 경도로 수정해준다.

Step 5) Location 오브젝트 안의 coords 오브젝트 가져오기

• es6를 써서 coord 오브젝트의 latitude, longitude를 가져와본다.
• 위와 같이 코드를 수정한 결과는 아래와 같다.

latitude, longitude를 성공적으로 가져옴을 확인할 수 있다.

Step 6) Rename 하기

• 콘솔 로그를 확인하는 것은 더이상 필요하지 않아 코드를 삭제했다.

Step 7) API 로 전송할 State 가져오기

• 먼저 state를 가져오기 위해 코드를 위와 같이 수정한다. (line 8–10, 16, 26–27)
• line 16이 Location Indicator을 가져온다.

출처 : 노마드코더 - React Native로 날씨앱 만들기

Step 1) expo application 실행

$ npm start

• vscode 터미널에 위와 같이 입력하면 자동으로 ‘export DEV tools’ 창이 크롬에 열린다.

• 안드로이드 폰 유저는 폰의 expo앱을 열어 QR code 를 스캔하면 폰에서 앱을 테스트할 수 있다.
• ios 유저는 폰의 expo앱에 로그인하고 vs code terminal에 아래와 같이 입력한다.

$ expo login

• 폰으로 실행시키면 위의 화면을 볼 수 있다.
• 이때 폰, 맥은 같은 wi-fi에 연결되어 있어야한다.

ERROR: Node.js version 6.10.1 is no longer supported.

expo-cli supports following Node.js versions:
* >=8.9.0 <9.0.0 (Maintenance LTS)
* >=10.13.0 <11.0.0 (Active LTS)
* >=12.0.0 (Current Release)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `expo start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kimnan-young/.npm/_logs/2019-10-28T08_37_43_452Z-debug.log

• 만약 위와 같은 오류가 뜬다면

$ nvm install node

• 위와 같은 명령 실행 후 다시 $npm start를 하면 문제가 해결됨을 확인할 수 있다.

Step 2) Loading 화면 작성하기

• 새파일 버튼을 눌러 Loading.js 컴포넌트를 추가한다.
• 아래와 같이 코드를 작성한다. (Loading.js)

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function Loading(){
 return (
  <View style={styles.container}>
    <Text style={styles.text}>Getting the weather</Text>
  </View>
 );
}
const styles = StyleSheet.create({
 container: {
   flex: 1, 
   justifyContent: "flex-end",
   paddingHorizontal: 30,
   paddingVertical: 100,
   backgroundColor: "#FDF6AA"
},
text :{
 color: "#2c2d2c",
 fontSize: 30
 }
});

• App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Loading from "./Loading";
export default function App() {
  return <Loading />;
}

<결과 화면>

출처 : 노마드코더 - React Native로 날씨앱 만들기

Step 1) Expo Client App 다운로드

Step 2) Node, Npm 버전 확인하기

node는 버전 10 이상, npm은 버전 6 이상이 필요하다.

버전 확인

Step 3) 필요한 프로그램 다운로드

맥 유저는 시뮬레이터를 가진 Xcode가 필요하고 윈도우나 리눅스 유저라면 시뮬레이터를 가진 안드로이드 스튜디오가 필요하다.

Step 4) Expo CLI 설치

$ npm install -g expo-cli

• 여기서 Expo란?

Create-react-app으로 React Native를 크로스 플랫폼으로 개발하기 위한 빌드 도구이며 Xcode 혹은 Android Studio 없이도 기기에서 쉽고 빠르게 코드를 테스트 해볼 수 있게 해준다.

Expo는 모든 Native file에 접근할 수 없으며 자동으로 관리해준다. 만약 Native file을 많이 사용한다면 expo 대신, React Native CLI 방식을 사용한다.

Step 5) Expo Project 시작

$ expo init [프로젝트명]

• expo 프로젝트를 시작한 후 blank를 선택하고 app name을 입력한다.
• 본인은 프로젝트명을 ‘fokin-weather2’로 했다.

$ cd fokin-weather2
$ npm start

• 디렉토리를 변경하고 npm을 시작하면 크롬창이 뜬다.

Step 6) github repository에 프로젝트 폴더 생성

step 5와 같은 프로젝트 이름을 ‘Repository name’에 타이핑하고 ‘Description’에 적당한 설명을 타이핑 한 후 ‘Initialize this repository with a README’의 체크박스에 체크를 하고 ‘Create repository’를 클릭한다.

Step 7) 원격 저장소 연결

$ git remote add origin <원격 저장소 URL>

vscode를 실행하여 ‘fokin-weather2’프로젝트 폴더를 열고 터미널에 위와 같이 입력한다.

원격 저장소 URL은 위에서 생성한 repository의 주소이다.

Step 8)로컬 저장소에 있는 내용을 원격 저장소에 넣기

$ git pull origin master

• vscode 터미널에 위와 같이 입력하여 github에 푸시한다.

(중간에 fatal: not a git repository (or any of the parent directories): .git 라는 오류가 뜨지만 $git init을 해주면 해결된다.)

• 그러면 README.md파일이 프로젝터 폴더 안에 로드된다.

시작하기에 앞서,

모바일 어플리케이션을 개발하기 위해서 보통 Android app 개발자들은 ‘java’를 ios app 개발자들은 Swift 혹은 Objective-c를 이용한다. 그러나 동시에 Android와 iOS를 개발할 수 있는 방법이 있다고 한다.

React란?

- 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

- 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지 보수된다.

- 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 복잡한 리액트 애플리케이션들은 상태 관리, 라우팅, API와의 통신을 위한 추가 라이브러리의 사용이 일반적으로 요구된다.

 -2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램에 적용되었다.

(출처 : 위키백과, https://ko.reactjs.org/tutorial/tutorial.html )

React-Native란?

React의 방식으로 동시에 ios와 android 모바일 어플리케이션 개발을 할 수 있는 페이스북의 오픈 소스 프레임워크이다.

React-Native의 장점

JavaScript만을 이용해서 보다 쉽게 앱을 개발할 수 있기 때문에 개발 초보자인 나에게는 이 점이 큰 장점으로 다가왔다.

또한 코드를 작성하면서 실시간으로 그 결과를 확인할 수 있는 Live Reload 기능과 변환된 코드 부분만 렌더링해주는 Hot Reload 기능을 지원하며 컴파일 과정을 거치지 않아 빠른 속도로 개발을 진행할 수 있다.

React-Native의 단점

간단한 퍼포먼스를 구현하기에는 적합하지만 비즈니스 로직히 복잡해지거나 뷰 스택이 쌓일수록 속도가 느려진다.

잦은 업데이트로 모듈이 변경되어 갑자기 에러가 뜨는 상황이 생기고 바뀐 문법을 새로 적용해야 하는 경우가 있다.

이번 포스팅은

[React Native로 날씨앱 만들기 (by 노마드코더) ]

이란 강좌를 수강하기에 앞서 처음에 expo를 인스톨하는것부터 에러가 나는 바람에 이를 해결하는 방법을 포스팅해보았다.

Step 1) Nodejs 설치하기

nodejs.org/ko/download/

사양에 맞게 다운로드를 한다.

• node를 설치하면 npm은 default 로 설치된다.

Step 2) version 확인하기

$ node -v
$ npm -v

• node는 12.13.0으로, npm은 6.12.0으로 설치되었음을 확인할 수 있다.

Step 3) expo cli 설치하기(에러 발생 단계)

$ npm install -g expo-cli

• 위와 같은 에러가 떴다.
• 액세스 하는것에 문제가 생긴 것 같아 구글링을 해보니 node를 root 권한으로 설치하고 실행했기 때문에 문제가 발생했음을 확인할 수 있었다. (참고 : https://stackoverflow.com/questions/16151018/npm-throws-error-without-sudo)

(Step 1 에서 다운을 받을 때 관리자암호를 입력하라는 창이 떴는데 그게 root 권한 permission을 요구한건가 싶다.)

Step 4) 기존에 설치된 node 삭제하기

$ sudo npm uninstall npm -g

• 기존에 설치된 node는 root 권한으로 설치된 것이므로 uninstall 해준다.

Step 5) NVM(Node Version Manager) 설치하기

• 참고 :https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

nvm은 root 권한 없이 node를 설치할 수 있게 해준다고 한다.

1. 설치하기

$ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

2. 확인하기

$ nvm ls

nvm ls를 터미널에 입력하면

-bash: nvm: command not found

위의 문장이 출력된다.

3. vi 에디터 열기

$ vi ~/.bash_profile

• 빈 에디터에 아래의 문장을 복사해서 붙여넣은 후 :wq 로 저장하고 에디터를 나온다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

4. 재시작하기

$ source ~/.bash_profile

5. 다시 확인하기

$ nvm ls-
> system
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

Step 6) node 재설치하기

1. 최신 버전 설치

$ nvm install 6.10.1

(2019년 10월 23일 기준으로 6.12.0이 최신버전이지만 참고한 링크에서 버전 6.10.1을 설치해서 필자도 6.10.1 버전을 설치해보았다.)

2. 확인하기

$ nvm ls
-> v6.10.1
system
default -> 6.10.1 (-> v6.10.1)
node -> stable (-> v6.10.1) (default)
stable -> 6.10 (-> v6.10.1) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.16.2 (-> N/A)
lts/dubnium -> v10.16.3 (-> N/A)
lts/erbium -> v12.13.0 (-> N/A)

$ node -v
v6.10.1

Step 6) expo 설치

$ npm install -g expo-cli

• Step 3 단계와는 달리 접근 오류가 뜨지 않고 성공적으로 설치되었다.

참고 : “ 아이폰 앱 개발(Swift4 & iOS11) 입문 2편” 강좌

1. 손전등 앱 소개

스위치를 누르면 배경화면이 바뀌면서 소리가 나는 어플을 만들어보자.

2. UI 구성하기

Step 1) Image View를 View Controller에 추가한다.

Step 2) Image 추가하기

• 미리 다운 받은 사진파일을 추가한다.
• 파일명으로 인해 자동으로 사이즈에 맞게 2x 이미지는 60*140픽셀로, 3x 이미지는 90*210픽셀로 설정된다.

Step 3) Image View에 사진 설정 후 Auto resizing, Aspect fill 설정하기

Auto Resizing : 아이폰 종류에 상관 없이 스크린에 맞게 이미지 사이즈가 자동으로 조정된다.

Aspect Fill : 스크린에 빈 공간 없이 꽉 차게 된다.

Step 4) Button 추가 후 가운데 정렬하기

• 참고 : Auto Resizing 의 기능이 적어 Auto Layout을 많이 사용한다. => 컨트롤 사이의 기능 또는 비율에 따른 크기 설정 등의 기능 사용 가능.

체크박스에 체크하여 가로와 세로 기준으로 정 가운데에 button을 고정한다.

Step 5) button 글자 대신 이미지를 삽입한다.

• Title 값의 글자를 지우고 위에 추가했던 이미지 파일을 Image 탭에서 설정한다.

button이라는 텍스트 대신 [스위치off] 버튼으로 설정.

3. 앱 아이콘 설정하기

Step 1) Apple App Store에서 “Asset Catalog Creator” 을 다운받는다.

Step 2)1024*1024 사이즈의 이미지를 ‘Single Image’에 넣은 후 output folder를 Asset폴더의 상위 폴더로 지정하여 ‘Create Asset Catalog’ 를 누른다.

아이콘이 사이즈에 맞게 설정됨을 확인할 수 있다.

빌드하여 아이콘을 확인할 수 있다.

4. UI — 코드 연동

Step 1) Main Storyboard - View Controller - Assistant 클릭한다.

Step 2) Button에 대한 Action을 코드로 설정해준다. (함수 생성)

• 버튼을 마우스 우클릭 후 드래그 앤 드롭 또는 command+드래그를 코드쪽으로 한다.

ViwController 클래스 안으로 드래그해야한다.

• button을 눌렀을 때의 action을 코드로 설정해주는 것이므로 Connection 타입을 Action으로 설정한다.
• Action을 실행하는 함수 이름인 Name을 입력한다.
• Event는 보통 버튼을 눌렀을 때에 대한 처리는 ‘Touch Up Inside’ 로 처리한다.

함수가 생성됨을 확인할 수 있다.

Step 3) UI control과 소스 코드를 연결한다.

button — 소스코드 연결

=> UI button 타입의 변수 switchButton 이 생성되었다.

배경 — 소스코드 연결

=> UIImageView 타입의 변수 flashimageView 이 생성되었다.

참고) weak 키워드는 변수가 메모리에서 해제되는 것과 관련이 있음.

참고) IB는 Interface Builder의 약자로 예전에 Interface Builder라고 UI를 구성하는 프로그램이 있었으며 xcode4버전부터 xcode와 합쳐짐. IBOutlet은 Interface Builder에 있는 UI Control과 코드가 연결됨을 나타냄.

Step 4) button 을 눌렀을 때 실행되는 함수를 구현한다.

• 함수 안에서 구현해야할 기능 : button이 눌렸을 때 button과 배경 이미지 전환

1. button 이미지 전환 : switchButton.setImage()를 사용한다.

• 첫번째 파라미터 : UI Image 타입이 들어간다. UI 인스턴스의 생성자를 호출하여 인스턴스를 만든 후 넣어준다. 여러개의 생성자 중 UIImage?(named : String) 은 특정한 파일 이름과 연관된 이미지를 리턴하며 파일 이름은 Assets 폴더의 “onSwitch”라는 이미지 파일이다.
• 두번째 파라미터 : 버튼의 상태 중 일반상태일 때 이미지를 바꾸겠다는 뜻이다.

2. 배경 이미지 전환 : flashimageView.image = UIImage(named: “onBG”)

• flashimageview.image는 image view가 보여주고 있는 이미지를 나타내며 생성자 호출을 통해 UIImage 인스턴스를 만들어서 리턴해준다. 이때 생성자는 위와 마찬가지로 특정한 파일 이름과 연관된 이미지를 리턴해주는 UIImage?(named : String)을 사용한다.

결과 : 빌드 후 버튼을 클릭하면 버튼이미지와 배경이미지가 전환된다. 그러나 다시 버튼을 클릭하면 손전등이 꺼지지 않는다.

Step 5) 다시 클릭했을 때 즉, 손전등을 껐을 때 이전 상태로 돌아가기 위해 bool 타입의 변수를 선언하고 이를 이용하여 ‘현재 손전등의 상태’를 파악한 후 손전등의 on/off 상태에 따라 버튼과 배경의 이미지를 전환한다.

• 초기값은 임의로 false로 설정한다.

• 스위치를 클릭하면 switchTapped()가 실행되고 isOn 값이 전환된다.
• isOn의 초기값이 false이므로 isOn이 true의 값을 가지면 손전등이 켜지고, 다시 switchTapped()가 실행되어 isOn이 false가 되면 손전등이 꺼진다.

참고) 이미지 파일명만 보고는 어떤 이미지인지 구분하기 힘들어서 Assets폴더에 들어가서 확인해야한다. 이런 번거로움을 덜기위한 방법이 있다.

UIImage Image Literal 을 사용한다.

엔터를 치면 그림으로 변한다.

그림을 더블클릭하면 Assets 폴더에 있는 이미지들이 뜬다.

이런 방법으로도 구현할 수 있다.

참고) 코드 길이 줄이기

if else 문을 단 2줄의 소스코드로 줄일 수 있다.

5. 스위치 사운드 효과 넣기

Step 1) switch.wav 파일을 프로젝트에 추가한다.

Step 2) open source를 이용하여 버튼을 클릭할 때 소리가 나는 함수를 생성한다.

2-1. 프레임워크를 import 한다.

2-2. 변수를 선언한다.

2-3. 함수를 생성한다.

Step 3) 생성한 playSound()함수를 switchTapped() 함수 안에서 호출한다.

문제점) 버튼을 클릭할 때마다 playSound()가 호출되고 이 루틴이 반복되면 메모리에 부담이 될 수 있다. 아래의 방법으로 해결해보자.

3-1. playSound()를 변형한 prepareSound()를 생성한다.

3-2. viewDidLoad()가 실행될 때(ViewController가 로드될 때) prepareSound()를 호출하여 소리 재생 준비를 한다.

3-3. 버튼을 누를 때 즉 switchTapped()가 호출될 때 소리가 재생 된다.