CodeHoon

리눅스 Linux OS

■ 사용자의 비밀번호를 변경하고자 할 때 사용

$ passwd

만약,

■ 비밀번호를 잊어버려 해당 계정의 비밀번호를 변경하려고 할 때

1. 권한이 있는 계정으로 로그인

 $ passwd 사용자명

하고 암호를 작성 해주시면 됩니다.

Vue.js 3 에서 axios를 이용해 php 에 데이터를 송신하는 방법을 포스팅하도록 하겠습니다.

3일째 이거 만지다가 어쩌다 됐습니다. 억울..

[버전은 상관없지만] @vue/cli 4.5.15 에서 적용하였습니다. 

■ 1. Vue-cli project 설정 1/2

/src/views/Account/AxiosTest.vue

제가 form을 이용해 post data 를 송신할 Vue 페이지는 위와 같습니다.

AxiosTest.vue 
=> input 태그 2개로, id 와 password를 전달하려고 합니다.

1. Template

<template>
  <div>
    <form action="" @submit="checkForm">
      <input type="text" name="id" v-model="idValue" />
      <input type="password" name="password" v-model="passwordValue" />
      <button type="submit">submit</button>
    </form>
  </div>
</template>

2. script

<script>
import axios from "axios";

export default {
  data() {
    return {
      idValue: "",
      passwordValue: "",
    };
  },
  methods: {
    async checkForm(e) {
      e.preventDefault();
      let idValue = this.idValue;
      let passwordValue = this.passwordValue;

      await axios
        .post("/api/loginCheck", {
          id: idValue,
          password: passwordValue
        })
        .then(function (response) {
          // handle success
          console.log("success");

          console.log(response);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        })
        .then(function () {
          // always executed
        });
    },
  },
};
</script>

■ 1. Vue-cli project 설정 2/2

vue.config.js

프로젝트의 root 경로에 vue.config.js 파일을 없으신 분들은 생성해주시고 아래의 내용을 복붙해주세요.

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080/",
      },
    },
  },
};

■ 3. php 

Apache 서버를 사용하신다면, 8080포트로 구동 중이실겁니다. (본인의 포트에 맞게 설정해주세요)

/var/www/html/ 경로에 /api 폴더를 생성해주세요. 이곳에 axios의 data 를 수신할 php 파일을 생성할겁니다.

이렇게 생성하였습니다. (자유롭게 생성해주세요. 보통 /api 라고 많이 생성합니다.

/api/loginCheck.php

<?php
 // header의 요청을 수락하는 php 설정들. 안해주면 데이터를 못받는 경우가 생김
header('Access-Control-Allow-Origin:*');
header("Access-Control-Allow-Credentials", "true");
header('Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');
header('Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS');

$data = json_decode(file_get_contents('php://input'), true);

// 반복문으로 데이터 출력 

■ 결과

감격스럽게도 200 통신 성공 결과가 출력되었고,

php에서 $data 는 array 의 타입이기 때문에 출력 결과(response) 가 array 로 출력되었습니다. 

■ 1차 수정

- 기존에 params 를 넘겨줘서 자꾸 데이터가 array로 출력이 되었습니다.

- 기존 : data(=params객체) : jsonStyleValues 
- 변경 : { jsonStyleValues list}

* POST method에서는 params 를 넘겨주면 안된다. 

참고

https://coderedirect.com/questions/43570/axios-get-from-local-php-just-returns-code-instead-of-executing

덕분에 3일동안 axios와 http, proxy, 등에 대해 많이 공부할 수 있었습니다.

REST API를 적용하고,
Vue.js 혹은 React.js에서 Axios를 사용할 때에 초보자는 도대체 backend 를 담당하는 파일을 어디에다가 놓아야할지 모를 경우가 생깁니다.

네 그게 바로 접니다.

환경 및 사용 : Linux (Ubuntu) , Apache , vue - cli project , php , axios

예시)

get 방식으로 axios를 사용해보겠습니다.

apache 서버는 8080포트를 기본으로 사용하고 있습니다. 이를 통해 axios를 port 8080에서 값을 요청하고 받아옵니다.

그럴 때 php 파일의 위치는 

/var/www/html/ 에 작성해야합니다.

추가적으로 api 폴더를 생성하여 그곳에 넣는 방법도 있습니다. ㅎㅎ

만약 이렇게 했을 때 아래와 같은 에러가 발생하면 해당 포스트를 확인해주시길 바랍니다.

감사합니다.

Access to XMLHttpRequest at 'http://url/fileName' from origin 'http://url:port-number' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

xhr.js?b50d:210 POST http://url/fileName net::ERR_FAILED 200

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data') at eval (fileName.vue?1c92:239)

■ 에러 발생

Vue.js 3 에서 Axios의 post 혹은 get을 사용해 php에 데이터를 요청해 결과 데이터를 불러오려는데 에러가 발생하였다.

이는 BackEnd (php) 에서 url요청 허용을 해놓지 않았기 때문에 발생한 에러이다.

그렇기 때문에 php파일에서 간단하게 추가해야한다.

이렇게 작성하면 되는데, 만약 다른 상세한 설정(PUT, DELETE 등) 도 추가하려면 아래의 내용까지 추가해주면 된다.

이상입니다.

console.log('axios')
console.log(response) 

Vue.js 에서 Component (컴포넌트)를 3가지 방법으로 선언할 수 있다.

1. Global (전역 선언)
2. Local (지역 선언)
3. 파일 분리

1,2번의 방법은 사실 별로라고 생각한다. 그 이유인즉슨, 특정 컴포넌트 내에 또 다른 컴포넌트를 작성하여 적용시키는 방법이라 생각하면 되는데, 가독성이 좋지 않다.

물론 컴포넌트를 한 개의 파일에서 관리할 수 있다는 매력이 있지만, 애초에 `template` 속성 내에 전부 때려 넣다보니 편리함보다는 오히려 보기가 너무 불편하다.

Syntax Highlight 지원도 받기 어렵다. (혹시 있나?)

■ Global [전역]

예시)

이렇게 ' component 명' 을 먼저 선언하고,
그 뒤에 template 속성을 선언하여  `  ` 속에 html 을 비롯한 모든 태그들을 작성하는 것이다.

■ Local [지역]

지역 선언은 전역과 약.간. 다르다.

예시)

차이점은 변수에 할당한다는 점... ( ES6로 넘어오면서 코드의 엄격성을 생각하여 var 사용은 자제하자.)
나머지는 동일하게 template 내에 작성한다.

■ 파일분리

가장 선호하는 방식이고, 주로 사용되는 방식이다.

[ Header.vue,  Content.vue ] 가 있다면, Header.vue 내에 Content.vue를 import하여 사용하는 것이다.

이렇게 넣으면 컴포넌트 간에 따로 파일을 관리하여 유지보수 하기에 용이하다.

데이터 통신을 하기 위해서는 다른 수고를 넣어야하지만, 가독성이 좋아져서 선호한다.

참고 

Vue.js 3 프로젝트에서 Vuex를 설치하려고 했는데 해당 에러가 발생하였다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: kiosk@0.1.0
npm ERR! Found: vue@3.2.21
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.0.0" from vuex@3.6.2
npm ERR! node_modules/vuex
npm ERR!   vuex@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-11-10T02_31_20_661Z-debug.log

이 에러는 Vue.js 3 버전에서 Vuex를 설치하였기 때문에 발생하는 에러이다.

그렇기 때문에 처음에 vue.js 3를 설치하는 방법대로 해야만 한다.

■ 해결 방법

npm install vuex@next --save

를 명령해준다.

아, 그리고 이제 본문에 광고를 넣지 않기로 마음먹었다.
종종 내 포스트들을 보면 너무 난잡해보이는 경향이 있다.
중간 ads를 아예 안넣었는데도 난잡해보이면, 음... 게시글 상단의 광고도 지울 생각이다.

Linux, Ubuntu, Vue-cli, axios를 사용하는데, proxy 에러가 출력되었다.

Proxy error: Could not proxy request 

■ 해결 방법

해당 에러는 root 경로의 vue.config.js 에서 proxy 관련 정보를 수정하면 된다.

/vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "https://localhost:8081/",
      },
    },
}

기본 경로(/root)가 될 port 번호와 정보를 작성하면 된다.

proxy 문제가 해결된것을 확인하실 수 있습니다.

이렇게 axios를 이용해서 데이터를 올바른 경로에서 뽑아오면 되겠습니다.

Vue.js - axios를 설치하고 바로 사용하려고 하는데 에러가 발생하였습니다.

 'Axios' is not defined no-undef

당황하였다.

■해결 방법

해당되는 컴포넌트(component)에 import 해주시면 됩니다.

<script>
import axios from 'axios'

export default {
...
}
</script>

이상입니다.