Merge branch 'main' of git.ajou.ac.kr:yoonkiung/foss_final_project

README.md

-# FOSS_final_project
+FOSS_final_project 2022-1
+=============
+author : 윤기웅 (201721216)
+-------------
+## Flutter overview
+### Flutter란 무엇인가?
+1. Flutter는 구글이 만든 모바일, 웹 제작을 위한 오픈 소스 크로스 framework
+2. `iOS`, `Android` OS에서 둘다 지원하며 구글의 차세대 OS인 `Fuchsia`에 완벽 호환된다.
+3. OS에 맞춰서 인터페이스가 자동으로 재구성된다는 장점
+4. 구글은 `초보자가 배우기 쉬운`프래임워크라고 소개
+5. Flutter 앱 개발을 위한 언어로는 `dart`를 사용
+
+### 왜 Flutter를 배워야하는가?
+1. 구글은 새로운 OS로 Fuchsia를 2016년 발표하고 매년 업데이트와 지원계획을 확대중이고 2019년 공식 홈페이지 오픈
+2. 구글은 Fuchsia와 Flutter를 이용하여 최고의 크로스 플랫폼 모바일 프레임워크를 만드려고 한다
+3. 이를 통해 모든 플랫폼을 아우르는 생태계를 구축하려고 한다 
+
+(위 내용은 Flutter 2.0, Flutter 3.0의 발표를 토대로 하였습니다)
+## 
+## Flutter install 
+* Flutter 설치에 필요한 SDK를 [Flutter 공식 설치 페이지](https://docs.flutter.dev/get-started/install?gclid=Cj0KCQjwntCVBhDdARIsAMEwACmAZz5qI1lVX4pK5uuRUey31AhN89hHgTcbisEOA3HJ75Ckh9obWxcaAkBaEALw_wcB&gclsrc=aw.ds)에서 본인의 OS에 맞춰서 Download 받는다
+* Download받은 SDK파일 압축을풀고 압축을 풀고 그 위치로 환경변수를 등록한다. (이 과정 또한 OS별로 공식 설치 페이지에 상세하게 나와있고 OS별로 [윈도우](https://docs.flutter.dev/get-started/install/windows) [macOS](https://docs.flutter.dev/get-started/install/macos) [linux](https://docs.flutter.dev/get-started/install/linux) [Chrom OS](https://docs.flutter.dev/get-started/install/chromeos) 를 참고하면 매우 쉽고 편하다)
+* 위 과정이 다 끝났으면 이제 기억해야 할 것은 단 한가지이다
+```
+flutter doctor
+```
+위 명령어는 Flutter를 사용하기 위해 어떤 것을 더 실치해야되는지 내 컴퓨터에 어떤 것이 설치되어있고 안되어있는지, 안되어있다면 어떻게 설치해야하는지 알려준다
+
+<img src="/uploads/f455f41dee03efcbe9f43076e2f2c049/screen.png" width="500" height="300">
+
+* 위는 설치를 다 했을때 `flutter doctor` 실행 결과이다. Android Studio, Xcode, Chrom 등을 설치해주면 된다. 
+## 
+## Flutter Project 구성
+* (구조를 직접 보고싶다면 practice_code/ 를 참조하세요)
+* ios 디렉토리
+> ios로 자동으로 빌드해주기 위한 디렉토리    
+> 개발이 다 끝난 후 배포를 진행할 때 필요하다
+* Android 디렉토리
+> Android로 자동으로 빌드해주기 위한 디렉토리  
+> .apk 설치파일로 변환이 가능하다  
+> 개발이 다 끝난 후 배포를 진행할 때 필요하다
+* lib 디렉토리
+> dart파일을 작성하기 위한 디렉토리  
+> 모든 .dart 코드는 이 디렉토리에서 작성한다. 필요시 하위 디렉토리 생성 가능
+* pubspec.yaml
+> 페이지에 이미지를 넣을때 이미지의 경로 지정할 수 있다  
+> 라이브러리 사용시 dependency를 이 파일에 적어줘야 한다.  
+> pubspec.yaml을 업데이트한 후에는 아래 명령어를 수동으로 입력해야한다
+> ```
+> flutter pub get
+> ```
+> 그러나 vscode와 android studio 에서는 저장 (command + s or control + s)을 누르는 것 만으로 이 명령어가 자동으로 실행된다
+## 
+## Flutter 실습
+여기까지 잘 이해하고 따라 왔다면 이제 Flutter를 가지고 실습할 준비가 다 되었다!  
+vscode 또는 Android studio 중 마음에 드는 것을 선택하여 [이 링크](https://drive.google.com/file/d/1X3VZJEBLhfX8oiZreyy36YorUamVTymP/view?usp=sharing)로 와서 동영상을 보면서 같이 코드를 작성해보면 간단한 페이지를 작성할 수 있게 될 것이다  
+실습에 사용된 코드는 practice_code 디렉토리에도 넣어놓았고 자유롭게 사용하셔도 됩니다  
+practice_code 디렉토리의 README.md파일에는 코드에 대한 설명이 있으니 참고 바랍니다
+실습 동영상 접근 권한 문제나 다른 문의가 있다면 <rldnd4429@aoju.ac.kr> 로 문의 바랍니다:)
+
 

practice_code/README.md

-# foss
-
-A new Flutter project.
-
-## Getting Started
-
-This project is a starting point for a Flutter application.
-
-A few resources to get you started if this is your first Flutter project:
-
-- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
-
-For help getting started with Flutter, view our
-[online documentation](https://flutter.dev/docs), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+# 캐릭터 페이지 디자인
+아래는 완성된 캐릭터 페이지이다  
+<img src="/uploads/d8948f3fb5bab8ebe473780d0cbbe64d/simu.png" width="300" height="650">  
+# 
+## Flutter 클래스 설명
+Flutter 클래스는 크게 statelessWidget과 statefulwidget으로 나눌 수 있다  
+* statefulwidget은 페이지에 변화가 없는 정적인 페이지 구성을 할 때 사용하는 클래스이다
+* statefulwidget은 페이지의 변화가 있는 동적인 페이지 구성을 할 때 사용하는 클래스이다
+실습에서는 statelessWidget을 사용하여 캐릭터 페이지를 구성하였다
+```
+Scaffold(
+    appbar: AppBar(
+        title: Text('FOSS'),
+        ...
+    )
+    body: ...
+)
+```
+`Scaffold`는 App의 화면을 구성하는데 가장 기본이 되는 클래스이다  
+`appbar` 속성은 앱의 상단을 구성하며 앱의 title등을 넣을 수 있고 좌우로 아이콘을 넣어 tap을 했을 때 어떤 동작을 수행하게 할 수 있다  
+`body` 속성은 앱의 가운데 메인화면을 구성한다. 여기에서는 다양한 클래스를 이용하여 화면을 구성할 수 있다 실습에서는 `Padding` `Divider` `Column` `Row` 등의 클래스를 사용해 보았다