그냥

# 참조 강의 (노마드코더 - Flutter로 웹툰 앱 만들기)

https://nomadcoders.co/flutter-for-beginners

# 앞으로 4일동안 0.0 ~ 6.18 강의 전부를 들으며 기억할 내용을 간단히 소스위주로 남길것이다.

#0.0. Introduction

프레임워크의 철학, 규칙, 동작하는 원리,

그리고 앞으로 3개의 서로 다른 어플리케이션을 만들게 될것이다.

#1.1. Requirements

Flutter로 앱 개발을 하기 위해서는 Dart를 공부해라.

노마드코더 강의중에 Dart 기본 강의 있다.

Flutter에 사용될 Dart 기본적인 것들을 배울 수 있다.

#1.2. Why Flutter

Flutter는 iOS나 안드로이드, 웹, 맥OS, 윈도우, 리눅스 상에서 동작하는

웹 어플리케이션, 심지어 임베디드까지 다룰 수 있다.

 - 여러 가능성 체험, 확인해보기

  앱이름 : Wonderous (구글플레이 및 애플앱스토어에 있음)

  https://photobooth.flutter.dev/

  https://flutter.gskinner.com/flokk/

  https://flutterplasma.dev/

  https://flutter.dev/games

#1.3. How Flutter Works

Flutter에선 실제 iOS 혹은 안드로이드 버튼을 만들어내는 기능은 존재하지 않는다.

다른 크로스플랫폼 프레임워크처럼 동작하는 것이 아니기 때문이다.

위젯이나 화면 상에 보여지는 모든 것들은

Flutter 어플리케이션 상의 모든 것들은

호스트에 의해 그려진 것이 아니고,

iOS나 안드로이드에 의해 그려진 것이 아니다.

C나 C++ 언어로 이루어진 엔진에 의해 그려지는 것이다.

#1.4. Flutter vs React Native

React Native에선 버튼을 하나 만들면 iOS와 안드로이드에서 서로 다르게 보인다.

Flutter는 컴포넌트를 렌더링하기 위해 운영체제와 직접 소통하지 않는다.

대신 Flutter는 엔진을 통해서 모든 컴포넌트를 렌더링해준다.

멋진 커스터마이징된 디자인을 만들거나

iOS 혹은 안드로이드 앱처럼 보이게끔 만들고 싶지 않다면

Flutter를 사용하는 것이 편하다.

iOS 스타일의 버튼, input, 검색바를 사용하는 iOS스러운 앱을 만들고자 할때는

호스트 운영체제의 스타일을 제공해주는 React Native를 사용하는 것이 좋다. 

#1.5. Recap

1장에서는 Flutter와 다른 크로스플랫폼 프레임워크의 차이점에 대해 다루었다.

#4.0. Your First Dart Class

#4.1. Constructors

#4.2. Named Constructor Parameters

#4.3. Named Constructors

#4.4. Recap

#4.5. Cascade Notation

#4.6. Enums

#4.7. Abstract Classes

#4.8. Inheritance

#4.9. Mixins

최신 버전에서는 class 가 아닌 mixin 또는 mixin class 로 선언해주어야 한다.

#4.10. Conclusions

flutter로 가보자

#3.0. Defining a Function

#3.1. Named Parameters

#3.2. Recap

positional

named

+required

etc

#3.3. Optional Positional Parameters

#3.4. QQ Operator

#3.5. Typedef

#2.0. Basic Data Types

String : 문자열

bool : 참거짓

int : 정수

double : 소수점 나타낼 수 있음, 더 큰 단위

num : 그 숫자는 integer일 수도 있고, double일 수도 있다.

모든 자료형은 object, 즉 class이다.

#2.1. Lists

리스트는 위와 같이 대괄호 사이에 값을 넣어서 정의한다.

가능하면 var 변수를 사용하도록 하고, 아래처럼 List<type> 형식으로도 선언 가능하다.

vscode에서는 마지막에 ','(쉼표)를 붙이면 줄바꿈이 되어 데이터가 많은 경우 보기 편해지니 참고하자.

#2.2. String Interpolation

변수명 앞에 '$' 붙여서 바로 사용 가능하다.

중괄호와 수식을 사용할 경우 계산하여 반영된다.

똑같은 작은 따옴표가 있을 경우 텍스트로 사용 하고 싶다면 '\'(역슬래시)를 앞에 붙이면 된다.

#2.3. Collection For

위처럼 사용도 가능하다.

ex) collection if 는 로그인 여부에 따라 특정 버튼을 보여주는 것 같은 경우 활용 가능하겠지?

     조건은 다르겠지만 for 도 마찬가지로..

#2.4. Maps

위의 경우 player는 Map<String, Object> 타입이다.

위 두 경우는 동일하다.

예시1)

예시2)

Map도 class이므로 Method와 property를 가지고 있다.

예시3) 다양한 방법으로 사용 가능하다.

#2.5. Sets

Set과 List의 차이점

 : Set에 속한 모든 아이템들은 유니크하다.

   >> 값들이 중복되지 않고 하나만 존재한다는 말.

위 처럼 {1, 2, 3, 4,} Set에 1과 2를 추가하려고 하면

List 처럼 1, 2, 3, 4, 1, 1, 2 가 저장되어 있는 것이 아니라.

1과 2는 기존에 존재하므로 추가되지 않는다.

요소가 항상 하나씩만 있어야 되면 Set을 사용하면 된다.

유일(unique)할 필요가 없다면 List를 사용하면 된다.

Dart에서 List는 Python의 List와 같고,

Dart에서 Set는 Python의 Set과 같다.

https://nomadcoders.co/

- 자세한 내용은 노마드코더 다트 강의 참고

플러터로 크로스플랫폼 앱을 만들기 위해서 사용한다.

플러터로 앱을 만들기 위해서 다트를 필요로 하기 때문에 먼저 공부한다.

기초를 확실히 다져두어야 문제 발생 시,

다트 문제인지 플러터 문제인지 이해할 수 있어야 한다.

다트, 코틀린, 스위프트, 타입스크립트 모두 비슷하다.

다트를 특별하게 만들어 주는것은 무엇일까.

다트는 2개의 컴파일러를 가지고 있다.

Dart Web - dart 코드를 javascript로 변환해주는 컴파일러.

Dart Native - dart 코드를 여러 CPU 아키텍쳐에 맞게 변환해준다.

거의 모든곳에서 돌아가도록 개발 가능하다.

JIT - just-in-time (dartVM사용-결과바로확인) - 개발에 용이하다

AOT - ahead-of-time (컴 파일-바이너리배포-사용) - 배포후 사용에 용이하다

null safety - null 참조로 발생하는 문제 방지 (?! 나중에 설명?!)

Dart, Flutter 둘다 구글이 만들었다.

Dart 공부에는 편하게 아래 사이트를 이용할 수 있다.

별도로 설치할 필요 없고 코드 작성 후 결과를 확인할 수 있고,

특정 메소드에 대한 설명도 확인할 수 있다.

https://dartpad.dev/

*1.0. Hello World

Dart, Flutter가 이미 설치되어 있다면 빈 프로젝트를 만들어서 테스트 해보아도 좋다.

외부에서 강의를 들으며 작성할 수도 있어서,

필요 시 스크린샷은 dartpad 에서 캡쳐해야 겠다.

main 함수는 Dart 프로그램의 시작점으로 중요하다.

main 함수가 없을 경우 실행하려고 하면 문제가 발생한다.

라인이 끝나는 경우 세미콜론을 잊지 말자.

 - 세미콜론을 쓰지 않는 경우도 있다. 그건 나중에...

* 1.1. The Var Keyword

1.

변수를 만들때에 var 라는 키워드를 사용한다.

업데이트 시 본래 타입과 일치해야한다.

그렇지 않을 경우 에러가 발생한다.

똑같은 타입의 데이터를 넣어주는 경우 에러가 발생하지 않는다.

2.

명시적으로 변수의 타입 지정하여 변수를 만들 수 있다.

두 방법은 어떨때에 사용될까.

var - 관습적으로 함수나 메소드 내부에 지역 변수를 선언할 때 사용한다. (Dart스타일가이드의 권장 방식)

타입지정 - class에서 변수나 property를 선언할 때 사용한다.

* 1.2. Dynamic Type

dynamic - 여러가지 타입을 가질 수 있는 변수에 쓰는 키워드.

무엇이든 될 수 있다고 생각하면 된다.

var 로 변수 선언 후, 값을 정의하지 않을 경우 아래와 같이 사용 가능하다.

dynamic 필요한 이유

 - 변수가 어떤 타입인지 알기 어려운 경우가 있기 때문.

 - 가끔씩 dynamic으로 살짝 돌아가는게 유용한 경우도 있기 때문.

var가 아니라 dynamic으로 직접 명시해줄 수도 있다.

값이 정의되어 있지 않은 경우 dynamic 변수 타입이 지정되어 있지 않아서

한정적인 자동완성 옵션들이 확인되는 것을 알 수 있다.

조건에서 특정 타입을 사용할 경우

아래와 같이 프로그램이 인식해서 해당 타입에 맞는 자동완성 옵션들을 확인할 수 있다.

vscode에서도 마찬가지이다.

이 부분은 Dart가 알아서 확인/처리해준다.

dynamic은 반드시 꼭 필요한 곳에만 사용되어야 한다.

#1.3. Nullable Variables

null safety - 개발자가 null 값을 참조할 수 없도록 하는 것.

String일수도, null일수도 있다는걸 표현하기 위해서 '?'를 사용한다.

기본적으로 모든 변수는 non-nullable이다.

null이 될 수 없다는 뜻이다.

또한 아래와 같이 줄여서 표현할 수도 있다.

1번과 2번은 동일한 의미로 사용된다.

*1.4. Final Variables

final - 한 번 정의된 변수를 수정할 수 없게 만들때 사용한다.

javascript나 typescript의 const와 똑같다.

딱 한번만 설정될 수 있다.

final과 변수명 사이에 String 같은 타입을 넣어줄 수도 있다.

어짜피 Dart에서는 변수값 정의할 때 타입을 알기 때문에 타입을 작성하지 않아도 된다.

*1.5. Late Variables

late는 final이나 var 앞에 붙여줄 수 있는 수식어이다.

late는 초기 데이터 없이 변수를 선언할 수 있게 해준다.

초기 데이터 정의를 하지 않고 사용한다면,

dart는 값을 넣기 전에는 접근하지 않아야 한다는 것을 에러로써 알려준다.

추후 데이터가 정의된다면 에러는 발생하지 않는다.

*1.6. Constant Variables

dart의 const는 javascript나 typescript와 다르다.

dart의 final 키워드와 비슷하다.

dart에서 const는 compile-time constant를 만들어준다.

컴파일 시 정확히 알 수 있는 하드코딩된 값을 사용해야 한다.

앱을 컴파일해서 앱스토어에 올리기 전에 이미 알고 있는 상수 값을 다룰때 사용한다.

ex) max_allowed_price

만약 어떤 값인지 모르고 그 값이 API로부터 온다거나

사용자가 화면에서 입력해야 하는 값이라면

그 변수는 final이나 var가 되어야 한다.

*1.7. Recap

변수 섹션 복습.

의식의 흐름대로 남기는 것
하고 싶은 것이 생겼다
일단 하고싶다는 생각만 가지고 있는 상태

계획은 나중에
할 수 있을때
지금은 못버틸것 같다

게임용 노트북은 있지만
개발용 경량 노트북을 별도로 보유하고 있지는 않다
그렇다
갤럭시탭으로는 사실상 진지하게 개발을 할 수는 없다
이 갤럭시탭을 처분하고 소형이어도 그냥 노트북을 사는것이 나을것 같다는 생각이 든다
이렇게 탭으로 할 수 있는 일을
플립이나 폴드로도 충분히 할 수 있다고 생각되고 있다.
탭에 펜으로 작성하면 나중에 언제 다시 끄집어내서 복습하지 않는 것 같기 때문이다.
차라리 폰에 작성을 해두면 언제든
더 볼 수 있는 가능성이 높지만,
탭은 시간과 장소가 허락되는 곳에서만 꺼내서 무언가 할 수 있기 때문이다.

특히 2023년말까지 농협에서만 있을테니 더 그럴것 같다.

무엇이든 스마트폰으로 컨트롤을 하고 그냥 집컴을 계속 켜두거나
클라우드 서버나 플랫폼형 서비스를 사용하는게 좋을 것 같다는 생각이 든다.
갤럭시 탭으로 내가 한것들? 이 제품의 값어치만큼 생산적이라고는 말 못하겠다.

정보처리기사
2023년 정기 기사 3회
필기원서접수(휴일제외)
20230619 ~ 20230622 (월10:00~목18:00)
필기시험
20230708~20230723 (0715~0716  반드시 접수)
합격발표
20230802 (수)
실기원서접수(휴일제외)
20230904~20230907 (월10:00~목18:00)
실기시험
20231007~20231020
최종합격자발표
20231115 (수)

정처기 필기/실기 둘다 양 많다
고등학생, 대학생, ISTQB공부할 때에는 어떻게 공부했더라
공부를 어떻게 해야하는지 감을 잃어버린것 같다

필기시험까지 한달 안되게 남았으니
그동안 꾸준히 매일 조금씩이라도 감을 잃지 않도록 공부하고
이번에 반드시 실패없이
합격해야만 한다

앱개발을 한다면 DB는 뭘 쓰지?
이것 저것 써봤는데
마리아db를 생각했는데
몽고db가 갑자기 생각나서
sql vs nosql 의 고민으로 번졌다
전체적으로 여유가 있을 때 블로그에 몇줄 남기는거라
나중에 다시 안볼지 모르지만 참고 링크만 몇개 남겨둔다
https://ckddn9496.tistory.com/96

https://velog.io/@kihongsi/DB-MariaDB%EC%99%80-MySQL-%EC%A4%91-%EB%AC%B4%EC%97%87%EC%9D%84-%EC%8D%A8%EC%95%BC-%ED%95%98%EB%82%98

https://mjmjmj98.tistory.com/43

(Original)

Good morning! Here's your coding interview problem for today.

This problem was asked by Google.

Given the root to a binary tree, implement serialize(root), which serializes the tree into a string, and deserialize(s), which deserializes the string back into the tree.

For example, given the following Node class

class Node:
    def __init__(self, val, left=None, right=None):
        self.val = val
        self.left = left
        self.right = right

The following test should pass:

node = Node('root', Node('left', Node('left.left')), Node('right'))
assert deserialize(serialize(node)).left.left.val == 'left.left'

(Google번역)

좋은 아침! 오늘의 코딩 인터뷰 문제는 다음과 같습니다.

이 문제는 Google에서 요청했습니다.

이진 트리의 루트가 주어지면 트리를 문자열로 직렬화하는 serialize(root)와 문자열을 다시 트리로 역직렬화하는 deserialize(s)를 구현합니다.

예를 들어 다음 노드 클래스가 주어진 경우

class Node:
    def __init__(self, val, left=None, right=None):
        self.val = val
        self.left = left
        self.right = right

다음 테스트를 통과해야 합니다.

node = Node('root', Node('left', Node('left.left')), Node('right'))
assert deserialize(serialize(node)).left.left.val == 'left.left'

시간내서 하나씩 고민하고 풀어보기.

(메일에 쌓아둘순 없으니..)

매일 문제을 받고 싶다면 아래 링크에서 구독해보세요.

(단, 문제 풀이는 프리미엄 구독자만 받을 수 있음)

https://www.dailycodingproblem.com/

(Original)
Good morning! Here's your coding interview problem for today.

This problem was recently asked by Google.

Given a list of numbers and a number k, return whether any two numbers from the list add up to k.

For example, given [10, 15, 3, 7] and k of 17, return true since 10 + 7 is 17.

Bonus: Can you do this in one pass?

(Google번역)
숫자 목록과 숫자 k가 주어지면 목록에서 두 숫자의 합이 k가 되는지 여부를 반환합니다.
예를 들어 [10, 15, 3, 7] 및 17의 k가 주어지면 10 + 7은 17이므로 true를 반환합니다.
보너스: 이 작업을 한 번에 수행할 수 있습니까?

매일 문제을 받고 싶다면 아래 링크에서 구독해보세요.

(단, 문제 풀이는 프리미엄 구독자만 받을 수 있음)

https://www.dailycodingproblem.com/

// example
const array = [10, 15, 3, 7]
const k = 17
let result;
let i = 0;
let j = i + 1;

for (; i < array.length; i++) {
  for (; j < array.length; j++) {
    if (array[i] + array[j] === k) {
      result = true;
      break;
    }
  }
  if (result) break;
}
console.log(result);

숫자 배열안에 N개의 숫자가 있을 때,

for 2번 사용하여 최대 N * (N-1) 으로 O(N2) 복잡도를 생각할 수 있다.

그런데 한 번에 수행한다는 의미가... O(N) or O(1) 이 가능하다는 말인지..

vue cil 사용하여 빌 드 후 배포시 참고 자료

https://cli.vuejs.org/guide/deployment.html

일단 배포는 미루고 빌드하며 문제가 생겼던 부분 해결한 방법에 대해서 적는다.

##  *.ico, *.jfif 이미지 파일에 대한 오류 ...

webpack을 설치하려다가 기존 vue 프로젝트에 적용하는 것은 단순히 여러 글을 참고해서

설정 파일을 따라서 작성하는 것만으로는 적용할 수 없겠구나 라는 것을 깨달았다.

그래서 다시 package.json > scripts > build 부분을

webpack 에서 다시 기본값인 vue-cli-service build 로 수정하였다.

그리고 터미널에서

npm run build 실행하였으나 위 img1 과 같은에러가 발생하였다.

ico, jfif 파일을 로더에서 처리할 수 없어서 발생한다고 한다.

로더 설정을 수정하거나 추가하여 ico, jfif 파일도 변환 가능하도록 해야 한다.

또한 기본 vue cli 에 포함된 webpack을 확인하여 vue.config.js에 추가하거나 수정 가능한 것을 알게 되었다.

vue inspect 명령어를 사용해서 현재 프로젝트에 설정된 웹팩 옵션들을 확인 할 수 있었다.

터미널에 위 명령어 사용 시 내용이 많으므로, 아래와 같이 다른 파일에 저장하여 확인 하도록 한다.

vue inspect > options.js

options.js 파일에서 내용을 검색하여 아래와 같은 image 부분을 확인 할 수 있었다.

해당 부분을 참고해서 vue.config.js 내부에 추가하였으나 type 관련 에러가 발생하여

최종적으로 추가한 설정은 아래와 같다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.(ico|jfif|png|jpe?g|gif|webp|avif|svg)(\?.*)?$/,
          type: 'asset/resource',
          use: [
            {
              loader: 'file-loader',
            },
          ],
          generator: {
            filename: 'img/[name].[hash:8][ext]',
          },
        },
      ],
    },
  },
});

(최대한 빠른 시일내에 해당 에디터를 좀 고치거나 css를 손보거나,,,영 불편하다)

vue.config.js 설정 수정한 후 다시 빌드 시 정상적으로 완료되는 것을 확인 가능하다.

참고 링크

https://cli.vuejs.org/config/#vue-config-js

https://joshua1988.github.io/vue-camp/webpack/project-setup.html

https://cli.vuejs.org/config

자바스크립트 사용해서 이미지 위 클릭한 위차에 동그라미를 출력할 일이 필요했다.

div, svg, circle element 생성하고 appendChild 이용해서

circle을 svg 하위에, svg를 div 하위에 추가한 후

최종적으로 특정 div 내에 출력하려는 생각이었다.

현재는 잘 사용되도록 해결된 상태이지만,

잠깐 appendChild를 사용할 수 없는 노드라는 에러를 발견하고

구글에서 appendChild에 대해서 검색을 했더랬다...

크롬 탭에 또 그렇게 검색중인 내용들이 쌓였는데

해결되고 닫지 않은듯하다 아마도?

// example
const div = document.createElement("div");
document.body.appendChild(div);

참고 : https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild

티스토리에는 글 작성 시 여러 동작하는 소스를 넣는 것이 불편하다.

이전에 여러 블로그 글들에서 본 적 있지만 딱히 관심 주지 않던 codepen에 대해서 오늘 생각나서 링크 남긴다.

https://codepen.io/

위와 같이 코드 내용과 함께 결과를 확인 가능하게 도와준다.

티스토리에서는 스키편집 > 파일첨부에서 ei.js를 첨부한 이후에

HTML 편집에서 head 부분에 script 추가해 주는 것으로 준비는 완료된다.

그 후 codepen에서 코드 작성 하고 우측 하단에 embed를 클릭하면 다른 곳에 첨부할 수 있도록 도와준다.

VUE 컴포넌트 만들때 참고

https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component#in_this_module

정규식 검사

https://regexr.com/

단계별 설명도 어느정도 있어서 도움이 더 된다.

그래도 정규식은 직접 여러번 겪어보지 않으면 눈에 한번에 안들어오는듯,,,

여기도 도움이 된다.

https://regex101.com/

vue router - child component, redirect

https://any-ting.tistory.com/47