CodeHoon

사용환경: WINDOW, LINUX, Python 3.10.2, PHP 8.0.3 (이전 버전도 가능)

지난 포스팅

PHP 에서 Python 에 파라미터를 전달하는 방법을 포스팅하겠습니다.

<?php
$data_value = '첫번째';
$data_value2 = '두번째';
$output = shell_exec("python-text.py".' '.$data_value.' '.$data_value2);
echo $output;

shell_exec 를 사용해주면 되는데, 주의할 점이 있습니다.

바로 띄어쓰기 입니다.

1. 띄어쓰기를 통해 매개변수를 구분한다.
2. 만약 데이터에 '안녕하세요  훈입니다.' 와 같이 띄어쓰기가 있는 데이터는 별도의 데이터로 출력됩니다.

# python

import sys
import io	#한글처리

sys.stdout = io.TextIOWrapper(sys.stdout.detach(), encoding='utf-8')		#한글처리
sys.stderr = io.TextIOWrapper(sys.stderr.detach(), encoding='utf-8')		#한글처리

for arg in sys.argv:
    print(arg)

sys.exit()

반복문을 통하여 전달된 인자 arg 를 출력해주면 됩니다. 

arg 의 결과물은 배열(Array)인데, 첫번째 인자출력물로 현재 경로를 출력합니다.  사용에 주의 바랍니다.
만약 값이 전달되지 않았을 때는, 경로만 출력이 되기 때문에 값이 잘 전달되었는지 확인이 가능합니다.

결과

띄어쓰기가 있는 데이터를 전달해주었을때

개행되어서 출력되는 것을 확인하실 수 있습니다.

사용환경: WINDOW, LINUX, Python 3.10.2, PHP 8.0.3 (이전 버전도 가능)

PHP에서 Python의 파일을 호출하는 방법

PHP에서 shell_exec 를 통하여 Python 파일을 호출할 수 있다.

// 사용할 php파일

$output = shell_exec("python-text.py");	   // python-text.py : 파이썬 파일 이름 
echo $output;

최대한 내용을 짧게 하고 싶어서 명령어 없이 작성하였다.

다른 방법도 있다,

// 사용할 php 파일

$output = exec( "python python-file-name.py" );
echo $output;

파이썬 파일 이름 앞에 py, python, python3 이라든지 파이썬 명령어를 사용해도 무방하다. 

// python.py

helloThere = 'hello'
print(helloThere)

결과 출력 - hello

다음 포스팅은 php에서 매개변수(파라미터)를 전달하는 방법을 포스팅하겠습니다.

사용 환경 및 기술 : vue-cli 4.5.x, vue.js 3, router, reference, etc..

Vue.js 3 를 사용하여 동영상 강의를 시청, 그리고 드래그-드롭 기능을 구현하였다.

App.vue, Home.vue, DropZone.vue  이렇게 3가지 파일로 구분하였고, App.vue의 내용은 정말 없다

// App.vue
<template>
  <router-view/>
</template>

router/index.js 에서 Home.vue를 / 경로로 인식하게 하여 아예 Home.vue만 보이게 사용하였다.
(사실 굳이 router는 필요없었다.)

Home.vue에서는 DropZone.vue 파일을 컴포넌트로 사용한다.

// Home.vue

<template>
  <div class="home">
    <h1>Drag Or Drop</h1>
    <drop-zone @drop.prevent="drop" @change="selectedFile"></drop-zone>
    <span class="file-info">File: {{ dropzoneFile.name }}</span>
  </div>
</template>

<script>
import { ref } from 'vue'
import DropZone from '@/components/DropZone'

export default {
  name: 'Home',
  components: {
      DropZone
  },
  setup () {
    let dropzoneFile = ref('')	// ref를 통해 dropzoneFile이라는 변수로 drop-zone 컴포넌트에 데이터를 공유해준다.
    
    // drop : 파일을 끌고와 영역 안에 해당 파일을 놓았을 경우 발생하는 이벤트.
    const drop = (e) => {
      dropzoneFile.value = e.dataTransfer.files[0] 		// dataTransfer이라는 js의 기능을 사용하여 file의 첫번째를 인식
    }

    const selectedFile = () => {
      dropzoneFile.value = document.querySelector('#dropzoneFile').files[0]	 // DropZone.vue에 있는 input type="file" 태그
      // 파일이 인식되었을 때, 파일의 이름을 찾아서 출력해줌.
    }

    return { dropzoneFile, drop, selectedFile }
  }
}
</script>

Home.vue에 대한 간략한 설명.

. 'dropzoneFile' 이라는 변수를 ref로 선언하여 하위 컴포넌트에서 끌어다가 사용한다.
. event가 발생하는 것을 drop이 인식하여, dropzoneFile의 값에 이벤트의 값을 넣어준다. (올려놓은 파일에 대한 데이터 객체)
. 그리고 drop-zone의 변화에 따라 selectedFile이 호출되어 span 태그로 존재하는 dropzoneFile의 이름을 출력해줍니다. 
    - 파일이 인식되면 파일의 이름을 출력, 만약 인식되지 않았다면 파일의 이름이 없으니 공백으로 처리됨.

// DropZone.vue

<template>
  <div 
    @dragenter.prevent="toggleActive" 
    @dragleave.prevent="toggleActive" 
    @dragover.prevent
    @drop.prevent="toggleActive"
    :class="{'active-dropzone': active}"
    class="dropzone"
  >
    <span>Drag or Drop File</span>
    <span>OR</span>
    <label for="dropzoneFile">Select File</label>
    <input type="file" id="dropzoneFile" class="dropzoneFile"/>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'DropZone',
  setup () {
    const active = ref(false)	// 영역 인식 제어용
    const toggleActive = () => {	// 영역 인식 제어용
      active.value = !active.value		
    }
    return { active, toggleActive}
  }
}
</script>

DropZone.vue에 대한 간략한 설명

위의 사진처럼 dashed의 영역 안으로 drag file 요소가 인식되면 배경색이 변경될 수 있게 'active' 라는 변수를 선언하고,
    1. 영역 안으로 들어왔을 때 => active: true,  색이 초록색으로 변하도록 변경.
    2. 영역 바깥으로 나가거나 파일을 drop 시켰을 때 => active: false, 색이 흰색으로 돌아가게 변경.
    클래스 바인딩을 통해 active-dropzone 클래스로 active 변수를 바인딩 시켰다.

유튜브 강의 

Drag & Drop -MDN 

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

한빛미디어에서 리뷰어 이벤트를 하기에 정기적으로 개발관련 서적이 있으면 좋은 나는 신청을 하였고,
운 좋게 당첨되었다.

그래서 해당 글을 포스팅하게 되었다.

배송은 신경쓰고 있지않았지만, 약 2일-3일 정도 걸린 것 같다.
(월요일 신청, 화요일 당첨, 수-목요일 수령 이런 느낌)

교재는 상당히 깔끔하게 생겼다.

1장을 바로 펼쳐보았다. 이미 아는 것들이 많았지만, 그래도 복습겸 1장을 다 살펴보았다. 

내용은 정말 딱 필요한 핵심 내용만 작성되어져 있어서 가독성이 매우 우수했다.

고급 비구조화 - 객체 부분에서 잠깐 한동안 쳐다보게 되었는데 그래도 찬찬히 읽으니 이해가 잘 되었다.

역시 책은 1장부터 봐야 제맛.

앞으로 주기적으로 해당 교재에 대한 내용을 포스팅하려고 한다.

이상입니다.

사용환경 : Vue.js 3, Firebase 9.1.5

youtube에 있는 동영상 강의를 보던 와중 자꾸 firebase 관련한 에러가 해결이 안되어서 직접 찾아보고 적용하여 성공하였다.

1. 모듈 생성 (module exports part.)
2. 실제 적용 위치

이렇게 두 가지로 나뉘어서 어느곳에서도 사용할 수 있도록 모듈을 생성해놓았다.
그리고 실제 적용 위치에 대한 내용을 작성하도록 하겠다.

1. Module exports = { } !

firebase 8번대의 버전부터 이전과는 다르게 적용해야한다.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 프로젝트 생성 후 받은 정보를 복사 붙여넣기 해주시면 됩니다.
const firebaseApp = initializeApp({
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
})
const db = getFirestore(firebaseApp)
export default db

initializeApp ({ }) 내부에 들어갈 내용으로는 이곳을 참고하면 된다.

>> 그래도 잘 모르시겠다면 이 글의 맨 마지막에 찾는 방법을 작성해놓았습니다. 확인부탁드립니다.

2. 실제 적용 위치

해당 함수를 호출할 때에는 반드시 Promise 방식인 async await을 적용해서 작성해야 한다.

import db from '@/firebase/firebaseInit.js'
import { doc, setDoc } from "firebase/firestore";

methods: {
    async uploadInvoice () {	// async 함수 를 작성     
        // 저장될 데이터 내용
        const docData = {
          ...
        }
        //await 로 담아주기 
        await setDoc(doc(db, "data", "one"), docData);
        // 후처리는 알아서!
      }
}

해당 내용을 실행 후, 파이어베이스 프로젝트로 이동하여 내용을 보면, 아래와 같이 데이터가 들어가있음을 확인이 가능하다.

끝~!

도움이 되셨다면, 광고 한 번씩 클릭해주시면 블로그 운영에 힘이 됩니다.

만약, 내 key 관련한 정보를 찾지 못하겠으면 아래의 경로로 들어가주시면 확인이 가능합니다.

본인의 프로젝트 - 앱 소개 - setting - 일반 - 아래 스크롤(내 앱) 

도움이 되셨다면, 광고 한 번씩 클릭해주시면 블로그 운영에 힘이 됩니다.

사용환경 : Vue.js 2, vue-cli, vue-Router 사용

router-link + binding 를 통해 해당 내용을 전달해준다.

<router-link :to="'/detail/'+123453" >

여기서 `123453` 이 전달하고자하는 변수가 될 수도 있다.

1. Home.vue

<template>
// 각각의 id를 가진 리스트를 v-for로 출력.
<div class="movie" v-for="movie in movies" :key="movie.imdbID">
	<router-link :to="'/movie/' + movie.imdbID" />
    	// router-link를 통해 반복문을 통해 출력된 movie 객체의 id값을 전달하고자 한다.

</template>

2. Index.js (router)

  {
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
  }

: 바인딩을 통해 id값을 전달할것이라고 선언한다.

3. MovieDetail.vue

2가지 방법으로 출력이 가능하다.

  1. html 요소에 바로 텍스트만 출력
  2. script 내에서 추가 가공 후 또다른 전체 데이터를 출력

  1. html 요소에 출력

  html 요소에 출력하는 것은 간단하다.

<template>
	<div> {{ $route.params.id }} </div>
</template>

이렇게 바로 사용이 가능하다.

  2. script 내에서 가공 (후 또 다른 전체 데이터를 출력)

  위에서 $route를 바로 사용하던데에 반해 이번에는 vue의 useRoute 기능을 사용해야 한다.

import { useRoute } from 'vue-router'

export default {
  setup () {
    const route = useRoute()
    const paramsValue = route.params.id  
  }
}

이렇게 paramsValue로 변수를 선언하여 사용할 수 있다.

이 글은 해당 문서를 참조하였습니다.

■ Computed 속성 사용하기

1. {{ }} 템플릿 내에 복잡한 연산 로직을 수행하고 싶을 때 사용
2. computed와 methods를 구분하여 사용할 수 있다. 
    -> computed는 캐싱을 하지만 methods는 하지 않는다.
3. watch 보다 computed를 사용하는 것이 코드의 반복성 때문에 더 낫다
4. 기본적으로 getter 함수만 가지고 있지만, setter 함수를 만들어 사용할 수 있다.

■ Example

<template>
<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>
</template>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

이때, reservedMessage의 값은 항상 message의 값에 의존한다.
추가적으로, message의 값이 존재하지 않는다면 reservedMessage는 연산되지 않는다.

 ✔ Computed 속성은 항상 어딘가에 의존한다.

computed: {
	now: function () {
		return Date.now()  // Update 되지 않음
	}
}​

Date.now() 와 같은 아무곳에도 의존하지 않는 속성일 경우 업데이트 되지 않는다.

Methods 로도 같은 결과를 낼 수 있다.

methods: {
	reversedMessage: function () {
		return this.message.split('').reverse().join()
	}
}

  => methods를 사용할때에는 cache가 저장되지 않는다. 

■ Computed VS Watch

Computed의 코드들이 Watch 코드들보다 훨씬 적은 코드를 사용하고 있다는 것을 알 수 있다.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  // computed 속성의 코드 길이는 짧다.
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  // watch 속성의 길이는 반복적이고 data부분에 추가적으로 기입을 해서 사용해야 편하다.
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

vue 3,  vue-cli 4.5.x 의 환경을 사용하고 있습니다.

■ LocalStorage

 - 로컬 스토리지에 관하여 자세한 내용은 MDN의  링크를 확인해주시기 바랍니다.

사용 방법은 아주 간단합니다.

localStorage.setItem() 으로 저장, localStorage.getItem() 으로 호출 입니다.

번외로 localStorage.removeItem() 로 지정하여 삭제가 가능하고, localStorage.clear()로 모두 삭제가 가능합니다.

■ 예제

//add.vue

<template>
  <div class="add">
      <input 
        type="text" 
        class="add__input" 
        placeholder="Enter your task" 
        v-model="newTodoItem"
        @keyup.enter="addTodoItem"
      />
      <button 
        class="add__button"
        @click="addTodoItem"  
      >Add</button>
  </div>
</template>

Input:text 창에서 enter를 누르거나, button을 클릭하면 addTodoItem이라는 함수가 호출되게 하였습니다.

v-model을 통하여 input에 작성되어져 있는 value와 연동하였습니다.

export default {
  data () {
    return {
      newTodoItem: ''
    }
  },
  methods: {
    addTodoItem () { 
      if(this.newTodoItem !== '') {

        const value = {
          item: this.newtodoItem,
          date: `${new Date().getMonth() + 1}/${new Date().getDate()}`,
          compeleted: false
        }

        // setItem 이라는 method 속에 key, value를 전달
        localStorage.setItem(this.newTodoItem, JSON.stringify(value))
        this.clearInput()

      }
    },
    clearInput () {
      this.newTodoItem = ''
    }
  }

}

localStorage.setItem( )은 key와 value를 전달 수가 있는데, 이를 응용하여 value에 JSON 객체를 전달하도록 하였습니다.

value라는 객체에 위에서 작성한 input의 값을 저장하고, localStorage에 데이터를 저장하였습니다.

로컬 스토리지에 저장된 것을 확인하고 싶다면, 개발자도구 -> Application -> 저장용량 -> 로컬 스토리지 에서 확인하실 수 있습니다.