[AXBoot/Front-end] JSFiddle, javascript 기본 문법, 크롬 개발자 도구

yesjm·2021년 4월 16일

JavaScript

JAVA기반 웹개발자 양성과정

목록 보기

5/20

JPA
특정 문법을 익히는게 아니라 어떤 식으로 사용되는지 익히자
가장 큰 장점은 아주 쉬운 CRUD
너무 복잡하게 생각하지 말자
왜 쓰는지 어디에 쓰는지 일단 필요한 기능부터 익히자

서버 구성 없이도 빠르게 javascript 코드를 확인할 수 있는 툴 : JSFiddle

html, css, javascript 코드 결과물을 바로 확인할 수 있다.

오전 수업

오늘의 강의자료

비교 연산 식

자바스크립트 사용시에 실수하는 비교연산자 ===, ==

논리 연산 식

var b = { name : '정민'};
var a = b && { name : 'jm'};
console.log(a);

분명 배웠는데 다시 보니 왤케 이해가 안되는지.. 다시 공부하자

반복문

	//클래스가 허용할 수 있는 범위까지 돌다가 뻗는다.
        //정확하게 끝나는 조건 설정해주자.
        while(true){
             document.write('coding everybody <br />'); 
         } 

        var i=0;
        while(i < 10){
            document.write('coding everybody <br />');
            i++;
        }

        //while문 보단 확실하게 명시할 수 있는 for문을 자주 쓰는 편
        for(var i =0; i< 10; i++){ 
            document.write('coding everybody <br />');
        }
        
        //가독성은 떨어지지만 성능 이점이 있다
	//(변수를 반복적으로 초기화하지 않아서 +a)
        var i=0;
        for(; i < 10; i++){
            document.write('coding everybody <br />');
        }

Scope

scope는 전역 범위와 함수에 대해서만 제공

var변수 선언 여부
var 선언 된 변수가 함수 외부 또는 내부에 있는지 여부
스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는지에 따라 결정된다. 이를 렉시컬 스코핑(Lexical scoping)라 한다.

        var vscope = 'global';
        function fscope(){
            console.log(vscope);
        }
        fscope(); // => global

        var vscope = 'global';
        function fscope(){
            var vscope = 'local';
            console.log('함수안 '+vscope);  // => local
        }
        fscope();
        console.log('함수밖 '+vscope);      // => global

이 코드는 해석(?)하면 아래 코드와 같아서 결과가 나온 것

        var vscope = 'global';
        function fscope(){
            var vscope = 'local';
            console.log('함수안 '+vscope);  // => local
        }
        fscope();
        fscope();
        console.log('함수밖 '+vscope);      // => global

클로저

내부에서 외부로 접근하는 방법을 강구한게 클로저
이건 꼭 알아야 한다.
근데 넘 어려운데? 머리 뽀개진다

// 잘못된 예
var arr = []
for(var i = 0; i < 5; i++){
  arr[i] = function(){
      return i; // =>
  }
}
for(var index in arr) {
  console.log(arr[index]());
}
// 결과 -> 5, 5, 5, 5, 5

해석과 실행의 시점이 달라서 결과가 이렇다..
arr[index]가 호출되기 전에 for문이 돌아서 i는 5가 되어 있는 상황
결국 arr[index]가 호출된 시점엔 function()은 계속 5를 return한다.

// 잘된 예
var arr2 = [];
for (var j = 0; j < 5; j++){
	arr2[j] = function(id) {
  	return function() {
    	return id;
    }
  }(j);
}
/*
arr[j] = function(j) {
	var id = j; // 0, 1, 2...
  return function() {
    return id;
  }
}(j);
*/
for(var index in arr2) {
  console.log(arr2[index]());
}
// 결과 -> 0, 1, 2, 3, 4

위에 코드는 이해가 안되니까 아래 코드를 다시 보자.
이건 그나마 보고 결과가 예상이 간다.
나한테 작성하라고 하면 할 수 있을런지..아직은...

function factory_movie(title){
    return {
        get_title : function (){
            return title;
        },
        set_title : function(_title){
            title = _title
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');

console.log(ghost.get_title()); // -> Ghost in the shell
console.log(matrix.get_title());// -> Matrix

ghost.set_title('공각기동대');

console.log(ghost.get_title()); // -> 공각기동대
console.log(matrix.get_title());// -> Matrix

클로저 이해하기 쉽게 정리된 사이트 : https://offbyone.tistory.com/135

오후 수업

맥락(context)

var obja = {
  name: 'obja'
}

var objb = {
  name: 'objb'
}

function Foo(){
  this.name = 'foo';
  this.getName = function(x,y){
    console.log('Foo getName:' + this.name + ' x:'+x + ' y:' + y);
  }
}

var foo = new Foo();
console.log(foo);

foo.getName(10,20);               // => Foo getName:foo x:10 y:20
foo.getName.call(obja,30,40);     // => Foo getName:obja x:30 y:40
foo.getName.apply(objb,[50,60]);  // => Foo getName:objb x:50 y:60

var foo2 = foo.getName.bind(objb, 10, 20);
foo2();

첫번째로 던지는 객체가 this가 된다 ??

.call()
.apply()
.bind()

모든 객체는 프로토타입을 가지고 있다 ??

var obja = {
	name: 'obja'
}

obja.prototype = new Object()

plugins.js

브라우저의 성능 향상을 위해 사용한다.
비동기 호출은 브라우저마다 다를 수 있지만 통상적으로 4개의 요청을 보내는데, 약 1MB 단위로 묶어놓고 최소한으로 질의하도록 한다.
질의를 최소화 하는 것의 원 목적은 트래픽 최소화(비용감소)이고 성능을 향상을 위함도 있다.
묶었다고 다 좋은건 아니고 적정한 수준으로 묶는걸 보고 판단할 수 있어야할 것

크롬 개발자도구

크롬 개발자도구 f12와 친숙해지도록 하자

크롬 콘솔 로그를 찍어보기 위해 basic.js 코드를 변경해 보았다.

새로고침을 할 때마다 '시작' 로그가 찍히는 것을 확인했다.

네트워크에서 속도를 확인도 할 필요성이 있다.

크롬 개발자 도구를 사용해서 UI 작업할 일이 매우 많을 예정이니 익숙해지도록 하자..

필요한 부분을 찍어서 코드를 확인할 수도 있고, 모바일 버전으로도 확인 가능하다.

마우스 버튼 클릭한 효과(?)

basic.js

기본 템플릿의 흐름 확인

이 화면의 기본 기능이다.

~~테스트할때 화가 덜 나려면~~코딩할때 이왕이면 init은 아래로 내려서 작업하는게 좋다.

javascript는 변수명을 케밥식으로 정의한다.

data-page-btn

var fnObj = {}; 
var ACTIONS = axboot.actionExtend(fnObj, {
    PAGE_SEARCH: function (caller, act, data) {
        axboot.ajax({
            type: "GET",
            url: ["samples", "parent"],
            data: caller.searchView.getData(),
            callback: function (res) {
                caller.gridView01.setData(res);
            },
            options: {
                // axboot.ajax 함수에 2번째 인자는 필수가 아닙니다. ajax의 옵션을 전달하고자 할때 사용합니다.
                onError: function (err) {
                    console.log(err);
                }
            }
        });

        return false;
    },