Miracle Morning, LHWN

두 번째 수업. 210221 본문

IT 기술/[Vue] 개발자 강의

두 번째 수업. 210221

Lee Hye Won 2021. 6. 2. 15:24
다른 User가 git에서 레파지토리를 복제하는 경우 'clone'

 

git clone https://github.com/[Username]/xxx.git

 

이 User가 수정을 한 후 commit > push 까지 한 상태에서, 내가 변경 후 업로드하면 충돌이 난다! (에러!)

따라서, git에 올라가 있는 파일에 변경 사항이 있다면 그걸 다시 내려받아야된다. (.git이 들어있는 위치에서 pull 받아야함)

git pull origin master

# clone과 pull은 둘 다 원격저장소에서 → 로컬저장소로 가져오는 것이지만,

git clone 은 로컬에 아무것도 없는 상태에서 원격저장소의 데이터를 가져오는 것을 의미하며

git pull 은 로컬에 이미 있는 상태에서 원격저장소의 수정상태를 반영하기 위해 하는 것이다.

 

자바스크립트에서 클래스를 만드는 방법 3가지

 

(1) 리터럴 방식

var obj = { 
  property : value, // 멤버변수 
  method : function() {} // 멤버함수
}

(리터럴 방식) var app = {} 와

(생성자 방식) var app = new Object();

app = {} 는 같은 의미이다.

​

(2) 함수 방식

function ClassName { 
  this.property = value;
  this.method = function() {

} }
var instance = new ClassName();

 

(3) 프로토타입 방식 : 실체가 있는 방식

function classname { 
  this.property = value;
  this.method = function() {} 
} 

classname.prototype.method = function() {}

 

Directvie v-for 반복문

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Directive v-for 반복문</title>
    <!-- 오픈소스 -->
    <script src="./vue/lib/vue.js"></script>

    <style>
        h1 {
            text-align: center;
        }

        table {
            width: 600px;
            margin: 0 auto;
            border-collapse: collapse;
            margin-top: 30px;
        }

        table td,th {
            border: 1px solid #ccc;
            height: 45px;
            text-align: center;
        }

        table th {
            background: #f0f0f0;
        }
    </style>
</head>
<body>

    <!-- HTML -->
    <div id="app">
        <h1>지인 연락처</h1><hr>
        <table>
            <tr><th>이름</th><th>휴대폰번호</th></tr>
            <tr v-for='el in addr'><td>{{el.name}}</td><td>{{el.phonenum}}</td></tr>
        </table>
    </div>
    
    <!-- Vue.js -->
    <script>
        var obj = new Vue({
            el: '#app',
            data: {
                addr: [
                    {
                        name: '이혜원',
                        phonenum: '01011111111',
                    },
                    {
                        name: '이종욱',
                        phonenum: '01011111112',
                    },
                    {
                        name: '이민경',
                        phonenum: '01011111113',
                    },
                    {
                        name: '이지원',
                        phonenum: '01011111114',
                    }
                ],
            }
        });
    </script>

</body>
</html>

 

위 소스는 v-for 을 이용하여 addr 객체 배열 값을 테이블 형태로 만들어주었다.

 

<div id="app">
  <h1>지인 연락처</h1><hr>
  <table>
    <tr><th>이름</th><th>휴대폰번호</th></tr>
    <tr v-for='el in addr'><td>{{el.name}}</td><td>{{el.phonenum}}</td></tr>
  </table>
</div>

우선 테이블의 헤더는 <th>를 통해 '이름', '휴대폰번호'로 해주었다.

그리고 v-for 을 사용하여 <td>를 뿌려주었는데 v-for의 사용 형식은 아래와 같다.

v-for='요소 in 반복속성'

요소의 이름은 내가 임의로 정의할 수 있다. 여기서 나는 'el'이라고 지어줬다.

그리고 반복속성은 반복할 배열의 이름을 넣어주면 되고, 여기서는 addr이라는 배열이다.

​

즉, 반복속성(addr)안에서 요소(el)를 반복할 것이다. 그리고 그 요소(el)을 이용하여 <td>에서 el.name, el.phonenum을 통해 값을 지정해준 것이다.

 

여러 배열을 객체로 정의하여 테이블 만들기

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create a View Instance & JavaScript Class (Instance, Function)</title>
...
<body>
    <h1>리터럴(Literal) 방식 클래스 인스턴스 만들기</h1>
    <h2 style="text-align: center;">주소부</h2>
    <table id='tableAddr'></table><hr>
    <table id='tableGrade'></table>
    <script>
        var vue = {
            cnt: 0,
            el: '<h1>프로퍼티(멤버변수) 템플릿</h1>',
            method: ['피자', '닭칼국수', '김밥', '라면', '스파게티'],
            main: {
                student: [
                    {
                        num: 1,
                        name: '이혜원',
                        kor: 100,
                        eng: 100,
                        mat: 100
                    },
                    {
                        num: 2,
                        name: '이종욱',
                        kor: 100,
                        eng: 95,
                        mat: 95
                    },
                    {
                        num: 3,
                        name: '이민경',
                        kor: 100,
                        eng: 100,
                        mat: 95
                    },
                    {
                        num: 4,
                        name: '이지원',
                        kor: 100,
                        eng: 100,
                        mat: 100
                    }
                ],
                address: [
                    {
                        name: '이혜원',
                        addr: 'Yeosu-dong'
                    },
                    {
                        name: '이종욱',
                        addr: 'Bogugot-li'
                    },
                    {
                        name: '이민경',
                        addr: 'Juyeop-dong'
                    },
                    {
                        name: '이지원',
                        addr: 'Yeusu-dong'
                    }
                ]
            },
            init: function() {
                this.cnt = 500;
                this.el += '<h2>프로퍼티 (멤버변수)에 템플릿 내용 추가</h2>';
            },
            compute: function() {
                var txt = ''; 
                var $table = document.querySelector('#tableAddr'); 
                
                txt = '<tr><th>이름</th><th>주소</th></tr>';

                this.main.address.forEach(function(el, index, arr) {
                    txt += '<tr><td>' + el.name + '</td><td>' + el.addr + '</td></tr>';
                });

                $table.innerHTML = txt; 

                txt = '';
                $table = document.querySelector('#tableGrade');
                txt = '<tr><th>이름</th><th>총 성적</th></tr>';
                this.main.student.forEach(function(el, index, arr) {
                    var total = el.kor + el.eng + el.mat;
                    txt += '<tr><td>' + el.name + '</td><td>' + total + '</td></tr>'
                });
                
                $table.innerHTML = txt;

                var tot = this.main.student[0].kor + this.main.student[0].eng + this.main.student[0].mat;
            },
            run: function() {
                this.init();
                this.compute();
            }

        }

        vue.init(); 
        vue.compute();
        objProject.init();


    </script>
</body>
</html>

여기서는 txt라는 변수 안에 HTML 소스를 넣어준 후 이를 $테이블id.innerHTML을 통해 테이블을 출력해주었다.

var $table = document.querySelector('#tableAddr');

 

여기서 $를 붙이면 템플릿 변수가 되어, tableAddr의 id 를 가지고 있는 요소를 선택하여 $table에 담는다.

this.main.address.forEach(function(el, index, arr) {

})

address 배열에 대해 forEach 함수를 돌리는데, 그 안에 콜백 함수를 지정해준다. function(요소, 인덱스, 배열)

콜백 함수의 매개변수는 순서를 잘 지켜주어야 하며, el, index, arr로 순서대로 정의해준다.

여기서 el은 각 배열의 요소를 의미한다. (0번째 배열, 1번째 배열...)

index는 0, 1, 2, 3...

arr은 배열 전체(자체)를 의미한다.

$table.innerHTML = txt;

그런 다음 $table 변수에 innerHTML 함수를 이용하여 HTML 소스 값(txt)을 넣어준다.

​

​

※ ECMA Script 5 [ES5]와 ECMA Script 6 [ES6]에서의 표현법 차이

var tot = 100;

// ECMA Script 5 [ES5]
console.log('total : ' + tot);

// ECMA Script 6 [ES6]
console.log(`total : ${tot}`);
저작자표시

'IT 기술 > [Vue] 개발자 강의' 카테고리의 다른 글

세 번째 수업. 210227  (0) 2021.06.25
두 번째 수업. 210221_궁금해서 찾아본 이것저것  (0) 2021.06.02
첫 번째 수업. 210220  (0) 2021.06.02
첫 번째 수업. 210220_궁금해서 찾아본 이것저것  (0) 2021.06.02
'IT 기술/[Vue] 개발자 강의' Related Articles more
Comments