창 3기 - 1주차 교육 (12주차)

티스토리 뷰

카테고리 없음

창 3기 - 1주차 교육 (12주차)

반려견 반려묘 이야기 2022. 8. 30. 16:28

이범규 대표 : 빨리 사귀자 라고 하기도 전에 뺨을 맞고 쫓겨나는 것 (빨리 가서 맞고, 적은돈 빠르게 뺨맞고 또 도전하는 것)

돈과 시간을 적게 쓰면서 빠르게 만드는 것이 유리하다.

개발 + 기획 + 마케팅 (저자본, 인재, 아이디어, 실행력 만으로 승부)

0 > 1은 본인이 만들고 1 > 10으로 키울 때 사람을 뽑는 것.

군더더기 없는 간결한 기획. (MVP를 만드는 방법론 학습하기)

IT창업 = 제품 X 유통

좋은제품 * 좋은 마케팅 = 성장하는 비즈니스

스스로 만들 수 있는 사람이 되어서, 좀더 유리하게 시작하자.

코딩 : Flutter, Firebase

자기주도 : 스스로 결국 해결해내는 습관

창업가정신 : 필수지식, 기본정신, 강의/책

인연 : 사람, 함께 일하는 법, 다면평가

프로젝트 : 일의 시작과 끝, 완성을 경험.

1~6주차 (학습기간, 클론 코딩) : 매주 랜덤팀

7~12주차(프로젝트) : 자율팀으로 쭉

창업의 A to Z 경험은 동일.

크로스 플랫폼 앱 = 하나의 프로그래밍 언어와 소스코드로 안드로이드, IOS 둘다 사용할 수 있는 것.

[로그인 페이지 구현하기]

1)Flutter 프로젝트 생성하기

-flutter 폴더 만들기 (경로에 한글 없게 하기)

-Visual Studio Code 켜두기 (텍스트 에디터)

View > Command Palette (Ctrl+Shift+P) > flutter 프로젝트 만들기

lib : Dart 파일이 들어가는 라이브러리 파일

main.dart를 켜서 실행하게 됨

android, ios는 설정할때만 사용하고 그 외에는 건들일 없음.

★pubspec.yaml 이라는 폴더는 자주 다룰 예정 (라이브러리를 깔거나, 설정, 기능등을 추가 많이 함)

이걸 해두면 자동으로 줄바꿈이나 각종 편의를 봐주게 된다.

커맨드 팔레트에서 Flutter:Launch Emulator 실행

Scaffold

Text("") : 위젯, 텍스트를 보여주는 것.

에뮬레이터 문제(크리티컬 에러)

에러 메시지 : gradle task assembledebug failed with exit code 1 (에뮬레이터가 제대로 설치가 안되었음)

android > app > build.gradle // android compileSdkVersion 33으로 변경

터미널에서 flutter clean 입력

안드로이드 스튜디오에서 아래 파일 설치 (Android SDK Build-Tools 33)

[창업세션 강의 듣기 정리]

결국 스타트업에서 성공한다는 것은 많이 도전해서 깨져보고, 그 깨진 것을 바탕으로 더 열심히 개발해서 올라가는 것.

원티드 매치업으로 콜드콜로 모두 불러서 인원을 충원했음

투자를 안받기로 하는 이유 :

돈을 써서 성장 속도를 만들 수 있다?

흑자 기업이라거나, 좋은 고객경험으로 크는 것이 맞다라고 생각하면

모임을 만들어서 제일 똑똑한 2명만 초대해서 만들어봄. (제일 똑똑한 1명만 데려와라)
한달에 한번 책을 읽고 술을 마셔라. (창 오프라인 모임에서 모여라)

오프라인 1기는 잘되고, 2기는 잘 안되었던 이유? (지인으로 잘 된 것이었다.)

3년 동안 죽이 되던 밥이 되던 같이 하겠다. (함께할 수 있는 서비스인 것 같다)

창업할 때는 모든 면에서 완벽한 사람을 찾기를 어렵다.

경쟁업체를 생각하기 보단, 우리 회사의 성장이 멈추는 것과 우리 고객을 못 모아오는 것이 더 중요함

Model View Presenter (MVP) 모델 만들기

미국에서 잘 뜨는 것을 베껴와서 잘 된 것을 만드는 것.

>이게 망해도 내가 재미있는 프로젝트를 하는 것

(예창패, 초창패 등)을 받는 것은 좋지만 그 이상은 문제가 있다.

9/3일까지 과제 제출 + 창업일지 작성

텍스트 필드 Column 만들기

body: Column(

children: [

Text(

"Hello Flutter",

style: TextStyle(fontSize: 34),

TextField(

decoration: InputDecoration(labelText: "이메일"),

TextField(

obscureText: true,

decoration: InputDecoration(labelText: "비밀번호"),

버튼을 추가하기 (onPressed () {} : 함수라는 의미 {}안에 함수를 동작하게 만듬

child:Text를 받아서 로그인 버튼을 만들 수 있음.

ElevatedButton(onPressed: () {}, child: Text("로그인"))

AppBar : 바(Bar)로 된 것에 이름을 넣어주는 것

안쪽으로 여백을 주는 것이 Padding.

[Flutter 배우는 방법]

https://docs.flutter.dev/development/ui/widgets

Widget catalog

A catalog of some of Flutter's rich set of widgets.

docs.flutter.dev

https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG

Flutter Widget of the Week

Fighting the good fight for Widget Awareness! Widget of the Week is a series of quick, animated videos, each of which covers a particular widget from the Flu...

www.youtube.com

다양한 위젯이 있을 때 알고 있는 사이트에 기록을 해두면 도움이 많이 될 것임.

Dart 문법 (Dart Pad부터 시작을 하면 됨)

https://dartpad.dev/?id=02d3c1600e40dd95d65af5ca6a3e4d16&null_safety=true

DartPad

dartpad.dev

자료형은 직접 찾아보면 더 많음

required 키워드가 붙은 경우 매개변수의 타입을 String?이 아닌 String으로 만들어 줄 수 있습니다. (값을 요구한다는 의미)

함수에서 가장 중요한 것은 무언가 <입력>되면 그에 맞는 리턴값<출력>을 준다는 것 (Print는 화면상 출력일 뿐 절차상 출력이 아님)

String getName()

{

return "철수";

}

String getName() => "철수";

위 문장과 아래문장은 기능적으로 동일한 문장임.

클래스 명명법 : 파스칼 케이스 (첫문자부터 대문자로 나오는 것) PascalCase

변수, 함수 명명법 : 카멜 케이스 (첫문자는 소문자, 띄어쓰기 있을 때 대문자) getName

클래스는 다음의 구성 요소로 이루어져 있습니다.

속성(Property) : 클래스 내의 변수

메소드(Method) : 클래스 내의 함수

생성자(Constructor) : 클래스 명과 동일한 함수

클래스를 사용한 코드 (생성자 체크)

Dart의 모든 것은 클래스로 만들어져있다. (이것이 중요한 것)

listview > Expanded로 묶어주면 해결되는 에러.

Drawer는 DrawerHeader와 PageView, ListTile을 이용해서 만들면 됨

1. 앱바에다 Food Recipe라고 적고, 아이콘 버튼으로 사람모양을 하나 추가한 것

appBar: AppBar(

elevation: 0

title: Text(

"Food Recipe",

style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),

backgroundColor: Colors.white,

foregroundColor: Colors.black,

actions: <Widget>[

IconButton(onPressed: () {}, icon: Icon(Icons.person_outline))

2. Body 부분에 한칸 만들어서 검색창 만들기 (TextField 이용) / 답안 참고.

body: Column(children: [

Padding(

padding: const EdgeInsets.all(8.0),

child: TextField(

decoration: InputDecoration(

hintText: "상품을 검색해주세요.",

border: OutlineInputBorder(

borderSide: BorderSide(color: Colors.black),

suffixIcon: IconButton(

icon: Icon(Icons.search),

onPressed: () {},

))),

3. Body 부분에 한칸 만들어서 검색창 만들기 (TextField 이용) / 답안 참고.

Padding(

padding: const EdgeInsets.all(8.0),

child: TextField(

decoration: InputDecoration(

hintText: "상품을 검색해주세요.",

border: OutlineInputBorder(

borderSide: BorderSide(color: Colors.black),

suffixIcon: IconButton(

icon: Icon(Icons.search),

onPressed: () {

print("돋보기 아이콘 클릭");

))),

4. ListView.Builder / Stack을 이용해서 이미지+검은색 반투명 상자+텍스트 출력

ListView.Builder의 역할 : index만큼의 횟수동안 ListView로 만들어서 보여주는 것.

Expanded(

child: ListView.builder(

itemCount: dataList.length,

itemBuilder: (BuildContext context, int index) {

Map<String, dynamic> data = dataList[index];

String category = data["category"];

String imgUrl = data["imgUrl"];

return Card(

margin: const EdgeInsets.all(8.0),

child: Stack(

alignment: Alignment.center, //중앙정렬

children: [

Image.network(imgUrl,width: double.infinity,height: 120,fit: BoxFit.cover), //Background Image

Container(width: double.infinity,height: 120,color: Colors.black.withOpacity(0.5)), //검정색 반투명 상자

Text(category, style: TextStyle(color: Colors.white, fontSize: 36)) //텍스트

]));

5. Drawer를 만들고 Drawer의 헤드를 만드는 부분

children: [

DrawerHeader(

margin: const EdgeInsets.all(8.0),

decoration: BoxDecoration(

color: Colors.yellow,

child: SingleChildScrollView(

child: Column(

children: [

CircleAvatar(

child: Image.network(

"https://i.ibb.co/CwzHq4z/trans-logo-512.png",

width: 60),

backgroundColor: Colors.white,

Text('닉네임'),

Text('hello@world.com'),

6. Drawer 아래에 이벤트페이지, 구매내역, 리스트 만드는 법

AspectRatio(

aspectRatio: 12 / 4,

child: PageView(children: [

Image.network("https://i.ibb.co/0mXKmZq/banner-1.jpg"),

Image.network("https://i.ibb.co/DDgYrJR/banner-2.jpg"),

Image.network("https://i.ibb.co/v1RMHN4/banner-3.jpg"),

Image.network("https://i.ibb.co/NmNsrr2/banner-4.jpg")

]),

ListTile(

title: const Text('구매내역'),

trailing: Icon(

Icons.arrow_forward_ios,

color: Colors.black,

onTap: () {

// Update the state of the app

// ...

// Then close the drawer

Navigator.pop(context);

ListTile(

title: const Text('저장한 레시피'),

trailing: Icon(

Icons.arrow_forward_ios,

color: Colors.black,

onTap: () {

// Update the state of the app

// ...

// Then close the drawer

Navigator.pop(context);

헷갈리는 부분.

child / children에 대한 내용.

A child property if they take a single child—for example, Center or Container
A children property if they take a list of widgets—for example, Row, Column, ListView, or Stack.

Child로 받는 것들은 하나의 속성만 가져올 수 있음

Children으로 받는 것들은 여러개를 가져올 수 있음.

위 예시에서 Children으로 받아온 것.

1. Stack으로 쌓아서 안에 여러개를 넣은 페이지 (Children (Image, Container, Text) (사진, 불투명상자, 텍스트까지))

2. DrawerHeader에서 만든 페이지 (Children (CircleAvatar, Text, Text) (고양이 모양+프로필+주소)

3. PageView로 만든 이벤트 페이지 리스트 (Children (Image.network x4)) (이벤트 페이지 4장)

복습이 필요한 위젯.

PageView (이벤트 페이지 만들기)

ListTile (이벤트 페이지 밑에 구성하는 요소)

AspectRatio (이미지의 화면비율을 맞춰 주는 것)

반려동물 지킴이

티스토리 뷰