Software Engineer Ethan

Spring MVC에서 정적 자원(css, js, etc)을 처리해본 경험

ResourceHttpRequestHandler

URL 패턴에 따라 정적 자원 요청을 처리

HTTP 캐시 설정 기능 제공

설정 간소화 기능 제공

:Java 기반 설정시 WebMvcConfigure

Gradle을 이용해서 build 자동화

프로젝트 구조

backend 

 - src

      - main 

                --java    

    -- resource

       - test

frontend 

- package.json

- bower.json

- groundfile.js

- src

-- assets

-- helpers

--layouts

--libs

-- pages

Backend 관리 

Sprinb boot, Spring I/O Platform, 공용 컴포넌트

Thymeleaf

html태그 /속성 기반의 템플릿 엔진

FrontEnd 관리

NPM 

BOWER 

GRUNT 

usermin

Fingerprinting : grunt-filerev 를통해 작동 

캐쉬를 효율적으로 이용하기 위해 이용

템플릿 생성: assemble

프론트 엔드 개발이 분리된 이유

Dependancy management

modularity

tests

build automation

FrontEnd의 자원 사용법

FrontEnd 의존성 활용법

WebJars 

Client-side 웹 라이브러리를 JAR로 묶어서 제공하는 서비스

JVM 기반 빌드 도구를 지원(maven 저장소)

-> frontend.jar로 만든후 backend 모듈에 의존성을 추가(Gradle로 통합)

frontend를 빌드후 jar로 만들기

개발과 배포는 다르다

배포시에는 최적화된 자원을 쓴다

개발시에는 작성죽인 css, js를 사용

backend 환격에 따른 자원 접근 전략 변경

ex) if(개발) { 개발용} else { 배포용 }

(time leaf)타임 리프: 프론트엔드가 개발한 환경 그대로 스프링에서 그대로 쓸수 있다. 

핸들바를 스프링측에 이미 있다. 

Spring 4.1 fingerprinting과 자원 최적화가 Spring에서 runtime 레벨에서 제공해준다.

참고 기트허브 gihub.com/arawn/resource-handling-in-springmvc

원클릭으로 파일 공유 쉽게 HFS

http://www.rejetto.com/hfs/

//단일 객체를 만들때
var obj = {
    //property, method가 '나올수' 있다
    // propery와 method를 표현''ㅎ'ㅏ'ㄹ 때는
    // key와 value이 쌍으로 표현
    myName: "백두산",
    "myAddress": "대전",
    myNumber: "비밀",
    "my hobby": "아우",
    myInfo: function() {
    }
}

//자주 쓰임 
console.log(obj["my hobby"]);

// 객체를 찍어내고 싶어요 마치 class로부터
// 찍어내듯이!!
// JavaScript는 Class 개념이 없어요!!
// 선언적 함수를 이용''해서 객체를 생성할 수 있어요!!
// 이런 선언적 함수를 생성자 함수라고 불러요!!

function Car(name, price, color) {
    this.name = name;
    this.price = price;
    this.color = color;
    this.info = function() {
        
    }
}

var car1 = new Car("쏘나타", 100, "검은색");
var car2 = new Car("그랜져", 2000, "흰색");

JavaScript의 데이터 타입

// 1. 문자열

var variable1 = "홍길동";

// 2. 숫자

var variable2 = 10;

// 3. 논리

var variable3 = true;

// 4.undefined

var variable4;

// 5. null

var variable5 = null;

// 6. 함수

var variable6 = function() {

}

// 7. 객체

var variable7 = {}

// 8. 객체(배열)

var variable8 = [10, "홍길동", true, {}];

//function

// 함수 - 익명함수(람다함수)

// 이름이 존재하지 않기 대문에 

// 변수에 저장하'거나, 혹은 다른 함수의 인자로

// 함수가 사용되요!!

// 함수 - 선언적 함수

// first-class function(일급함수)

function myFunc (var1, var2) {

}

// blocking method

alert("화면에 경고창이 떠요");
alert는 실행화면 중지

//consol창에 출력'!!
console.log("이건 콘솔창에 출력되요");