인아 코딩해야지?

ㅇㅇ

INICO — Sun, 1 Sep 2024 20:23:05 +0900

Sub main()

    Dim mainWorkbook As Workbook: Set mainWorkbook = Workbooks("해시 계산.xlsm")
    Dim mainSheet As Worksheet: Set mainSheet = Worksheets("main")

    Dim dataSheet As Worksheet: Set dataSheet = Worksheets("data")

    mainSheet.Activate

    Dim readTargetCol As String: readTargetCol = mainSheet.Range("B2").value

    Dim readTargetRow As Integer: readTargetRow = mainSheet.Range("B3").value

    Dim totalDataCnt As Integer: totalDataCnt = mainSheet.Range("B4").value

    Dim resultTargetCol As String: resultTargetCol = mainSheet.Range("B5").value

    Dim tmp As String

    Dim result As String

    Dim resultTargetStart As Integer: resultTargetStart = mainSheet.Range("B6").value

    dataSheet.Activate

    For i = readTargetRow To totalDataCnt + readTargetRow - 1

        Dim value As String: value = "'" & dataSheet.Range(readTargetCol & i).value

        If value = "'" Then
            GoTo CONTINUE1
        End If

        Dim emailList() As String: emailList = Split(value, ";")

        For k = 0 To UBound(emailList)

            tmp = emailList(k)

            tmp = Split(tmp, "<")(1)
            tmp = Split(tmp, ">")(0)

            result = result & tmp & vbCrLf

        Next

        dataSheet.Range(resultTargetCol & resultTargetStart).value = result

CONTINUE1:
        resultTargetStart = resultTargetStart + 1
        result = ""
        tmp = ""


    Next


End Sub

Docker commit과 push

INICO — Thu, 28 Sep 2023 15:31:46 +0900

1. Docker hub repository 생성

아래의 링크로 이동해서, 로그인을 해 둔다

만약 아이디가 없을 경우 회원가입을 한 뒤에 로그인을 하도록 하자

https://hub.docker.com/

Docker Hub Container Image Library | App Containerization

Deliver your business through Docker Hub Package and publish apps and plugins as containers in Docker Hub for easy download and deployment by millions of Docker users worldwide.

hub.docker.com

중간 메뉴에 Repositories를 클릭해서 이동한 뒤 Create repository를 클릭하도록 하자

아래와 같은 화면이 뜬다면 이메일 인증을 해야할 필요가 있다

아래는 create repository누른뒤 화면이다

Repository Name에 내가 원하는 저장소이름을 설정하고 Create버튼을 눌러주도록 한다

이렇게 Repository를 생성한다

그런다음에 docker desktop도 같이 로그인해줘야 한다

2. Docker commit

Docker commit이란 내가 가지고 있는 Image의 변경사항을 새로 Commit을 해서 push 하기 전을 뜻한다

Github의 commit과 거의 비슷하다고 보면 된다

명령어는 아래와 같다

docker commit <Container ID> <docker hub NAME>/<repository NAME>:<version>

docker hub NAME에는 docker hub의 자기 아이디를 넣어주고

repository NAME에는 저장소이름을 넣어주도록 하면 된다

version은 원하는대로 적으면 된다. 마지막 버전으로 하려면 latest를 써주도록 한다

3. Docker Push

docker push는 commit한 이미지를 그대로 저장소에 올리는 작업이다

명령어는 아래와 같다

docker push <docker hub NAME>/<repository NAME>:<version>

commit 했을때 똑같은 버전으로 push 해주면 된다

4. Docker hub확인

push가 끝났으니 이제 docker hub에서 제대로 업로드가 됐는지 확인을 해보자

위와 같이 이미지가 잘 올라가 있는 것을 확인할 수 있다

Docker 볼륨(Volume) 연결하기

INICO — Wed, 27 Sep 2023 15:07:22 +0900

1. Docker Volume이란

Volume은 컨테이너 안의 파일내부를 뜻한다 (저장, 삭제, 수정 등을 할 수 있는 곳)

만약에 도커 내부의 파일을 수정하고 싶을때, exec나 attach로 컨테이너 안으로 접근해서 파일을 찾아서 수정까지 하기가 너무 귀찮을 것이다.

그렇기 때문에 로컬컴퓨터의 폴더와 도커의 컨테이너 안의 폴더를 연결시켜 준다 (바로가기 같은 느낌)

그래서 로컬컴퓨터에서 파일을 수정하면 컨테이너의 그 해당하는 파일도 같이 수정하게끔 된다

이렇게 설명하면 이해가 안갈 수 있으니 바로 실습을 한다

2. Docker Volume사용

기본 명령어는 아래와 같다

docker run -d -v <로컬컴퓨터 경로>:<컨테이너내부> <image name>

3. 확인하기

Container가 생성되고 실행된 것을 확인할 수 있다

그리고 로컬에서 파일을 생성하고 도커 내부에 접근해서 실제로 생성되는지를 확인해 보도록 하겠다

로컬에서 파일 생성

아래의 코드로 컨테이너 내부로 접근

docker exec -it <Container ID> bash

볼륨을 연결한 폴더로 경로 이동한 후 폴더가 뭐가 있는지 확인해 본다

로컬에서 생성한 파일이 컨테이너 내부에도 생성되어 있는 것을 확인할 수 있다

Docker 실행중인 Container 내부로 접근하기

INICO — Tue, 26 Sep 2023 14:25:37 +0900

1. docker run -dit <image> bash

-d는 백그라운드이지만, -it는 뭘까라고 생각할 수도 있다

it 이것은 인터렉션 모드라고 하고, 쉘로 접근이 가능하도록 한다

일단 기본 명령어로 우분투를 실행해 보겠다

docker run -d ubuntu

※ Image를 따로 받지않고도 다운로드하으면서 실행이 가능하다 docker hub에 ubuntu가 있기 때문에 자동으로 받아서 실행시켜 준다

아래의 명령어로 확인을 해보면

docker ps

실행 중인 컨테이너가 아무것도 없다

그 이유는 컨테이너 안에 실행 중인 게 아무것도 없으면 자동으로 종료되게끔 되어있기 때문이다

tomcat이나 nginx 같은 서버는 계속 돌아가기 때문에 컨테이너가 종료되지 않지만, ubuntu라는 그냥 os이기 때문에 실행 중인 것이 아무것도 없어서 바로 종료되는 것이다

자 그럼 아래의 명령어로 다시 실행시켜 보도록 한다

docker run -dit ubuntu bash

위의 명령어로 실행을 시켜보았더니, 제대로 실행되어 있는 것을 확인할 수가 있다

2. docker attach <Container ID>

실행 중인 컨테이너에 접근하는 방법이다

docker attach <Container ID>

위와 같이 명령어를 입력했더니, 접근이 가능하게 되었다

3. docker exec -id <Container ID> bash

이 명령어도 컨테이너에 접근하는 명령어이다

docker exec -id <Container ID> bash

이렇게 잘 접근하는 것을 확인할 수가 있다

4. exec와 attach의 차이

exec

실행 중인 컨테이너 내부에 접근하고, exit로 빠져나왔을 때 컨테이너가 종료되지 않는다

attach

실행중인 컨테이너 내부에 접근하고, exit로 빠져나왔을때 컨테이너가 종료되는 경우가 있다

위와 같은 차이라서 만약 서버가 돌아가고 있는 컨테이너라면 exec를 사용하도록 한다

Docker 포트포워딩 하기

INICO — Mon, 25 Sep 2023 13:53:19 +0900

1. 포트포워딩이란

docker에서 포트포워딩이란 포트를 연결시키는 것이다

우리 컴퓨터에서는 host가 있고 도커의 컨테이너가 있다

이 둘은 IP주소가 다르기때문에 port를 8080이라 해도 localhost가 아니기 때문에 localhost에 8080으로 접근을 했을 때

컨테이너로는 접근할 수가 없다

그렇기 때문에 서로 연결시켜주도록 해야 한다

2. 포트포워딩 하기

docker run이라는 명령어를 사용하면서 옵션으로 추가로 입력해야 한다

docker run -p <로컬의 포트>:<컨테이너의 포트> <image name>

일단 예시를 위해 아래의 명령어로 image를 다운로드하겠다

docker pull nginx

그리고 다운로드한 image를 실행시켜 본다

docker run -p 8080:80 nginx

혹시 방화벽 뭐라 뭐라 팝업창이 나오면 액세스 허용을 눌러주자

그런 다음 localhost:8080으로 들어가 보면 컨테이너에 nginx 80으로 연결시켜주면서 제대로 화면에 표시되는 것을 확인할 수가 있다

Docker 기본 명령어

INICO — Fri, 22 Sep 2023 13:39:11 +0900

1. Docker ps (실행 중인 컨테이너 확인)

Docker ps는 현재 실행중인 Container를 확인하는 명령어이다

일단 간단하게 image를 다운로드하여서 실행시켜 보도록 한다

CMD창에서 아래와 같이 명령어를 입력

docker pull nginx

그런 다음은 docker desktop에서 image를 실행시켜보도록 한다

그런 다음 다시 CMD창에서 아래와 같이 명령어를 입력해 본다

docker ps

이렇게 실행 중인 컨테이너를 확인할 수 있다

2. docker stop (실행 중인 컨테이너 정지)

docker stop은 실행중인 Container를 정지시키는 명령어이다

사용법은 아래와 같다

docker stop <Container ID>

방금 실행시킨 nginx의 CONTAINER ID는 9b4d066b8722이기 때문에 아래와 같이 입력해 보았다

docker stop 9b4d066b8722

그런 다음 docker ps를 이용해서 확인해 보도록 한다

확인해 보니 실행 중인 컨테이너가 없다는 것을 알 수가 있다

3. docker rm (컨테이너 삭제)

docker rm은 컨테이너를 삭제하는 기능이다.

사용법은 아래와 같다

docker rm <Container ID>

방금 docker stop으로 컨테이너를 정지시켰기 때문에, docker ps로 container ID를 확인할 수가 없다

그렇기 때문에 아래와 같이 입력한다

docker ps -a

-a 를 추가해서 입력하면 정지된 컨테이너까지 확인할 수가 있다

그리고 삭제를 한번 해보자

docker rm 9b4d066b8722

삭제를 한 뒤에 docker ps -a를 해보면 컨터이너가 사라진 것을 알 수 있다

4. docker images (이미지 확인)

docker images란 내가 가지고 있는 이미지들을 확인하는 명령어이다

docker images

5. docker run (이미지 실행)

docker run은 내가 가지고 있는 이미지를 실행시키는 명령어이다

docker run <image name>

위와 같이 컨테이너가 실행이 되었다

하지만 맨 밑을 보면 다른 작업을 할 수 없다는 것을 확인할 수가 있다

그렇기 때문에 백그라운드로 실행을 시켜줘야 한다

docker run -d <image name>

-d 를 추가시키면 백그라운드로 실행시킬 수 있다

6. docker rmi (이미지 삭제하기)

docker rmi는 이미지를 삭제하는 것이다 docker rm과 docker rmi이 닮았으니 주의하도록 한다

docker rmi <image name>

이렇게 하면 삭제가 될 텐데 혹시나 아래와 같은 에러가 발생하였다면

이미지의 컨테이너가 있기 때문에 삭제를 못하는 것이다

컨테이너까지 다 삭제를 하고 다시 이미지를 삭제를 하면 잘 될 것이다

Docker pull (Docker 이미지 다운 받기)

INICO — Thu, 21 Sep 2023 13:11:32 +0900

1. Docker pull

Docker pull이란 Docker hub라는 여러 사람들이 만든 image나 공식으로 tomcat환경, nginx환경, python환경, java환경등이 미리 세팅되어 있는 image를 내 컴퓨터에 내려받는 것이다

2. 사용법

CMD화면에서 docker pull <내려받고싶은 image 이름이나 ID>를 입력한다

예를 들어서 아래와 같이 입력 해 보도록 한다

docker pull nginx

그럼 위와 같이 다운로드가 되는 것을 확인할 수가 있다

3. Image확인

다운로드가 완료 되었으면 docker desktop을 이용해 제대로 다운로드하였는지 확인해 본다

이렇게 위와같이 nginx가 잘 다운로드한 것을 확인해 볼 수가 있다

4. docker hub 보기

아래는 Docker hub 사이트에 들어와서 nginx를 검색한 화면이다

빨간색 네모가 Image의 이름이다

docker pull nginxinc/nginx-unprivileged

이런식으로 이미지 이름을 넣어주면 된다

5. tag

docker hub에 이미지를 등록할 때 tag도 입력하는 경우가 있는데, latest가 마지막 버전이라고 생각하면 된다

다른 버전의 이미지를 다운로드 받고 싶을 땐 아래와 같이 입력하면 된다

docker pull <image name>:<tag name>

Docker image와 container

INICO — Mon, 18 Sep 2023 23:15:18 +0900

1. Image란

Docker에서 이미지라는 것은 아직 실행되지 않은 가상환경이라고 보면 될 것 같다

Docker desktop에서 Images를 확인해 보면, 위와 같이 이미지들이 있는 것이다

※아직 실행되지 않았음

2. Container

컨테이너란 실행된 이미지를 컨테이너라고 한다

nginx를 재생버튼을 눌러보도록 해보겠다

위와 같이 Containers를 확인해 보면 nginx가 실행 중인 것을 확인할 수 있다

Docker 다운로드 & 설치 하는 법

INICO — Mon, 18 Sep 2023 11:36:34 +0900

1. Docker 링크 이동

설치를 하기 위에서 아래의 링크를 타준다

https://www.docker.com/

Docker: Accelerated Container Application Development

Docker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.

www.docker.com

2. 다운로드

OS가 Windows인 경우 Download for Windows 클릭한다.

다운로드가 완료되면, 다운로드 폴더 안에 Docker Desktop installer가 다운로드되어있는 것을 확인할 수 있다

3. Docker 설치하기

다운받은 Docker Desktop installer를 실행시켜보자

팝업창이 뜬다면 "예"를 클릭하도록 한다

첫 번째는 WSL2를 사용할 거냐 안 할 거냐 물어보는 거고

두 번째는 Docker desktop을 추가할 거냐 안 할 거냐 물어보는 것인 듯하다

둘 다 좋아 보이니 OK 클릭하도록 한다

4. 완료 및 확인

아래와 같이 나온다면 완료된 것이다

바탕화면에 Docker Desktop아이콘을 클릭해서 실행시켜보도록 한다

Accept를 클릭한다

이런 화면이 나온다면 과감하게 Skip 하도록 하

혹시나 아래와 같은 에러가 발생했다면

power shell를 관리자로 실행시켜준다

아래의 커멘드를 입력한다. 그런 뒤에 다시 Docker desktop를 실행해 보면 해결돼있을 거라고 믿고 있다

wsl --update

Flutter 화면이동시 데이터 전달 Navigator.pushNamed, arguments

INICO — Fri, 15 Sep 2023 08:40:00 +0900

어플화면에서 상품목록들이 나열되어 있을 때 상품리스트 중 하나를 클릭하면 상세화면으로 넘어가게 된다

그때, 해당하는 상품정보를 상세화면으로 이동하면서 데이터를 전달해 주게끔 하는 것을 해보겠다.

1. Route 만들기

일단 페이지가 2개이상 필요하기 때문에, 만들어야 한다.

일단 아래의 링크를 타고 라우터와 페이지 2개를 준비하도록 한다.

https://initstory.tistory.com/121

Flutter Route 사용하기

Flutter에도 Route가 있다니 참 놀랍다 React나 Vue 같은 웹프로그래밍에서만 써봤는데, Flutter에도 있으니 바로 써보도록 하겠다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'package:flutter_pra

initstory.tistory.com

2. 코드 수정하기

1. 의 링크에서 코드를 다준비했다면, 코드를 쪼금 수정해야 한다.

왜냐하면 데이터를 전달을 해야 하기 때문이다

practice_page.dart

Navigator.pushNamed(
  context,
  "/sub_practice",
  arguments: "Hello World!!!",
);

Navigator.pushNamed안에 arguments를 하나 추가했다.

그리고 값은 Hello world!!! 문자열로 설정해 준다

sub_practice_page.dart

final arguments = ModalRoute.of(context)!.settings.arguments;

위의 코드로 부른쪽에서의 데이터를 받아 왔고

"Pop--data:${arguments}",

"Pop" ⇒ "Pop--data:${arguments}" 화면단에 Text의 값을 변경해 주었다.

3. 결과

3-1. 첫 화면

3-2. PracticePage 버튼 클릭 시

이렇게 데이터가 넘어간 것을 확인할 수가 있다.

문자열로 간단하게 보여줬지만, 객체도 가능하니 참고하면 좋을 듯하다

Flutter 새로고침 동작하기 RefreshIndicator

INICO — Thu, 14 Sep 2023 15:20:00 +0900

우리가 스마트폰을 사용할 때, 스크롤을 밑으로 쫙 내리면 상단 부분에 새로고침이 표시되는 것을 확인할 수 있다

이번에는 그걸 한번 해보겠다.

1. 기본 코드

일단 기본코드 main.dart와 연습용 practice_page.dart를 준비한다.

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Future _onRefresh() async {
      await Future.delayed(Duration(milliseconds: 1000));
    }

    return RefreshIndicator(
      onRefresh: _onRefresh,
      child: ListView.builder(
        itemBuilder: (context, index) => Image.asset("assets/flutter.png"),
      ),
    );
  }
}

2. 코드 포인트

일단 딜레이 시간을 주게 하는 _onRefresh 함수를 선언한 뒤, async {} 를 사용한다.

async는 비동기 통신에 자주 쓰이는 걸로 알고 잇다 (javaScript에서)

그리고 위젯 RefreshIndicator에서 아들래미로 onRefresh를 넣어주고 _onRefresh로 값을 넣어주면 된다

3. 결과

스크롤을 쫙 내리다 보면, 상단에 동글동글 돌아가는 것을 볼 수가 있다.

이렇게 실제 백에다가 데이터를 요청하고 받을때 사용하면 좋을 거 같다

Flutter 다양한 스크롤 제공하기 CustomScrollView

INICO — Tue, 12 Sep 2023 20:45:55 +0900

CustomScrollView라는 단어만 봐도 뭔가 커스텀이 가능한 스크롤이 있는 화면같은 느낌이다

CustomScrollView는 보통 Sliver라는 단어가 들어가는 위젯과 함께 쓰는 듯 하니 한번 해보겠다

1. 코드 생김새

위의 코드를 보면, 우선 CustomScrollView가 제일 엄마이고, 그안에 slivers라는 배열을 선언한 것을 볼 수 있다

slivers 배열안에는 SliverGrid가 있는 것을 볼 수가 있는데, SliverGrid이외에 Sliver****라는 위젯을 사용할 수가 있다

우선 문법으로는 위와같이 사용하면 된다.

2. 전체 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<String> imageList = [
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
    ];

    return CustomScrollView(
      slivers: [
        SliverGrid(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Image.asset(
                imageList[index],
                fit: BoxFit.cover,
              );
            },
            childCount: imageList.length,
          ),
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200,
              mainAxisExtent: 200,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 1),
        ),
      ],
    );
  }
}

SliverGrid를 사용했을때,

delegate는 SliverChildBuilderDelegate를 보통 사용하는 것 같다

gridDelegate는 SliverGridDelegateWithMaxCrossAxisExtent를 보통 사용하는 것 같다

SliverGridDelegateWithMaxCrossAxisExtent: 그리드 뷰에 들어올 하나의 항목에 최대 크기를 지정하고 이 값에 따라 교차 축의 범위를 균등하게 나눈다

maxCrossAxisExtent: 가로 사이즈인듯 하다

mainAxisExtent: 세로 사이즈인듯하다

crossAxisSpacing: 가로 양쪽 패딩?,

mainAxisSpacing: 세로 위아래 패딩?,

childAspectRatio: Grid의 Gap인듯 하다

3. 결과를 확인 해보자

위와 같은 결과가 나왔는데, 스크롤도 내릴 수 있다.

CustomScrollView가 무슨효과가 있는지 아직 확인할 수 없지만,,, 하나씩 알아가는게 우리사이 아니겠나

Flutter 리스트 출력하기 (List.generate 사용법)

INICO — Tue, 7 Mar 2023 08:50:21 +0900

항상 어딘가를 가면 List가 존재한다. 피할 수도 없다

List를 만드는 방법은 하나씩 하나씩 넣으면 된다. 하지만, 누군가가 만든 List를 쓰고 싶을 때는 어떻게 해야 할까?

그렇다 받은 List만큼 반복해서 출력하면 된다

그때 List.generate를 사용하면 된다. 약간 gridView.builder도 반복문을 돌렸지만 약간 다르다. 구분 지어 나열하냐 안 하냐 차이인 듯하다

List.generate: 빠꾸 없이 밑으로 반복

gridView.builder: 옆으로 몇 개씩 나열하면서 밑으로 반복

이제 시작해 보도록 하겠다

1. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/sreen/index_screen1.dart';
import 'package:flutter_practice/sreen/index_screen2.dart';
import 'package:flutter_practice/sreen/index_screen3.dart';

class PracticePage extends StatefulWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  State<PracticePage> createState() => _PracticePageState();
}

class _PracticePageState extends State<PracticePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [],
      ),
    );
  }
}

List가 얼마나 있을지 모르니, 화면을 넘쳐흐르는 것을 방지하기 위해 ListView를 사용했다

2. List생성

일단 실습할 재료를 하나 생성하도록 한다. DB에서 받아 왔다고 생각하면 될 것이다

하지만 DB는 없는 관계로 코드를 하나 작성하자

List<String> list = [
    '1번 리스트 입니다. 감사합니다',
    '2번 리스트 입니다. 감사합니다',
    '3번 리스트 입니다. 감사합니다',
    '4번 리스트 입니다. 감사합니다',
    '5번 리스트 입니다. 감사합니다',
    '6번 리스트 입니다. 감사합니다',
    '7번 리스트 입니다. 감사합니다',
    '8번 리스트 입니다. 감사합니다',
    '9번 리스트 입니다. 감사합니다',
    '10번 리스트 입니다. 감사합니다',
    '11번 리스트 입니다. 감사합니다',
    '12번 리스트 입니다. 감사합니다',
    '13번 리스트 입니다. 감사합니다',
    '14번 리스트 입니다. 감사합니다',
    '15번 리스트 입니다. 감사합니다',
    '16번 리스트 입니다. 감사합니다',
    '17번 리스트 입니다. 감사합니다',
    '18번 리스트 입니다. 감사합니다',
    '19번 리스트 입니다. 감사합니다',
    '20번 리스트 입니다. 감사합니다',
    '21번 리스트 입니다. 감사합니다',
    '22번 리스트 입니다. 감사합니다',
    '23번 리스트 입니다. 감사합니다',
    '24번 리스트 입니다. 감사합니다',
    '25번 리스트 입니다. 감사합니다',
    '26번 리스트 입니다. 감사합니다',
    '27번 리스트 입니다. 감사합니다',
    '28번 리스트 입니다. 감사합니다',
    '29번 리스트 입니다. 감사합니다',
    '30번 리스트 입니다. 감사합니다',
    '31번 리스트 입니다. 감사합니다',
  ];

대충 이 정도 DB에서 받아 왔다고 가정하도록 한다. 그리고 우리는 리스트를 몇 개 인지도 모를 것이다

이렇게 재료를 준비해 놓도록 하자

3. List.generate

드디어 반복문을 돌리는 것을 사용하겠다

children: List.generate(
  list.length,
  (index) => Text(list[index]),
),

children에 [ ] ⇐ 이 대갈호를 지우고 List.generate를 넣어줬다. 그 이유는 List.generate가 List 타입이기 때문에 대체할 수 있는 것이다

generate에는 첫 번째 인수가 List의 개수를 뜻한다

두번째 인수는 index가 돌아갈 때 Widget이 리턴되면서 요소들을 만들어 주는 것이다 (이때를 반복문이라고 보면 될 듯하다)

4. 결과

짜잔

이렇게 결과가 잘 나왔다. 물론 ListView를 사용했기 때문에 얼마든지 List가 늘어나도 스크롤이 가능해지면서 밑에까지 다 볼 수 있을 것이다

Flutter ListTitle 사용법 (feat.Divider)

INICO — Mon, 6 Mar 2023 08:50:46 +0900

ListTitle이란 ListView와 자주 쓰이며 제목과 부제목을 가진 리스트 중 하나를 생각하면 된다

예를 들면 카톡 친구목록에서 이름과 대화명이 있다.

거기에 이름이 조금더 크고 대화명이 조금 더 작다 그렇게 하나의 묶음을 편하게 쓸 수 있도록 한 것이 ListTitle이다

이름은 title이라 하고 대화명은 subTitle이라고 생각하면 편하다

추가해서 leading이라는 옵션도 있는데 AppBar에서 처럼 로고를 넣듯이 ListTitle에는 프로필 사진을 생각하면 된다

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/sreen/index_screen1.dart';
import 'package:flutter_practice/sreen/index_screen2.dart';
import 'package:flutter_practice/sreen/index_screen3.dart';

class PracticePage extends StatefulWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  State<PracticePage> createState() => _PracticePageState();
}

class _PracticePageState extends State<PracticePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [],
      ),
    );
  }
}

ListTitle은 ListView와 자주 쓰이기때문에 이렇게 기본코드로 해놨다

2. ListTitle

ListTitle을 사용해볼 차례다. 일단 메신저 친구목록처럼 한번 만들어 보자

2-1. leading

우선 프로필을 만들어 보겠다. 메신저의 친구목록은 맨왼쪽에 둥근 원의 프로필사진이 있다

ListTile(
  leading: CircleAvatar(
    backgroundImage: AssetImage("assets/flutter.png"),
  ),
)

leading에 둥근 이미지를 사용하기 위하여 CircleAvatar를 사용하였고 그 안에 백그라운드 이미지를 넣어 주었다

위의 코드를 실행해보면 아래와 같다

왼쪽에 작은 둥근 이미지가 생긴 것을 확인할 수 있다

2-2. title

이번에는 닉네임을 작성해 볼 차례다. 닉네임은 보통 둥근 프로필사진의 오른쪽에 놓여 있다

딱히 스타일을 건들 필요 없이 간단하게 작성하면 된다

title 하나만 추가하면 된다

2-3. subTitle

그리고 메신저에는 대화명도 있었다. 그 대화명은 이름바로 밑에 있는데, 그걸 한번 만들어 보려고 한다

스타일은 여전히 안만지고 간단하게 할 수 있다

딱 한줄만 넣어주면 된다. 그리고 실행을 시켜보면 아래와 같이 나온다

이렇게 메신저의 프로필 사진과 이름, 대화명을 구현할 수 있었다

3. Divider

여기까지 만들었는데 뭔가 허전하다. 만약 이 코드를 몇 번 더 작성해서 5개의 리스트를 만들었지만 위아래가 구분이 안 갈 것이다

예를 들면 아래와 같이 말이다

그렇기 때문에 살짝 선을 그어줘야 친구관계가 성립이 된다

선을 그을려면 Divider라는 것을 사용하면 된다 HTML에서는 hr같은 느낌이다

선도한 줄만 넣어주면 된다

아래를 잘보면 선이 그어져 있는 것을 확인할 수 있다

Flutter 하단 네비게이션 바 만들기 (BottomNavigationBar)

INICO — Fri, 3 Mar 2023 08:50:22 +0900

우리가 스마트폰으로 어플을 사용하다 보면 항상 정해진 느낌이 있다

상단에는 Appbar가 있고 메뉴버튼이나 로고 등이 있고

하단에는 NavigationBar가 있고 홈버튼 프로필보기 버튼 등이 있다

AppBar는 한번 만든적이 있으니 이번에는 Bottom에 3개의 메뉴가 있는 NavigationBar를 만들어 볼 것이다

1. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart (실행이 될 때 맨 처음 화면)

import 'package:flutter/material.dart';

class PracticePage extends StatefulWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  State<PracticePage> createState() => _PracticePageState();
}

class _PracticePageState extends State<PracticePage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

내비게이션의 상태가 변화를 하기 때문에 StatefutWidget을 사용한다

☟내비게이션변화에 따른 화면들 (3개 화면)

index_sreen1.dart

import 'package:flutter/material.dart';

class IndexScreen1 extends StatelessWidget {
  const IndexScreen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("IndexScreen1"),
    );
  }
}

index_sreen2.dart

import 'package:flutter/material.dart';

class IndexScreen2 extends StatelessWidget {
  const IndexScreen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("IndexScreen2"),
    );
  }
}

index_sreen3.dart

import 'package:flutter/material.dart';

class IndexScreen3 extends StatelessWidget {
  const IndexScreen3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("IndexScreen3"),
    );
  }
}

2. IndexedStack

우선 인덱스를 정의하고, 어떤 화면을 사용할 것인지 결정한다

practice_page.dart

int _selectedIndex = 0;

return Scaffold(
  body: IndexedStack(
    index: _selectedIndex,
    children: [
      // index_screen1
      IndexScreen1(),
      // index_screen2
      IndexScreen2(),
      // index_screen3
      IndexScreen3(),
    ],
  ),
);

네비게이션의 선택했을 때, index가 필요하다 3개의 메뉴가 있다고 가정하면 처음이 0, 두 번째가 1, 세 번째가 2이라 한다

현재 화면에서 세 번째 메뉴를 클릭했을 때, 2에 매칭이 되는 화면으로 바로 전환이 되게끔 한다

children에 안의 요소는 3개의 화면의 정보를 넣어주었다

3. ButtonNavigationBar

드디어 하단 네이게이션바를 만들 수 있다.

practice_page.dart

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "home"),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: "search"),
    BottomNavigationBarItem(icon: Icon(Icons.people), label: "my"),
  ],
),

currentIndex는 현재 index를 뜻한다. 맨 초기값은 0으로 설정해 놨었다

onTap은 버튼을 클릭하였을 때 실행되는 함수이다

함수 안에 setState로 index값을 내비게이션에서 선택한 메뉴의 인덱스값으로 변경한다

items는 내비게이션바안의 메뉴들을 뜻한다

이 상태로 바로 실행을 해보도록 하겠다

초기는 index값이 0이기 때문에 0에 매칭이 되는 index_screen1.dart화면을 보여주게 된다

다른 메뉴도 한번 선택해 보겠다

search를 눌렀을 때 setState함수가 실행되면서 index값이 변경되고, indexStack에 있는 화면중 같은 index인 화면을 에뮬레이터에 뿌려준다

Flutter Wrap 사용법

INICO — Fri, 3 Mar 2023 08:50:19 +0900

Flutter Wrap위젯은 이미지나 Container 같은 위젯들을 가로로 여러 장을 나열했을 때, 화면을 넘어 Overflow가 되는 경우가 있다

이때, Overflow가 되는 위젯을 아래로 배치해주는 것이 Wrap위젯이다

그럼 한번 사용해 볼까

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          children: [
            Image.asset("assets/flutter.png", width: 200),
            SizedBox(width: 10),
            Image.asset("assets/flutter.png", width: 200),
            SizedBox(width: 10),
            Image.asset("assets/flutter.png", width: 200),
          ],
        ),
      ),
    );
  }
}

Row를 사용해서 이미지를 3장 넣어 보았더니, 화면을 넘어가서 오른쪽에 호랑이무늬가 생겼다

우리는 이제 이걸 해결해야한다

2. Wrap

이때 사용하는 것이 Wrap이다. 어디 한번 써보도록 해보자

Column부분을 Wrap으로 바꿔주기만 하면 된다.

그리고 한번 실행시켜보자

호랑이가 사라지고 아래로 이동하게 되었다

근데 이미지를 보니 두 개 정도 들어갈 수 있을 거 같은데?라고 생각이 들었다

그래서 코드를 조금 수정해 보았다

맨 첫 번째 이미지만 가로 사이즈를 100으로 설정해 봤다

역시, 컴퓨터는 거짓말을 하지 않아

Flutter 최대, 최소 사이즈 정하기 (BoxConstraints)

INICO — Thu, 2 Mar 2023 08:50:58 +0900

요즘 웹 같은 경우는, 웬만하면 다 반응형이다. 화면 넓이가 크거나 작거나 디자인이 깨지지 않는 게 트렌디하기 때문이다.

반응형을 만들 때, 어려운 점이 가로로 사진들이 배치되어 있는데 화면 가로 사이즈가 줄어들 때 사진도 같이 줄어들어서 촌스럽게 변하는 경우가 있다

이때는 슬라이더로 처리하거나 minWidth나 minHeight같이 최소 사이즈를 정해서 대처를 한다

이번시간에는 Flutter에서 사이즈를 정하는 것을 해보겠다

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 1),
          child: Container(
            color: Colors.red,
            child: Image.asset(
              "assets/flutter.png",
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

실행시켜 보면 아래와 같다. 반응형 예제를 위해서 웹으로 실행시켰다

는 부모의 Size에 맞는 넓이를 가지는 것인 거 같다

현재는 Container와 Image의 사이즈는 같다. Image는 Container의 넓이를 따라간다

2. maxWidth

최대 사이즈를 설정해 보려고 한다

constraints: BoxConstraints(
  maxWidth: 500,
),

최대 사이즈를 설정할 때는 constraints: BoxConstraints를 사용하여 maxWidth를 주면 된다

결과는 변화가 없다. 이미지가 maxWidth보다 크지 않아서 확인할 수가 없었다

대신 Cotainer크기를 늘려보도록 하겠다.

확실한 결과를 보기 위해서 Container크기를 5000으로 해놨다

무조건 화면을 넘어갈 정도로 큰 사이즈이다

하지만 이건 틀렸습니다

위와 같이 width사이즈를 500으로 맞춰준다. 이렇게 최대사이즈를 제어할 수 있다

3. maxHeight

height사이즈도 마찬가지로 똑같을 것이다

이렇게 Container에 height 5000 넣어 주고 constraints > maxHeight 500을 넣고 실행해 보았다

이렇게 사이즈를 잘 제어하는 것을 배웠다

4. maxWidth와 maxHeight를 지운다면??

maxWidth와 maxHeight를 지워보고 다시 실행시켜 보았다

화면을 넘어가서 보이는 화면은 그레이색상으로 될 줄 알았던 예상과는 다르게 화면 최대 사이즈에 딱 맞게 들어간다

신기했다

BoxConstraints를 사용하여 maxWidth와 maxHeight를 사용해 보았다

반대로 minWidth와 minHeight도 있다. 하지만 굳이 하지 않겠다 maxWidth와 maxHeight의 반대이기 때문에 충분히 이해했을 거라고 생각한다

Flutter Chrome 브라우저(Web)로 실행시키는 법

INICO — Wed, 1 Mar 2023 08:53:10 +0900

플러터는 너무 좋은 거 같다. Android와 IOS를 동시에 개발이 가능하면서 Web도 동시에 개발이 가능하기 때문에,

직원을 3명 고용해서 개발해야 할 것을 한 명으로 개발을 할 수 있도록 했다

지금까지 Flutter를 실행 시켰을때 Android Studio의 에뮬레이터를 사용했는데, 웹으로도 실행시키는 방법이 있었다

1. Web으로 실행시키기

정말 간단하다. 아래와 같이 하면 끝이다

정말 이게 끝이다

2. 실행 결과

결과는 아래와 같다

Web으로 보면서 하면 화면 비율이나 등등을 좀 더 확인할 수 있고 개발이 쉬워질 거 같다

Flutter 팝업창 (Dialog) 띄우기 (feat.IOS 스타일)

INICO — Tue, 28 Feb 2023 08:50:22 +0900

웹이나 앱이나 언제나 등장하는 것이 팝업창이다. 팝업창을 (Dialog라고 한다)

예를 들면 에러를 표시할 때나, 아니면 [뭐뭐뭐 하시겠습니까?]와 같이 물어볼 때 Dialog를 띄운다

Flutter에서도 한번 Dialog를 표시해보자

1. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text(
            "Dlalog 표시하기!!",
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }
}

간단하게 버튼을 하나 만들었다. 여기서 버튼을 클릭했을 때, onPressed라는 함수가 동작을 하게 될 텐데

동작할 때, Dialog를 표시하도록 하면 된다

기본 코드 실행 화면

2. showCupertinoDialog

showCupertinoDialog는 IOS형태의 팝업창이다. 흔히 Iphone에서 자주 볼 수 있는데, 나는 Iphone을 쓰기 때문에 아주 익숙한 디자인이다

practice_page.dart

showCupertinoDialog(
  context: context,
  builder: (context) => CupertinoAlertDialog(
    title: Text("Dialog 표시하기 성공!"),
    actions: [
      CupertinoDialogAction(
        child: Text("확인"),
        onPressed: () {},
      )
    ],
  ),
);

onPressed 안에 아래의 코드를 삽입하였다

Dialog도 결국에는 화면을 화면으로 씌우는 거라고 생각하면 된다

context: context는 필수로 들어간다. 어떤 위젯인지 알려주는 거 같다

title을 팝업창의 메시지 내용을 뜻한다

actions은 팝업창의 [네, 아니요]나 [확인, 취소] 같은 버튼이 들어갈 곳이다

3. Navigator.pop()

위의 상태에서 확인버튼을 100번 1000번눌러도 꺼지지 않을 것이다.

왜냐하면 CupertionoDialogAction에서 onPressed가 있는데

그 함수에서 아무 처리도 하지 않았기 때문이다. 확인을 눌렀을 때 그게 하는 것을 만들어 보자

화면을 덮어씌운 것을 없앨 때는 Navigator.pop()을 사용하면 된다

onPressed: () {
  Navigator.pop(context);
},

이렇게 사용하면 된다

버튼을 클릭했더니 팝업창이 사라졌다

※혹시 팝업창이 사라지지 않는다면, 프로그램을 정지했다가 재실행하면 동작한다

4. Action 추가

확인버튼 하나만 있으니 조금 외로운 느낌이 들었다. 그래서 하나씩 더 추가해 보도록 하겠다

똑같은 코드를 밑에다가 삽입한 다음, 텍스트만 바꿔보도록 한다

그리고 실행

둘이 있으면 또 셋이 있고 싶기 마련이다. 묻고 하나 더 간다

하나 더 생겼더니 디자인이 새로로 변했다.

※바로 변경이 안되기 때문에, 팝업창을 끄고 다시 버튼을 눌러주자

이렇게 Dialog창을 표시하는 법을 배웠다

Flutter 이미지 위에 문자 표시하기 (Stack & Positioned 사용하기)

INICO — Mon, 27 Feb 2023 08:49:12 +0900

css에서는 position: absolute를 사용해서 이미지 위에 덮어씌우는 느낌 (겹치기)으로 이미지의 위에 문자를 표시하거나 할 수 있다. 그런 기능을 Flutter에서는 Positioned라는 것을 사용하면 된다

위젯 위에 위젯을 올라와 있고 그 위치를 마음대로 조정하는 게 가능하다는 말이다

이제 시작해 보도록 할까

1. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _formatKey = GlobalKey<FormState>();

    return Scaffold(
      body: Stack(),
    );
  }
}

2. Stack

stack이란 두개의 요소가 겹치게 할 수 있도록, 사용하는 위젯이다.

프로그래밍 언어를 배우다보면 stack이라는 말을 자주 들을 수가 있는데, 하나씩 쌓이는 느낌으로 이해하면 될 것 같다

그럼 먼저 이미지로 베이스를 먼저 깔아보자

practice_page.dart

children: [
  Image.asset(
    "assets/flutter.png",
    fit: BoxFit.cover,
    width: double.infinity,
  ),
],

위의 코드를 넣어주었다. Stack위젯 > children안에 이미지를 넣고 가로넓이를 화면에 맞춰주는 코드이다

이대로 실행시켜보면 아래와 같다

3. Positioned

이제 겹쳐지게 할 수 있도록 하는 positioned를 사용해 보겠다

practice_page.dart

Positioned(
  top: 40,
  left: 70,
  child: Container(
    child: Text(
      "Positioned",
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
        fontSize: 30,
      ),
    ),
  ),
),

Positioned를 사용하면 옵션이 있는데, 그중 top, left를 알아보겠다

Positioned를 사용하면 위젯이 이미지에 겹쳐지게 되는데, 그 이미지의 제일 왼쪽 위 모서리를 기준으로 둔다

그 상태에서 top을 사용했을 때 어떠한 수치를 주면 위에서부터 그 수치만큼 아래로 내려간다

left도 왼쪽기준으로 수치를 준만큼 오른쪽으로 이동한다

right, bottom도 있지만 이건 직접 해보시길...

위의 코드를 한번 실행해 보자

이렇게 손쉽게 이미지와 겹치게 할 수 있다.

나중에 배너나, 뭐든 겹치게 하고 싶을 때 Stack과 Positioned를 사용하면 될 것 같다

Flutter Form & TextoFormFiled 사용법

INICO — Fri, 24 Feb 2023 08:50:54 +0900

이번에는 TextoFormFiled를 사용해 보겠다

TextoFormFiled를 사용하면 스타일과 입력체크등을 설정할 수 있다

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(),
      ),
    );
  }
}

2. TextoFormFiled

practice_page.dart

이렇게 만들면 바로 만들어지긴 하다

아래를 보도록 하자

잘 안 보이지만 중간에 파란 줄이 입력란이다

2-1. obscureText

obscureText를 true로 설정하면 비밀번호처럼 된다.

확인했으니 지워주자. 지우면 기본값 false로 설정된

2-3. hintText

decoration: InputDecoration(

),

위의 코드로 인풋박스의 스타일을 변경시킬 수 있다

hintText는 placeholder라고 보면 된다. 뭘 적어야 하는지 알려줄 때 사용한다

아래처럼 말이다

2-4. enabledBorder

기본 TextFormField의 디자인을 설정 한다.

enabledBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(30),
),

변화가 생겼다고 생각한다. 혹시 변화가 없다면 넘어가자. 글을 입력을 한 번이라도 했을 경우 입력창이 focus상태라서 그렇다

2-5. focusedBorder

그래서 여기서 바뀌는지 확인해 보자.

focusedBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(20),
),

위의 코드를 추가하였다. 아래를 확인해 보자

커서가 있는 게 focus상태이다

2-6. errorBorder

errorBorder는 에러가 생겼을 때의 테투리 스타일을 설정할 수 있다

2-6-1. validator

우선 에러조건을 만들어야 한다

validator: (value) => value!.isEmpty ? "입력해줘요" : null,

decoration위에다가 위의 코드를 넣어주도록 한다

입력값이 들어왔을 때, 빈값인지 아닌지 체크한 뒤, 빈값일 경우 [입력해 줘요]를 반환하고 빈값이 아닐 경우 null를 반환한다

2-6-2. Border 작성

이제 errorBorder를 작성해 보자

errorBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(20),
),

위의 코드를 추가하였다. 하지만 지금은 확인할 수가 없기 때문에 5번에서 확인하도록 하겠다

2-7. focusedErrorBorder

focusedErrorBorder는 Error가 발생한 후, 입력란을 터치했을 때(focus상태)의 스타일이다

focusedErrorBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(20),
),

위의 코드를 추가하였다

3. Form

에러를 확인하려면 서브밋(submit)이 필요하다

그래서 Form으로 저기 있는 TextFormField를 감싸줘야 할 필요가 있다

감싸주기 위해서 어느 정도의 수정이 필요하다. 귀찮기 때문에 아래의 코드를 복사해서 사용한다

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(top: 250),
        child: Form(
          child: Column(
            children: [
              TextFormField(
                validator: (value) => value!.isEmpty ? "입력해줘요" : null,
                decoration: InputDecoration(
                  hintText: "아무거나 입력하기",
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  focusedErrorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

대충 바뀐 부분이 빨간색 부분이다

4. 글로벌 Key

글로벌 Key는 Button을 눌러서 서브밋을 보낼 때, Form의 상태 (에러인지 아닌지) 등의 정보를 얻게 하기 위해서 사용한다

final _formatKey = GlobalKey<FormState>();

위의 코드를 작성해주었다

Form내부에 key를 추가해준다. 그럼 연결되었다

5. Button생성

서브밋을 하기 위해서는 Button이 필요하기 때문에 Button을 대충 만들어준다

ElevatedButton(
  onPressed: () {
    if (!_formatKey.currentState!.validate()) {
      print("fail");
    }
  },
  child: Text("Test"),
)

위의 코드를 넣어주었다

버튼을 눌렀을 때, onPressed가 실행이 되면서 formKey로 form상태를 불러와 에러인지 아닌지 확인할 수 있는 코드를 넣었다

6. 실행

실행한 뒤, 아무것도 입력 안 하고 버튼을 눌러보았다

이렇게 에러메시지가 표시된다

이번에는 뭔가를 입력해서 다시 버튼을 눌러보겠다

뭔가를 입력하고 버튼을 눌렀더니 에러메시지가 사라졌다

Flutter Svg Image 사용하기 (SvgPicture)

INICO — Thu, 23 Feb 2023 08:51:45 +0900

Flutter에서 Svg를 사용하는 법을 해보겠다

1. Package 사용하기

우선 플러터 아래의 링크로 간다

https://pub.dev/

Dart packages

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.

pub.dev

그리고 검색창에 flutter_svg를 검색한다

flutter_svg를 클릭한다

복사버튼을 클릭하도록 한다

2. pubspec.yaml에 붙여 넣기

pubspec.yaml 파일에 붙여 넣는다

위치는 dependencies > flutter > 안에다가 붙여 넣는다

※ ^2.0.0+1 가 안된다면 ^1.1.6로 바꿔주도록 하자. 필자는 ^1.1.6이다

반드시 Pug get을 눌러줘야 적용이 잘된다

2. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(),
      ),
    );
  }
}

3. svg파일 준비

아래의 링크에서

https://iconmonstr.com/heart-filled-svg/

Heart - iconmonstr

To use this icon, you must first accept the license agreement.

iconmonstr.com

다운로드하고, 다운로드 한 svg파일을 assets폴더에 넣어줬다

4. SvgPicture.asset

이제 svg파일을 플러터 애뮬레이터에 보여주도록 할 것이다

practice_page.dart

child: SvgPicture.asset(
    "assets/iconmonstr-heart-filled.svg",
    height: 70,
    width: 70,
),

Container안에 위의 코드를 넣었다

그리고 SvgPicture가 자동 import가 안 되는 경우가 있다. 그럴 때는 맨 위에 아래의 코드를 넣어주도록 한다

import 'package:flutter_svg/flutter_svg.dart';

5. 결과

이렇게 flutter_svg 패키지를 이용해서 svg파일을 출력하는 것을 배웠다

Flutter Route 사용하기

INICO — Wed, 22 Feb 2023 08:50:35 +0900

Flutter에도 Route가 있다니 참 놀랍다

React나 Vue 같은 웹프로그래밍에서만 써봤는데, Flutter에도 있으니 바로 써보도록 하겠다

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "PracticePage",
          style: TextStyle(
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

sub_practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

class SubPracticePage extends StatelessWidget {
  const SubPracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "SubPracticePage",
          style: TextStyle(
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

main.dart하나에 페이지 두 개를 준비했다

2. Route

이번에는 Route를 작성해 보자

main.dart

initialRoute: "/practice",
routes: {
    "/practice": (context) => PracticePage(),
    "/sub_practice": (context) => SubPracticePage(),
},

MaterialApp내부에 있는 코드는 지우고 위의 코드를 넣도록 하자

initialRoute는 초기 페이지를 어디로 할지 정하는 것이다

routes안에 있는 페이지로 이동시, 해당하는 페이지를 보여주도록 하게 만들었다

3. Button만들고 Navigator.pushName 사용

practice_page.dart

child: OutlinedButton(
  onPressed: () {
    Navigator.pushNamed(context, "/sub_practice");
  },
  child: Text(
    "PracticePage",
    style: TextStyle(
      color: Colors.red,
    ),
  ),
),

위의 코드를 작성해서 버튼을 만들었다

onPressed를 사용해서 버튼을 눌렀을 때 이벤트를 발생시키도록 한다

클릭 이벤트가 실행 됬을때, Navigator.pushNamed(context, "route경로") 를 해주면

페이지가 이동이 될것이다.

이대로 실행해 볼까

저 버튼을 한번 눌러보겠다

4. Button 만들고 Navigator.pop사용

이제 뒤돌아가는 버튼을 만들어 보겠다. 코드 수정을 해야 한다

sub_partice_page.dart

child: OutlinedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: Text(
    "Pop",
    style: TextStyle(
      color: Colors.green,
    ),
  ),
),

위와 같이 수정을 한다.

그리고 다시 실행

SubPracticePage 클릭을 하면 화면이 이동될 것이다

아래화면을 보자

여기서 다시 Pop을 클릭하면 뒤로 돌아갈 것이다

이렇게 Route를 사용하는 법을 배웠다

PushNamed()와 pop()을 잘 기억하도록 하자

Flutter 이미지 나열하기 (GridView 사용법) feact.(Image.network)

INICO — Tue, 21 Feb 2023 18:19:08 +0900

이번에는 이미지를 나열해 보겠다

이때는 GridView라는 것을 사용해 보도록 한다

1. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
  
  	List<String> imagePath = [
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
      "assets/flutter.png",
    ];
    
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: [],
        ),
      ),
    );
  }
}

우선 사용할 이미지 경로 리스트를 준비한다

2. GridView.builder

GridView안에는 여러 Constructor가 있는데 그중에 builder를 제일 많이 사용한다

일단 아래의 코드를 작성해 보자

practice_page.dart

Expanded(
  child: GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      crossAxisCount: 3,
    ),
    itemCount: 20,
    itemBuilder: (context, index) {
      return Image.asset(imagePath[index], fit: BoxFit.cover);
    },
  ),
),

화면에 이미지들이 많아서 Overflow가 되기 때문에 Expanded을 사용했다

crossAxisSpacing: 가로 Padding

mainAxisSpacing: 새로 Padding

crossAxisCount: 1개의 행에 보여질 이미지 수

itemCount: 표시할 이미지 수 (총 이미지 개수를 넘어가면 안 된다)

itemBuilder: 이미지 개수만큼 반복문 (여기서 Image요소를 생성한다)

3. 결과

이렇게 이미지들이 잘 나열된 것을 확인할 수 있다

4. Image.network

Image.network는 로컬 폴더에 있는 이미지를 가져오는 게 아니라, 실제 웹상에 있는 이미지를 가져올 수 있도록 한 것이다

practice_page.dart

Image.network("https://picsum.photos/id/${index + 1}/200/200");

https://picsum.photos는 무료로 이미지를 받을 수 있는 사이트다

위와 같이 Image.network(URL); 를 해주면 받아 올 수 있다

아래와 같이 결과가 출력된다

Flutter TabBarView와 Expanded 사용하기

INICO — Mon, 20 Feb 2023 08:50:55 +0900

저번시간 TabBar에 이어서 이번에는 TabBarView와 Expanded을 사용해 볼 것이다

저번 시간 코드는 아래의 링크를 참조한다

https://initstory.tistory.com/118

1. practice_page.dart 코드 수정

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: [
            Expanded(child: PracticeTabBar()),
          ],
        ),
      ),
    );
  }
}

2. TabBarView, Expanded

TabBarView는 TabBar를 클릭했을 때, 해당하는 tab에 맞는 화면을 뜻한다

practice_tabbar.dart

Expanded(
  child: TabBarView(
    controller: _tabController,
    children: [
      Container(color: Colors.green),
      Container(color: Colors.red),
    ],
  ),
),

Expanded는 남은 공간을 사용한다는 뜻이다

Expanded안에 TabBarView를 넣어주었다

3. 실행

4. Expanded 상세설명

practice_tabbar.dart

Expanded를 하나 더 추가해 보았다

결과는 빨간색 반, 노란색 반이 되었다

사이즈를 설정을 하지 않아도 남은 공간 반반씩 가져갔다

비율도 설정이 가능하다

flex를 사용해서 비율을 맞춰줄 수 있다

그리고 애뮬레이터화면 보다 사이즈가 더 크게 된다면 스크롤이 생기게 된다

Flutter TabBar만들어 보기

INICO — Fri, 17 Feb 2023 08:50:23 +0900

이번에는 TabBar를 만들어 볼 것이다

TabBar란 무엇이냐면 사진으로 설명하자면 아래와 같다

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            PracticeTabBar(),
          ],
        ),
      ),
    );
  }
}

practice_tabbar.dart

import 'package:flutter/material.dart';

class PracticeTabBar extends StatefulWidget {
  const PracticeTabBar({Key? key}) : super(key: key);

  @override
  State<PracticeTabBar> createState() => _PracticeTabBarState();
}

class _PracticeTabBarState extends State<PracticeTabBar> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

main.dart는 stl로 자동완성으로 생성하고 practice_tabbar.dart는 stf로 자동완성으로 생성했다

2. SingleTickerProviderStateMixin

practice_tabbar.dart

빨간색 부분에 with SingleTickerProviderStateMixin을 추가 작성한다

SingleTickerProviderStateMixin는 한 개의 애니메이션을 가진 위젯을 정의할 때 사용한다.

extends로 State를 상속받고 있다. 그래서 extends은 불가하기 때문에 with을 사용한다

3. initState

practice_tabbar.dart

TabController? _tabController;

@override
void initState() {
  super.initState();
  _tabController = new TabController(length: 2, vsync: this);
}

위의 코드를 넣어주었다

initState는 StatefulWidget 에만 존재하고, 화면을 표시할 때 딱 한 번만 실행되는 함수이다.

vsync는 화면의 상태가 변경될 때, 애니메이션의 싱크를 맞춰준다는 것이다.

4. TabBar

TabBar를 그리는 작업을 하겠다

practice_tabbar.dart

return Column(
  children: [
    TabBar(
      controller: _tabController,
      tabs: [
        Tab(icon: Icon(Icons.coffee, color: Colors.black)),
        Tab(icon: Icon(Icons.local_pizza, color: Colors.black)),
      ],
    ),
  ],
);

return Container부분을 위와 같이 맞춰준다

tabs부분은 2개로 설정하였다 왜냐하면 3. initState에서 new TabController() 안에 length를 2로 맞췄기 때문이다

5. 실행결과

이렇게 아름다운 TabBar가 완성되었다

다음에는 Expanded를 사용해 보도록 하겠다

이 코드 그대로 사용할 것이다.

Flutter Button 형식 만들기

INICO — Thu, 16 Feb 2023 08:50:45 +0900

모든 웹이나 앱에는 Button이 있다

그리고 그 Button은 각자 스타일이 다 있다. 이번에는 각자 스타일을 주는 버튼을 한번 만들어 보도록 할테당

1. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            
          ],
        ),
      ),
    );
  }
}

2. TextButton

텍스트 버튼은 말 그대로 텍스트만 있다는 것이다

practice_page.dart

TextButton(
  onPressed: () {},
  child: Text("TextButton"),
)

위에 코드를 작성하고, 에뮬레이터를 실행해 보겠다

이렇게 텍스트만 나와있는 버튼이 생성되었다

3. ElevatedButton

ElevatedButton의 특징은 버튼 자체에 디자인이 생긴다.

practice_page.dart

4. OutlinedButton

OutlinedButton은 말 그대로 바깥쪽 선이 생긴다는 말이다. 바로 코드를 수정하고 실행시켜 보도록 한다

practice_page.dart

5. InkWell

InkWell는 텍스트를 넣는 버튼이 아닐 때 사용한다. 모형이나, 이미지 등을 감싸서 그것을 버튼으로 활용할 수 있다는 것이다

practice_page.dart

InkWell(
  onTap: () {
    print("버튼 클릭");
  },
  child: Image.asset("assets/flutter.png"),
)

chidren 내부에 위의 코드를 집어넣었다

onTap은 버튼을 클릭했을 때 이벤트이다. 이미지를 클릭했을 때, 눌렀는지 확인하기 위해 코드를 작성하였다

위와 같이 이미지가 나오고, 클릭해보면

Android Studio의 Console창을 보면 출력되었는 것을 확인할 수 있다

Flutter 모서리 둥글게 하기 (feat.ClipRRect, feat. CircleAvatar)

INICO — Wed, 15 Feb 2023 08:45:56 +0900

이번에는 모서리를 둥글게 해 보도록 하겠다

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드를 실행하면 아래와 같이 나온다

2. 기본 BorderRadius사용하기

practice_page.dart

decoration쪽에

borderRadius: BorderRadius.circular(30)을 넣어 보고 결과를 보도록 한다.

3. ClipRRect

이번에는 ClipRRect를 사용해서 한번 둥글게 해 보겠다

practice_page.dart

ClipRRect(
  borderRadius: BorderRadius.circular(30),
  child: Container(
    width: 100,
    height: 100,
    decoration: BoxDecoration(
      color: Colors.red,
    ),
  ),
),

코드는 위와 같이 바꿨다

결과는 위와 같이 나왔다. 그런데 왜 ClipRRect를 쓸까? 라고 의문이 들 수가 있다

Image.asset를 사용해서 이미지를 넣고 둥글게 하고 싶을 경우, borderRadius가 없기 때문에

ClipRRect 같은 것으로 처리를 해줘야 한다

3. CircleAvatar

다음은 CircleAvatar를 사용해서 모서리를 둥글게 해 보겠다

practice_page.dart

SizedBox(
  width: 100,
  height: 100,
  child: CircleAvatar(
    backgroundImage: AssetImage("assets/flutter.png"),
  ),
),

코드를 위와 같이 해놓고 실행시켜본다

Radius를 설정하지 않고서도 둥글게 만들 수 있다

Flutter 이미지 화면 비율대로 크기 설정 (AspectRatio)

INICO — Tue, 14 Feb 2023 08:45:59 +0900

저번에는 Image를 넣고 가로넓이, 새로 넓이 조절하는 법과 BoxFit을 사용하는 법을 배웠다

https://initstory.tistory.com/114

이번에는 가로넓이, 새로넓이를 조절하지 않고 화면비율대로 조절하는 법을 하겠다

이때는 AspectRatio 라는 위젯을 사용한다

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        child: Column(
          children: [
            Image.asset(
              "assets/flutter.png",
              fit: BoxFit.cover,
            ),
          ],
        ),
      ),
    );
  }
}

이대로 실행 하면 아래와 같이 나온다

Container에 컬러를 넣어주고 좀 더 보기 쉽게 해 놨다

2. AspectRatio 적용

AspectRatio(
  aspectRatio: 1,
  child: Image.asset(
    "assets/flutter.png",
  ),
)

코드를 위와 같이 수정했다

그랬더니 아래와 같이 되었다

이 부분이 화면의 비율대로 설정하는 것이다

BoxFit.cover를 넣고 다시 보도록 해보자

aspectRatio의 값을 바꿔 보도록 해보자

aspectRatio: 2 / 1로 변경했다

만약 화면이 가로 300이고 새로 600이면

새로 높이 = 가로(300) / 2 * 1

가 될 것이다.

그러면 가로 300에 높이 150이 된다.

2 / 1의 결과를 보도록 하자

이렇게 화면의 비율에 맞춰서 이미지의 크기를 설정하는 법을 배웠다

Flutter Image 넣기

INICO — Mon, 13 Feb 2023 08:45:14 +0900

이번에는 Flutter에서 Image를 넣는 법을 하겠다.

1. 이미지 폴더 만들기

최상위 프로젝트 폴더를 마우스 오른쪽클릭한 후 New > Directory를 클릭한다

New Directory라고 나오고 밑에 입력칸이 있다 거기에 assets를 입력하고 enter를 누르자

그럼 위와 같이 assets폴더가 생성된 것을 확인할 수 있다

2. pubspec.yaml 파일 설정

기본 경로를 설정해야 하기 때문에 pubspec.yaml파일을 뭔가를 적어야 한다

pubspec.yaml 파일을 더블클릭한다

pubspec.yaml

스크롤을 내리다보면 flutter: 가 보일텐데 그 밑에 주석으로 처리된 assets가 있으면 스크롤을 멈춘다

주석으로 처리된 assets부분을 위와 같이 해준다 ※ 반드시 들여 쓰기를 정확하게 해줘야 한다

그다음 위에 보면 【Pub get】를 클릭해서 적용시키도록 한다

3. assets 폴더에 이미지 파일 넣기

2번까지 끝냈으면 생성한 assets폴더에 아무 Image나 넣어주도록 한다

4. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        child: Column(
          children: [
            
          ],
        ),
      )
    );
  }
}

기본코드이다. body쪽을 보면 Column() 이 있고 children[ ] 안에 이미지를 넣어볼 생각이다

5. Image.asset

children안쪽에 Image.asset(파일 경로) 를 넣어주었다

그랬더니 아래와 같은 결과가 나왔다

6. width

width를 200을 줘 보았더니 위처럼 나왔다. 이렇게 가로 사이즈를 줄 수가 있다

7. height

그럼 새로높이도 정해 보도록 한다

새로 높이 500을 넣어 보았다니 위로 여백이 생겼다

하지만 새로 높이는 정확하게 500이 되었을 것이다

하지만 여백없이 이미지로 가득 채우고 싶을 경우가 있다. 그럴 경우는 다음을 보자

8. BoxFit

8-1. cover

fit: BoxFit.cover를 줘 보았다

결과를 보도록 한다

조금 이상하게 나왔긴 했지만 여백을 가득 채우긴 했다

다른 옵션도 사용해 보도록 한다

8-2. fill

이번에는 전부 나오게 되었다

이외에

contain

fitWidth

fitHeight

none

이 있지만 여기서는 안 하도록 하겠다

Flutter 정렬 (CrossAxisAlignment, MainAxisAlignment)

INICO — Fri, 10 Feb 2023 08:30:05 +0900

Flutter의 화면에서 왼쪽배치를 할 것인지, 가운데에 배치할 것이 아니면 위에 아니면 밑에 배치할 것인지 정하게 하는 방법 이 있다

Column일 경우와 Row일 경우에 배치하는 법을 알아보도록 하겠다

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: [
            Text("HelloWord", style: TextStyle(fontSize: 30)),
            Text("HelloWord", style: TextStyle(fontSize: 30)),
          ],
        ),
      ),
    );
  }
}

일단 이렇게 코드를 작성해보도록 한다.

이 부분은 화면의 전체사이즈를 잡아주는 역할을 한다

그 이유는 HelloWord라는 문자열이 짧기 때문에, 정렬예제를 보여줄 수 없어서 넣어줬다.

에뮬레이터로 나중에 설명하도록 한다.

이대로 실행을 해보면 아래와 같이 나온다

실행을 해보면 HelloWord 두 개가 배치가 되면서

빨간색 네모 부분이 Container고 width: MediaQuery로 넓이를 잡아준 것이라고 보면 된다.

만약 width: MediaQuery가 없다면 왼쪽으로 배치가 되었을 것이다.

기본적으로 가운데 정렬인 듯하다

2. CrossAxisAlignment

CrossAxisAlignment을 사용해 보겠다.

2-1. CrossAxisAlignment.start

start는 왼쪽으로 정렬이 되었다

2-2. CrossAxisAlignment.center

가운데 정렬

2-1. CrossAxisAlignment.end

오른쪽 정렬이 되었다

3. MainAxisAlignment

CrossAxisAlignment 말고 MainAxisAlignment를 사용해 보도록 한다

3-1. MainAxisAlignment.start

아무것도 안 적은 것과 변화가 없다. 왜일까? 그다음을 보도록 해본다

3-1. MainAxisAlignment.center

새로 높이에서 한 가운데에 정렬이 되었다.

그렇다 start는 새로 높이에서 맨 위를 뜻한다

3-1. MainAxisAlignment.end

예상대로 end를 넣어주면 맨 밑에 배치가 된다

4. Column이 아니라 Row일 때는 어떨까?

4-1 기본코드

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Row(
          children: [
            Text("HelloWord", style: TextStyle(fontSize: 30)),
            Text("HelloWord", style: TextStyle(fontSize: 30)),
          ],
        ),
      ),
    );
  }
}

코드를 바꿔 보았다.

이번엔 height를 넣어주고 새로 사이즈를 에뮬레이터크기대로 잡아주었다.

그리고 Column부분을 Row로 바꿔보았다

이대로 실행해본다

새로 높이를 주었더니 새로 가운데에 가로 왼쪽정렬이 되어 있다. 이게 기본정렬인 것 같다

4-2. CrossAxisAlignment

4-2-1. CrossAxisAlignment.start

CrossAxisAlignment.start를 주었더니, 위로 배치가 되었다.

Column일 때는 CrossAxisAlignment.start 주면 왼쪽으로 배치가 되는데, Row일 때는 위로 배치가 되었다

반대로 움직인다는 것을 알 수 있다

4-2-2. CrossAxisAlignment.center

4-2-3. CrossAxisAlignment.end

4-3. MainAxisAlignment

MainAxisAlignment도 한번 실험해 보겠다

CrossAxisAlignment를 지우고 MainAxisAlignment로 사용해 보자

4-3-1. MainAxisAlignment.start

MainAxisAlignment.start를 사용해 보았더니 변화가 없는 것 같지만, 기본이 왼쪽으로 정렬되어 있기 때문에 변화가 없어 보이는 것뿐이다

4-3-2. MainAxisAlignment.center

4-3-3. MainAxisAlignment.end

오른쪽 정렬이 되었다.

5. 정리

5-1. Column일 때

5-1-1. CrossAxisAlignment

CrossAxisAlignment.start: 가로기준 왼쪽 배치
CrossAxisAlignment.center: 가로기준 중간 배치
CrossAxisAlignment.end: 가로기준 오른쪽 배치

5-1-2. MainAxisAlignment

MainAxisAlignment.start: 새로 기준 위에 배치
MainAxisAlignment.center: 새로기준 중간 배치
MainAxisAlignment.end: 새로기준 밑에 배치

5-2. Row일 때

5-2-1. CrossAxisAlignment

CrossAxisAlignment.start: 새로 기준 위에 배치
CrossAxisAlignment.center: 새로 기준 중간 배치
CrossAxisAlignment.end: 새로기준 밑에 배치

5-2-2. MainAxisAlignment

MainAxisAlignment.start: 가로기준 왼쪽 배치
MainAxisAlignment.center: 가로기준 중간 배치
MainAxisAlignment.end: 가로기준 오른쪽 배치

조금 복잡하긴 하지만, Column일 때만 외워두고 Row일 때는 반대로 생각하면 될 것 같다

Flutter의 Padding EdgeInsets (all, only, symmetric차이점)

INICO — Thu, 9 Feb 2023 08:34:18 +0900

이번에는 Padding에 대해서 조금 알아보자

Padding을 사용했을 경우, padding을 얼마나 줄 것인가에 대해서다

padding을 줄때 예를 들면 아래처럼 사용한다

padding: EdgeInsets.all(10)

1. 예제 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(0),
        child: Center(
          child: Container(
            decoration: BoxDecoration(color: Colors.red),
          ),
        ),
      ),
    );
  }
}

위의 코드를 사용해 보자, 잘보면 padding: EdgeInsets.all(0) 이 있는데 이건 0이기 때문에 전혀 Padding을 주지 않은 코드이다

이 코드를 실행 시켜서 보면

padding이 전혀 없는 빨간색을 볼 수가 있다

2. EdgeInsets.all

all 부분에 숫자를 넣어 보도록 해보자

이렇게 위아래양옆에 여백이 생기는 것을 볼 수 있다

3. EdgeInsets.only

이번에 only로 바꿔 본다

only로 바꿔보았더니, 파라미터(top, bottom, left, right)로 들어갈만한 게 있다

top: 20

top이 제일 만만하니 top을 넣어보았더니

top부분에 여백이 생긴것을 볼 수가 있다.

나머지는 안해봐도 오른쪽 왼쪽 맨 밑에 여백을 줄 수 있는 방법을 알겠다

4. EdgeInsets.symmetric

symmetric로 바꿔보았더니, 다른 파라미터를 넣을 수 있다.

한번 차이점을 보도록 하겠다

4-1. vertical

top과 bottom에 여백이 생긴다

4-2. horizontal

left와 right에 여백이 생긴다

5. 정리

all: top, bottom, left, right에 여백이 생김

파라메터: 숫자형

only: top, bottom, left, right를 하나이상 여백을 줄 수 있음

파라메터: top, bottom, left, right

symmetric: (top, bottom), (left, right) 묶음으로 여백을 줄 수 있음

파라메터: vertical, horizontal

ListView와 SingleChildScrollView (새로 스크롤, 가로 스크롤)

INICO — Wed, 8 Feb 2023 08:30:13 +0900

1. ListView

ListView는 새로 스크롤을 생기게 하는 방법이다.

일단 처음 코드를 보도록 한다

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Column(
        children: [
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
        ],
      ),
    );
  }
}

body 쪽을 집중해서 보자

Column안에 children이 있고 아이콘을 여러 개 있는 코드이다.

에뮬레이터를 보면 아래와 같이 표시가 된다

에뮬레이터를 잘보면 하단 쪽에 노란색과 검은색 호랑이 무늬가 있는데,

이건 좀 더아래에 아이콘은 있지만 볼 수가 없다는 것이다. 그리고 스크롤을 아래로 내릴 수가 없다

왜냐면 Column이기 때문이다.

그래서 ListView로 바꿔주도록 한다

Column부분을 ListView로 바꿔 보니, 아래와 같이 나왔다

스크롤도 내릴 수 있게 되었다.

2. SingleChildScrollView

이번에는 가로 스크롤을 만들어 볼 것이다.

다시 처음 코드로 돌아와서

main.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Row(
        children: [
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
          Icon(Icons.people, size: 100),
        ],
      ),
    );
  }
}

Row로 사용하면, 아래와 같이 나온다

가로배치

이 경우도 오른쪽에 호랑이가 생겼다

스크롤을 붙여보도록 하자

코드를 위와 같이 수정했다.

SingleChildScrollView()

이 코드를 Row를 감싸주고 Row위에는 【scrollDirection: Axis.horizontal,】 를 넣어준다

그러면 위와같이 호랑이가 없어져 있는 것을 볼 수 있다.

스크롤도 잘된다.

가로, 새로로 배치 하기 (Column과 Row)

INICO — Tue, 7 Feb 2023 08:58:59 +0900

1. 처음 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(),
    );
  }
}

2. Column 사용해 보기

main.dart

body부분을 바꿔 준다. 위처럼

그럼 children[] 을 사용할 수가 있는데, 이것은 여러 컴포넌트를 넣을 수 있다는 것이다.

만약 child 라면 하나의 컴포넌트밖에 사용할 수 없다

children: [
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
  Icon(Icons.people, size: 70),
],

그리고 children을 위와 같이 해보자

새로로 배치되는 것을 확일 할 수가 있다

그러므로 Column은 새로로 배치하는 것이다.

3. Row 사용해보기

column이었던 부분을 Row로 바꿔본다

그러면 가로로 향하게 된다.

그러므로 Row는 가로로 배치하는 것이다.

다음시간에는 ListView와 SingleChildScrollView을 사용해 보도록 한다.

상단 Bar달아 보기 (AppBar)

INICO — Mon, 6 Feb 2023 08:34:51 +0900

1. 파일 구조

파일 구조는 위와 같이 해놓았다

main.dart가 있고 pages안에 ***Page.dart로 해놓았다

2. 처음 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practicePage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

practicePage.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Main Page"),
      ),
    );
  }
}

3. 처음 에뮬레이터

Center를 이용하여 중간에 글자를 보이도록 해놓았다

이제부터 앱바를 넣어 보도록 한다

4. main.dart 수정 (Appbar title)

appBar: AppBar(
	title: Text("Appbar"),
),

위의 코드를 넣어 보았더니, 아래와 같이 나온다

5. leading, actions 사용

leading: Icon(Icons.car_crash),
actions: [
  Icon(Icons.search),
],

위를 코드를 넣어보았더니 아래와 같이 나왔다

leading: AppBar의 맨 왼쪽

actions: AppBar의 맨 오른쪽

이라는 것을 알 수 있다.

6. AppBar의 그림자 설정 (elevation)

elevation: 100.0,

위를 코드를 넣어보면 그림자가 생긴다

빨간 부분이 그림자임

7. AppBar의 배경색 설정

backgroundColor: Colors.black,

위의 코드를 넣어 주면 배경색이 설정된다.

결과입니다

이렇게 AppBar를 사용하는 법을 알아보았다.

Flutter Font 적용 하기!!

INICO — Sat, 4 Feb 2023 12:14:07 +0900

1. 폰트 파일 넣기

폰트 파일(ttf)을 【assets/fonts/】에 넣어주도록 한다

2. pubspec.yml 설정

fonts:
    - family: CookieRun
      fonts:
        - asset: assets/fonts/CookieRun-Regular.ttf

이렇게 잘 넣어주도록 한다

family는 별칭이 될 것이다

3. theme 코드 작성

theme: ThemeData(fontFamily: "CookieRun"),

위의 코드를 추가하도록 한다. "CookieRun"이 pubspec.yaml에서 작성한 폰트를 적용시켜줄 것이다

4. 확인

이렇게 잘 적용한 것을 확인할 수 있다

Android Studio 애뮬레이터 설치 및 Flutter Project 실행

INICO — Mon, 20 Jun 2022 09:00:50 +0900

１．애뮬레이터 설치

오른쪽 상단에 있는 빨간 네모안에 있는 핸드폰 모양의 아이콘을 클릭한다

【Create device】를 클릭한다

원하는 디바이스를 선택하고 【Next】를 클릭한다

R버전을 눌러서 다운로드를 한다

【Finish】클릭 하면 다운로드가 완료된 것이다

【Next】클릭한다

이번에 진짜 빨간색 네모를 누르면 끝이 난다

２．실행 시키기

다시 핸드폰 아이콘을 누른 다음 재생 버튼을 눌러보자

좀 시간이 걸리는데 기다리면 핸드폰이 생긴다..

근데 살짝 종만 하긴 한데, 생기기 생겼으니 진행한다

이번에는 플러터를 실행시킬 생각인데, 우측 상단 위에 빨간색 네모 안에 있는 재생 버튼을 클릭 한다

상당히 오래 걸리지만 꾹 참고 기다리도록 한다.

그러면 오른쪽에 플러터 프로젝트가 뜨는 것을 확인할 수가 있다

Flutter Scaffold 사용

INICO — Sat, 18 Jun 2022 15:03:26 +0900

stl 로 자동생성을 하도록 한다

주로 Page로 사용했을 때, Scaffold를 사용하고 안에는

appbar나 body, BottomNavigateButton를 넣어서 사용한다

Flutter Project 생성하기 (feat. Android Studio

INICO — Fri, 17 Jun 2022 09:30:44 +0900

저번에 Flutter와 Android Studio를 다운로드 하고, Flutter의 플러그인까지 인스톨 하였다.

이번에는, Android Studio에서 Flutter 프로젝트를 생성하는 법을 알아보자

일단 Flutter 프로젝트를 나둘 폴더를 하나 생성해 놓자

【Android Studio】를 실행하고【New Flutter Project】를 더블 클릭 한다.

위의 화살표 순서대로 해주도록 한다

◆ Project name

원하는 프로젝트 이름 적기

◆ Project location

맨 처음 생성했던 경로 + 【Project name】을 넣어 주도록 한다

그리고 【Finish】클릭 한다

이런 화면이 뜨는데 이렇게 성공한 듯 하다

Android Studio 설치&Flutter, Dart플러그인 설치

INICO — Thu, 16 Jun 2022 18:00:51 +0900

이 내용은 Flutter를, Flutter를 의한, Flutter를 위한, 글입니다

１．Android Studio 설치

https://developer.android.com/studio?hl=ko

Download Android Studio and SDK tools | Android Developers

The official IDE for Android app developers.

developer.android.com

위의 링크로 들어가도록 한다.

【Download Android Studio】를 클릭하여 다운로드하도록 한다.

동의까지 해주면서 스근하게 다운로드를 해준다. 그리고 뭐가 다운로드 되는데, 그거도 실행시켜주면 된다

【Next】를 준내 갈겨주도록 한다.

이게 나오는데, 그대로 남자답게【OK】버튼을 눌러준다

중간에 【Don't send】를 클릭하고【Next】버튼을 클릭한다

그대로 【Next】버튼 클릭

색깔 정하고 【Next】선택 하도록 한다

【Next】선택하도록 한다

【Accept】를 선택하고【Finish】를 클릭하자

【Finish】클릭

２．Flutter 플러그인 설치하기

【Plugins】클릭 후【Flutter】를 검색하고【install】하도록 하장

【Restart IDE】를 클릭하고 새롭게 인생을 시작하게끔 하면 끝이다

Window Flutter 설치&환경변수 설정

INICO — Wed, 15 Jun 2022 18:00:08 +0900

１．Flutter설치

https://docs.flutter.dev/get-started/install

Install

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

docs.flutter.dev

위의 링크를 클릭하고 Flutter홈페이지의 인스톨하는 페이지로 들어간다

난 윈도우랍니다

해당하는 OS에 맞춰서 클릭하도록 한다.

나는 윈도우이기 때문에 윈도우를 클릭하겠다

바로 빨간네모를 클릭하도록 한다. 어차피 영어를 모르기 때문에 읽지 않도록 한다

내려받은 압축파일을 압축해제해버리자

압축해제가 끝났으면, 【flutter】 파일을 Ctrl + x를 눌러 잘라내기를 한 다음

C:\src

위의 경로 안으로 넣어주자 ※src 폴더를 생성한 뒤 넣어준다

２．환경변수 설정

【내 컴퓨터】 > 【속성】 클릭한다

맨 밑에 내려서 보면, 【시스템 상세 설정】이 있다. 이것을 눌러주도록 한다.

【환경변수】를 클릭한다

【시스템 변수】탭에서【Path】를 더블클릭해서 열어주도록 한다.

【새로 만들기】를 클릭한뒤, 【C:\src\flutter\bin】를 입력해주고 【OK】버튼을 눌러주도록 한다

이렇게 Flutter의 환경변수까지 끝마쳤다.

#Java 15화) List 사용하기

INICO — Sun, 13 Mar 2022 15:30:48 +0900

이번 시간에는 List라는 것을 사용할 것이다.

List는 배열과 비슷하지만 조금 다르기도 하다.

1. List 생성

// List<타입> 변수 = new ArrayList<>();
List<String> list = new ArrayList<String>();

위처럼 선언하면 된다.

2. List에 추가하기

List라는 녀석은 여러 가지 Method를 들고 있다. 그중에 추가하는 Method를 사용해 보자

// 변수.add(같은 타입의 값);
list.add("Hello World");

이렇게 add() Method를 사용하면 된다.

주의할 점은 add() 안에 들어가는 녀석이 무슨 타입인지 반드시 인지하면서 들어가자

List<여기안에 있는녀석> 을 add(같은 타입) 으로 넣어주면 된다.

3. 출력하기

여러 가지 방법으로 뽑아 볼 수 있다.

3-1. 번지수를 찾아서 출력하기

// list.get(번지수)
System.out.println(list.get(0));

위에 하나를 추가하였으면 0번지에 반드시 하나가 들어가 있을 것이다. ( 모든지 0부터 시작함 )

그렇기 때문에 list.get() 를 사용하면 list안에 있는 해당하는 번지수를 찾아 겟또 하면 된다

이렇게 답변을 해준다

3-1. For문을 이용하기

3-1-1. 일반 For문

for (int i = 0; i < list.size(); i++) {
	
    // list.get(번지수)
    System.out.println(list.get(i));

}

이런 식으로 하면 list의 개수만큼 for문이 돌아간다.

그다음은 list.get(번지수) 로 찾아 순서대로 출력해 준다.

3-1-2. 확장 For문

// for (타입 변수 : list의 변수)
for (String item : list) {
	
    // item 은 list.get() 의 순서대로 출력
    System.out.println(item);

}

위와 같이 해주면 된다. 조금 헷갈릴 수도 있는 for문인데, 실무에서는 3-1-1보다 이 for문을 더 많이 사용한다.

에러도 덜 나기 때문이다. 꼭 익혀주면 좋다

4. 객체와 List

실무에서는 객체를 굉장히 많이 쓴다. 그렇기 때문에 여기서도 한번 써보도록 하자

일단 위에다가 아무 객체를 생성한다. ( 남자를 생성함 )

class Man {
	
	// 이름
	private String name;
	
	// 나이
	private int age;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	
}

4-1. Man의 List 생성

그다음은 다시 타입을 바꿔 리스트를 생성해 보자

// List<타입> list = new ArrayList<생략가능>();
List<Man> list = new ArrayList<>();

이렇게 Man의 List를 생성할 수 있다.

4-2. 이해하기

남자 고등학교의 하나의 반이 있다.

Man은 남자 한 명을 뜻한다.

List는 여러 Man들이 모인 반을 뜻한다.

그럼 0번 남자는 이름 (name) 나이 (age) 가 있을 것이고,

1번 남자도 이름 (name) 나이 (age) 가 있을 것이다.

그렇게 생각하면 쉽다고 생각한다.

4. 에 나온 List<Man>은 반을 생성한 것이다.

4-3. 객체 생성

이제 남학생을 만들어 보자

Man man = new Man();
man.setAge(0);
man.setName("강코딩");

남학생을 만들었다. 혹시 객체를 모른다면 #Java 14화) 를 보고 오도록 한다.

그리고 반안에 남학생을 들여보내 보자.

4-4. List 추가

list.add(man);

이렇게 add() 를 하면 남학생이 반안에 들어간 거라고 보면 된다.

4-5. 출력하기

// list.get(몇번남학생).getAge(); <- xx번 남학생의 나이
System.out.println(list.get(0).getAge());

// list.get(몇번남학생).getName(); <- xx번 남학생의 이름
System.out.println(list.get(0).getName());

이렇게 출력도 가능하다.

나머지는 for문으로 한번 연습 해보길 바란다. 이상

#6 일본 IT회사 자주 질문 받았던 것

INICO — Sat, 12 Mar 2022 12:44:21 +0900

한국에서 박람회에 참가해서 일본 IT회사에 면접을 했을 때가 기억이 난다.

지금 생각하면 면접을 진짜 못본거 같다,,

이런 후회를 하지 않도록 연습을 더욱더 많이 하도록 하자,,,

・일상 대화의 일본어

・회사에서 사용하는 일본어

・면접에서 사용하는 일본어

・병원에 갔을 때 일본어

모두 다르다고 생각하면서 접근하고 면접에서 사용하는 일본어를 일단 마스터 한다면

취업확률이 UP 될 거라고 생각한다

일단 내가 경험했던 면접의 자주 질문받았던 내용을 소개하겠다

1. 자기소개를 해주세요 (自己紹介をしてください。or 自己紹介をお願いします。)

이거는 90% 로 질문을 받는다. 일단 서로 알아가는 단계라고 생각하면 된다. 시간아까워서 안하는 경우도 있다

한국 친구들이 자기소개서를 적은 거 보면

저는 2남 1녀 중 막내로 태어났고~~~~ 저희 부모님은 어릴 때부터 아주 자상~~~~

하지만 힘들게 살아와서 그 누구보다~~~ 회사에 이런 이런 것을 기여~~~

이런 식으로 적는 것을 많이 봤는데, 일본 같은 경우에는 진짜 자기의 실적? 을 적어야 하는 거 같다 예를 들면

저는 OOO 동아리에 들어가서 ~~~ 아주 잘했기 때문에 ~~~ 리더가 되어 ~~~ 다 같이 좋은 성적을 얻었습니다~~~

귀사에서 이러한 경험으로 ~~ 발휘해 나가고 싶습니다

위와 같은 느낌인 거 같다. 면접관은 2남 1녀는 절대 안 궁금하다. 그러니 자기 어필을 하는 시간을 더 쓰도록 하자

2. 학창 시절에 제일 열심히 했던 것은 무엇입니까? （学生時代に最も打ち込んだことは何ですか？or 学生時代に頑張ったことは何ですか？ or 学生時代にもっとも打ち込んだことは何ですか？）

이거는 학창 시절의 무슨 실적이 있는가? 같은 질문인 거 같다.

어릴때 했던 행동은 커서도 그런 행동을 하는 사람이다라고 여기지 않을까라고 생각이 든다.

일본의 고등학생을 보면 다들 부활동 (동아리)를 했기 때문에 할 말이 있지만, 한국쪽은 죽어라 공부만 한 친구들이 많기때문에 할말이 없는 경우도 있다.

그렇기 때문에 이 부분은 MSG를 첨가해야 한다.

일단 학창 시절이라하면.. 고등학교 중학교 대학교를 생각할 수도 있는데, 난 이렇게 생각했다. 국비지원교육도 학생이니까 학창시절이 아닐까? 학원 다니는 거도 학생이잖아라고

그래서 나는 국비지원 교육받았을 때를 생각하며 질문에 답을 하였다.

면접은 사실을 바탕으로 하여 MSG 첨가가 된 스토리라고 생각하자

3. IT업계를 선택한 이유는 무엇입니까 （IT業界を選んだ理由は何ですか？）

대부분 일본으로 떠나는 친구들은 일본어과를 나와서 IT공부를 하고 온 사람이 많기 때문에, 문과였는데 왜 이과를 선택해서 왔지?라고 회사에서는 의문을 품을 수 있다

진짜 바보 같은 답변이 있더라..

한국보다 일본이 취업이 더 잘된다고 해서 IT를 공부하고 지원했습니다

라고 하는 사람도 본 적 있는 거 같다. 이건 무조건 NG기 때문에 하지 말자

무조건 자기와 적성이 맞고, 남들보다 조금 더 잘한다는 어필을 해 보록 하자

거짓말은 물론 안된다. 알지? 거짓말하면 피똥 싼다는 거

4. 지망 동기를 가르쳐 주세요 （志望動機を教えてください。）

진짜 많이 질문받는 거 중에 하나다.

이건 당신이 우리 회사에 대해 얼마나 조사했느냐와 당신과 나는 얼마나 맞는가를 보는 듯했다

예를 들면, 지망한 회사가 일반 웹 개발 회사라면 그중에 조금 특이한 점을 찾아 그거에 대해 흥미가 생겼다고 하고

자기가 웹 개발과 IOT 쪽 개발과 게임 개발을 동시에 공부했는데 특히 웹 개발이 제일 적성이 맞았기 때문에,

당신과 나는 천생연분이다 라는 어필을 하면 될듯하다.

솔직히 나도 잘 모르니.. 질문에 대해 곰곰이 더 생각해 주길 바란다.

가끔씩 이 질문 다음에

4-1. 왜 다른 회사가 아니라 당사를 지망하는 겁니까? 타사와 저희 회사의 다른 점은 무엇입니까?

라는 질문이 있다. 그래서 특이점을 찾아야 한다는 것이었다.

그래도 이 질문은 그렇게 많이 안 받으니 약간의 임기응변으로 대응하도록 하자

5. 일본에 일하고 싶은 이유가 무엇입니까 （日本で働きたい理由は何ですか？）

이 질문도 100% 가까이 받았던 거 같다.

물론 한국에서도 일본인이 취업을 할 때 같은 질문을 하지 않을까? 싶기도 하다

근데, 가혹 가다

여자 친구가 일본에 있기 때문에

라는 답변을 많이 하는 거 같더라,.,., 절대 하지 말도록 하자 ( 상식입니다 )

그리고,

일본의 문화와, 환경, 친절함이 굉장히 좋았고 ~~~ 일본 애니도 굉장히 좋고~~~~

이런 답변도 있다. 물론 국뽕 일본인들이 일본을 좋아해 줘서 고맙고 기쁘지만, IT 와는 관련이 없다고 생각할 것이다.

문화, 환경, 친절함, 애니는 IT와 관련이 있을까? 어떻게 짜깁기 하면 될지도 모르겠다

그렇기 때문에 웬만하면 다른 거로 어필을 하도록 하자

6. 장점이 무엇입니까? （長所は何ですか？or 長所を教えてください。）

하나의 컨셉으로 가도록한다. 자기소개에서 자기가 어떤 사람인지 말을 하였으면, 거기에 맞게 나는 ~~~ 이런 사람이다

라고 컨셉을 잡아주도록 하자

7. 단점이 무엇입니까? （短所は何ですか？ or 短所を教えてください。）

진짜 너무 극단적인 단점은 삼가도록 하자

일단 단점인 듯 단점 아닌 그런 느낌으로 말하고, 해결방안도 같이 말해줘야 좋을 거 같다.

8. 장래의 캐리어 플랜은 무엇입니까? （将来のキャリアプランは何ですか？ or OO年後の目標は何ですか？）

이 질문도 꾀나 있는 것 같다. 이건 이 사람의 목표를 확인하고 어떤 사람인지 판단하는 건지

모르겠지만, 일단 우리 회사는 이 질문을 젤 먼저 하는 거 같다.

5년 뒤 10년 뒤 목표를 만들어 두자. 자기 자신한테도 나쁠 건 없으니

꿈을 가진다면 이미 위의 답은 알아서 정해지지 않을까?

9. 마지막으로 질문이 있습니까? （最後に何か質問がありますか？）

진짜 마지막으로 하는 말이다. 국룰인거 같다. 예의상이라던지

마지막으로 질문 하는 것은 상식적인 질문을 하기만 하면 될 것 같다.

그 이외 조금 자주 질문 받는 것들

취업활동의 기준이 되는 것은 무엇입니까? （就活の軸は何ですか？）

입사후 하고 싶은 것은 무엇입니까? （入社後、やりたいことは何ですか？）

마지막으로,,,

일단 몇가지의 일본에서 자주 듣는 질문을 끄젹어 보았다. 이 글이 완벽하지는 않지만, 나의 경험으로는 이 정도는 좀 많이 들었던 거 같다

중요한 것은, 하나의 장점을 다른 질문에도 공통점으로 설명을 해줘야 한다. 이 부분은 글로 설명하기가 참 힘들지만,

예를 들면

자기소개에서 저는 ~~~~ 를 잘하기 때문에 끈기가 있습니다

라고 하였다면 다른 질문에서도

저는 끈기가 있는 성격이기 때문에 ~~~~ 잘할 수 있습니다

이런 식으로 하면 좋을 거 같다

그리고 한 질문에 1분 정도 선으로 끝내도록 하자, 혀가 길면 안 좋다는 말 면접에서 나온 말이다

일단 이 정도로 적겠다.

이글의 목적은 블랙회사를 피하기 위한 목적의 글이다. 안타까운 영혼들이 울면서 한국가는 것을 볼 수가 없었다.

물론 나도 좋은 회사는 아니지만 블랙회사도 아니다.

3월부터 일본 입국도 완화되었고, 앞으로도 계속 열릴 거 같으니, 미리미리 준비해서 왔으면 좋겠다.

그리고 일본 취업에 두려움을 떠시는 분들께, 언제든지 상담 가능합니다. 댓글 남겨주세요.

Git hub 저장소 (Repository) 만들기

INICO — Sun, 28 Nov 2021 12:34:23 +0900

맨 처음, Git hub에 로그인을 하면 위와 같은 화면이 뜨게 될 것이다

이 화면에서 【Create repository】를 클릭한다

위와 같은 화면이 나오는데,

【Repository name】에 저장소의 이름을 입력 하고, 우리는 아직 허접이기 때문에 Private를 하지 않고

누구나 볼 수 있는, Public에 체크하고 【Create repository】를 클릭한다

이런 화면이 뜨게 된다면, 아주아주 간단하게 repository를 생성 하였다

그 뒤에 파일들을 올리고 하면 될 것이다

Git Bash설치 하는 법

INICO — Fri, 26 Nov 2021 21:29:32 +0900

이 세상에는 내가 알고 있는 유명한 버전 관리가 2가지가 있다

하나는 SVN 또 하나는 Git Bash

어차피 이런 글 안읽을 거 알 테니

Git을 바로 설치를 해보겠다

설치하기

아래의 링크로 간다

https://gitforwindows.org/

Git for Windows

Git for Windows focuses on offering a lightweight, native set of tools that bring the full feature set of the Git SCM to Windows while providing appropriate user interfaces for experienced Git users and novices alike. Git BASH Git for Windows provides a BA

gitforwindows.org

빨간색 네모가 있는 【Download】를 클릭한다

클릭하고 나면, 위와 같은 파일이 다운로드하게 되는데, 이걸 실행시키자

【Next】 클릭

【Launch Git Bash】를 체크하고 【Finish】를 클릭

위와 같은 화면이 뜬다면 설치가 완료된 것이다

리눅스 기반이라서 윈도와 좀 다르게 명령어를 쳐야 하고, 이걸로 Git hub에 파일을 올리거나 하면 된다

AWS EC2 Spring boot & React 6편-Spring boot gradle 프로잭트 jar 배포 (Amazon Linux 2 AMI 기준 )

INICO — Fri, 5 Nov 2021 15:28:18 +0900

저번에 Spring boot의 Maven Project로 배포를 하였다.

요즘은 gradle도 많이 쓰기 때문에, 나중에 꼭 알아둬야 할 것 같아서 gradle로 한번 배포해 본다

1. Project 생성

Spring boot 툴에서 오른쪽 클릭한 후, 【New】→【Project】 을 클릭한다

【Spring Starter Project】 선택 후, 【Next】 클릭

이런 화면이 생기는데, Name 넣어주고, Gradle 기준으로 하기 때문에 Gradle 으로 설정한 후,

Packaging은 Jar로 해도 되고, War로 해도 된다.

그리고 다들 1.8 버전을 자주 쓰기 때문에, 8로 선택한다.

Package명은 <<폴더>>.<<폴더>>.<<폴더>>로 적은 뒤, 【Next】 를 클릭하도록 한다

그다음 체크는 위와 최소한 좋은 것들 선택하고 【Finish】 를 클릭한다. 그럼 프로젝트가 생성이 완료된다.

※DB 같은 경우는, Oracle 쓰고 싶은 사람은 Oracle을 선택하고, MySQL을 하고 싶은 사람은 MySQL를 선택하면 된다.

어차피 여기서는 안 할 것이다

2. application.yml

【application.properties】를 【application.yml】로 바꾼다.

안 바꿔도 되지만, 내 말 듣는 게 좋다

* 장난이고,, 검색해주세요. ㅠㅠ

server:
  port: 8080
  servlet:
    context-path: /

최소한의 정보를 넣어 주도록 한다.

그 밑에 DB라던지 JPA라던지 그런 것을 넣어줘도 될 듯하다.

일단 배포를 확인하기 위해 더 이상 헷갈리게 하지 않기 위해 적지 않았다

3. Controller 작성

【New】→【Other】

패키지를 하나 만들어 준다

패키지 이름 설정한 후에 【Finish】 클릭

package 오른쪽 클릭 후, class를 만들어 준다

이름을 설정하고 【Finish】를 클릭한다

이번 포스팅은 React를 위한 것이기 때문에

데이터를 return 해주게 하기 위한 어노테이션 【@RestController】 를 넣어주고

위에 메소드를 넣어준다

이렇게 힘들게 다 준비하면 끝이다. 그다음은

jar

파일을 만들어보자

4. build.gradle 설정

bootJar {
    archiveBaseName = '-'
    archiveFileName = 'test.jar'
    archiveVersion = '0.0.0'
}

위의 코드를 넣어준다.

이걸 실행시키면, 【test.jar】라는 파일을 뱉어 낼 것이다.

5. Jar 파일 익스포트

【Show in Local Terminal】→【Terminal】 클릭하면, 콘솔 창에 터미널이 열린다

* 안될 시 직접 cmd 창을 열어서 하도록 하자

// Window
gradlew.bat bootJar

// Linux
./gradlew bootJar

라고 입력을 해준다

이렇게 하면 jar파일이 생성된다

경로는 아래와 같다

<<프로젝트파일>>/build/libs/<<생성된jar파일>>

그 경로로 가서 jar파일을 실행시켜본다

java -jar test.jar

그럼 터미널 창에서 이런 문자들이 나오면 성공한 거나 다름없다

그다음 localhost로 접속하면 접근이 가능하다

6. EC2에 Jar파일 올리기

【Session】 을 클릭한다

【퍼블릭 IPv4 주소】를 복사 한 다음

복잡 하지만, 순서대로 한다

그럼 이렇게 뜬다

test.jar 를 EC2서버에 올린다

7. Tomcat 서버 구동

java -jar test.jar

로컬에서 실행하듯이 EC2서버에서도 이렇게 실행한다

그리고 해당 IP주소:8080/helloWorld 로 접속하면 완성이다

#5 코로나 일본취업 전망 (개인적인 생각)

INICO — Wed, 20 Oct 2021 00:10:14 +0900

요즘 일본은 한국보다 코로나 감염자가 적고, 일본 뉴스에서도 해외는 위드코로나를 실시하고 있다라는 뉴스도 나오고 있다

그럼 일본도 위드코로나를 잘하면 실시하지도 않을까? 라고 생각이 든다.

도쿄에서 계속 생활한 나의 입장으로 본다면 신주쿠나 우에노 등 여러 번화가에서는 긴급사태가 있더라도 술을 계속 팔기도 하고 유흥업소도 계속 운영이 되고 있었기때문에 사실상 위드코로나라고 봐도 무반하지 않을까? 라고 생각이 든다

얼마전까지만 해도 도쿄만 5천명 정도 나오고 그랬는데, 이제 걸릴 사람 다 걸리고 그래서 적게 나오는 것이 아닐까? 라고 생각이 들기도 한다

실제로 도쿄에 사는 한국인 친구중에 한국에 잠깐 갔는데 양성이 떳었다 아무런 증상도 없었는데....
그러다 다시 일본에 오려고 할때 또 양성이 떠서 일주일 늦어진 경우도 있었다

코로나가 감염력이 높아진 대신 약하진 것은 사실일지도 모르겠다

이런 여러 해외상황도 보고 현재 일본 감염자 수를 본다면 확실치는 않지만 점점 일본취업이 가능한 날이 올거 같긴하다
지극히 개인적인 생각이지만..

그리고 현장에 일하는 리더급 한분이 계시는데, 그분 회사에는 대만사람 2명 정도 채용했다고 한다. 아직 오진 않았지만 내년 4월 예정이다

그러니 일본취업 이제 노려볼만 한거 같다. 서비스업이나 관광업 같은 경우는 좀 더 오래 봐야할 거 같고, IT쪽 취업은 확실히 채용하려는 수가 많아질거 같다. 그러니 포기하지말고 어느정도 IT실력 (간단한 Web만드는 정도) 이라면 일본어만 주구장창 공부하고 회화실력을 많이 키워놓도록 하자

면접은 IT실력도 아니고 포트폴리오도 아니고 무조건 일본어 회화이니 미리 회화실력을 쌓도록 하자

다음 포스팅은.. 일본화사에서의 채용기준을 한번 해보겠다

일본 회사) 출근 하는 과정과 일 끝난 뒤 회식한 날!

INICO — Tue, 19 Oct 2021 00:10:25 +0900

보통 재택근무이지만 가끔씩 출근할 때가 있다. 오늘은 출근하는 날이다
그 이유는 술을 마시는 날이기 때문이다 ㅎㅎ

역으로 가는 길이다. 앞에 학생이 보인다.
나는 정장을 입었기 때문에 나도 학생으로 오해받을지도 모르겠다

사실 그런 바램이 있다 ㅋ

열차를 타기전에 교통비를 충전한다. 오늘 쓸 교통비다

왕복으로 10000원이 넘는다

아침

아침 열차를 타기전 모습이다. 오늘 이렇게 사람이 있는 것을 보고, 조졌다는 생각이 들었다
왜냐하면 사람이 많이 있기 때문에 끼여서 타야하기 때문이다
낑겨서 타는 게 너무 싫다

지옥으로 향하는 열차가 왔다

한번 환승을 해야 한다
사이쿄선(埼京線)에서 히비야 선(日比谷線)으로 갈아탔다

그리고 롯폰기（六本木）라는 곳에 도착했다

롯폰기라는 곳은 돈 많은 사람이 많이 산다. 부럽다...

나의 다리 모습이다
정장을 입고 있는데, 편한 옷으로 갈아입고 싶다
일본에서는 프로그래머도 그냥 샐러리맨 취급을 받는 거 같다

여기는 롯폰기 힐즈라는 건물의 위다. 여기로 통해 출근을 한다

중간에 맥도날드가 있다. 아침에 가끔씩 배고플 때 먹는데, 편리하다

회사 가기 전에 세븐일레븐이 있는데, 거기서 카페라떼를 샀다. 세븐일레븐의 커피는 패밀리마트, 맥도날드 보다도 맛있다....
이렇게 출근하고 열심히 일했다 열심히?를 장담하지 못하지만 열심히 했긴 했다

그리고 일이 끝나고 19시부터 회식이 있다

..... 타임머신 9시간 후....

일 끝나고 나서는 근처 가게에 와서 회식을 했다. 오늘은 일본인( 다른 회사 분들 ), 한국인( 나 ), 중국인( 같은 회사 )이 회식에 참가했다
메뉴판을 보면서 먹고 싶은 거 고르고, 생맥주를 시켰다. 정말 오랜만에 회사에서 술을 마시는 거 같다

내가 좋아하는 생맥주가 왔다. 확실히 캔맥주랑 생맥주는 다르긴 하는 거 같다
술을 마셨더니,,,, 사진이 빗나간다 자꾸,,,

회가 왔다. 확실히 회전초밥집보다는 맛이 있더라
이놈의 술은 사진의 천적인가 보다

나 혹시 마약 했나..?
사진이 좀 많이 빗나갔긴 했지만, 한국에 대해서 중국에 대해서 얘기도 하고 프로젝트에 관한 얘기도 하고 즐거웠다
이런 회사에서의 회식이 자주 있었으면 좋겠다

집 가는 열차.. 집에 가자..

1시간 정도 열차를 타고 내렸다. 역시 멀긴 멀다.. 서울도 이런 느낌이려나

집 가기 전에 술좀 깨고 싶어서 아이스크림을 봤다.
메로나 먹고 싶은데 없는 게 너무 아쉽다 ㅠㅠ

어쩔 수 없이 초콜릿이 들어간 아이스크림 하나 먹으면서 집에 갔다.
코로나 때문에 이때 동안 회식을 못했는데, 이제 일본은 하루에 300명 정도 나오는 것 같다
도쿄만 생각하면 하루 70명 정도이다. 이제 슬슬 한국도 갈 수 있을지 모르겠다는 기대를 하고 있다 ㅎ

AWS EC2 Spring boot & React 5편-GitHub 저장소의 소스 복사 후 React 배포 (Amazon Linux 2 AMI 기준 )

INICO — Mon, 18 Oct 2021 00:10:58 +0900

이번 시간에는 GitHub에 있는 코드를 EC2에서 그대로 사용하고 싶을 경우에 보면 되겠다

1. GitHub 준비

일단 GitHub에 소스코드가 있어야 한다.

Aws-Test
    app
       back-end
           test
               WebContent
               src
               .....
               pom.xml
       front-end
           blog
               public
               src
               ....
               package.json

프로젝트 구조는 위와 같다

2. EC2에 Git Install

그다음은 EC2에 접속하도록 한다.

sudo yum install git -y

위의 코드를 입력하면 Git을 install 할 수 있다

git version

Compelte! 를 확인한 다음 위의 코드를 입력해서 잘 Install 되었는지랑 Version도 확인한다

이렇게 결과가 나왔다면 잘된 것이다

3. git Clone

다시 GitHub로 돌아와서

저장사의 최상위로 간 다음 【Code▼】을 클릭 한 다음 URL를 복사한다

그리고 다시 Terminal로 돌아와서

sudo git clone << github Adress >>

위의 코드를 입력한다

그다음 ls 를 입력하면 복사가 된 것을 확인할 수가 있다.

4. npm install

Node.js 기반의 React.js, Vue.js, Angular.js 같은 경우에는 【node_modules】 라는 여러 가지 라이브러리가 저장되어 있는 폴더가 있다.

Git에 올릴 때는 무겁기 때문에 .gitignore 에서 올리지 말라고 걸러내어 준다

그러므로 우리는 【node_modules】 라는 폴더를 생성시켜줘야 한다.

해당 프로젝트 폴더 안으로 이동한다 ( package.json이 있는 폴더 )

npm install

위의 코드를 입력하면 【node_modules】가 생성될 것이다

이런...

Error: EACCES: permission denied, mkdir '/home/ec2-user/Aws-Test/app/front-end/blog/node_modules'

에러가 났다. 이 에러는 폴더를 만드는 권한이 없기 때문에 나오는 에러이다

경로를 【node_modules】 전까지만 복사를 해준다.

sudo chmod 777 <<대상 폴더>>

위의 코드를 넣어준다

<<대상 폴더>> 에는 위에 복사한 경로를 넣어주고, 다시 npm install 를 해준다

이번에도 똑같은 에러가 났다..

어휴 한번에 좀 가자 제발;

대상이 【package-lock.json】 이기 때문에 대상을 한번 바꿔서 해보도록 하겠다

뭔가 모르겠지만 해결이 된 듯하다

그리고 권한을 원래대로 되돌리도록 한다

sudo chmod 755 <<대상 폴더 또는 파일>>

5. Server 실행

npm start

Server 를 실행해 보자!

이렇게 실행이 완료되었고, EC2 인스턴스의 【퍼블릭 IPv4 주소:3000】으로 접속을 하자

잘 접속이 되는 것을 확인했다

AWS EC2 Spring boot& React 4편-Spring boot Maven 프로젝트 War 배포 (Amazon Linux 2 AMI 기준 )

INICO — Sun, 17 Oct 2021 02:26:14 +0900

저번 시간에는 프론트 (Node.js) 서버를 배포를 해서 화면에 뜨기까지 해 봤다

이번에는 자바의 웹 프레임워크 Spring을 배포를 한번 해보겠다.

Jar방식과 War방식이 있는데, 이 둘의 차이점은

Jar는

프로젝트에 내장 톰켓이 있고

War는

프로젝트에 내장톰켓이 없고, 외장 톰캣으로 구동해야 한다.

오늘의 배포는 Spring boot 프로젝트이기 때문에 Mybatis라면 뒤로 돌아가서 구글에다가 AWS Spring Mybatis 새로 검색하자...

Spring boot 설정

일단 Spring boot 프로젝트에 조그만 하지 않은 설정을 해줘야 한다.

그전에 만약 Spring boot 프로젝트가 없다면, 1번부터 하고

Spring boot 프로젝트가 있다면, 4번부터 하도록 하자

1. 프로젝트 생성

Spring boot 툴에서 오른쪽 클릭한 후, 【New】→【Project】 을 클릭한다

【Spring Starter Project】 선택 후, 【Next】 클릭

이런 화면이 생기는데, Name 넣어주고, Maven 기준으로 하기 때문에 Maven으로 설정한 후,

Packaging은 Jar로 해도 되고, War로 해도 된다.

그리고 다들 1.8 버전을 자주 쓰기 때문에, 8로 선택한다.

Package명은 <<폴더>>.<<폴더>>.<<폴더>>로 적은 뒤, 【Next】 를 클릭하도록 한다

그다음 체크는 위와 최소한 좋은 것들 선택하고 【Finish】 를 클릭한다. 그럼 프로젝트가 생성이 완료된다.

※DB 같은 경우는, Oracle 쓰고 싶은 사람은 Oracle을 선택하고, MySQL을 하고 싶은 사람은 MySQL를 선택하면 된다.

어차피 여기서는 안 할 것이다

2. application.yml

【application.properties】를 【application.yml】로 바꾼다.

안 바꿔도 되지만, 내 말 듣는 게 좋다

* 장난이고,, 검색해주세요. ㅠㅠ

server:
  port: 8080
  servlet:
    context-path: /

최소한의 정보를 넣어 주도록 한다.

그 밑에 DB라던지 JPA라던지 그런 것을 넣어줘도 될 듯하다.

일단 배포를 확인하기 위해 더 이상 헷갈리게 하지 않기위해 적지 않았다

3. Controller 작성

【New】→【Other】

패키지를 하나 만들어 준다

패키지 이름 설정한 후에 【Finish】 클릭

package 오른쪽 클릭 후, class를 만들어 준다

이름을 설정하고 【Finish】를 클릭한다

package com.kang.test.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class TestController {
	
	@GetMapping("/helloWorld")
	public String test() {
		return "Do you want to build a Snowman?";
	}
}

이번 포스팅은 React를 위한 것이기 때문에

데이터를 return 해주게 하기 위한 어노테이션 【@RestController】 를 넣어주고

위에 메소드를 넣어준다

이렇게 힘들게 다 준비하면 끝이다. 그다음은 war 파일을 만들어보자

4. pom.xml 설정

pom.xml를 열어보면 【packaging】을 보면, war라고 적혀있으면 그대로 두고, jar라고 적혀있으면 war로 바꿔주고 저장을 한다.

이번 포스팅은 war로 aws에 배포하는 것이기 때문이다.

4. ServletInitializer.java

ServletInitializer.java 라는 파일이 있으면 그대로 두고 없다면 아래의 문서를 보면서 따라 하도록 하자

https://www.appsdeveloperblog.com/deploy-a-spring-boot-rest-app-as-a-war-to-tomcat-10/

Deploy a Spring Boot REST App as a WAR to Tomcat 10 - Apps Developer Blog

In this tutorial, the reader will learn how to deploy a Spring Boot REST app to Tomcat 10. According to Apache, the Jakarta EE platform is the evolution of the Java EE platform. Tomcat 10 and later implement specifications developed as part of Jakarta EE.

www.appsdeveloperblog.com

5. War 파일 익스포트

프로젝트 파일을 오른쪽 클릭한 후, Export를 클릭한다

위에 따라 하도록 하자

【Finish】를 누르면 War파일이 생성이 된다.

6. EC2에 War파일 올리기

드디어 EC2로 돌아올 수 있게 됐다.

로컬 컴퓨터에서 EC2쪽으로 옮기기 위해서, 여러 가지 방법이 있을 것이다.

Winscp라는 툴을 이용하거나, Git을 이용하거나

컴퓨터에서 컴퓨터로 이동시는 것이기 때문에 여러 가지 방법이 있다.

하지만 나는, MobXterm 이란 툴이 있기 때문에!!!

이 포스팅의 1편을 보면 다운로드 방법이 있으니 보면 될 거 같다

【Session】 을 클릭한다

【퍼블릭 IPv4 주소】를 복사 한 다음

복잡 하지만, 순서대로 한다

그럼 이렇게 뜬다

/usr/local/tomcat9/webapps/

위의 경로로 간다

드래그하면 복사가 된다

이렇게 복사가 완료된 것을 확인할 수 있다.

7. Tomcat 서버 구동

그다음은, 평소의 방법으로 EC2로 들어가도록 한다

cd /usr/local/tomcat9/bin/

위의 경로로 들어간다.

tomcat 서버를 구동시킬 수 있는 sh 파일이 있는 경로로 말이다

./startup.sh

tomcat 서버 실행 보도록 한다

8. 브라우저 접근

그리고 브라우저로 접근을 해본다!!

어라... 404가 뜬다..

그 이유는 아까 war파일을 올렸을 때 awsTest가 있는데, 그 기준으로 URL를 잡아야 한다.

무슨 말이냐 하면 아래의 사진을 보면 알 수 있다

awsTest/<<Controller의 URL>>

이렇게 쳐주면 되겠다.

이상으로 Spring boot 기준의 EC2서버 호스팅 하는 방법이다.