lsm_97.log

Vue URL Copy

Mon, 22 Jul 2024 05:52:37 GMT

vue2 사용 중 URL 복사 기능을 구현

사용 라이브러리

vue-clipboard2

1. 설치


npm install --save vue-clipboard2

2. 설정

에 추가

import VueClipboard from 'vue-clipboard2'

VueClipboard.config.autoSetContainer = true;

3. 사용 방법 : 사용 할 위치에 import

import VueClipboard from 'vue-clipboard2'

4. 함수 생성

// 버튼 생성



// url 복사 
    doCopy() {
      var url = window.location.href

      this.$copyText(url);
      alert('복사가 완료 되었습니다.');
    }

windows에서 Linux 개발을 할 수 있는 방법

Wed, 01 Nov 2023 02:07:56 GMT

windows에서 Linux를 개발 할 수 있는 방법은 여러가지가 있다.

WSL을 이용한 방법
서버에서 Docker을 설치 해 Linux를 받아서 이용하는 방법

여기서 소개 할 내용은 첫번 째 WSL을 이용하는 방법이다.

WSL 이란?

windows 컴퓨터에서 Linux의 기능을 엑세스 할 수 있도록 도와주는 시스템이다. (Linux용 windows 하위 시스템)

WSL 이용 방법

WSL을 이용하면 개발자가 Linux 배포판(Ubuntu, OpenSUSE, Kali, Debian, Arch Linux)을 설치하고 기존 가상 머신 또는 이중 부팅 절정의 오버헤드 없이 windows에서 직접 Linux 애플리 케이션, 유틸리티 및 Bash 명령줄 도구를 사용할 수 있다.

필수 조건

밑에 있는 명령어를 사용하기 위한 조건으로 Windows 10 버전 2004 이상(빌드 19041 이상) 또는 Windows 11을 실행해야 한다.

이전 버전을 사용하는 경우 아래 링크를 통해 들어간다.

클릭 해보던가

WSL 설치 명령

관리자 모드에서 PowerShell 또는 cmd(터미널)을 마우스 오른쪽 클릭을 통해 '관리자 권한'으로 실행한다. (아래의 명령은 WSL이 전혀 설치되지 않은 경우에만 작동합니다)

WSL을 실행하고 Linux의 Ubuntu 배포를 설치하는 데 필요한 기능을 사용하도록 설정
```
wsl -- install
```

기본적으로 설치된 Linux 배포는 Ubuntu이다.

<배포판 종류와 특징>

Ubuntu : Linux(리눅스)의 배포판 중 하나.

용도 : 사용자 친화적인 데스크톱 및 서버 운영 체제, 클라우드 서버에서도 많이 사용 특징 : Debian 기반, 간단한 설치 및 설정, 긴 지원주기(LTS 버전) 패키지 관리 : APT(Advanced Package Tool)을 사용

OpenSUSE

용도: 개발자 및 기업용 운영 체제, 서버 및 클라우드 환경에서 널리 사용. 특징: RPM 패키지 포맷, YaST 시스템 설정 도구, 높은 확장성. 패키지 관리: Zypper를 사용.

Kali Linux

용도: 주로 보안 및 해킹 테스트용. 페너테이션 테스트 및 보안 연구에 사용. 특징: 성능 최적화, 다양한 보안 도구 및 스크립트 포함, Debian 기반. 패키지 관리: APT를 사용.

Debian

용도: 안정성을 중시하는 일반적인 서버 및 데스크톱 운영 체제. 특징: 운영 체제 업데이트가 안정적이며 품질이 높음, 패키지의 엄격한 테스팅. 패키지 관리: APT를 사용.

Arch Linux

용도: 개발자 및 고급 사용자를 위한 커스텀 운영 체제. 최신 소프트웨어 버전 사용. 특징: 롤링 릴리스 모델, PKGBUILD 스크립트로 소프트웨어 설치 및 빌드. 패키지 관리: Pacman을 사용.

설치 된 배포판을 변경 하기 위해 아래의 명령어를 수행한다.

wsl --install -d

온라인 스토어를 통해 다운로드할 수 있는 Linux 배포판 목록을 보려면

wsl --list --online

또는

wsl -l -o

를 입력합니다.

초기 설치 후 추가 Linux 배포판을 설치하려면

wsl --install -d

명령을 사용합니다.

설치 과정 중 문제 발생 시 여기를 참조 하자

WSL을 설치한 후에는 새로 설치된 Linux 배포판의 사용자 계정 및 암호를 만들어야 한다.

자세한 내용이 궁금하면 여기를 참조하자

설치 된 Linux 배포판을 나열하고 각각 설정 된 WSL 버전을 확인 하려면 아래의 명령어를 입력하자.

wsl -l -v

설치된 기본 버전을 변경 WSL1, WSL2로 설정하기 위해 아래 명령어를 입력하자.

wsl --set-default-version

wsl 명령과 함계 사용되는 기본 Linux 배포판을 설정하려면

wsl -s

또는

wsl --setdefault

입력하고 DistributionName을 사용하려는 Linux 배포판의 이름으로 바꾼다.

WSL의 기본 명령 가이드 : 여기

Vueper 라이브러리

Fri, 22 Sep 2023 07:23:30 GMT

시작..

이 글에서는 Vue.js 2 버전에서 사용하는 Vueper 라이브러리 사용에 대해서 작성 한다.

Vueper 공식문서

1. Install (버전에 맞게 VS CODE 터미널에서 입력하여 설치하면 된다.)

npm i vueperslides # Vue 3.
npm i vueperslides@legacy # Vue 2.

2. import (아래와 같이 import 해준 후 component에 등록하면 사용이 가능하게 된다)

import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css'
...

export default {
  components: { VueperSlides, VueperSlide },
  ...
}

3. script (Vueper Slides 스크립트를 포함)

...

여기까지 왔으면 사용 셋팅은 끝이다.

4. 사용

data에서 slides 객체에 title, content를 가진 배열을 원하는 정보 만큼 값을 입력하거나, BackEnd에서 받은 데이터를 이용해 객체에 담아 받으면 v-for를 사용해 데이터를 출력하여 slide를 만들 수 있다.

추가

vueper-slides태그 안에 여러 개의 vueper-slide태그를 사용할 수 있으며 vueper-slide태그에 html 코드를 담아서 외부에 버튼이나 구조를 만들 수 있다.

vueper-slides에는 여러개의 설정을 할 수 있는데 공식문서에 예제와 내용이 잘 나와있다. 그 중 내가 사용한 설정을 몇개 설명하면 아래와 같다.

vueper-slides에서 click 이번트를 사용하려면 기존의 vue의 @click가 아닌 @click.native를 사용해야 한다. (이걸 몰라 아까운 시간을 잡아먹음..)

autoplay : 자동으로 slide가 넘어가도록 하는 속성

slideMultiple : ture = 한번에 보여지는 화면 단위로 화면 넘김, false = 한 장씩 단위로 화면 넘김

visible-slides : 한번에 사진을 몇장 씩 보여줄 꺼냐 라는 속성

arrows-outside : slide 외부에 "<" , ">" 버튼을 만들어 화면이 이동하게 하는 속성 (false면 안보임), inside는 슬라이드 안에 버튼을 만드는 속성이다.

gap : slide에 있는 요소들의 간격 속성, padding으로 이해하면 쉽다.

이러한 옵션들을 이용해 slide를 만들 수 있다.

나는 Back에서 이미지 데이터를 받아와 화면에 출력하는 것을 만들었기 때문에 추가 버튼이나 다른 기능들을 사용하지 않았지만 영상재생이나 외부에 버튼을 만들어 slide를 조작하는 기능도 포함하고 있으니 공식문서를 참고하면 좋을 듯 하다.

다음 내용

다음에 소개할 내용은 Vueper slide에서 사진을 클릭 하면 전체화면으로 사진을 볼 수 있는 v-viewer이라는 라이브러리에 대해 소개 할 것이다.

Spring - REST-API

Thu, 20 Jul 2023 02:23:16 GMT

< 시작 전 알아두면 좋은 개념 >

> API (Application Programming interface) : 응용 프로그램에서 사용할 수 있도록 다른 응용 프로그램을 제어할 수 있게 만든 인터페이스

> API 사용 효과 : 내부 구현 로직을 알지 못해도 정의되어 있는 기능을 쉽게 사용 가능하다.

> Interface : 어떤 장치간 정보를 교환하기 위한 수단이나 방법을 의미한다. Ex) 마우스, 키보드, 터치패드 등 동작원리나 로직이 어떻게 구현되어 있는지  알지 못해도 쉽게 사용 가능하다.

< REST (Representational State Transfer) 란 ? >

> 자원의 이름으로 구분하여 해당 자원의 상태를 교환하는 것을 의미한다. (자원 == 데이터)

> REST는 서버와 클라이언트의 통신 방식 중 하나이다.

> HTTP URI를 통해 자원을 명시하고 HTTP Method를 통해 자원을 교환하는 것을 말한다. ( * HTTP Method : Create(생성), Read(읽기), Update(수정), Delete(삭제)  -> CRUD *)

< 특징 >

1. Server-Client 구조

 > 자원이 있는 쪽이 Server, 요청하는 쪽이 Client

 > 클라이언트와 서버가 독립적으로 분리되어 있어야 한다.

2. Stateless

> 요청 간에 클라이언트 정보가 서버에 저장되지 않아야 한다.

> 서버는 여러개의 요청이 와도 각각의 요청을 완전히 별개의 것으로 인식하고 처리해야한다.

3. Cacheable

> HTTP 프로토콜을 그대로 사용하기 때문에 HTTP의 특징인 캐싱 기능을 적용할 수 있다. 

> 대량의 요청을 효율적으로 처리하기 위해 캐시를 사용한다.

4. 계층화 (Latered System)

> 클라이언트는 서버의 구성과 상관없이 REST API 서버로 요청한다.

> 서버는 다중 계층으로 구성될 수 있다. Ex) 로드밸런싱, 보안요소, 캐시 등)

5. Code on Demand (Optional)

> 요청을 받으면 서버에서 클라이언트로 코드 또는 스크립트(로직)을 전달하여 클라이언트 기능 확장이 가능하다.

> JavaScript에서 자주 사용되는 개념 : 스크립트를 받아 화면을 띄어주는 형식

6. 인터페이스 일관성 (Uniform Interface)

> 정보가 표준 형식으로 전송되기 위해 구성 요소간 통합 인터페이스를 제공한다.

> HTTP 프로토콜을 따르는 모든 플랫폼에서 사용 가능하게 끔 설계한다.

< 장점 >

> HTTP 표준 프로토콜을 사용하는 모든 플랫폼에서 호환이 가능하다

> 서버와 클라이언트의 역할을 명확하게 분리 가능하다 ( 요청하는 쪽이 클라이언트 자원이 있는 쪽이 서버)

> 여러 서비스 설계에서 생길 수 있는 문제를 최소화 할 수 있다.

< REST API 란? >

> REST 아키택처의 조건을 준수하는 어플리케이션 프로그래밍 인터페이스를 뜻한다.

> 최근 많은 API가 REST API로 제공되고 있다.

> 일반적으로 REST 아키텍처를 구현하는 웹 서비스를 RESTful한다고 표현한다.

< REST API 특징 >

> REST 기반으로 시스템을 분산하여 확장성과 재사용성을 높일 수 있다.

> HTTP 표준을 따르고 있어 여러 프로그래밍 언어로 구현할 수 있다.

Vue.js - VS Code 기능 꿀팁

Wed, 19 Jul 2023 01:02:41 GMT

1. Peek

<사용방법 : F12>

> 다른 파일에서 함수를 불러 쓸 때 그 함수에 대해 알고싶을 때 사용할 수 있다.

> 함수가 있는 파일의 위치로 워프하게 된다.

<사용방법 : Alt + F12>

> 현재 작업하고 있는 위치에서 함수를 확인하거나 작업을 하고 싶을 때 사용

> 현재 파일에서 함수의 정보를 볼 수 있고 수정할 수 있다.

> 플러그 설치 : CSS Peak, HTML CSS Support 설치

> 위와 동일한 방법으로 사용 가능하다.

2. Refactoring

<사용방법 : Ctrl + Shift + R>

1. 로직을 함수로 감싸고 싶을 때 사용할 수 있다.

> 해당 로직을 드래그 후 Ctrl + Shift + R 을 누른 후 함수로 감싸는 옵션을 선택하면 가능하다.

> 스코프 밖에 만드는 것도 가능하다.

2. 변수로 만들기 도 가능하다.

3. 로직을 다른 파일로 뺄 수 있다.

> Move to new file 옵션 선택

3. Rename Symbol

/* 두가지 방법 중 아무거나 사용해도 무방하다 */

<사용방법1 : 변수 선택후 우클릭 + rename symbol을 선택>

<사용방법2 : 변수 드래그 후 F2>

> 여러 파일의 변수를 모두 바꾸고 싶다 할때 사용하면 좋다. 

(선택된 변수와 관련된 변수를 찾아 rename가능하다, 다른 파일에 있는 것도 가능)

4. Shippets

<사용방법 : 해당 프로젝트 언어에 맞는 Snippets 플레그를 설치하면 된다.>

> VS Code를 사용하는 이유 중 하나가 자동 완성이다. 자신이 사용하는 언어에 대한 자동완성을 도울수 있는 기능이다.

> Ex) Vue Snippets 플레그 설치

5. Multi-Cursor

<사용방법 : Alt + 원하는 코드에 마우스 왼쪽 클릭>

여러개의 코드에 같은 소스를 작성해야 하는데 한번에 하기 위해서 사용하는 방법이다.

6. Emmet

<사용방법 : emmet 명령어 + tab

Html 코드를 작성할 때 <>를 입력하지 않고 div를 입력후 tap을 치면 자동으로 div태그를 만들수 있다.

-> 
 생성

emmet 명령어 예제

1. div태그안에 p태그 3개를 넣고 싶다

-> div>p*3 입력후 tap

2. div태그에 class name을 test로 넣고 div태그안에 p태그 3개와 클래스명을 test1으로 넣고 싶다

-> div.test>p.test1*3 입력 후 tap

다른 명령어는 직접 검색 해보도록 하자

7. Shortcuts

<사용방법>

1. 한줄의 코드 드래그 : Ctrl + L

2. 한줄코드를 밑으로 내리고 싶다 : 1번 실행 후 Alt + 방향키

3. 코드를 복사해서 밑에줄에 넣고 싶다 : Shift + Alt + 아래방향 키 

4. 코드에서 방향키로 빨리 워프하고 싶다 : Ctrl + 방향키 (단어별로 워프가능)

5. 프로젝트에서 다른 파일로 이동하고 싶다 : Ctrl + P 입력후 파일 검색

6. 터미널을 키고 싶다 : Ctrl + ` (여기서 `는 숫자 1 옆에 있는 백탭키 이다.)

7. 나는 신나게 코드를 입력하고 싶다 : power mode 플레그 설치하면 멋지게 코드를 작성할 수 있다.

나는 코딩을 할 때 마우스를 쓰지 않고 개발하고 싶다 할때 유용하다.

위의 설명에서 부가적인 부분은 직접 검색해서 사용해 보자.

참고 링크 : 재밌고 자세하게 알려 주는 유튜버

코딩애플 Youtube

Vue.js (EventBus)

Tue, 18 Jul 2023 08:34:14 GMT

eventbus : 메서드들을 서로 호출할 수 있도록 하는 방법

사용 이유

일반적인 메서드 : 한 오브젝트나 컴포넌트 단위로 묶어서 사용되기 때문에 이벤트를 사용할 필요 없이 현재 위치에 포함된 메서드/변수를 호출하여 사용 가능

공통으로 데이터를 주고 받을 수 있는 공간을 만들고, 이를 통해서 규격에 맞춰 데이터들을 주고 받을려면 eventbut 사용

// vue.js

// 이벤트 생성
var EventBus = new Vue()

// 이벤트 발행
EventBut.$emit('message', 'hello world');

// 이벤트 구독
EventBus.$on('message', function(text) {
    console.log(text);
});

<컴포넌트간 이벤트 주고받기>

// * 컴포넌트 한단계 위의 단계인 VueApp간의 이벤트 공유 예제*


    
    
    #sender-app: I sent a message a 


    #receiver-app: 


-------------------------------------------------------------------------

var EventBus = new Vue();

var SenderApp = new Vue({
    el: '#sender-app',
    data() {
        return {
            text: '',
            receiveText: ''
        }
    },
    created() {
        EventBus.$on('message', this.onReceive);
    },
    methods: {
        sender() {
            EventBus.$emit('message', this.text);
            this.text = '';
        },
        onReceive(text) {
            this.receiveText = text;
        }
    }
});

var ReceiverApp = new Vue({
    el: '#receiver-app',
    data() {
        return {
            text: ''
        }
    },
    created() {
        EventBus.$on('message', this.onReceive);
    },
    methods: {
        onReceive(text) {
            this.text = text;
        }
    }
});

SenderApp과 ReceivarApp은 서로 다르지만 EventBus를 통해 이벤트 공유가 가능한 것을 확인 할 수있다.

intellj Spring boot jdk변경 방법

Fri, 14 Jul 2023 03:14:59 GMT

<이유> : jdk버전이 맞지 않아 발생하는 오류 -> 프로젝트 생성시 jdk를 17버전으로 생성 했는데 본인은 1.8버전이 깔려있음

<변경 방법>

java -> sourceCompatibility = "17" -> java -> sourceCompatibility = "컴퓨터에 다운되어있는 jdk 버전 입력"

파일 우클릭 -> Project Structure

SDK : Edit버튼 클릭 후 JDK가 깔려있는 폴더 선택

Language level : SDK default로 설정

Intellij 설치 및 환경설정

Fri, 14 Jul 2023 02:56:03 GMT

Intellij 다운로드 바로가기

1. UItimate 버전으로 다운로드

2. 다운로드 순서

Next >

경로 선택 후 Next

체크 선택 후 Next

Create Desktop Shortcut : 바로가기 아이콘 생성
Update PATH variable(restart needed) : 환경변수 PATH에 설치 프로그램의 bin 폴더 경로 추가 옵션
Update context menu : 프로젝트 폴더 열기 옵션
Create Association : 사용할 언어 설정 (필자는 Java를 사용하여 선택함.)

Install 선택

용어 정리

Projects : 새 프로젝트 생성, 기본 프로젝트 오픈 등의 프로젝트 관련하여 생성 or 오픈할 수 있음.

Customize : 툴의 테마, 폰트 등의 설정을 할 수 있음.

Plugins : 프로그인들을 검색하고 설치할 수 있음.

Learn : IntelliJ의 사용법 및 단축기를 배울 수 있음.

JDK 다운로드

기존 JDK 환경 변수 설정과 동일

환결설정

프로젝트 환경을 구축할 때 필요한 톰캣, Jetty, UnderFlow 같은 외적인 툴이 내장되어 있어 따로 설치할 필요가 없습니다.

1. Project, Laguage, Spring Boot 버전, Packaging 버전, java버전 선택

2. 프로젝트에 필요한 의존성 추가

1. spring boot팩에서 initiailzr가 위에 start.spring.io와 같은 역할을 할 것 입니다.

2. extension pack for java는 자바파일을 열면 그것을 실행할수 있도록 해줍니다.

<프로젝트 생성>

1. 명령 팔레트 열기 (윈도우) : Ctrl + shift + P

2. spring initlalizr 검색

3. spring boot 버전 설정

4. 언어 설정

5. 그룹 이름 설정 ex) naver.example = naver.com

6. Packaging 설정

7. jdk버전 선택 (후에 변경가능)

8. 의존성 추가 (후에 추가 가능)

<실행>

<프로젝트 생성 후 의존성 추가>

Maven Repository

1. 사이트 접속 후 해당 라이브러리를 검색하여 아무 버전이나 클릭 합니다.

2. 해당 프로젝트 형식(Maven, Gradle 등등)에 따라 코드 복사 후 build.gradle에 추가 합니다.

참고링크

Git download

Tue, 11 Jul 2023 06:14:47 GMT

github에 관련된 내용 삭제 + 제어판에서 git삭제(다운로드 되어있을 때)

main -> master로 변경

windows git 페이지

windows 64bit 다운로드 과정

<버전 정보 팁>

버전 : 1.0.0

맨 왼쪽의 숫자는 프로그램의 메인 버전을 의미.
중간 숫자는 기능이 추가될 때 마다 증가.
맨 오른쪽의 숫자는 버그 수정이 될 때 마다 증가.

ex) 기능 추가 -> 1.1.0 버그 해결 -> 1.1.1 버그 해결2 -> 1.1.2 기능 추가 2 -> 1.2.2 메인 버전 증가 -> 2.0.0

git 기초 명령어

폴더에서 오른쪽 마우스 클릭 후 Git Bash Here클릭

git init 명령어 입력 후 .git파일 안보일 시 확인

git init 명령어 : .git파일 생성

git add .

git commit -m "메모 내용"

네모 체크 부분에 github 이메일과 네임을 각각 입력

<레파지토리 생성>

레파지토리명 입력후 생성

순서대로 입력 하면 레파지토리에 파일 생성 (첫번째 생성시)

<2번째 파일 업로드>

git add . -> git commit -m "메모" -> git push origin master

<상대방 레파지토리 파일 다운로드 방법>

git clone "상대방레파이토리주소"

git add . -> git commit -m "메모내용" -> git push origin master 순서로 수정내용 업로드
git pull origin master 명령어로 레파지토리의 내용을 최신으로 업데이트

Eclipse jdk 관련 오류

Tue, 11 Jul 2023 06:10:49 GMT

1. Run As -> Maven Install 했을 때 JDK관련 오류 발생

이유 : .jre와 .jdk가 같이 다운로드 받아 졌기 때문에 기본적으로 jre가 설정 되어있었는데 jdk를 default로 설정하면 오류가 해결

<해결방법>

프로젝트 우클릭 -> Java Bulid Path -> Library 더블클릭 -> Workspace defult JRE 선택

2. Eclipse에서 git을 이용해 프로젝트 import했을 때 프로젝트 고유의 패키지 명 부분이 오류가 발생

이유 : 루트 위치설정이 잘못 되어 있었습니다.

<해결방법>

Project 우클릭 -> Java Build Path 클릭 합니다.
Java Build Path 에서 source tab 클릭 후, Add Folder로 추가 파일의 경로를 추가합니다.
기존 경로 설정 삭제합니다.
밑에 사진에서 원하는 경로 선택 후 OK버튼 클릭한 후 Apply and Close버튼을 클릭합니다.

<참고 사이트> : https://goobgood.tistory.com/60

Vue.js_라이프 사이클

Mon, 10 Jul 2023 08:16:45 GMT

한개의 페이지로 여러페이지를 왔다 갔다 할 수 있도록 하는 기능을 해줍니다.

<사용 방법>

router-link : a태크와 비슷한 역할로 router을 사용할 때 다른 페이지 로딩하지 않고 다른 페이지로 이동할 수 있도록 하는 기능입니다.

선언 하면 사용할 수 있습니다.

// 기본 구조

여러 군데에서 재사용하기 위해 사용 합니다.

<라이프 사이클>

: 서버에 요청을 보내고 응답 받은 데이터를 업데이트 해줄 때 사용합니다.

created(){

    코드...

}

Eclipse 디버깅 방법

Fri, 07 Jul 2023 06:04:48 GMT

1. 브레이크 포인트 지정

에러가 발생하는 라인 or 의심이 가는 변수를 추척할 라인 위체에 브레이크 포인트를 지정 합니다.

프로그램을 디버깅 하면 브레이크 포인트 부터 순차적으로 관찰 할 수 있습니다.

2. 브레이크 포인트 설정 방법

소스 코드에서 원하는 부분의 라인 숫자를 마우스 왼쪽 더블클릭을 하면 밑의 사진과 같이 잠금 표시가 생성 됩니다.

해제 방법은 브레이크 포인트 설정 방법 처럼 마우스 왼쪽 버튼 더블클릭으로 해제할 수 있습니다.

Debug View 오픈 방법

<디버그 실행 방법>

아래의 사진과 같이 톱니바퀴 모양을 클릭해서 디버깅을 실행할 수 있습니다.

Window -> Show View -> Debug, Variavles, Breakpoints, Expressions 체크 합니다.

변수에 어떤 정보들이 있는지 확인할 수 있는 창 입니다.

마우스 커서를 변수에 올려도 값을 확인할 수 있습니다.

브레이크 포인트 부터 F6단축기를 이용해 한 줄씩 확인 가능합니다.

콘솔 창에서 쉽게 확인이 가능하며, Variables 창에도 각 라인별 변수들의 값과 타입을 확인할 수 있습니다.

찾고자 하는 변수를 입력하면 해당 변수에 대한 값을 확인할 수 있습니다.

<디버깅 실행 시 유용한 단축기>

Step Into(F5) : 한 줄씩 진행하되 함수 안이면 함수 안으로 들어갑니다.

Step Over(F6) : 한줄씩 진행하되 함수 호출은 건너뜁니다.

Step Return(F7) : 현재 함수 끝까지 바로 가서 리턴 후 함수 호출부로 되돌아갑니다.

Resume(F8) : 다음 브레이크 포인트까지 건너뜁니다.

햄버거 모양 클릭 후 Show Debug Toolbar 선택 합니다.

Vue.js 속성

Thu, 06 Jul 2023 07:01:28 GMT

Vue.js 란?

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다.

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.

데이터와 DOM을 연결하였기 때문에 반응형이 되었습니다.

v-bind속성은 디렉티브라고 합니다.
디렉티브는 v-접두어가 붙어있으며 렌더링 된 DOM에 특수한 반응형 동작을 합니다.
v-대신 :만 붙혀도 적용가능
함수도 적용 가능하다 (매개변수=파라미터 도 적용가능)




    
    
    Document
    


    
        
        {{ nextYear('안녕!! ') }}
        
        홍길동 채녈1
        홍길동 채녈2

<이벤트> : 버튼을 클릭했을 때 발생하는 현상




    
    
    Document

<미리보기 이벤트>

양방향 바인딩




    
    
    Document
    


    
        
        {{ reversedMessage }}
        {{ reversedMessage }}
        {{ reversedMessage }}

왠만하면 computed속성을 사용하지만 watch속성을 사용해야 할 때만 사용




    
    
    Document
    


    
        
            {{message}}

            

            {{updated}}

<클래스 & 스타일 바인딩>

배열 뿐만 아니라 객체도 사용 가능 합니다.




    
    
    Document

    


    
        
            {{people[0].name}} {{people[0].age}}
            {{people[1].name}} {{people[1].age}}
            {{people[2].name}} {{people[2].age}}

        
        

        
        
            
            {{person.name}} {{person.age}}

<여러개의 Vue 인스턴스 사용하기>




    
    
    Document

    


    
        {{name}} 

        
    
    
        {{name}}

전역 등록
지역 등록

AWS 아마존 코드위스퍼러

Tue, 30 May 2023 00:59:18 GMT

VS CODE에서 확장프로그램 AWS Toolkti 설치
설치 완료되면 왼쪽 하단에 AWS 클릭 후 Connect to AWS to Get Started... 클릭
상단 가운데 창에 Builder ID 설정

진행..(1)

진행..(2)

회원가입 진행!!

VS Code에 생성 확인

start 클릭

3~5번 다시 진행 후 Allow클릭

10 . 주석 입력 후 엔터

인텔리제이 버전

https://tilnote.io/pages/643f4c69e3a729bdebcba0f7

Python 다운로드 (2023.05.10)

Wed, 10 May 2023 01:57:17 GMT

Python 다운로드 홈페이지

Python 홈페이지로 들어간다.

두개 모두 체크 한후 Install Now 클릭

다운로드 후 cmd창에서 python -V 명령어 입력하면 다운로드 버전 확인 가능.

홈페이지 접속 pyCharm 홈페이지
Community 다운로드
Next 체크
경로 설정후 Next 체크
모두 체크
Install 체크
C드라이브에 Python폴더 생성

폰트 설정

input() 함수로 받은 값은 모두 문자 -> int(input()) 으로 적으면 쉽게 정수형으로 변환가능


# ex2.py
# input으로 받은 값은 모두 문자.
a = int(input("첫번째 숫자를 입력하세요"))
b = int(input("두번째 숫자를 입력하세요"))

result = a + b
print(result)
result = a - b
print(result)
result = a * b
print(result)
result = a / b
print(result)

원 그리기

# ex3.py

import turtle

turtle.shape('turtle')

turtle.color('red')
turtle.begin_fill()
turtle.circle(50)
turtle.end_fill()

사각형 그리기

#ex4.py

import turtle

t = turtle.Turtle()
t.shape('turtle')

t.color('red')
t.forward(200)
t.right(90)
t.forward(200)
t.right(90)
t.forward(200)
t.right(90)
t.forward(200)
t.right(90)

turtle.done()

사각형 그리기 + for문 + 화살표 모양 표시

#ex5.py

import turtle

myT = None
myT = turtle.Turtle()

# 화살표
myT.shape('classic')

# python for문 사용법 (100번 실행)
for i in range(0,100):
    myT.forward(200)
    myT.right(90)

turtle.done()

함수 사용과 random , turtle 사용

# ex6.py
import turtle
import random

# 함수선언 부분 #


def screenLeftClick(x,y):
    # global 선언 시 전역변수
    global r, g, b
    turtle.pencolor((r,g,b))
    turtle.goto(x,y)

def screenRightClick(x,y):
    turtle.penup()
    turtle.goto(x,y)

def screenMidClick(x,y):
    global r, g, b
    tSize = random.randrange(1,10)
    turtle.shape(tSize)
    r = random.random()
    g = random.random()
    b = random.random()

pSize = 10
r,g,b = 0.0, 0.0, 0.0;
turtle.title("거북이 그림 그리기")
turtle.shape('turtle')
turtle.pensize(pSize)
turtle.onscreenclick(screenLeftClick, 1)
turtle.onscreenclick(screenRightClick, 2)
turtle.onscreenclick(screenRightClick, 3)

turtle.done()

Spring (2023.04.17)

Mon, 17 Apr 2023 08:47:23 GMT

<아파치 - 오픈소스>

-> 웹서버 -> 정적파일 (HTML, CSS, JAVASCRIPT) -> 정적 리소스 (저장된 이미지, 동영상 등)

<아파치 톰갯 (Apache Tomcat)>

-> 웹 애플리케이션 서버 -> 동적 파일(JSP, Servlet 등 )

<아파치와 톰캣의 작동 흐름>

<자바 객체와 JSON>

자바객체 : 대상을 추상화 한 자바 코드 (시스템에서 0101 이진데이터로 변환) JSON : 대상을 추상화 한 문자열 데이터

-> 개별 바이트나 문자열인 데이터의 원천 -> 데이터가 전송되는 통로 -> 키보드, 파일, 네트워크 등등

<직렬화 Serialize>

-> 객체를 데이터 스트림(문자열)으로 만드는 것 -> 객체에 저장된 데이터를 스트림에 쓰기 위해 연속적인 데이터로 변환하는 것

<역 직렬화 Dexerialization>

-> 스트림을 객체로 만드는 것

<직렬화와 역직렬화를 하는 이유>

-> 다른 기족간의 데이터 송수신을 위해 필요하다. -> java객체 -> 직렬화 -> json -> 역직렬화 -> python객체로 변환 -> 다른 언어에서도 사용

<라이브러리와 프레임워크>

라이브러리 : 개발자가 제어하기 때문에 유연성과 자유도가 높음 프레임워크 : 프레임워크가 제어하기 때문에 개발자의 유연성과 자유도가 낮음

<프레임 워크를 쓰는 이유>

1) 협업 : 구조가 같아 협업이 쉬움 2) 안정성 : 확인해야할 사항들을 프레임워크가 체크함 3) 보안 : 웹 관련 공격을 막을 방법을 미리 세팅해 놓음 4) 신입 : 가이드가 없으면 신입은 코드를 짜기가 어려움

-> Spring IoC 컨테이너가 관리하는 자바 객체 -> 생성방법만 명시하면 스프링이 알아서 객체를 생성하고 유지하고 소멸시킨다.

<출력>

-> @Bean, @Component에 어노테이션을 붙이면 Spring IoC 컨테이너가 장동으로 해당 객체를 생성해준다. -> 해당객체를 필요로 하는 다른 객체에 주입 시켜준다 DI

-> 우리는 단 한번도 new 생성자를 써서 객체를 만들지 않았다 = 제어의 역전(IoC - 프레임워크가 컨트롤한다.)

-> 여러번 생성할 필요가 없는 객체는 스프링이 싱클돈처럼 관리한다.

<메타/합성 어노테이션>

메타 어노테이션 : 어노테이션에 붙을 수 있는 어노테이션 합성 어노테이션 : 어노테이션을 여러개 붙인것

@Bean 와 @Component 를 주로 사용하게 됨.

<스프링 어노테이션 - Bean스캔 및 생성>

@ComponentScan 어노테이션이 붙은 패기지는 하위의 모든 @Bean과 @Component를 스캔하여 객체를 생성

<스프링 어노테이션 : DI>

@Autowired - 타입으로 주입 (없으면 이름으로) = 생성자 생성과 같은 효과, setter/생성자/필드에 붙힐수 있다.

private -> 객체가 생성되고나서 setter로 수정이 가능

private final -> 객체가 생상되고나서 변경 불가능 : 스프링이 강제로 주입하라고 시키는 것.

-> Spring IOC 컨테이너가 관리 -> ComponentScan으로 Bean/Component를 찾아서 객체를 생성 -> 생성한 객체를 필요한 곳에 알아서 넣어준다 (DI)

<예시>

커피숍 new -> 클라이언트가 요청시마다 new를 하면 비용적으로 매우 손실이 크다 @Component @ComponentScan으로 미리 모두 다 준비해놓고, 필요하면 준비된 객체를 제공 한다

스프링 IOC 컨테이너가 관리 ComponentScan으로 Bean/Component를 찾아서 객체를 생성

생성한 객체를 필요한 곳에 알아서 넣어준다 DI

@Bean @Component 어노테이션을 붙이면 Spring IoC 컨테이너가 자동으로 해당 객체를 생성한다 해당 객체를 필요로 하는 다른 객체에 주입 시켜준다 DI

우리는 단 한번도 new(생성자)를 써서 객체를 만들지 않았다 = 제어의 역전 (IoC) - 프레임워크가 컨트롤한다

여러번 생성할 필요가 없는 객체는 스프링이 싱글톤처럼 관리한다

<예제>

1. 프로젝트 생성

2. 다운로드 후 압축풀기

3. locahost 변경 (JSP 톰캣 서버를 사용하고 있기 때문에 변경 : 기본은 8080)

4. 웹사이트에서 locahost:60606 입력후 검색하면 밑의 화면이 나옴

라이브러리 추가 : build.gradle

<커피숍 생성 예제>

커피숍, 직원, 커피, 커피말아주는 직원 클래스 생성

package com.example.grazie;

import lombok.AllArgsConstructor;
import lombok.Data;
import org.springframework.stereotype.Component;


@Data
// 커피이름을 받는 생성자 생성  = @AllArgsConstructor
@AllArgsConstructor
public class Coffee {
    private String name;
}

package com.example.grazie;

import org.springframework.stereotype.Service;

@Service
// 커피 말아주는 직원 -> 아메리카노, 카푸치노, 아샷추만 만들수 있음
public class CoffeeService {
    public Coffee 아메리카노(){
        return new Coffee("아메리카노");
    }
    public Coffee 카푸치노(){
        return new Coffee("카푸치노");
    }
    public Coffee 아샷추(){
        return new Coffee("아샷추");
    }
}

package com.example.grazie;

import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

//카운터직원
@RestController
@RequiredArgsConstructor
public class CoffeeCotroller {
    private final CoffeeService coffeeService;

//    @RequiredArgsConstructor 와 밑의 생성자 만드는것과 동일
//    public CoffeeCotroller(CoffeeService coffeeService) {
//        this.coffeeService = coffeeService;
//    }

    //     @GetMapping("/아메리카노") = 고객이 요청하는 내용
    @GetMapping("/아메리카노")
    public Coffee 아메리카노(){
        return coffeeService.아메리카노();
    }
    @GetMapping("/카푸치노")
    public Coffee 카푸치노(){
        return coffeeService.카푸치노();
    }
    @GetMapping("/아샷추")
    public Coffee 아샷추(){
        return coffeeService.아샷추();
    }
}

Spring Boot - 어노테이션

Mon, 10 Apr 2023 02:44:16 GMT

1. jsp의 라이브러리 JSTL 사용법

2. 자바 어노테이션(Annotation)의 구성 요소

어노테이션 : 프로그램 내에서 주석과 유사하게, 프로그래밍 언어에는 영향을 미치지 않으면서 프로그램 / 프로그래머에게 유의미한 정보를 제공하는 역할과 코드와 문서를 합쳐 하나로 만들 수 있는 방법

<어노테이션 사용 예>

@Test // method()가 테스트 대상임을 JUnit 단위테스트 프로그램에게 알린다. 
public void method(){
}

<어노테이션 구성요소>

1) @Override : 부모의 멤버를 오버라이딩할 때 오탈자를 입력하는 경우가 많다. 이러한 실수를 방지하기 위한 애노테이션이다.

class Child extends Parent{
   @Override
   void parentMethod(){ }
}

2) @Deprecated : 앞으로 사용하지 않을 것을 권장하는 필드나 메서드에 붙인다.

@Deprecated // 사용 권장 x
public int getDate(){
   return normalize().getDayOfMonth();
}

3) @FunctionalInterface : 함수형 인터페이스의 제약사항이 지켜져 있는지 확인하는 어노테이션이다.

@FunctionalInterface
public interface Runnable{
   public abstract void run(); // 추상메서드
}

4) @SuppressWarning : 컴파일러의 경고메세지가 나타나지 않게 억제하는 어노테이션이다.

// unchecked 경고를 억제
@SuppressWarnings("unchecked") 
ArrayList list = new ArrayList(); // 지네릭 클래스는 원시타입 쓸 수 없지만, 지정해주지 않음
list.add(obj); // 여기서 경고 발생

// 둘 이상의 경고를 동시에 억제 하는 코드

@SuppressWarnings(("deprecation", "unchecked","varargs", "rawtypes"))

메타 어노테이션 : 어노테이션을 위한 어노테이션이다. 즉, 어노테이션을 만들 때 사용하는 어노테이션 이다.

어노테이션 사용법

3. 자바 리플렉션

JVM은 클래스 정보를 클래스 로더를 통해 읽어와서 해당 정보를 JVM 메모리에 저장한다. 그렇게 저장된 클래스에 대한 정보가 마치 거울에 투영된 모습과 닮아있어, 리플렉션이라는 이름을 가지게 되었다.

자바 프로그램 내부의 객체, 클래스, 메서드 등에 대한 정보를 동적으로 조작하고 검사할 수 있는 기능

실행 중에 클래스의 정보를 얻을 수 있다. 예를 들어, 클래스 이름, 필드 및 메서드 이름, 메서드 매개변수 및 반환 타입 등을 찾을 수 있다. 이러한 정보를 사용하여 클래스의 인스턴스를 생성하고 메서드를 호출하거나 필드 값을 읽거나 쓸수 있다.

리플렉션은 디버깅 도구나 코드 생성 도구 등에서 유용 하지만, 리플렉션을 남용하면 코드의 가독성이 떨어지고 성능도 저하될 수 있다. 따라서, 리플렉션을 사용하기 전에 꼭 필요한지를 고려하고, 다른 대안이 없는 경우에만 사용하는 것이 좋다.

4. Maven과 Gradle을 쓰는 이유와 사용법

Maven과 Gradle은 빌드 도구로서, 소스 코드 컴파일, 테스트 실행, 라이브러리 관리, 배포 등을 자동화하는 도구 이며 두 도구는 모두 Java 언어로 작성된 오픈 소스 프로젝트 이다.

Apache 소프트웨어 재단에서 개발된 프로젝트 관리 도구입니다. 프로젝트 빌드에 필요한 의존성 라이브러리를 관리하고 라이브러리를 다운로드하여 로컬 레포지토리에 저장하고 XML 형식의 빌드 스크립트를 사용하며, 일반적으로 Central Repository에서 라이브러리를 다운로드하여 사용 한다.

Groovy 언어로 작성된 빌드 도구 이며, 빌드 스크립트 작성을 위해 Groovy DSL을 사용하며, 프로젝트 빌드 및 테스트 실행, 의존성 관리, 리소스 처리 등 다양한 기능을 지원한다.

Gradle은 빌드 스크립트를 통해 프로젝트를 커스터마이징하기 쉽고, 빌드 성능도 우수하다.

Maven은 기존에 많은 프로젝트에서 사용되어 왔으며, Central Repository에서 다양한 라이브러리를 제공하므로 초기 설정이 쉬운 장점이 있습니다. 반면 Gradle은 Maven보다 성능이 우수하고, 유연한 빌드 스크립트 작성이 가능하며, 최신 기술을 더 빠르게 도입할 수 있는 장점이 있습니다.

5. IoC, DI, AOP

IoC, DI, AOP은 모두 객체 지향 프로그래밍의 개념 중 하나이다.

IoC (Inversion of Control) : IoC는 제어의 역전이라는 뜻으로, 객체의 생성부터 생명주기까지를 개발자가 아닌 프레임워크나 컨테이너가 관리하는 것을 의미한다. 즉, 개발자가 작성한 코드가 아닌 프레임워크나 컨테이너가 알아서 객체를 생성하고, 의존성을 관리하며, 객체 간의 연결을 담당한다.

DI (Dependency Injection) : DI는 의존성 주입이라는 뜻으로, IoC의 한 형태이다. 개발자가 직접 객체 간의 의존성을 관리하지 않고, 프레임워크나 컨테이너가 의존성을 자동으로 주입해주는 것을 의미한다. 이렇게 의존성을 주입받은 객체는 자신의 역할을 수행하는 데 필요한 다른 객체를 직접 생성하거나 참조하지 않아도 되어 코드의 결합도가 낮아지고 유지보수가 용이해 진다.

AOP (Aspect-Oriented Programming) : AOP는 관점 지향 프로그래밍이라는 뜻으로, 여러 모듈에서 공통적으로 사용되는 기능을 분리하여 하나의 모듈로 만들어 관리하는 프로그래밍 기법이다.

로깅, 보안, 트랜잭션 관리 등과 같은 공통적인 기능을 여러 모듈에서 중복해서 구현하지 않고, 하나의 모듈로 분리하여 관리하며, 이렇게 분리된 모듈을 'Aspect'라고 하며, AOP는 Aspect를 사용하여 여러 모듈에서 공통으로 사용되는 기능을 효과적으로 관리한다.

이 세 가지 개념은 각각 다른 기능을 수행하지만, 함께 사용하여 객체 지향 프로그래밍을 더욱 유연하고 확장 가능하게 만든다.

IoC와 DI는 객체 생성과 의존성 주입을 자동화하여 코드의 결합도를 낮추고, AOP는 공통 기능을 분리하여 재사용성을 높일 수 있다.

6. 서블릿 컨테이너

먼저 Spring Container를 이해하기 위해서는 IOC와 DI를 이해해야 한다. Spring Container는 Bean들의 생명주기를 관리한다. Spring Container는 어플리케이션을 구성하는 Bean들을 관리하기 위해 IoC를 사용한다. Spring Container종류에는 BeanFactory와 이를 상속한 ApplicationContext가 존재한다. 이 두개의 컨테이너로 의존성 주입된 빈들을 제어하고 관리할 수 있다. 아래는 스프링 웹 애플리케이션 동작 원리이다.

1) 웹 애플리케이션이 실행되면 Tomcat(WAS)에 의해 web.xml이 로딩된다.(load-on-startup으로 톰캣 시작시 servlet생성 가능하도록 설정 가능)

2) web.xml에 등록되어 있는 ContextLoaderListener(Java class)가 생성된다. ContextLoaderListener 클래스는 ServletContextListener 인터페이스를 구현하고 있으며, ApplicationContext를 생성하는 역할을 수행한다.

3) 생성된 ContextLoaderListener는 applicationContext.xml을 로딩한다.

4) applicationContext.xml에 등록되어 있는 설정에 따라 Spring Container가 구동된다. 이때 개발자가 작성한 비즈니스 로징에 대한 부분과 DAO, VO 객체들이 생성된다.

5) 클라이언트로부터 웹애플리케이션 요청이 온다.

6) DispatcherServlet(Servlet)이 생성된다. DispatcherServlet은 FrontController의 역할을 수행한다. 클라이언트로부터 요청 온 메시지를 분석하여 알맞은 PageController에게 전달하고 응답을 받아 요청에 따른 응답을 어떻게 할지 결정만 한다. 실질적인 작업은 PageControlle에서 이뤄지기 때문이다. 이러한 클래스들을 HandlerMapping, ViewResolver클래스라고 한다.

7) DispatcherServlet은 servlet-context.xml(spring-mvc.xml)을 로딩한다.

8) 두 번째 Spring Container가 구동되면 응답에 맞는 PageController들이 동작한다. 이때 첫 번째 Spring Container가 구동되면서 생성된 DAO, VO, ServiceImpl 클래스들과 협업하여 알맞은 작업을 처리하게 된다.

7. 스프링 컨테이너

스프링 프레임워크의 핵심 기능 중 하나로, 객체의 생성, 관리 및 의존성 주입(Dependency Injection)을 담당하는 컨테이너이다.

빈(Bean)이라는 객체를 생성하고, 이들 빈을 관리하고 Bean은 일반적으로 스프링에서 제공하는 어노테이션을 사용하여 정의한다.

스프링 컨테이너는 빈의 생성, 초기화, 소멸 등의 라이프사이클을 관리하며, 필요에 따라 빈의 의존성을 주입한다. 또한, IoC를 지원하며 IoC는 객체의 생성 및 관리에 대한 제어권이 개발자가 아닌 프레임워크에게 있음을 의미한다. 이를 통해 개발자는 객체 간의 의존성을 더욱 유연하게 관리할 수 있다.

8. TCP SCHOOL 사이트에서 실습

-> JQuery

-> Ajax

9. POJO(Plain Old Java Object) 란?

특정한 제한 없이 자바의 일반적인 객체를 의미한다. 즉, POJO는 특정한 인터페이스나 클래스를 상속받지 않고, 특정한 규약을 따르지 않는 자바 객체이다.

POJO를 사용하면 더욱 유연하고 확장 가능한 코드를 작성할 수 있으며, 객체 간의 의존성을 줄일 수 있다.

intallij 사용법

<설정>

plugins 클릭 -> korean설치, translation설치 -> Restart IDE

다운로드 항목

<프로젝트 생성>

새로운 프로젝트 생성

경로지정 상관 없음, 언어 java선택, 시스템빌드 intallij선택 jdk 17번전 선택

시작 입력 -> 시스템설정클릭 -> 시작 시 프로젝트 다시 열기 체크박스 체크버튼 해제

휠 입력 -> 일반 선택 -> Ctrl + 마우스 체크하면 Ctrl + 마우스로 마우스 휠로 크기조정 가능

intallj 단축어

Ctrl + 방향키 : 단어 단위로 위치 이동

Ctrl + Shift + 방향기 : 단어별로 블록 드래그

Ctrl + w : 범위 확인 (여러번클릭시 범위 늘릴수 있음)

pageUp, pageDown : 페이지 위아래로 이동

Ctrl + Shift + END, Ctrl + Shift + Home로 범위지정 가능, Shift빼면 커서 위치 이동

Art + 1 은 프로젝트로 커서 이동 Esc는 원상복귀

프로젝트에서 Art + insert 클릭시 파일 생성 창 띄워짐

소스 화면 창에서 art방향키로 프로젝트 이동가능

art + F4 클릭시 .java파일 꺼짐

드래그 + Ctrl + Shift + 위아래 방향키 : 한줄이동

Flutter ( 2023.04.04 )

Tue, 04 Apr 2023 01:11:40 GMT

<클라우딩 컴퓨터>

> 클라우드의 하드웨어 적인 개념. 

> 사용자가 필요한 소프트웨어를 자신의 컴퓨터에 설치하지 않고도 인터넷에 접속하는 것을 통해 언제든 사용할수 있고, 동시에 각종 정보통신 기기로 데이터를 손쉽게 공유할 수 있는 사용환경

1. laaS

> Infrastructure as a Service의 약자

> 서버 인프라를 서비스로 제공하는 것으로 클라우드를 통하여 저장장치 또는 컴퓨팅 파워를 인터넷을 통한 서비스 형태로 제공하는 서비스

> 하드웨어가 지닌 "컴퓨팅 능력"만을 서비스 하는 것.

> 여러 다른 도메인의 컴퓨팅자원을 하나로 묶어야 하며, 하드웨어 장비도 가상화 환경을 지원해야 함.

> 일련의 API들을 제공해 소비자가 인프라로 관리 및 다른 형태로 상호작용을 할 수 있도록 해주는데, 이때 인프라도 이용한 만큼 부과된다.

<예시>

> 구글스프레드, Gmail, 드롭박스

2. PaaS

> Okatfirn as a Service의 약자

> 사용자가 소프트웨어를 개발할 숭 씨는 기반이 되는 서비스

> 클라우드 서비스 사업자는 PaaS를 통해 서비스 구성 컴포넌트 및 호환성 제공 서비스를 지원한다.

> 개발자들은 컴파일 언어, 웰 프로그램, 제작 툴, 데이터베이스 인터페이스, 사용자 관리 모듈 등 클라우드 서비스 사업자가 마련해 놓은 PaaS 서비스를 통해 데이터베이스와 애플리케이션 서버, 파일시스템과 관련한 솔루션 등 미들웨어까지 확장된 IT자원을 활용하여 새로운 애플리케이션을 만들어 사용할 수 있다.

> laaS의 맨위에 위치

> 애플리케이션 개발 프레임워크와 미들웨어 능력 그리고 데이터베이스, 큐잉 같은 기능과의 추가적인 통합 레이어를 추가하는데 이러한 서비스는 개발자가 스택에 의해 지원되는 프로그래밍 언어와 도구와 애플리케이션을 플랫폼에 구축할 수 있게 해준다.

<예시>
> AWS Beanstalk

< PaaS의 형태>

> 1. 특정기업의 비지니스를 위해 자체의 비지니스 시스템을 개발하는 경우

> 2. 새로운 온라인 애플리케이션을 개발해 온라인 시장에 출시하는 경우>

<장단점>
> 장점 : 새로운 애플리케이션을 신속히 개발 할 수 있는 유연성
> 단점 : 서비스 제공업체가 제공하는 특정 프로그래밍 언어와 도구를 허용함으로 갖는 제약사항

<예시>
AWS (PC등 IT관련 장비를 대여 가능)

3. Saas

> Software as a Service의 약자

> 애플리케이션을 서비스 대상으로 하는 SaaS는 클라우드 서비스 사업자가 인터넷을 통해 소프트웨어를 제공하고 사용자가 인터넷상에서 이에 원격 접속해 해당 소프트웨어를 활용하는 서비스 모델

> 클라우드의 최상위 계층에 해당

> 다양한 애플리케이션을 다중임대 방식을 통해 제공하는 온디맨드 소프트웨어 이다.

> 이메일 관리 프로그램이나 문서 관련 소프트웨어에서 기업의 핵심 애플리케이션인 전사적 자원 관리(ERP), 고객 관계 관리(CRM) 솔루션 등에 이르는 모든 소프트웨어를 클라우드 서비스를 통해 제공받는 것이다.

> *온디맨드 소프트웨어 : 컴퓨터에 직접 설치하지 않고 필요할 때마다 인터넷에 접속해 사용하는 주문형 소프트웨어 서비스

> * 다중임대 방식 : 공급업체 인프라에서 구동되는 단일 소프트웨어 인스턴스를 여러 클라이언트 조직에 제공하는 것

> 서비스 대상에 따라 구분 된다.

>  아키텍처는 독자적인 모습으로 가질수도 있으나, 보통은 LaaS부터 PaaS, SaaS까지 연계되어진 형태로 시스템을 구성되어 진다.

<참고 자료 링크>

4. Baas

> Banking as a Service(서비스 뱅킹)

> 은행이 아닌 기업의 플랫폼으로 은행의 금융 서비스를 사용할 수 있도록 구축해둔 것

> 행, 증권 등의 금융사가 서비스를 기능 단위로 모듈화하여 라이선스가 없는 핀테크 업체에게 제공하는 것을 뜻한다.

> 앱에서 벗어나지 않고 금융사의 계좌를 개설을 하거나, 주식매매를 하는 등 여러 금융서비스를 이용할 수 있도록 해주는 구조

> 금융사는 새로운 고객을 모집하고 수익을 창출하는 창구를 만들 수 있으며, 핀테크 업체는 금융 라이선스를 획득하기 위한 막대한 인프라 구축 비용 없이도 금융 서비스를 제공할 수 있다.

> API 방식을 이용하여 금융사의 서비스를 외부에 제공한다는 점에서 공통점을 지니지만, 접근범위에서는 차이점이 있다.

> 오픈뱅킹은 단순히 데이터에 대한 접근만 허가하고,금융당국의 정책에 따라 API를 개방한다는 것 또한 BaaS와는 다른 점이다.

> BaaS는 기능에 대한 접근까지 허가한다.

> 은행이 비즈니스 수익을 내기 위한 목적으로 주체가 되어 적극적으로 API를 제공하기 때문에 핀테크사는 원하는 형식에 맞추어 금융 서비스를 자사 상품에 통합시킬 수 있

5. firebase / supabase

> firebase와 supabase 둘다 백엔드 서비스 플랫폼이다. 

> 사용하기 쉽고, 실시간 데이터베이스와 인증, 호스팅, 스토리지, 함수와 같은 여러 기능을 제공하지만 각각의 특징과 차이점이 존대한다.

> 선택하는 것은 프로젝트에 따라 다르며, 개발자들은 기능, 비용, 유지보수 등을 고려하여 선택할 수 있다.

firevase

> Google에서 개발한 플랫폼이다.

> 모바일 및 웹 앱 개발에 널리 사용된다.

> 실시간 데이터베이스와 인증, 호스팅, 스토리지, 함수, 머신러닝 등 다양한 기능을 제공한다.

> Google Analytics, Google AdMob, Google Cloud Platform과의 연동이 강점이다.

>

Supabase

> 오픈소스 기반으로 개발된 서비스이다.

> Firebase와 유사한 기능을 제공하지만, PostgreSQL을 기반으로 한 데이터베이스와 실시간 스트리밍, 인증, 스토리지, 함수 등을 제공한다.

> 오픈소스이기 때문에 소스코드를 직접 열어 수정할 수 있다.

6. pull통신과 push통신의 차이


> 풀 (PULL) 기술과 비교할 때 가장 큰 차이점은 푸시 (PUSH) 기술은 서버가 클라이언트에 정보를 능동적으로 보내는 반면 풀 (PULL) 기술은 클라이언트가 정보를 적극적으로 요청한다.

> 아키텍처 관점의 차이가 있다..

> 방향 : 클라이언트 ← 서버
> ex - Twitter
> cost - (인덱스) 공간 (복잡도)
> 이메일 아키텍처
> Polling은 Push 기술의 한 종류, 구현방식 이다.
>

> 클라이언트 서버에 구축 된 메커니즘으로, 서버가 클라이언트에 정보를 능동적으로 보내는 기술이다.
>  정보의 주도성과 적시성이 장점이다.

> 방향 : 클라이언트 → 서버
> ex : Facebook
> cost : (검색) 시간 (복잡도)
> 게시판 아키텍처

7. RDBMS와 NOSQL의 차이

정형화 데이터 / 비정형화 데이터

Column과 Row/ json데이터

insert위주 / select위주 (유저, 게시클, 댓글)

금융 / 소셜

성격에 따라 같이 써도 된다. (효율적임)

저장할 때 사용

insert빠르지만 select느리다

데이터를 빨리빨리 얻고싶을 때 사용

insert느리지만 select빠르다

DateBase : 여러 사람에 의해 공유되어 사용될 목적으로 통합하여 관리하는 데이터의 집합
DMBS : 사용자와 데이터베이스 사이에서, 사용자의 요청을 해석하여 데이터베이스에 저장된 정보를 관리해주는 소프트웨어
SQL : 관계형 데이터 베이스 관리시스템에 저장된 데이터를 관리하기 위해 설계된 프로그래밍 언어.
스키마 : 데이터베이스를 구성하는 개체(Entity), 속성(Attribute), 관계(Relationship)및 제약조건 등에 관해 전반적으로 정의한 메타데이터의 집합

  Supabase.initialize(
      url: "https://tfdusuihudllwqxxlchq.supabase.co",
      anonKey: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRmZHVzdWlodWRsbHdxeHhsY2hxIiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODA1NzI1ODksImV4cCI6MTk5NjE0ODU4OX0.eal_V1dW7uwyIt36O2c_JmisiM7xuVmt2Kupk3wat44");

--------------------------------------------------------------------------------------------------------------------

<테이블에 튜플추가하고 새로고침하면 추가된 리스트 튜플도 같이 출력>

<다른 출력 방법 : 데이터 입력시 자동으로 결과 출력 (map형식으로)>

<데이터 추가시 자동으로 데이터 출력>

<결과화면>

supabase 사용방법

Flutter (23.03.20)

Mon, 20 Mar 2023 08:45:23 GMT

1. 화면구성

widgets -> 해당 페이지 필요한 위젯들

controller : 상태관리 다트 파일

model : 서버 통신 및 데이터 형태를 정의하는 다트파일, 통신 기능 구현 다트 파일

view : Page dart 파일

화면 웨젯 3가지 

1. 직계자식이 가질수 없는 위젯 -> Text,image, Divider 등등

2. 직계자식을 하나만 가질 수 있는 위젯 -> 머터리얼앱, 스캐폴드, safearea)

3. 직계자식을 여러개 가질수 있는 위젯 -> Column, Row, ListView

: StatelessWidget

// 화면을 만들면 가장 먼저 할 것.
import 'package:flutter/material.dart';

// StatelessWidget 사용
class DefaultPage extends StatelessWidget {
  const DefaultPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        // title: Text("나의 정보"),

        // 타이틀 중간 정렬 두가지 방법 (서로 위치 다름),
        // title: Center(child: Text("나의 정보"))는 다른 글자가 들어와도 중간
        title: Center(child: Text("나의 정보")),


        // 다른글자가 들어오면 글자의 공간만큼 밀려남
        // title : Text("가운데정렬"),
        // centerTitle: true,
        actions: [
          // all 은 모든 방향 패딩 only는 한쪽 방향만 설정할 때
          Padding(padding: const EdgeInsets.only(right: 30),
           child : Icon(Icons.move_to_inbox),
          ),
      ],

      ),
      bottomNavigationBar: BottomNavigationBar(
        // Items에는 2개 이상의 네비게이션바가 있어야 함
        items: [
          // label과 icon이 필수
          BottomNavigationBarItem(
              label: "home",
              icon: Icon(Icons.access_alarm_outlined)),
          BottomNavigationBarItem(
              label: "myinfo",
              icon: Icon(Icons.cable)),
        ],
      ),
      body: SafeArea(
        child: Container(color: Colors.green),
      ),
    );
  }
}

2. 상태 관리(지역, 전역)

상태(state) : 변하는 데이터(UI에 동적으로 표현되는 데이터, 사용자의 액션에 따라 변경)

상태 관리 : 계속 변화하는 데이터를 관리 하기 위해서 필요한 것.


상태 관리 왜 필요한가?

기존의 JSP 
 -> 댓글을 작성 후 버튼 클릭후 서버에서 DB에 댓글을 넣고 화면 전체를 리턴

상태관리를 이용
->서버에서 댓글란만 갱신 하는 방법을 선택
-> 개발자들이 노가다 진행
-> 이를 편하게 하기위해 나온 개념이 상태(State)

stateless위젯 : 화면 변경이 안됨
stateful 위젯 : 상태에 따라 화면 변경 됨

stateless위젯 + 상태 라이브러리 : 상태에 따라 화면 변경

라이브러리 위젯(HookWidget) : 라이브러리가 시키는 방법에 따라 진행하면 화면 변경

*중요* 
0. 일반변수(상태가 아닌 변수)는 바뀌더라도 화면이 변하지 않는다.
1. 데이터가 변하면 화면이 변한다.
2. 데이터를 넣어 주는 방식을 기억한다.
2-1 상태주입(HookWidget, MultiProvider)
2=2 상태변경(만든함수 controller.change())
2-3 상태관찰(controller.isChecked)

3. 기능

1. onTap 등 유저의 반응을 통해서 함수 실행

4. 페이지 내에서 화면전환

1. 페이지에 종속된 위젯들을 조건에 맞게 출력

5. 페이지 이동

1. Navigtor를 이용

<전체코드>

HookWidget

// 화면을 만들면 가장 먼저 할 것.
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_hrd_page/check/controller/check_controller.dart';
import 'package:flutter_hrd_page/check/view/check_page.dart';
import 'package:flutter_hrd_page/default/widgets/default_first_item.dart';
import 'package:flutter_hrd_page/default/widgets/default_second_item.dart';
import 'package:provider/provider.dart';

// HookWidget은 페이지 내부의 상태를 관리화기 위해
// 사용할 수 있는 Hook은
// useState
// serEffect 등이 있다.
// Hook은 build 함수 안에 적는다.

class DefaultPage extends HookWidget {
   DefaultPage({Key? key}) : super(key: key);

  //const 때문에 클래스 단위에서 생성 금지
   // 한 페이지 내에서 화면 전환 방법 (지역)
  // List widgetItems = [
  //   Container(color: Colors.yellow,),
  //   Container(color: Colors.blue,),
  // ];

  // 위젯 객체를 만드는 함수를 생성, 메모리 생성 용량 감소
   // SafeArea에 value뒤에 () 붙히기
  //  List widgetItems = [
  //    (color) => Container(color: Colors.yellow,),
  //    () => Container(color: Colors.blue,),
  //  ];

   // 다른 파일에서 페이지 전환 (전역)



   @override
  Widget build(BuildContext context) {
     final checkController = context.watch();

     List widgetItems = [
           () => DefaultFirstItem(checkController.isChecked),

           () => DefaultSecondItem(),
     ];

     final navlndex = useState(0);

    print("DefaultPage 빌드됨" + navlndex.value.toString());

    //페이지 내에서 변화
    // 빌드에 List를 만들면 빌드변화때만 실행
    // List widgetItems = [
    //
    // ];

    return Scaffold(
      appBar: AppBar(

        // title: Text("나의 정보"),

        // 타이틀 중간 정렬 두가지 방법 (서로 위치 다름),
        // title: Center(child: Text("나의 정보"))는 다른 글자가 들어와도 중간
        title: Center(child: Text("나의 정보")),


        // 다른글자가 들어오면 글자의 공간만큼 밀려남
        // title : Text("가운데정렬"),
        // centerTitle: true,

        actions: [
          // all 은 모든 방향 패딩 only는 한쪽 방향만 설정할 때
          InkWell(
            onTap: (){
              Navigator.push(

                  context, MaterialPageRoute(builder: (context)=>CheckPage()));
            },
            child: Padding(padding: const EdgeInsets.only(right: 30),
             child : Icon(Icons.move_to_inbox),
            ),
          ),
      ],

      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (int idx){
          // 버튼 선택시 생성되는 idx를 넣음
          navlndex.value = idx;
        },
        currentIndex: navlndex.value,
        // Items에는 2개 이상의 네비게이션바가 있어야 함
        items: [
          // label과 icon이 필수
          BottomNavigationBarItem(
              label: "home",
              icon: Icon(Icons.access_alarm_outlined)),
          BottomNavigationBarItem(
              label: "myinfo",
              icon: Icon(Icons.cable)),
        ],
      ),
      body: SafeArea(
        // child: Container(color: Colors.green),
        // 빌드될때 마다 화면 전환
        child: widgetItems[navlndex.value](),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class DefaultFirstItem extends StatelessWidget {
  final bool isChecked;

  const DefaultFirstItem(bool this.isChecked, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Center(
        child: Text("확인 : ${isChecked}"),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue,);
  }
}

import 'package:flutter/material.dart';


// 여러 페이지에서 사용하기 위해 따로 파일 분리

class CheckController extends ChangeNotifier{
  // bool의 변수는 보통 is변수 사용
  bool _isChecked = false;

  bool get isChecked => _isChecked;

  //값을 바꿔주는 함수
  void change(){
    // !는 NOT이랑 같음
    _isChecked = !_isChecked;

    // 값을 바꿨는지 알려주는것 (필수)
    notifyListeners();

  }
}

import 'package:flutter/material.dart';
import 'package:flutter_hrd_page/check/controller/check_controller.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    // watch : 상태를 계속 관찰 하겠다. (데이터가 바뀌는 것을 관할 할 수 있다.), (context.read + 관찰)

    final checkController = context.read();
//   read-> 상태를 한번만 확인하겠다.
//   상태가 바뀌어도 화면에 영향을 끼치지 못함, 상태를 변화 시키는 함수는 사용가능 
//  final checkController = context.watch();


    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              Text("체크페이지"),
              ElevatedButton(
                  onPressed:(){
                    checkController.change();
                  },
                child: Text("값 변경"),
                  ),
            ],
          ),
        ),
      ),
    );
  }
}

// 위젯을 가져오는 import
import 'dart:js';

import 'package:flutter/material.dart';
import 'package:flutter_hrd_page/default/view/default_page.dart';
import 'package:provider/provider.dart';

import 'check/controller/check_controller.dart';

void main(){
   runApp(
     // MultiProvider는 전역적으로 사용하기 위해 사용
     MultiProvider(
       providers: [
         ChangeNotifierProvider(create: (context) => CheckController()),
       ],
       child: MyApp(),
     ),
   );
}

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

  @override
  Widget build(BuildContext context) {
    print("메인 빌드됨");
    return MaterialApp(
      //default_page.dart파일에서 DefaultPage() 클래스 가져오기 , import 자동생성
      home: DefaultPage(),
    );
  }
}

Flutter ( 23.03.06)

Thu, 16 Mar 2023 00:09:09 GMT

UI프레임워크 플러터

크로스 플랫폼 안드/ios/web/window/mac/linux

퓨시아OS -> 구글에서 밀고있는 OS
리액트 네이티브 vs 플러터

- 리액트 네이티브의 장점

자바스크립트로 짤 수 있다.

리액트를 알면 쉽게 접근.
코드 푸시가 가능하다.
리액트 네이티브의 단점 : 느리다

- 플러터의 장점

빠르다 (코드가 안드/IOS코드로 변환)
플러터의 단점 : 코드 푸시가 안된다, Dart라는 언어를 배워야 한다(자바,JS 섞은 느낌)

Dart의 특징

Skia 엔진이란 ?

https://velog.io/@foggydat/Flutter-skia-engine

AOT와 JIT란

// 문제 5. sort를 이용해서 tempList1을 정렬하고 출력하시오. List타입의 tempList1 tempList1.sort(매개변수 : 함수) sort / map / where / forEach

final check(int a, int b){ return a - b; }

[1, 2, 3, 2, 1].sort(check); check(1, 2) -> 결과값 -1 유지 check(2, 3) -> 결과값 -1 유지 check(3, 2) -> 결과값 +1 자리바꿈 [1, 2, 2, 3, 1] check(3, 1) -> 결과값 +2 자리바꿈 한번 더 체크 [1, 2, 2, 1, 3] ...... [1, 1, 2, 2, 3] 오름차순 정렬이 된다.

정렬방식

var power(dynamic item){ return item * 2; }

tempList1.map(power)

[1, 2, 3]

power(1) -> 결과값 2 power(2) -> 결과값 4 power(3) -> 결과값 6

[2, 4, 6]