게시판 만들기 계속

json파일 화면에 출력

공통함수 만들기

일단 axiou설치는 되어있고 json파일을 vue에서 사용하려면 axios를 사용하여 읽어들어야한다. axios를 사용하기 위해선 페이지마다 import를 하여야한다.

우선 axios를 import할 파일을 utils라는 새로운 폴더안에 만들어보자

1. src에 새로운 폴더를 만들어 공통 사용 js파일을 만들었다.
   
2. axios파일을 공통 사용 js파일(HttpCommon.js)에 import한다.

import axios form "axios";

3. axios의 기본 주소를 미리 파일에 정의해놓는다. 여기서 기본 주소와 파일형식을 정의해놓으며 다음에 특정 위치에 있는 파일을 사용하고 싶으면 이 파일을 import만 하면 위치 주소를 생략할 수 있어 아주 편하다.

// 인터넷 주소 정의 해놓기 - 해놓으면 다음에 임포트만으로 사용가능
export default axios.create({
    baseURL:" http://localhost:8080",// 기본 인터넷 주소(도메인) 정의 
    headers:{ "Content-type": "application/json"}//통신 문서 규격 정의 : .html, .jpg, .json처럼 파일 형태를 정의 해야함
    // application은 프로그램을 의미하고 이 프로그램을 json파일로 연결 할것이다 라는 의미이다.
  
  //내보내기 : 백엔드 기본주소(기본주소란, 네이버 다음 등 cafe나 blog등이 없는 순수 홈페이지 주소.)
//vue의 기본 주소는 http://localhost:0808/ 도메인이라고도 한다.
//참고로 네이버는 http://naver.com
})

4. services폴더를 src에 만들고 js 파일생성하고 거기에 axios 임포트한다.(이미 위의 파일에서 했으므로 위 파일을 임포트 해도 됨)
   
   axios를 임포트한 HttpCommon파일 inport

import http from "../utils/HttpCommon";// axios 임포트

5. 만들어진 파일(DeptService.js)에 class를 만들어 josn파일을 가져와 읽게 해주는 getAll함수를 정의해준다. getAll함수는 axios가 가지는함수이고 이 함수에 http.get("파일명")함수를 또 사용해서 사용하면된다. (http변수는 HttpCommon파일을 담은 것이고 get함수는 axios가 가지는 함수이다(4번과정).)

class DeptService{
    // 부서 조회 함수
    // json 데이터(파일) 읽기(조회) : get("url")함수를 이용해서 그 파일에 들어와서 json파일을 읽어줌
    getAll(){
        return http.get("/dept.json");// dept.json파일을 읽어와 결과를 보여줌 (이 파일이 객체 배열로 되어있어서 객체배열을 결과로 가져옴)

    // ❗❗❗경로가 아닌 파일명만 적어도 되는 이유는 http에 이미 " http://localhost:8080"라는 경로를 지정해주어서 이고 이 경로는 이 프로젝트의 public파일을 의미한다. 
    }
}

6. 만든 class를 파일을 export default 로 내보낸다.

export default new DeptService();

정리
axios파일을 계속 import하는 것은 번거롭기 때문에 모든 컴포넌트에서 공동으로 사용할 함수들을 미리 파일에 정의해서 import하는게 좋다.(위 과정에서 1~3번)
ex) 게시판을 만들때 사용되는 함수들이 정해져 있다. 그때마다 함수 정의하는게 귀찮으니 미리 함수들을 정의해놓은 공통 함수 모음 파일을 만들어 게시판 만들때마다 import해서 사용하면 쉽다.

그후 새로운 파일을 만들어 여기서 json파일을 읽어들여줄 getAll함수를 정의해준고 내보내준다.(4~6과정)

json 출력하기 사용하기

1. DeptService파일을 DeptList.vue에 import해준다.

import DeptService from "../services/DeptService";

2. json파일의 속성을 대입해줄 속성을 정의해준다.

 data() {
      return {
        dept : []
      }
    }

3. 가장 먼저 현재파일이 실행되면 가장먼저 getAll파일이 실행되게 만들어야한다. 그렇게 하기위해선 가장먼저 실행되는 함수인 mounted에 비동기코딩을 이용하여 getAll함수를 넣어주면된다.

async retrieveDepts(){//부서조회 함수 - 프론트와 백엔드를 연결해주는 함수
        try {//에러 발생 대비 함수 - try안의 실행문을 감시하다가, 에러가 발생 되면 catch안의 실행문이 실행됨.
          // todo 비동기 코딩을 해야함 
          let response = await DeptService.getAll();// 화면이 뜨면 이 함수가 실행되게 해야함 - getAll내부에  promise함수를 가지고 있어 이게 파일이 실행되면 실행되므로 비동기 코딩이 가능해진다.
          // 콘솔 출력 : response.data
          console.log(response.data);// ❗❗❗이거의 역할은 response.data가 기다려지지 않고 console이 실행되면 오류가 발생하게 된다. 그 오류를 만들게 하기 위해 console을 사용
          //바인딩 속성 dept에 저장
          this.dept = response.data.dept;//response.data가 josn파일을 의미한다. 
          //❗❗❗여기서 data는 getAll함수가 가지는 속성(html로 치면 body로 코드들이 적히는 위치이다.)이다.
          //❗❗❗정확히는 josn의 data영역에 정의된 속성인 dept를 가져온다는 말이다.
        } catch (error) {
          console.log(error);
        }
      }

필기가 너무 지저문하니 다시 코드만 정리해보자면

async retrieveDepts(){
        try {
          let response = await DeptService.getAll();
          
          console.log(response.data);
          
          this.dept = response.data.dept;
          
        } catch (error) {
          console.log(error);
        }
      }

변수에 getAll함수를 넣어주고 await을 달아주었다. 그리고 작동이 안되면 에러가 나게 하기 위해 console에 json파일을 찍히게 해주었고, 정의해놓은 속성에 json파일의 dept속성을 담아주었다. 에러가 나면 error가뜨게 catch에 넣어주었다. 이것을 하나의 함수로 만들어 mounted에 넣어주면된다.

4. mounted함수에 만든 함수를 넣어준다.

  mounted() {
      //  여기에 어떤것이든 정의해주면 화면이 뜰대 실행됨
      // 화면이 뜰때 부서조회를 해보자 
      this.retrieveDepts();
  	}

5. 마지막으로 반복문을 통해 json파일의 dept배열속성을 출력해주었다.
   

결과

json파일 출력하기 간단 정리

1. httpCommo로 axios 연결하고 내보내기
2. DeptService에서 getAll함수로 json읽을 수 있는 함수 만들고 내보내기
3. deptlist.vue파일에서 DeptService파일 연결해서 getAll파일을 바인딩 속성에 담아준 후, 비동기 코딩을 사용해 가장 먼저 실행 하게 처리를 해준다
4. 반복문으로 결과를 출력한다.

whatch

watch는 특정 글자를 금지시켜 금지된 글자가 입력되면 alert를 띄워주는 기능이다.

watch: {
        // TODO: 사용법 : watch:{ 바인딩속성: function(value){실행문}}
        inputText: function(value){
            // TODO: 1) value == 새로 입력된 문자열
            // TODO: 2) 문자열.indexOf(찾을문자열) : 
            // TODO:   => 찾을문자열 있으면 그위치의 인덱스번호를 가져오기, 없으면 -1 
            let pos = value.indexOf(this.ftext);

            // TODO: 찾을문자열이(안되) inputText 에 있으면
            if(pos > -1) {
                alert("금지문자가 입력되었습니다.");
            }
        }
    }
}

json파일 사용하기 정리

1. axios 파일 import하기

utils파일에 common파일을 만들어서 다음과 같이 만든다.

import axios from "axios";

// 인터넷 주소 정의 해놓기 - 해놓으면 다음에 임포트만으로 사용가능
export default axios.create({
    baseURL:" http://localhost:8080",// 기본 인터넷 주소(도메인) 정의 
    headers:{ "Content-type": "application/json"}//통신 문서 규격 정의 : .html, .jpg, .json처럼 파일 형태를 정의 해야함
    // application은 프로그램을 의미하고 이 프로그램을 json파일로 연결 할것이다 라는 의미이다.
}) // 내보내기 한 것

json파일을 가져올때마다 해줘야하는 과정인데 이렇게 파일로 만들어서 한번 해주면 담에 이 파일만 임포트 해주면된다.

2. json 읽어주는 함수 만들기

src폴더에 servicies폴더를 만들어 여기에 json을 읽어주는 함수를 만든다.

import http from "../utils/HttpCommon";

class CustomerService{// json읽어주는 함수를 만들자.
    getAll(){
        return http.get("/customer.json")
    }
}

export default new CustomerService();

3. json읽는 함수 사용하기

<script>

import CustomerService from "../services/CustomerService";
export default {
    data() {
      return {
        customer : []
      }
    },
    mounted() {
      this.retreiveCustomer();
    },
    methods: {
      async  retreiveCustomer(){
            try {
                let response = await CustomerService.getAll();
                console.log(CustomerService.data);

                this.customer = response.data.customer
                
            } catch (error) {
                console.log(error)
            }
        }
    }
}

</script>

1. 가장먼저 servicies에 만든 파일을 import하한다.
2. export defaut에 data함수에 return객체에 customer이라는 배열 속성을 만든다.
3. method객체에 josn파일을 읽는 함수를 호출하는 함수를 만든다 . 이때 비동기 코딩으로 함수를 먼저 호출되게 만들어야한다.
4. 만들어둔 customer배열에 json의 costomer을 담는다.
5. 이렇게 만든 호출 함수를 mounted에 넣어준다.
6. 이제 customer속성을 사용하면 json의 customer속성이 사용된다.

java

선생님 추천 플러그인

1. korean머시기
2. indent rainbow
3. 개발꾼의 인텔리제이 플러그인 25가지 추천

프로젝트를 만들때마다 jdk버전을 바꿀수 있다는 것을 알게 되었다. 나는 21을 사용했는데 수업에서는 17을 사용한다. 프로젝트시 팀원들과 같은 버전을 사용하는 것이 중요하다.