테이블에 있는 데이터 조회 select * from 테이블

order,

distinct,

where,

조건문

limit, in,

이거나 IN(24,25,26) 24거나 25거나 26

between,

~부터까지

like,

로 시작하거나 포함하거나 끝나는 단어 %로 표현

join, inner, left, right, group, having, grouping, rollup, cube, avg, count, row_number, rank, lag, lead, union, intersect, except, case, cast, ...

test 서버 생성 👉 test 서버에서 작동확인 👉 본서버에 이전

1. test 서버 생성

1-1. DNS 추가 (메일플러그) _ awstest.bsjgsc7330.co.kr

1-2. putty에서 계정생성 기존 아이디와 비밀번호 동일하게

1-3. 기존 서버소스 압축 기존 서버로 접속 - root 로 로그인 > 소스 압축

tar -zcvf 폴더명.tar.gz www

1-4. 212 서버에 압축해제 기존 ftp 접속하여 압축파일 업로드 기존 서버 접속 - root 로 로그인 > 소스 압축해제

tar -xvzf 폴더명.tar.gz

1-5. Vhost 설정

vi /etc/httpd/conf/vhost.conf

1-6. 사용자 권한 설정

cd  /home

chmod 701 ID명

1-7. RDS DB 설정 DB 생성

• RDS.mysql.global_priv에 기존 DB 복사하여 User 변경 및 패스워드 입력 (기존 서버의 mysql.user 테이블 참조)

• RDS.mysql.DB 행추가

실행 : 권한부여

flush privileges;

1-8. 기존 DB 백업 및 Dump 기존 서버 DB 도구 > sql로 내보내기 > 설정 RDS 도구 > sql 파일 실행 > 쿼리 실행

DB config rds로 수정

2. test 서버에서 작동확인

2-1. board > lib >mysql-extension-wrapper.php 파일 넣기 2-2. 404에러발생

• https → http 코드수정
• define('G5_HTTP_BBS_URL', http_url(G5_BBS_DIR, true));
• define('G5_HTTPS_BBS_URL', http_url(G5_BBS_DIR, false));
• ini_set("display_errors", 1); 주석처리

2-3. 로그인 작동확인 2-4. 크론탭 작동확인

1) 크론탭은 상대경로 사용이 안되기 때문에 mysql-extension-wrapper.php include 2) 크론탭 수정 00분 00시 * * * /usr/bin/php -q /경로 3) log_crontab 확인해서 서버에서 크론탭 작동확인

3. 본서버에 이전

3-1. dns 수정 3-2. vhost 수정 3-3. 데이터베이스 작업

1) 기존 데이터베이스 삭제 2) 백업 데이터베이스 import 작업 3-4. config.php에 define 이름 변경 3-5. test시에 변경했던 코드 수정 (복구) 3-6. 크론탭 db경로 변경하여 작동확인 3-7. 기존 데이터베이스 이름 변경 3-8. 접속 및 기능 테스트 (네이버 연동)

원하는 테이블의 속성의 모든 값들을 가져올 수 있다.

SELECT 속성 FROM 테이블명

예시

<instructor>

[{
id : 1,
name : James,
dept name : Physics,
salary : 95000},
{
id : 2,
name : Jhon,
dept name : Comp.Sci,
salary : 65000
}]

SELECT name FROM instructor

instructor 테이블의 name 값을 가져온다.

SELCET * FROM instructor

instructor 테이블의 모든 값을 가져온다.

SELCET * FROM instructor WHERE id=1

where 조건을 통해 id=1 인 값만 가져온다.

AS

속성이나 테이블의 이름을 새로 지정할 때 사용한다.

SELECT 지정할 속성 AS 별칭 FROM 테이블명

예시

<instructor>

[{
id : 1,
name : James,
dept name : Physics,
salary : 95000},
{
id : 2,
name : Jhon,
dept name : Comp.Sci,
salary : 65000
}]

SELECT name, id, salary/12 AS monthly_salary FROM instrucotr

instructor 테이블에서 name과 id, 월급 값을 가져와서 monthly_salary 속성을 만든다.

SELECT DISTINCT A.name
FROM instructor AS A,instructor AS B
WHERE A salary > B salary

테이블명 뒤에도 별칭을 지정할 수 있다 위의 쿼리는 더 큰 salary의 값을 반환하도록 한다. +DISTINCT : 중복된 자료를 제거한다.

LIKE

속성값을 비교 할 때 사용한다

예시

<instructor>
[{
id : 1,
name : James,
dept name : Physics,
salary : 95000},
{
id : 2,
name : Jhon,
dept name : Comp.Sci,
salary : 65000
}]

SELECT name FROM instructor WHERE name LIKE 'J%'

instructor 테이블의 name 값중에 'J' 로 시작하는 name 값을 반환한다.

ORDER BY

데이터를 정렬하여 조회할 때 사용한다.

테이블명 ORDER BY 속성 방식

예시

<instructor>
[{
     id : 1,
    name : James,
    dept name : Physics,
    salary : 95000},
{
    id : 2,
    name : Jhon,
    dept name : Comp.Sci,
    salary : 65000,
  },
  {
    id : 3,
    name : Mark,
    dept name : Math,
    salary : 85000,
  }]

  <ASC>
[{
    id : 2,
    name : Jhon,
    dept name : Comp.Sci,
    salary : 65000,
  },
  {
    id : 3,
    name : Mark,
    dept name : Math,
    salary : 85000,
  },
  {
    id : 1,
    name : James,
    dept name : Physics,
    salary : 95000}
  ]

  <DESC>
  [
  {
    id : 1,
    name : James,
    dept name : Physics,
    salary : 95000},
 {
    id : 3,
    name : Mark,
    dept name : Math,
    salary : 85000,
  },
  {
    id : 2,
    name : Jhon,
    dept name : Comp.Sci,
    salary : 65000,
  }
]

SELECT * FROM instructor ORDER BY salary DESC

instructor 테이블에서 salary 속성을 내림차순으로 정렬한 값을 반환한다.

*ASC를 사용하면 오름차순, DESC를 사용하면 내림차순이다.

1. LoginView.vue 폴더 만들기 ✅

main.js, index.js에 LoginView.vue import하기

2. DB와 연결하여 정보 확인하기

일치하면 로그인 성공

1. 로그인 페이지 작성하기

1) src > view > LoginView.vue 파일 생성하기

2) LoginView.vue에 <template> 작성하기

<template>
  <div>
    <div>
      <h2>로그인</h2>
      <div id="loginForm"> 
        <form @submit.prevent="fnLogin"> 
          <p>
            <input class="w3-input" name="uid" placeholder="ID를 입력해주세요" v-model="user_id"><br>




          </p>
          <p>
            <input name="password" class="w3-input" placeholder="PW를 입력해주세요" v-model="user_pw" type="password">
          </p>
          <p>
            <button type="submit" class="w3-button w3-green w3-round">Login</button>
          </p>
        </form>
      </div>
    </div>
  </div>
</template>

3) LoginView.vue에 <script> 작성하기

<script>

export default {
  data() {
    return {
      user_id: '',
      user_pw: ''
    }
  },
  methods: {
    fnLogin() {
      if (this.user_id === '') {
        alert('ID를 입력하세요.')
        return
      }

      if (this.user_pw === '') {
        alert('비밀번호를 입력하세요.')
        return
      }

      alert('로그인 되었습니다.')
    }
  }
}
</script>

2. 로그인 페이지 import 하기

1) router > index.js에 LoginView.vue import하기

<span style="color:#000">import Login from '../views/LoginView.vue'</span><span style="color:#000"></span>

2) router > index.js에 로그인 컴포넌트 추가하기

const routes = [
    {
    path: '/login',
    name: 'Login',
    component: Login
    }
]

3. 로그인 페이지 경로 표시하기

1) src > App.vue에 Login 경로 router-link로 작성하기

<template>
    <nav>
          <router-link to="/login">Login</router-link>
    </nav>
</template>

2) 확인하기

4. 로그인 성공시에 페이지 이동

클라우드 컴퓨팅 서비스 키페어 = 퍼블릭키 + 프라이빗키(.pem) : 지정한 키페어 사용하여 인스턴스에 안전하게 연결

🌸 FTP (vsftpd)

서버와 클라이언트 사이에서 TCP/IP를 통해 파일을 송수신하기 위해서 고안된 프로토콜 오로지 파일 송수신만을 목적으로 만들어진것이라 보안에는 취약함

🧐 TCP/IP란 ?

전송조절 프로토콜인 TCP, 패킷통신 방식의 인터넷 프로토콜인 IP

🌸 방화벽

- 인바운드

클라이언트 → 서버 네트워크에 들어오는 정보
(ex. 첨부파일을 서버에 저장할때)

- 아웃바운드

클라이언트 ← 서버 네트워크에서 나가는 정보
클라이언트의 요청을 처리하고 메세지가 서버에서 클라이언트로 다시 향하는 것
(ex. 첨부파일을 다운로드 할 때)

🌸 vhost

가상호스트, 웹서버에는 기본적으로 존재하는 호스트가 있으며 이를 MainHost라고 한다 메인호스트 이 외에도 별도의 디렉터리를 가진 서버를 설정하여 1개의 서버에서 여러개의 웹사이트를 운영할 수 있게함

<virtualhost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot /www/docs/dummy-host.example.com
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog logs/dummy-host.example.com-error_log
    CustomLog logs/dummy-host.example.com-access_log common
</VirtualHost>

🌸 PHP

Apache 웹서버에서 PHP로 작성된 웹을 구동하기 위해서 설치

🌸 Apache

거의 모든 운영체제에서 사용가능한 소프트웨어 웹서버

🧐 웹서버란 ?

클라이언트로부터 HTTP 요청을 받고 웹페이지를 반환하는 컴퓨터 프로그램

🌸 Centos

리눅스의 종류 중 하나

🧐 리눅스란 ?

컴퓨터 운영체제 중 하나로, 리눅스의 근본이 되는 유닉스가 애초부터 통신 네트워크를 지향하여 설계된 것 처럼 리눅스도 마찬가지로 서버로 작동하는데 최적화되어 있다. 따라서 서버용으로 많이 사용되는 운영체제

🧐 DNS란 ?

일종의 주소록 , 도메인을 어느 IP나 도메인으로 연결시켜야할지 리스트화해서 가지고 있는 서버

웹서버가 견딜 수 있는 능력치가 정해져있으므로 서버와 DB를 분리해서 운영하는 것이 효과적이다. 확장성과 보안성, 백업관련 이슈등의 장점이 있다.

< 전체 진행 과정 >

1. AWS에서 RDS DB 생성하기 ✅

2. 인바운드 / 인스턴스 수정하기 ✅

3. Heidisql 로 접속하기 ✅

1. AWS에서 RDS DB 생성하기

■ 엔진 mysql

■ 클래스 db.t3.micro

■ 기존 보안그룹 사용

1) 새 데이터베이스 생성 2) 엔진유형 mysql 로 선택 3) 템플릿 프리티어 선택 4) 마스터 사용자 정보 및 암호 입력 5) 버스터블 클래스 - db.t3.micro 선택 6) 기존 보안그룹 선택 ### 7) 데이터베이스 생성하기

2. 인바운드 / 인스턴스 수정하기

1) 인바운드 규칙 수정👉 규칙저장 2) 인스턴스 수정하기 (퍼블릭엑세스 기능) 👉 즉시적용으로 수정완료하기

• 인바운드 규칙 편집

• 퍼블릭 엑세스 기능

• 즉시적용으로 수정완료

3. Heidisql로 접속하기

■ 엔드포인트

■ 포트 3306

1) 생성한 데이터베이스에서 엔드포인트와 포트 확인하기 2) Heidisql에서 엔드포인트로 접속하기

• 엔드포인트 및 포트 확인

• Heidisql 접속

참조 : https://docs.aws.amazon.com/ko_kr/AmazonRDS/latest/UserGuide/TUT_WebAppWithRDS.html

1. Filesync 프로그램을 설치한다

2. 왼쪽의 구름창을 눌러서 FTP 설정을 한다 (수정사항이 들어있는 소스코드)

3. 오른쪽의 찾아보기를 눌러서 Git과 연동된 소스코드 파일의 경로설정을 한다.

4. 필터기능으로 일부 항목들을 제외시킬 수 있다 (ex. git파일)

• 실수로 잘못된 파일을 제외했거나 디렉토리를 확인 및 복구 하고 싶을때는 <실행> - <필터설정>에서 확인한다

5. 남은 파일 동기화(미러) 진행

6. vscode로 git연동된 폴더 열기

7. 커밋메세지 작성하고 커밋하기

8. 푸쉬하기(동기화)

확인버튼

8 Git에 잘 올라갔는지 확인하기

  <div>
    <canvas
      ref="MyChart"/>
  </div>
</template>

chart.js를 import

<script> 
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)
</script> 

axios를 import

axios : npm을 이용하여 다운로드 가능한 HTTP request 라이브러리

import axios from 'axios'

창이 실행되면 createchart가 실행

export default {
  mounted(){
    this.createChart()
  }

데이터의 배열값을 추출해보자

1. axios.get으로 데이터 가져오기

returnData로 선언

export default {
      axios.get('실제데이터')
       .then(res =>{
                  var returnData = res.data;

                  const arrLabels =[];
                  const arrData=[];
                }

2. for문으로 차트용 데이터 배열을 만들어준다

returnData에서 key값을 가지고 오도록 함 Labels(arrLabels)에 추출한 데이터를 넣음 data(arrData)에 추출한 데이터를 넣음

export default {
                  for(var key in returnData) {
                    arrLabels.push(returnData[key]."배열에서 추출하고자 하는값(1)")
                    arrData.push(returnData[key]."배열에서 추출하고자 하는값(2)")
                    }
                    }

3. 차트를 만들어준다

                  new Chart(this.$refs.MyChart, {
                    type:'bar',
                    data:{
                            //배열에서 추출하고자 하는값(1)
                            labels: arrLabels, 
                            datasets: [{
                            label: '# of Votes',
                            //배열에서 추출하고자 하는값(2)
                            data: arrData, 
                            borderWidth: 1
                            }]
                          },
                    options:{
                              scales: {
                                y: {
                                  beginAtZero: true
                                 }
                              }
                            }      
                                                   }

1. chart.js 설치

2. chart.js import

3. canvas 태그

4. 데이터와 함수

👩‍💻 chart.js 설치

npm i chart.js

👩‍💻 chart.js import

사용하고자 하는 vue 파일에 차트를 불러올 수 있도록 chart.js를 import해준다.

<template>
  <div></div>
</template>

<script>
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)
</script>

<style>

</style>

registerables는 모든 차트를 간편하게 불러올 수 있도록 함

👩‍💻 canvas 태그

js를 이용하여 콘텐츠를 그릴때 사용하는 canvas 태그를 넣어 차트가 나타날 수 있게 한다. html에서는 canvas태그에 id나 class이름을 넣어서 사용하지만 vue에서는 refs를 사용한다.

<template>
  <div>
  <canvas
      ref="MyChart"/>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)
</script>

<style>

</style>

👩‍💻 데이터와 함수

데이터를 가져오기 위해서 export default구문을 넣어준다. import한 Chart가 new Chart()로 만들어진다. 함수를 바로 실행시키기 위해서 mounted에 만든 함수를 넣어준다.

<template>
  <div>
    <canvas
      ref="MyChart"/>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)

export default {
  data:() => ({
    type: 'bar',
    data: {
      labels: [ 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange' ],
      datasets: [{
        label: '# of Votes',
        data: [ 12, 19, 3, 5, 2, 3 ],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  }),
  mounted(){
    this.createChart()
  },
  methods:{
    createChart(){
      new Chart(this.$refs.MyChart, {
        type:'bar',
        data:this.data,
        options:this.options
      })

    }
  }

}
</script>

<style>

</style>

그러면 이렇게 차트가 그려진 것을 확인 할 수 있당! 실제 데이터를 차트에 뿌리는것은 다음 포스팅에서 알아보겠다 🔥

git init 
git config user.name"{유저명}"
git config user.emial "{유저이메일}"
git config --list
git status
git clone {저장소URL}

❗ 레퍼를 못불러오는 경우, 저장소 URL앞에 {아이디@} 입력하기
❗❗ 유저명/이메일을 무조건 작성하는 것이 아니라 프라이빗 레퍼일 경우 해당 권한이 있는 유저명/이메일인지 확인하기

2. filesync에서 ftp(본서버)와 git과 연동된 소스코드 변경사항 비교하기

❗ 왼쪽 창 구름버튼에서 FTP 주소 설정하기
❗❗ 동기화는 반드시 "미러" 상태인 것 확인하기

3. 변경사항이 있을시 git commit

🛠 Vue 설치

npm install vue

🛠 Vue CLI 설치

npm  install -g @vue/cli

🛠 Vue 프로젝트 생성

vue create 프로젝트명

cd 프로젝트명
npm run serve

할당된 로컬서버 주소를 입력하면 vue 페이지를 띄울 수 있다 !

🛠 Vue Router 설치

🧐 Vue Router란?

Vue에서 라우팅기능을 구현 할 수 있도록 지원하는 공식 라이브러리이다.

🧐 Routing이란?

웹페이지간의 이동방법을 말하는데, 페이지를 이동할 때 서버에 요청하여 새로 갱신하는 것이 아니라 해당 페이지를 받아 놓고 페이지 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신한다. 라우팅을 이용하면 화면간의 전환이 매끄러우며 Vue, React, Angular등 라우팅을 이용하여 화면을 전환한다.

vue add router

Yes로 대답

프로젝트 폴더에서 router폴더와 router폴더내에 index.js가 생성된 것을 확인 할 수 있다

마지막으로 vue파일을 너무 잘 정리해놓은 사진을 발견해서 가지고 왔다

출처 : https://kkh0977.tistory.com/1952

먼저 라디오 버튼을 구현해보자

                <input type = "radio" name="cherry" value="1">
                <input type = "radio" name="cherry" value="2>

두가지의 라디오 버튼을 구현해보았는데 먼저 value에 설정한 값을 들고와보자.

                    var cherrylistd = $('input[name=cherry]:checked).val();

그럼 if문으로 체크박스의 체크 여부를 확인해보자 라디오 버튼이 체크되어 있으면 alert창을 띄우도록하는 예제이다.

                    if($('input[name="cherry"]:checked').val()){
                    alert ("안녕하세요")
                    };

라디오 버튼이 체크되어있지 않은경우도 알아보자.

                    if($('input[name="cherry"]:not('checked').val()){
                    alert ("안녕히가세요")
                    };

indexOf()의 경우 또한 특정 문자를 찾을때 많이 사용하지만 indexOf()는 위치값을 반환하기 때문에 match()가 더 적합하다고 판단했다.

그럼 match에 대해서 함께 알아보자

🧐 Match() 함수란 ?

위에서 말했던 것 처럼 특정 텍스트 안에 검색할 단어 또는 찾고싶은 단어가 있는 경우에 match()를 사용하면 해당 텍스트가 포함되는지 확인 할 수 있다. 단어뿐만이 아니라 정규표현식을 사용하여 특정 패턴을 검색하는 것도 가능하다.

👒 작성법

해당 문자열.match("특정 텍스트")

👒 예제로 알아보기

fruits 이름을 가진 input에 cherry 라는 특정문구가 입력되면, 해당 alert창이 뜨도록하는 예제이다.

var example = $('input[name="fruits"]').val();

if(example.match("cherry"){

                alert('체리가 있어요');

            }else{

                alert('체리가 없는데요?');
            }

참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/match 참조 : https://webisfree.com/2014-11-28/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EB%8F%99%EC%9D%BC%ED%95%9C-%EB%8B%A8%EC%96%B4%EB%A5%BC-%EB%AC%B8%EC%9E%90%EC%97%B4%EC%97%90%EC%84%9C-%EC%B0%BE%EA%B8%B0-match()-%ED%95%A8%EC%88%98

MVC패턴과 MVVM패턴은 똑같은 소프트웨어 디자인 패턴이지만, 자세히 분류하면 다른 패턴의 종류라고 볼 수 있는데 먼저 소프트웨어 패턴에 대해서 확인해보자 :)

💡 소프트웨어 디자인 패턴

🔸 4인방패턴

• 생성패턴 👉 Singleton 패턴
• 구조
• 행동패턴
• 동시실행패턴

  🔸 동시성패턴

  🔸 아키텍쳐 패턴👉 MVC패턴, MVVM패턴

  🔸 기타패턴

싱글턴패턴은 생성패턴으로 분류되며, MVC패턴, MVVM패턴은 아키텍쳐 패턴에 분류된다.

💡 Singleton 패턴

전역변수를 사용하지 않고 객체를 하나만 생성하도록하며, 생성된 객체를 어디에서든지 참조할 수 있도록 하는 패턴이다.

💡 MVC패턴

Model - View - Controller 세가지로 나눈 소프트웨어 개발 방법이다.

🔸 Model

: 데이터베이스 테이블에 해당한다. 순수한 데이터로서 DB의 역할을 하거나 DB에 데이터를 요청해서 원하는 데이터를 받는역할을 한다. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야하고, View나 Controller에 대한 정보는 알 수 없다.

🔸 View

: Controller로 데이터를 받아서 html로 표현한다. 데이터를 따로보관하지않고 처리한다. 즉 화면에 나타내는 역할을 한다.

🔸 Controller

: 사용자가 접근한 URl에 따라서 사용자의 요청사항을 파악한 우에 그 요청에 맞는 데이터를 Model에 의뢰하고, Model에서 받은 데이터를 View에 반영하여 사용자게에 알려주는 역할을 한다.

🧶 MVVM패턴이 동작하는 순서

1. 사용자가 Controller를 한다.
2. Controller는 Model에서 해당 Data를 호출하고, Model은 Data를 가공하여 보낸다.
3. Controller는 Model이 보낸 결과를 View를 통해서 화면에 나타낸다.

🧐 왜 MVC패턴을 사용하는걸까 ?

서로 분리해서 각자의 역할에만 집중하여 개발 할 수 있게한다. 유지보수하기에도 용이하고 어플리케이션의 확장성과 유연성이 증가하며 중복된 코딩의 발생여부 또한 쉽게 해결 할 수 있다.

🚨 MVC 패턴의 한계는 ?

분리되어있기에 클래스가 더 많이 필요하여 복잡해질 수 있다는 단점이있다. 그래서 설계시간이 오래걸릴 수 있다. 또한 Model과 View과 완전히 분리될 수는 없기에 패턴이 모호해지며 변형이 올 수도 있다. 이러한 한계를 보완하기 위해 나온것이 MVVM패턴이다. 함께 알아보자

✔ MVC 패턴의 예시

Google의 Angular JS , PHP의 CODEIGNITER, Python의 django, Facebook의 React등을 예로 들 수 있다

💡 MVVM패턴

MVVM패턴은 Model - View - View Model로 이루어져있다.

🔸 View Model

: View를 표헌하기 위해서 만든 Model이자, View를 나타내기 위한 데이터를 처리하는 부분이다.

🧶 MVVM패턴이 동작하는 순서

1. 사용자의 Action들은 View를 통해서 들어오게 된다.
2. View에 들어온 Action은 Command 패턴으로 View Model에 Action을 전달한다.
3. View Model은 Model에게 데이터를 요청한다.
4. Model은 View Model에게 요청받은 데이터를 보내준다.
5. View Model은 응답받은 데이터를 가공하여 저장한다.
6. View는 View Model과 Data Binding을 하여 화면에 나타낸다

🔨 MVVM패턴의 특징

Commend 패턴 과 Data Binding 패턴 두가지 패턴을 사용하여 구현되었으며, Commend 패턴 과 Data Binding 패턴 을 이용하여 View와 View Model사이의 의존성을 없앴다. View Model과 View는 1:n 관계라는 것 또한 MVVM패턴의 특징이 될 수 있다.

🧐 MVVM패턴의 장점은 무엇일까?

위에서 말했던 특징처럼 View와 View Model사이의 의존성이 없다. 각각의 부분이 독립적이기에 모듈화하여 개발이 가능하다.

🚨 MVVM패턴의 단점은 ?

View Model의 설계자체가 쉽지않다.

📚

• https://developer.mozilla.org/ko/docs/Glossary/MVC
• https://cocoon1787.tistory.com/733
• https://opentutorials.org/course/697/3828

Inner Join을 간단하게 설명하자면 조건에 부합하는 행만 가져온다. 위의 사진을 참고하여 교집합을 떠올리면 가장 적합하다.

예를 들어보자, 위의 직책번호에서 교집합이 되는 직책번호가 있다. 이를 참고하여 Join 명령문을 작성해보자.

SELECT * FROM 사원 INNER JOIN 직책 ON 사원.직책번호 = 직책.직책번호; SELECT * FROM 사원 INNER JOIN 직책 WHERE사원.직책번호 = 직책.직책번호;

🔨 조인하려는 테이블 명을 JOIN을 기준으로 양쪽에 써줍니다.
🔨 교집합이 되는 각 테이블의 칼럼명을 ON이나 혹은 WHERE로 위와 같이 명시해 줍니다.

이렇게 Join 명령문을 작성한다면,

위와 같이 겹치는 칼럼이 존재하는 경우에만 생성이 되는 것을 확인 할 수 있다. 만약 겹치지 않는 칼럼도 생성하고 싶은 경우에는 어떻게해야할까 ? Outer Join으로 이어 알아보자.

📌 Outer Join

Outer Join을 설명하는 사진이다.

Inner Join과 동일하게 두가지의 테이블 정보를 가져오게 되는데 차이점은 outer 조인의 경우 교집합뿐만 아닌 교집합이 되지 않는 테이블의 정보도 가져온다. 또한 기준이 되는 테이블이 필요하다.

기준이되는 테이블과 대상이되는 테이블로 되어있다. 여기서 기준이되는 테이블을 드라이빙 테이블이라고 한다.

Outer join에는 LEFT OUTER JOIN, RIGHT OUTER JOIN, FULL OUTER JOIN 세가지 종류가 있다.

왼쪽 테이블 명은 A, 오른쪽 테이블명은 B라고 생각하고, 위 사진을 예시로 알아보자.

🔹 1. LEFT OUTER JOIN

LEFT OUTER JOIN은 기준 테이블을 왼쪽에 두고, OUTER JOIN을 수행한다. 기준 테이블은 움직이거나 변형이 없고, 대상이 되는 테이블이 변형된다.

SELECT *FROM A LEFT OUTER JOIN B ON A.학번 = B.학번

🔨 조인하려는 테이블 명을 LEFT OUTER JOIN 을 기준으로 양쪽에 써줍니다.
🔨 교집합이 되는 각 테이블의 칼럼명을 ON이나 혹은 WHERE로 위와 같이 명시해 줍니다.

기준이되는 왼쪽테이블은 그대로 유지가 되며, 오른쪽에서 교집합이 되는 테이블은 생성이 된 것을 확인 할 수 있다. 교집합이 되지 않는 테이블도 NULL값으로 표시하며 나타나있는 것을 확인 할 수 있다.

🔹 2. RIGHT OUTER JOIN

RIGHT OUTER JOIN은 기준 테이블을 오른쪽에 두고, OUTER JOIN을 수행한다. 기준 테이블은 움직이거나 변형이 없고, 대상이 되는 테이블이 변형된다.

SELECT *FROM A RIGHT OUTER JOIN B ON A.학번 = B.학번

🔨 조인하려는 테이블 명을 RIGHT OUTER JOIN 을 기준으로 양쪽에 써줍니다.
🔨 교집합이 되는 각 테이블의 칼럼명을 ON이나 혹은 WHERE로 위와 같이 명시해 줍니다.

기준이되는 B테이블은 전부 유지가 되어있는 모습을 확인 할 수 있으며, B테이블과 교집합이 되는 A테이블의 칼럼들이 생성되었다. 또한 교집합이 되지 않는 칼럼들도 NULL값으로 표시되어 나타나있다.

🔹 3. FULL OUTER JOIN

FULL OUTER JOIN은 왼쪽과 오른쪽 테이블의 모든 데이터를 읽어 결과를 생성한다. RIGHT OUTER JOIN과 LEFT OUTER JOIN의 결과를 합한 결과라고 보면된다.

SELECT *FROM A FULL OUTER JOIN B ON A.학번 = B.학번

🔨 조인하려는 테이블 명을 FULL OUTER JOIN 을 기준으로 양쪽에 써줍니다.
🔨 교집합이 되는 각 테이블의 칼럼명을 ON이나 혹은 WHERE로 위와 같이 명시해 줍니다.

A테이블과 B테이블 모두 유지가 되며, 교집합이 되지 않는 부분들은 NULL값으로 표시되어 나타나있는 것을 확인 할 수 있다.

🚨 OUTER JOIN은 테이블의 모든 영역을 가지고 오기때문에 쿼리의 성능에 있어서도 많은 영향을 끼칠수있다 ㅠ 그래서 주의해서쓰자 !

참조 : https://bramhyun.tistory.com/39

1. DB 백업

2. 압축

3. 데이터 전송

4. 압축 해제

5. DB 복원

6. 도메인 설정 변경

🧶 DB 백업

$ mysqldump -u아이디 -p DB명 > 백업파일명.sql 

$ 데이터베이스비밀번호

🧶 압축

$ tar cvzfp file1.tgz dir1 

dir1 전체를 file1.tgz 파일로 퍼미션 보존 압축

🧶 데이터 전송

🧵 rsync를 사용하는 방법 (카페24에서는 rsync가 제공되지 않음.)

1) 원격 서버의 디렉토리를 로컬 서버로 복사하기

$ rsync -avzh root@175.123.253.69:/home/opeanut/opeanut20200503.tgz ./

2) 로컬 서버에서 원격 서버로 디렉토리 복사하기

$ rsync -avz public_html/ root@150.95.129.155:/home1/USERID/www/ 

🧵 Secure Copy를 사용하는 방법 (카페24 이용시 사용)

1) Remote 서버에서 파일 받기

$ scp -P 22 root@175.123.253.69:/home/opeanut/opeanut20200503.tgz ./

$ yes or no? (yes)

$ password? (패스워드 입력)

remote 서버의 opeanut20200503.tgz 파일을 local의 ./ 로 다운로드 받는다.

2) Remote 서버에 파일 올리기

$ scp -P 22 /home/myhome/abc.tar oracle@123.456.78.9:/home/oracle/

abc.tar 파일을 123.456.78.9 서버의 22번 포트로 SSH 접속하여 oracle 사용자로 로그인 한 후 /home/oracle/ 아래에 복사한다.

🧶 압축 해제

$ tar xvfz 압축한파일명.tar.gz

🧶 DB 복원

$ mysql -u아이디 -p DB명 < 백업파일명 

$ 데이터베이스비밀번호

🧶 도메인 설정 변경

  yum install unzip

2. 압축해제하기 + 파일 경로와 함께입력

  (ex _ 압축해제를 원하는 파일 : xxx.zip)

 unzip /home/cherry.zip
 unzip xxx.zip (현재 디렉토리에 풀림)               
 unzip xxx.zip -d ./yyy (현재 디렉토리 하위에 있는 yyy 디렉토리에 풀림)       

🔵 데이터 타입이란 ?

컴퓨터 시스템과 프로그래밍 언어에서 실수, 정수, 소수 자료형 등의 여러 종류의 데이터를 식별하는 타입으로, 자료형에 대한 가능한 값, 해당 자료형에서 수행을 할 수 있는 명령어, 데이터의 형태, 의미, 크기와 해당 자료형의 값이 저장되는 방식을 말한다.

🔵 데이터 타입의 종류

• 문자형 데이터타입

• 숫자형 데이터 타입
• 날짜형 데이터 타입
• 이진 데이터 타입

🔵 문자형 데이터 타입

CHAR(n)

고정 길이 데이터 타입(최대 255byte)- 지정된 길이보다 짦은 데이터 입력될 시 나머지 공간 공백으로 채워진다.

VARCHAR(n)

가변 길이 데이터 타입(최대 65535byte)- 지정된 길이보다 짦은 데이터 입력될 시 나머지 공간은 채우지 않는다.

TINYTEXT(n)

문자열 데이터 타입(최대 255byte)

TEXT(n)

문자열 데이터 타입(최대 65535byte)

MEDIUMTEXT(n)

문자열 데이터 타입(최대 16777215byte)

LONGTEXT(n)

문자열 데이터 타입(최대 4294967295byte)

JSON

JSON 문자열 데이터 타입 - JSON 형태의 포맷을 꼭 준수해야 한다.

🔵 숫자형 데이터 타입

TINYINT(n)

정수형 데이터 타입(1byte) -128 ~ +127 또는 0 ~ 255수 표현할 수 있다.

SMALLINT(n)

정수형 데이터 타입(2byte) -32768 ~ 32767 또는 0 ~ 65536수 표현할 수 있다.

MEDIUMINT(n)

정수형 데이터 타입(3byte) -8388608 ~ +8388607 또는 0 ~ 16777215수 표현할 수 있다.

INT(n)

정수형 데이터 타입(4byte) -2147483648 ~ +2147483647 또는 0 ~ 4294967295수 표현할 수 있다.

BIGINT(n)

정수형 데이터 타입(8byte) - 무제한 수 표현할 수 있다.

FLOAT(길이, 소수)

부동 소수형 데이터 타입(4byte) -고정 소수점을 사용 형태이다.

DECIMAL(길이, 소수)

고정 소수형 데이터 타입고정(길이+1byte) -소수점을 사용 형태이다.

DOUBLE(길이, 소수)

부동 소수형 데이터 타입(8byte) -DOUBLE을 문자열로 저장한다.

🔵 날짜형 데이터 타입

DATE

날짜(년도, 월, 일) 형태의 기간 표현 데이터 타입(3byte)

TIME

시간(시, 분, 초) 형태의 기간 표현 데이터 타입(3byte)

DATETIME

날짜와 시간 형태의 기간 표현 데이터 타입(8byte)

TIMESTAMP

날짜와 시간 형태의 기간 표현 데이터 타입(4byte) -시스템 변경 시 자동으로 그 날짜와 시간이 저장된다.

YEAR

년도 표현 데이터 타입(1byte)

🔵 이진 데이터 타입

BINARY(n) & BYTE(n)

CHAR의 형태의 이진 데이터 타입 (최대 255byte)

VARBINARY(n)

VARCHAR의 형태의 이진 데이터 타입 (최대 65535byte)

TINYBLOB(n)

이진 데이터 타입 (최대 255byte)

BLOB(n)

이진 데이터 타입 (최대 65535byte)

MEDIUMBLOB(n)

이진 데이터 타입 (최대 16777215byte)

LONGBLOB(n)

이진 데이터 타입 (최대 4294967295byte)

DB에 대해 영상은 여러번 봤지만 직접 해보려니까 확실히 다르긴 한 것 같다.. 어렵다 ㅠㅠ

(사전에 DNS 도메인 설정 완료)

1. EC2 서버에 SSH로 접속

• AWS(아마존웹서비스) EC2에서 인스턴스 실행 (CentOS)
• 키 다운로드 받아서 pem ➡ ppk로 변환 (puttygen)
• PuTTy로 리눅스 접속
• passwd로 패스워드 설정 (ppk없이 ssh접속하기)

  2. vsftpd 설정하기

• vsftpd 설치 및 계정생성

  3. Apache , PHP, MySQL 설치하기

• centOS에 Apache 설치
• centOS에 PHP 설치
• centOS에 MySQL 설치 및 비밀번호 설정하기

  4. Apache 설정하기

• 아파치 실행
• 아파치 도메인 설정
• 아파치 PHP와 연동

  5. PHP 설정하기

• PHP 내부 설정

  6. vhost 설정하기

  7. DB 연결하기

• MySQL 계정생성 및 권한부여
• HeidiSQL 접속하기

  8. 그누보드 설치하기

➰ EC2 서버에 SSH로 접속

🔸 AWS(아마존웹서비스) EC2에서 인스턴스 실행 (CentOS)

• 인스턴스 실행구조

• 인스턴스 생성 시에 보안그룹 인바운드 규칙 수정

• 탄력적 IP 할당

• 인스턴스 유형 : t2.micro

• 키페어 생성

🔸 Putty로 리눅스 접속

• Putty 설치 후 Puttygen 실행
• 인스턴스 실행 시에 받아둔 키파일(.pem) 선택
• Save private key를 클릭하여 채워진 키 정보를 (.ppk)로 저장
• Putty 실행하여 해당 인스턴스에 할당된 탄력적IP 정보를 기입
• SSH - Auth 안에 Browse에 저장한 (.ppk) 파일선택 후 오픈

참조 : https://sailer.tistory.com/entry/AWS-EC2-%EC%97%90-SSHPUTTY%EB%A1%9C-%EC%A0%91%EC%86%8D-%ED%95%98%EA%B8%B0-1

➰ vsftpd 설정

🔸 vsftpd 설치 및 계정생성

• yum으로 vsftpd 설치하기

  yum -y install vsftpd

• vsftpd.conf 파일 수정하기

  vi /etc/vsftpd/vsftpd.conf

• 수정내용 anonymous_enable=NO chroot_local_user=NO listen=YES listen_ipv6=NO

• 전송모드 세팅하기 passive mode passive port : 40001-40010 pasv_enable=Yes pasv_max_port=11001 pasv_min_port=11050

• 재시작

  systemctl restart vsftpd

• 서버시작프로그램에 등록

  systemctl enable vsftpd

참조 : https://sailer.tistory.com/m/entry/CentOS-에-vsftpd-설치하기, https://www.hostwinds.kr/tutorials/create-ftp-accounts-server

➰ Apache , PHP, MySQL 설치

🔸 리눅스에 Apache 설치

• 서버에 접속하여 SSH를 통해 로그인

  ssh DSM 관리자계정@DSM IP주소 -p SSH 포트번호

• Apache 설치하기

  yum install httpd -y

• 설치상태확인

  httpd -v

• 서버구동

  systemctl start httpd

• 작동상태확인

  systemctl status httpd

👉 active로 상태가 확인되고, IP를 입력하여 다음과 같은 페이지로 연결되면 성공

🔸 PHP 설치

• Remi 레포지토리 활성화

  yum-config-manager --enable remi-php74

• PHP 모듈 설치

  yum install php php-common php-opcache php-mcrypt php-cli php-gd php-curl php-mysqlnd

• 설치상태 확인

  php -v

🔸 MySQL 설치

• 패키지 설치

  yum install http://dev.mysql.com/get/mysql-community-release-e17-5.noarch.rpm

• MySQL 서버 설치

  yum install mysql-community-server

• 설치상태 확인

  mysql --version

• MySQL 실행

  systemctl enable mysqld

• 작동상태 확인

  systemctl status mysql

  👉 active로 상태가 확인되면 성공

  참조 : https://sailer.tistory.com/m/entry/Centos-7-%EC%97%90-MYSQL-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B056-or-57

🔸 MySQL 비밀번호 설정

• 초기값 설정

  mysql_secure_installation

• 대답내용 Remove anonymous users? : y Disallow root login remotely? : y Remove test database and access to it? : y Reload privilege tables now? : y

• 접속 가능 여부 확인

  mysql -u root -p

➰ Apache 도메인 설정

🔸 vhost 설정 첫번째

• 명령어작성

  include /ect/httpd/conf/vhost.conf

• 아래와 같이 기입

  <Directory "/home">

    AllowOverride None
    Require all granted 

🔸 vhost 설정 두번째

• 명령어작성

  vi /etc/httpd/conf/vhost.conf

• 아래와 같이 기입

👉 설정한 도메인으로 접속했을때 Testing 페이지가 뜨면 성공

🔸 Apache-PHP 연동 (Apache가 PHP파일을 읽을 수 있도록 설정)

• 명령어 작성

  vi /etc/httpd/conf/httpd.conf

• 해당내용 기입
  

➰ PHP 설정

🔸 PHP 내부설정하기

• 명령어작성

  vi /etc/php.ini

• 해당내용 기입

➰ vhost 설정

🔸 vhost 도메인 설정하기

• 수정 할 파일 불러오기

  vi /etc/httpd/conf/vhost.conf

• vhost.conf 파일 수정하기

  <virtualhost *:80>
   ServerAdmin webmaster@dummy-host.example.com
   DocumentRoot /www/docs/dummy-host.example.com
   ServerName dummy-host.example.com
   ServerAlias www.dummy-host.example.com
   ErrorLog logs/dummy-host.example.com-error_log
   CustomLog logs/dummy-host.example.com-access_log common
  </VirtualHost>

➰ DB 연결

🔸 MySQL 계정생성 및 권한부여

• 서버접속

  mysql.server start

• DB 로그인

  mysql -u root -p

• 사용 중인 사용자 계정 확인

  (root 계정의 데이터베이스 중 'mysql' 이라는 데이터베이스 선택하기) mysql> use mysql;

  ('user' 이라는 테이블의 정보에서 사용자 계정 확인하기) mysql> select host, user from user;

• 계정생성

  create user 계정ID;

• localhost만 추가된 계정에 외부 host 접근 권한 추가

  mysql> create user 계정ID@'%' identified by '비밀번호';

• 모든 DB, 테이블 관리 권한 부여

  (privileges on [데이터베이스 이름].[테이블 이름]) mysql> grant all privileges on . to 계정ID@localhost idnetified by '비밀번호';

• 권한 부여 내용 메모리에 반영

  mysql> flush privileges;

• 권한이 잘 부여되었는지 확인

  mysql> show grants for 계정ID@localhost;

참조 : https://velog.io/@ejayjeon/MYSQL-1.-%EA%B3%84%EC%A0%95-%EC%83%9D%EC%84%B1-%EA%B6%8C%ED%95%9C-%EB%B6%80%EC%97%AC

➰ 그누보드 설치하기

🔸 FTP에 그누보드 설치하기

• 설치원하는 경로를 명령어와 입력

  #pwd

• 그누보드 설치하기

  wget https://github.com/gnuboard/gnuboard5/commits/master

• 압축풀기

  tar xvzf g5.tar.gz

• 해당 폴더로 이동하여 data 파일생성

  mkdir data

• chmod 707 data 로 파일 권한도 변경

🔸 도메인에 접속하여 그누보드 설치

참조 : https://idchowto.com/linux%EA%B7%B8%EB%88%84%EB%B3%B4%EB%93%9C-gnuboard5-%EC%84%A4%EC%B9%98%ED%95%B4%EB%B3%B4%EA%B8%B0/

아마존 웹서비스인 AWS 클라우드는 확장가능한 컴퓨터 용량을 제공한다. EC2를 사용하면 하드웨어에 선투자 할 필요가 없기때문에, 더 빠르게 개발할 수 있다.
EC2를 사용하면 원하는 수의 가상서버를 구축하고, 보안 및 네트워킹을구성 할 수 있으며, 스토리지 관리가 가능하다.
확장 또는 축소를 통해서 요구사항 변경또는 사용량 스파이크를 처리 할 수 있어서 트레픽을 에측 할 필요성이 줄어든다.

➰ EC2가 제공하는 기능

1. 인스턴스

가상컴퓨팅 화면

2.AMI

Amazon Mushine Image의 약자로, 인스턴트를 쉽게 만들 수 있는 템플릿이다. 서버에 필요한 운영체제와 소프트웨어들이 적절히 구성되어있다.

3. 인스턴스를 위한 CPU , 메모리, 스토리지, 네트워킹 용량 등 여러가지 구성

4. Keypair

인스턴스 로그인 정보를 보호해준다.

5. 보안그룹

인스턴스에 연결 할 수 있는 프로토콜과 포트, 소스 IP 범위를 지정하는 방화벽 기능이다.

6. 탄력적 IP주소

동적 클라우드 컴퓨팅을 통한 고정 IP4로, EIP라고 한다.

내가 사용했던 기능들에 대해서만 간단하게 정리해보았다. 그 밖에도 태그나, 볼륨등의 기능이 제공된다.

➰ 인스턴스

클라우드 가상서버로, 하나의 AMI에서 다양한 인스턴스 유형을 실행 할 수 있다.
인스턴스의 유형에 따라서 인스턴스에서 사용되는 호스트 컴퓨터의 하드웨어가 기본적으로 결정된다.
각 인스턴스 유형은 서로 다른 컴퓨팅 및 메모리 기능을 제공한다. 인스턴스가 실행되면, 컴퓨터와 동일한 방식으로 다루면 된다.
완벽한 통제가 가능하며, 루트권한이 필요한 명령은 sudo 명령어를 사용하면 된다.

다음에는 인스턴스를 생성하는 방법에 대해서 포스팅해보겠다.

회사에서 처음해봤을때 생소했는데 여러번 하다보니까 눈감고도 할 수 있을 것 ~ 같지만 금방 까먹을 확률이 99%이기에 ^^ ... 나는 날 믿지않아