TwentyTwentyOne

요즘하는 업무는 검증 과정에 대한 데이터를 뿌려주는 cms 프로젝에 투입이 되어 열심히 쿼리를 짜고 있다.

되도록이면 하루에 1개 이상의 작업은 완료를 하려고 하다보니 퇴근이 틎어 질떄도 있지만, 하루에 1개도 못할때가 있다면, 정말 잠을 자기 전까지는 그 부분이 머릿속에서 떠나지 않는다.

일반적인 CRUD라면 빨리 빨리 처리할수있겠는데, 데이터를 비교해서 뿌려주거나, 아이디값만 올려 그대로 다시 insert하거나 하는 경우가 많다.

그래도 곧 끝나가는 시점에 짧게 나마 기록을 해두고자 한다.

이번 프로젝트를 진행하면서 느낀것은 1. 팀인원 2. 분석 설계 과정의 중요성 3. 커뮤니케이션 이다.

되도록이면 팀인원의 밸런스가 정말 중요하다고 느껴졌다. DBA,Backend,Frontend 등등 뿐만아니라 PM의 역할까지도,

이러한 점은 분석설계과정이 미비할수록 더 잘 느껴지는 것이 아닐까하는 생각을 해보는데, 일정이나 , DB설계, 구조, 개발방법 등등 개발에 들어가기 앞서 진행되어야 하는 것들이 어느정도 (내생각에는 90%)가 완료되어야 개발 단계에는 불편함이나, 힘든 시간을 보내지 않을 수 있지않을까?

이런 분석설계가 잘 이루어져 있지 않다보니, 테이블 정의서 없이 DB 테이블을 수정해야하는 일이 빈번해지고, 테스트를 위한 임의데이터의 결점도 많아져 쿼리를 계속 수정해야하는 일이 잦아 졌다. 물론 내개발 실력의 문제일수도 있지만, 1.팀인원에 대한 문제와 귀결되는 사항인데, 앞단 뒷단 할것 없이 개발을 해야하다보니 한가지에만 집중하기 어려운 점도 있기는 하다. 특히나 어떤 기능에 대한 확정적인 답변이 필요로 해야하는 빈번하게 발생한다는 점이다. 각 화면에 대한 기능 정의나 설계가 부실해 그때그때 마다 구현 방식이 바뀌게 되고 이게 맞는지 아닌지에대한 설명도 애매해질때가 많고, 팀원 중 한명은 개발을 중점으로 하는게 아니라 이러한 문제를 해결하려고 커뮤니케이션에 할애하는 시간이 훨씬 많다. 

코로나 시대에 접어들면서, 또는 비대면 시대에 접어 들면서, 대면으로 하는 미팅이나 대화가 많이 줄어든 상태이다.

비대면으로도 업무가 정말 잘 진행 된다면 좋겠지만,짧은 시간안에 빠르게 진행되어야할  문의사항에 대한 결정이나, 협의사항을 이야기하는데에는 대면이 훨씬 능률이 좋지 않을까?

많은것을 느끼고 배우고있는 프로젝트가 이제 막바지를 향해 달려가는데 끝나면, 제주도로 떠나야지

첫 stateless 위젯

flutter 에서 위젯은 크게 stateless 와 stateful 로 구별한다. 이외의 위젯도 있지만, 우선 이둘만 알면 충반하다는듯

stateless 위젯은 StatelessWidget 을 상속받아 사용한다.

import 'package:flutter/material.dart';

void main() {
  return runApp(MaterialApp(
      title: "Hello World",
      home: Scaffold(
          appBar: AppBar(title: Text('Widget')),
          body: _TestStatelessWidget())));
}

class _TestStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Test");
  }
}

dart에서 private class를 만들려면 _를 맨앞에 붙인다.

상속은 extends 키워드를 사용한다.

@override 키워드는 똑같다.

Stateless는 화면을 표시하는 위젯으로 상태의 변경이 불가능하다.

build 함수를 Override해야한다. 

build 함수의 returnType은 Widget이다. 

그럼 또 StatelessWidget 을 상속받는 class를 사용할 수 있을듯? 나중에 해봐야지.

react 가 hooks를 이용하는 함수형 components가 주로 사용되면서 클래스형으로 구성하는 방법을 많이 잊어버렸는데 

react 클래스형 components구성과 비슷한듯 한다.

Flutter를 공부하기 위해서 책을 볼까하고 고민하던중에 서울도서관에서 '(처음 배우는) 플러터'라는 책을 보게 되어 전자책으로 대출을 받아 공식문서와 함께 참고하면서 공부를 해보려고 한다.

이것저것 앞부분은 설치에 관한 것이라 건너 뛰고 flutter project 를 create 하면 생기는 main.dart 와는 별개로 simple_main.dart를 만들어보고 위젯 개념에 대한 설명을 읽고 기록해보려고 한다.

1. main()

dart의 모든 함수는 void main() 함수에서 시작한다고한다. dart언어를 사용하는 flutter 도 main() 함수를 가지고있는 main.dart 파일에서 실행을 하면 시뮬레이터에 해당 앱이 실행되게 된다. main.dart와 다른 이름을 가지는 파일을 만들어서 main함수를 정의 하면 똑같이 실행 시킬수 있고 해당 main함수로 실행되는 앱이 나타나게 된다. main함수가있어야 한다는건 java나 c언어와 똑같은거같다. 주로 파이썬이나 JS를 다루고 있는데 이런점에서는 다른부분인듯?

2.simple_main.dart

책에서는 simple_main.dart 파일에 main-> runApp -> materialApp -> scatfold-> AppBar + Text 로 정의된 코드를 설명해준다.

main() 가 필요하다는 것은 알았고, 이 중에 빠지는 것이 있다면 어떻게 되는지 궁금했다.

void main(){
}

만 정의하고 실행하면 어떻게 될까?

앱은 실행되지만, 아무것도 없는 흰바탕으로 나온다.

main() 함수는 runApp() 을 return 해야하는데 그냥 아무것도 return 하지 않아도 같은 상황이 된다. 

그럼 runApp에 아무 arguments 도 입력하지 않는다면??

우선 vscode 에서도 에러를 표시해주지만, 무시하고 실행하면

arguments 가 1개 필요하다고 나온다.

에러 로그의 문장들은 python이랑 비슷한듯하다.

runApp()를 보면

Type: void Function(Widget)

package:flutter/src/widgets/binding.dart

returnType이 void 인 함수로 parmeterType이 Widget이다 optional parameter가 아닌걸로보아 Type 이 Widget인 객체를 argument로 입력해 주면 될거 같다. 

그럼 MaterialApp은 Widget이라는 소리인데 Text widget을 넣으면 어떻게 될까

import 'package:flutter/material.dart';

void main() {
return runApp(Text('Hello Flutter'));
}

-- console

No Directianlity widget found 라는 Exception이 발생한다.

이게 무엇인지는  나중에 확인해 보기로하고 바로 Text() widget을 우선은 넣으면 안되는 것은 확인했다 (방법이있겠지?)

MateriaApp을 입력하고 title 만 값을 줬다.

정상 실행은 되지만, 아까와는 다르게 검은 화면으로 화면이 나타났다. 왜지? ㄴㅇㄱ

home parameter에 Text widget을 입력해보았다.

빨간 색상과 노랑 밑줄이 default 인가?

import 'package:flutter/material.dart';

void main() {
  return runApp(MaterialApp(
      title: "Hello World",
      home: Scaffold(
        appBar: AppBar(title: Text('Widget')),
      )));
}

Scaffold class 를 입력해주고 appBar에는 AppBar class 를 입력해 주니 처음 main.dart를 실행했을때와 비슷한 모양의 화면으로 출력되었다.

Scaffold class 와 각 parameter가 무엇을 하는지는 따로 글을 작성해 주어야 겠다. 

우선은 이러한 느낌으로 화면을 구성해 나간다는 아주아주 기초적인 부분을 이해하는데 도움이 되었다. 

Java를 사용하기 위해서 JDK 를 설치해야 하는데 오라클에서 매번 다운받아서 설치하기가 너무 귀찮아서 openJdk를 언제부턴가 계속 쓰고 있다.

openJDK 는 jdk.java.net 에서 다운로드 받을 수 있습니다.

Ready fo use 를 보면 JDK19를 다운로드 받을수있네요.

그런데 제가 사용하고 싶은 JDK는 17버전입니다.

Archive 로 이동 해줍니다. https://jdk.java.net/archive/

사용하는 운영 체제에 맞게 다운로드 받아 줍니다. 저는 윈도우 환경이므로 Windows 64-bit를 다운받아줬습니다.

압축을 풀어서 Program File안에 Java 폴더로 옮겨줬습니다.

이전에 설치한 버전도 있습니다. 2개나....

이제환경변수를 등록해 줍니다.

JAVA_HOME 으로 변수를 등록해 주고

Path 에 추가 해 줬습니다.

cmd 에서 java version을 확인 해봅니다.

끝

JDK 17을 사용하게 된 이유는 spring boot 3.0버전 대를 사용하려면 JDK17이 최소 필요사항입니다.

https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-3.0-Release-Notes

https://docs.flutter.dev/get-started/install/macos

Flutter 앱/웹/데스크톱 크로스 플랫폼 GUI SDK이다.

웹 페이지를 주로 리액트로 개발하던 중 요즘들어 부쩍 Flutter에 대한 글이나 동영상이 많이 보이는것 같아 관심을 가지게 되었다.

회사에서 개발/배포 중인 앱도 React Native에서 Flutter로 옮긴듯 했다. (테스트를 진행하기 위해 받은 apk가 flutter 로고였다.)

이래저래 관심을 가지고 있던중 본격적으로 스터디를 해보면 어떨까하다 글을 기록하기로 했다.

먼저 설치를 해야겠지?

Flutter 공식 사이트에서 제공하는 Document를 참고하여 MacOS 에 설치를 진행해보고자 한다.

Apple silicon Mac dms Rosetta가 필요하다고 한다.

아래 코드로 설치해 주자

Flutter SDK를 zip 파일로 받아 사용할수도 있지만, git 에서 clone으로 받아 사용해 보기로 했다.

Mac Documents로이동해서 git clone을 해본다.

cd Documents
git clone https://github.com/flutter/flutter.git -b stable

환경 변수를 등록해 주자 

zsh 쉘을 사용하고 있다.

sudo vi ~/.zshrc
export PATH="$PATH:/Users/<계정이름>/Documents/flutter/bin"
source ~/.zshrc

flutter doctor를 입력주자.

building flutter tool... 부분에서 permission 오류가 생겼다.

sudo chown -R <dir> flutter 로 소유자를 변경해 주자

다시 flutter doctor를 실행하면

안드로이드만 이슈가 있네요

어차피 Xcode로 ios 시뮬레이터를 사용할거라 넘어갑니다.

vscode를 사용할거기 때문에 extention 을 설치해줍니다.

f1 으로 프로젝트를 새로 만들어 주고

open -a Simulator

커맨드로 시뮬레이터를 실행하고

main.dart에서 run을 하면

시뮬레이터로 잘 실행이 되네요

도커를 우분투에 설치해보자!

https://docs.docker.com/engine/install/ubuntu/

도커 document를 참고해서 설치를 진행해 보자!

그래서 우분투가 설치되어 실행가능한 환경을 세팅해놓는것 부터 시작한다.

먼저 apt update 를 진행한다.

apt-get update

필요한 패키지들을 설치해 준다.

apt-get install ca-certificates curl gnupg lsb-release

keyrings 디렉토리를 생성해 주고 

gpg key를 등록해 준다.

mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg

repository를 등록!

echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | tee /etc/apt/sources.list.d/docker.list > /dev/null

다시한번 apt update

apt-get update

이제 docker와 관련된 패키지들을 설치해보자

apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin

설치가 진행된다. 완료가 되면 docker --version을 입력해 버전을 확인

docker --version

설치 끝!

사실 너무 간단하게 보이기도 하는데 기록해 놓은면 좋을지도

virtual box 를 통해서 docker를 연습해보던중 pc-virtual box - docker 로 접속 하는 것보다 pc-docker 로 접속하면 어떨까 해서 docker에 ssh를 설치를 해보려고 했다.

- 초기 설정이 되어있다고 가정한 후

openssh-server 설치 후 

ssh 서비스를 실해 준다.

apt-get install openssh-server -y supervisor

사용자를 추가하면 좋겠지만 그냥 root 를 쓴다고 가정하고

root 패스워드 설정후 sshd config 를 수정한다.

passwd root

vim /etc/ssh/sshd_config
PermitRootLogin yes

서비스 실행

service ssh start

도커 컨테이너 실행시 port를 2221:22 로 매핑해 pc 에서 guest ip + 2221포트로  ssh 접속을 해 docker로 접속할수있게 됐다.

이미지 커밋해놔야지

th:href="@{/css/main.css}"

th:src="@{/js/app.js}"

th:fragment = ""

th:block th:replace="dir/file::fragment_name" 

th:block layout:fragment="block name"