22-06-21(화) 099일차 [JavaScript, React, Python, Android] React.createElement, Python XML parsing

국비지원교육 (22.01-22.07)/강의노트

22-06-21(화) 099일차 [JavaScript, React, Python, Android] React.createElement, Python XML parsing

옌炎 2022. 6. 24. 14:40

728x90

수업내용

1교시 (09:30-10:20)

이전 시간 복습
- React.createElement(”h1”, { id: “recipe-0” }, “구운 연어”)
- React.createElement(태그, 속성, 자식 노드)

2교시 (10:30-11:20)

04_elements.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
</head>
<body>
	<!-- Target Contrainer -->
	<div id="react-container"></div>

	<!-- React Library & React DOM -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

	<script>

		var items = [
				"연어 500그램",
				"잣 1컵",
				"버터 상추 2컵",
				"옐로 스쿼시(Yellow Sqush, 호박의 한 종류) 1개",
				"올리브 오일 1/2컵",
				"마늘 3쪽"
			]

		const ingredients = React.createElement(
				"ul",
				{ className: "ingredients" },
				items.map((ingredient, i) =>
						// React.createElement("li", null, ingredient)
						React.createElement("li", { key: i }, ingredient)
					)
				)

		ReactDOM.render(
				ingredients,
				document.getElementById('react-container')
			)

		console.log('ingredients', ingredients)
	</script> 
</body>
</html>

05_components.html ← 옛날 문법

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>리액트 컴포넌트</title>
</head>
<body>
	<!-- Target Container -->
	<div id="react-container"></div>

	<!-- React Library & React DOM -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

	<script>

		class IngredientsList extends React.Component {

			render() {
				return  React.createElement("ul", {"className": "ingredients"},
						React.createElement("li", null, "연어 500그램"),
						React.createElement("li", null, "잣 1컵"),
						React.createElement("li", null, "버터 상추 2컵"),
						React.createElement("li", null, "옐로 스쿼시(Yellow Squash, 호박의 한 종류) 1개"),
						React.createElement("li", null, "올리브 오일 1/2컵"),
						React.createElement("li", null, "마늘 3쪽")
					)
			}
		}

		const list = React.createElement(IngredientsList, null, null)

		ReactDOM.render(
				list,
				document.getElementById('react-container')
			)
	</script>
</body>
</html>

[교재 98~109p] 두 번 읽어오기

3교시 (11:30-12:20)

숙제 Python openAPI 기상청 xml데이터 가져오기 (금요일까지)
- 중기예보
- 단기예보
  - 초단기예보조회
  - 단기예보조회

4교시 (12:30-13:20)

xml_parsing.py

import xml.etree.ElementTree as elemTree

xmlStr = '''
            <users>
                <user grade="gold">
                    <name>KimCheolSoo</name>
                    <age>25</age>
                    <birthday>19940215</birthday>
                </user>
                <user grade="diamond">
                    <name>KimYooMee</name>
                    <age>21</age>
                    <birthday>19980417</birthday>
                </user>
            </users>
        '''

tree = elemTree.fromstring(xmlStr)
print(tree)

user = tree.find('./user');
print(user)
print(user.tag)
print(user.attrib)
print(user.get('grade'))

userName = user.find('name')
print(userName.text)

xml_parsing_1.py

import xml.etree.ElementTree as elemTree

xmlStr = '''
            <users>
                <user grade="gold">
                    <name>KimCheolSoo</name>
                    <age>25</age>
                    <birthday>19940215</birthday>
                </user>
                <user grade="diamond">
                    <name>KimYooMee</name>
                    <age>21</age>
                    <birthday>19980417</birthday>
                </user>
            </users>
        '''

tree = elemTree.fromstring(xmlStr)
print(tree)

user = tree.find('./user[2]');
print(user)
print(user.tag)
print(user.attrib)
print(user.get('diamond'))
userName = user.find('name')
print(userName.text)

user_1 = tree.find('./user[@grade]')
print(user_1)
print(user_1.tag)
print(user_1.attrib)
userName_1 = user_1.find('name')
print(userName_1.text)

user_2 = tree.find('./user[@grade][2]')
print(user_2)
print(user_2.tag)
print(user_2.attrib)
userName_2 = user_2.find('name')
print(userName_2.text)

user_3 = tree.find('./user[@grade="diamond"]')
print(user_3)
print(user_3.tag)
print(user_3.attrib)
userName_3 = user_3.find('name')
print(userName_3.text)


for user in tree.findall('./user'):
    print(user.tag)

5교시 (14:30-15:20)

xml_parsing_2.py

import xml.etree.ElementTree as elemTree

# https://docs.python.org/3.4/library/xml.etree.elementtree.html

xmlStr = '''
            <users>
                <user grade="gold">
                    <name>KimCheolSoo</name>
                    <age>25</age>
                    <birthday>19940215</birthday>
                </user>
                <user grade="diamond">
                    <name>KimYooMee</name>
                    <age>21</age>
                    <birthday>19980417</birthday>
                </user>
            </users>
         '''

tree = elemTree.fromstring(xmlStr)
print(tree)

print(tree[0][0].tag + " : ", tree[0][0].text)
print(tree[0][1].tag + " : ", tree[0][1].text)
print(tree[0][2].tag + " : ", tree[0][2].text)
print(tree[1][0].tag + " : ", tree[1][0].text)
print(tree[1][1].tag + " : ", tree[1][1].text)
print(tree[1][2].tag + " : ", tree[1][2].text)

print(tree.tag)
print(tree.attrib)

for child in tree:
    print(child.tag, child.attrib)

Android ← 다운로드 및 실행은 목요일에 할 예정
안드로이드

모바일 웹 web 환경
-------------------------
웹 : 브라우저 서비스

테스크탑 웹 desktop web : http://naver.com
모바일 웹 moblie web : 태블릿, 스마트폰 등 모바일 브라우저 : http://m.naver.com

모바일 장치에서 테스크탑 웹을 그대로 실행시키면 화면 해상도가
달라서 제대로 보기가 어렵다.
웹 페이지를 작성할 때 모바일 장치의 환경에 맞춰 화면을 구성해야 한다.

앱 : App : Mobile Application

네이티브앱 native app
: 각 플랫폼 전용의 개발 도구(언어)와 SDK(Software Development Kit)를
  이용하여 개발한다.
  아이폰은 XCode와 Object-C 언어를, 안드로이드폰은 자바, 윈도폰은 C# 언어를
  사용하여 각각 개발한다.
  카메라, 스피커, GPS 등의 장치를 직접 제어할 수 있고 효율성이 높다.
  CS

웹앱 web app
: 웹 기술로 개발하지만 겉모양은 네이티브앱 처럼 보이는 애플리케이션을 말한다.

하이브리드앱 hybrid app
: 네이티브앱 처럼 모바일 기기에 설치해서 사용하지만 내부적으로는 웹 기술로 구현한다.
  먼저, 표준 웹 기술로 웹앱을 개발하고 이를 다시 네이티브앱으로 변환한 다음
  배포하는 형태이다.

안드로이드 구조
-------------------------
1. 응용프로그램 Application
안드로이드 스마트폰에서 사용할 수 있는 일반적인 응용프로그램
웹브라우저, 달력, 구글 맵, 연락처, 게임 등
2. **응용 프로그램 프레임워크 Application Framework
안드로이드 api
Activity Manager, View System, Content Providers etc.
3. 안드로이드 런타임 Android Runtime
Java 코어 라이브러 와
달빅 가상머신(Dalvik Virtual Machine) 또는 아트 런타임(ART Runtime)
안드로이드는 Java 문법으로 프로그래밍하지만 자바 가상 머신을 사용하지 않고
달빗 가상 머신이나 아트 런타임을 사용한다.
4. 라이브러리 Libraries
안드로이드에서 사용되는 여러 시스템 라이브러리,
시스템 접근 때문에 C로 작성되어 있다.
5. **리눅스 커널 Linux Kernel
하드웨어의 운영과 관련된 저수준의 관리 기능
메모리 관리, 디비아스 드라이버, 보안 등...
카메라, 터스스크린, GPS 등
많은 스마트폰 장치 지원을 리눅스 커널 사용

안드로이드 설치
-------------------------

1. 인텔 HAXM(Hardware Accelerated eXecution Manager)설치
https://github.com/intel/haxm/releases/
intelhaxm-android.exe
2. Android Studio 다운로드
http://developer.android.com
3. Android Studio 설치
android-studio-ide-201.7042882-windows.exe : 4.1
android-studio-ide-191.5900203-windows.exe : 3.5.1
4. Android Studio 환경 설정
5. 안드로이드 SDK 업데이트
6. Android Virtual Device(AVD) 만들기 : 애뮬레이터 : 윈도우에서 돌아가는 실제 폰

안드로이드 프로젝트 생성
-------------------------
1. Android Studio 실행
2. Start a new Android Studio project
3. Choose your project
Phone and Tablet탭의 Empty Activity 선택 Next

4. Counfigure your project 에서 프로젝트 정보 입력

Name : HelloAndroid
프로젝트 이름은 대문자로 시작한다.

Package name : a.b.c.helloadnroid
도메인(a.b.c)과 애플리케이션 이름을 이어서 만든다.

Save location : C:\00.KOSMO72\60.Android\HelloAndroid
프로젝트가 저장될 폴더를 지정한다(한글 안됨)

Language : Java

Minimum API levle : API 16: Android 4.1(Jelly Bean) : 이 앱이 작동하는 최하 버전

Finish 클릭

5.  Activity Name : MainActivity.java

Layout Name : activity_main.xml : 안드로이드 화면을 구성하는 xml

LinearLayout : 수직, 수평 배치로 가장 간단하게 배치가 가능하지만 성능면에서 많이 떨어진다.
RelativeLayout : 성능면에서 우수하지만 View 배치 속성이 많고 복잡하다는 단점이 있다.
ConstraintLayout : 이 두가지 Layout의 장점을 모두 취할 수 있는 Layout입니다.

뷰 : View
-------------------------
앱 실행 화면을 구성하는 요소를 뷰(View)라고 통칭한다.
텍스트뷰, 버튼, 라이오버튼, 이미지 등 모두 View 클래스의 상속을 받는다.
뷰 클래스는 위젯 이라고도 한다.
버튼을 버튼 위젯, 실제 코드는 버튼 클래스 이다.
위젯을 담을 수 있는 위젯을 레이아웃 이라고 한다.
레이아웃은 ViewGroup 클래스 아래에 존재한다.
위젯은 단독으로 존재하지 않으며, 위젯을 담아 배치하는 틀이 레이아웃이다.

Object
View
ViewGroup
LinerLayout
TableLayout
RelativeLayout
FrameLayout
GridLayout
AdapterView
AbsListView
ListView
GridView
AbsSpinner
Gallery
Spinner
ToolBar
TextView
EditText
Button
CopmoundButton
CheckBox
ToggleButton
Switch
RadioButton
ImageView
ImageButton
ProgressBar

레이아웃 Layout
-------------------------
레이아웃에 자주 사용되는 속성
orientation : 레이아웃 안에 배치할 위젯의 수직 또는 수평 방향을 설정한다.
gravity : 레이아웃 안에 배치할 위젯의 정렬 방향을 좌측, 우측, 중앙 등으로 설정한다.
padding : 레이아웃 안에 배치할 위젯의 여백을 설정한다.
layout_weight : 레이아웃이 전체 화면에서 차지하는 공간의 가중값을 설정하는데,
여러 개의 레이아웃이 중복될 때 주로 사용한다.
baselineAllgned : 레이아웃 안데 배치할 위젯을 보기 좋게 정렬한다.

리니어레이아웃(선형 레이아웃) : LinerLayout
레이아웃의 왼쪽 위부터 아래쪽 또는 오른쪽으로 차례로 배치한다.
렐러티브레이아웃(상대 레이아웃) : RelativeLayout
위젯 자신이 속한 레이아웃의 상하좌우 위치를 지정하여 배치하거나
다은 위젯으로부터 상대적인 위치를 지정한다.
테이블레이아웃 : TableLayoiut
위젯을 행과 열의 개수를 지정한 테이블 형태로 배열한다.
그리드레이아웃 : GridLayout
데이블레이아웃과 비슷하지만 행 또는 열을 확장하여
다양하게 배치할 때 더 편리하다.
프레임레이아웃 : FrameLayout
위젯을 왼쪽 위에 일률적으로 겹쳐서 배치하여 중보되어 보이는 효과를 낼 수 있다.
여러개의 위젯을 배치한 후 상황에 따라서 필요한 위젯을 보이는 방식에 주로 사용

2014년 5월 구글 I/O에서 새로운 ConstraintLayout 소개
RelativeLayout와 상당히 비슷하지만, 인터페이스를 더 풍부한 방식으로
표현할 수 있도록 다양한 방법을 제공한다.

안드로이드 프로젝트 구성
-------------------------
app
-------------------------------------------------------
java
a.b.c.baseapp
MainActivity.java
setContentView(R.layout.activity_main)
res
layout
activity_main.xml
android:text="@string/strBtn1"
values
strings.xml
<string name="strBtn1">버튼입니다</string>
-------------------------------------------------------

mainfests
매니페스트 파일(AndroidMainifest.xml)이 들어 있다.
앱의 여러가지 정보를 담고 있는 있다.

java
하위에 패키지명의 하위폴더가 있는데
안드로이드 프로젝트를 생성할 때 입력하는 패키지 이름과 동일 하다.
패키지 이름아래 MainActivity.java로 메인 Java 소스가 들어있다.
주로 액티비티(화면, activity_main.xml)에서 어떤 일을 할 지를 프로그래밍한다.

java(generated)
Android Studio 3.2부터 제공, 시스템 내부적으로 사용하는 폴더

res
앱 개발에 사용되는 이미지, 레이아웃, 문자열 등이 들어가는 폴더

drawable
이미지 파일

layout
액티비티(화면)을 구성하는 xml 파일은 넣는다.
기본적으로 activity_main.xml을 초기화면으로 지정되어 있다.
추가로 화면이 필요하면 xml 형태로 추가 생성한다.

mipmap

디자인 화면, 앱이 설치된 후에 보이는 런처 아이콘
xxxhdpi, xxhdpi, xhdpi 초고해상도 런처 아이콘 파일
hdpi는 고해상도 런처 아이콘 파일
mdpi는 중해상도 런처 아이콘 파일

values
strings.xml : 문자열 저장
colors.xml : 색상표 저장
styles.xml : 스타일 저장

필요에 따라 폴더 생성해서 사용
menu 폴더 : 메뉴 xml 파일 저장
anim 폴더 : 애니메이션 저장 폴더

res(generated)
Android Studio 3.5부터 제공, 시스템 내부적으로 사용하는 폴더

Gradle Scripts
Gradle 빌드 시스템과 관련된 파일
build.gradle(Module: app)
: 빌드 스크립트의 핵심 파일, 컴퍼일 버전, 실행되는 최하 버전, 컴파일 라이브러리 등 등록
local.properties : 컴파일되는 SDK의 경로
grade.properties : JVM 관련 메모리 설정

안드로이드 4대 컴포넌트
-------------------------

** 액티비티 Activity
액티비티는 안드로이드폰에 나타나는 화면 하나하나를 말한다.

MainActivity.java
액티비티 이다.
setContentView(R.layout.activity_main)화면을 불러 사용
activity_main.xml
화면은 구성하는 코드로 구성

인텐트 intent
안드로이드의 4대 컴포넌트가 서로 데이터를 주고받기 위한 메시지 객체이다.
명시적 인텐트
한쪽방향 인텐트
양방향 인텐트 : 계산기

암시적 인텐트 implicit intent
약속된 액셔을 지정하여 안드로이드에서 제공하는
기존 응용프로그램을 실행하는 것
액션지정 -> 전화걸기, 웹브라우저, 갤러리, 음악듣기, 동영상 보기

생명주기
응용프로그램이 시작되면 onCreate(), onStart(), onResume()
메소드가 수행되고 메인 액티비티 화면이 나온다. 이것이 메인 액티비티의 실행 상태이다.
이 상태에서 메인 액티비티를 끝내면
onPause(), onStop(), onDestroy() 메소드가 차례로 수행되고 응용 프로그램이 종료된다.
만약 다른 액티비티를 요청하면 onPause(), onStop() 메소드가 수행되고
메인 액티비티가 중되면 다른 액티비티 화면이 나온다.
또 다른 액티비티의 사용을 종료하면 onRestart(), onStart(), onDestroy()
메소드가 수행되고 다시 메인 액티비티 화면이 나온다.

** 서비스 Service
서비스는 눈에 보이는 화면(액티비티)과 상관없이 백그라운드에서 동작하는 컴포넌트이다.
화면 없이 동작하는 프로그램으로 데몬(daemon),
백그라운드 프로세스(background process)라고도 한다.
로컬에서 동작하는 서비스는 서비스 생성 -> 서비스 시작 -> 서비스 종료 3단계 동작을 거친다.

** 브로드캐스트 리시버 Broadcat Receiver
문자 메시지 도작, 배터리 방전, SD 카드 탈부착, 네트워크 환경 변화 등이 발생하면
전체 용용 프로그램이 들을 수 있도록 방송 신호를 보낸다.
그리고 브로드캐스트 리시버(Broadcast Receiver)는 이러한 방송 메시지가 발생하면 반응한다.
배러티가 얼마 남지 않았을 때 경고 문자나 소리를 방생시키는 기능을 구현할 수 있다.
배터리 관련 액션
ACTION_BATTERY_CHANGED : 배터리의 상태가 변경될 때
ACTION_BATTERY_LOW : 배터리가 거의 방전되었을 때
ACTION_BATTERY_OKAY : 배터리가 방전 상태에서 정상 수준으로 돌아왔을 때

** 콘텐트 프로바이더 Content Provider
응용 프로그램 사이에 데이터를 공유하기 위한 컴포넌트이다.
안드로이드 응용 프로그램은 데이터에 자신만 접근할 수 있으므로
자신의 데이터를 외부에 공개하려면 콘텐트 프로바이더를 만들어야 한다.
콘텐트 프로바이더의 정보를 제공하는 방법으로는
URI(Uniform Resource Identifier)가 있다.
콘텐트 프로바이터에서 처리하는 데이터는 일반적으로
데이터베이스 또는 파일로 저장된다.

안드로이드에서 자체적으로 제공하는 주요 콘텐트 프로바이더
연락처 전화번호 : android.provider.Contacts.Phones.CONTENT_URI
통화 기록 : android.provider.CallLog.Calls.CONTENT_URI
시스템 설정값 : android.provider.System.CONTENT_URI
내장 미디어의 이미지 : android.provider.MediaStore.Image.Media.INTERNAL_CONTENT_URI
내장 미디어의 동영상 : android.provider.MediaStore.Video.Media.INTERNAL_CONTENT_URI
내장 미디어의 오디오 : android.provider.MediaStore.Audio.Media.INTERNAL_CONTENT_URI
내장 미디어의 이미지 : android.provider.MediaStore.Image.Media.EXTERNAL_CONTENT_URI
내장 미디어의 동영상 : android.provider.MediaStore.Video.Media.EXTERNAL_CONTENT_URI
내장 미디어의 오디오 : android.provider.MediaStore.Audio.Media.EXTERNAL_CONTENT_URI

6교시 (15:30-16:20)

내일 다같이 이력서 클리닉을 할 예정인데 다들 작성할 시간이 없어서 함께 이력서 작성

7교시 (16:30-17:20)

이력서 작성

8교시 (17:30-18:30)

이력서 작성

Notes

728x90

저작자표시

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

22-06-23(목) 101일차 [Career] 이력서 클리닉 (0)	2022.06.24
22-06-22(수) 100일차 [Career] 이력서 클리닉 (0)	2022.06.24
22-06-20(월) 098일차 [JavaScript, React, Node.js, MySQL, Python] React.createElement, Node.js 파일 업로드 (0)	2022.06.24
22-06-17(금) 097일차 [React, Node.js, Python] 리액트 기초, 파일 업로드, OpenAPI 활용 (0)	2022.06.24
22-06-16(목) 096일차 [JavaScript] 자바스크립트 상속 (0)	2022.06.24

현재글22-06-21(화) 099일차 [JavaScript, React, Python, Android] React.createElement, Python XML parsing

A New Life

22-06-21(화) 099일차 [JavaScript, React, Python, Android] React.createElement, Python XML parsing

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

티스토리툴바

22-06-21(화) 099일차 [JavaScript, React, Python, Android] React.createElement, Python XML parsing

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

관련글

티스토리툴바