2022-09-15

일단 jqeury로 동적으로 javascript 파일을 가져오는 방법은 아래와 같이 2가지 정도 있다

// $.getScript를 이용한 방법
$.getScript('/tmp_script.js')
.done(function(script, textStatus){
	// 성공시
})
.fail(function( jqxhr, settings, exception ){
	// 실패시
})


// ajax를 이용한 방법
$.ajax({
	url: '/tmp_script.js',
	dataType: 'script',
	cache: true,
	success: function(jsfile_content){
		// 성공시
	},
	error: function(xhr, status, msg){
		// 실패시
	}
});

하지만 여기서 알아둬야 하는 점은, 성공후에 바로 불러온 javascript파일에 포함된 함수를 쓰려고 해도 실행이 안된다는 점이다.

예를 들어 아래와 같은, tmp_script.js 파일이 있다고 하자

function test_fun(){
	console.log('test_fun!!')
}

그럼 아래와 같이 코드를 구성 했을 경우, 실행이 안되는 모습을 볼 수있다.

$.getScript('/tmp_script.js')
.done(function(script, textStatus){
	test_fun() // 실행안됨
})
.fail(function( jqxhr, settings, exception ){
	// 실패시
})

이럴때는 아래처럼 ready 함수에 해당 함수를 넣어 두면 $.getScript로 불러온 후, 파일이 완전히 가져온 뒤에 해당 함수를 바로 실행해 주는걸 볼 수 있다.

function test_fun(){
	console.log('test_fun!!')
}

$(function(){
	test_fun()
})

자 그러면 여기서 마지막으로, 한번 불러온 javascript파일을 다시 불러오지 않게 하는 방식과, 새로 불러온 파일에 속한 함수들을 eval()을 쓰지 않고도 문자열을 매개로 쓰는 방식을 소개 보려고 한다.

tmp_script.js

function tmp_script_ready(){
	console.log('start tmp_script~~~~~~')
}

$(function(){
	// 불러온 파일을 key값으로 가지는 object전역변수에 해당 함수 객체를 넣는 부분
	// 차후 불러왔는지 여부를 체크 하는데 쓰임
	loaded_urls['tmp_script'] = tmp_script_ready 

	// 최초 불러 올때 해당 함수를 실행하는 부분
	tmp_script_ready() 
})

$.getScript로 불러오는 부분 소스

var loaded_urls = {}

// 이미 불러온 이력이 있는지를 확인하는 부분
function get_jsfile(js_name){
	if(tmp2.indexOf(js_name) != -1){
		// 이미 불러왔다면, 해당 함수만 다시 실행시킨다
		loaded_urls[js_name]()
	}
	else{
		$.getScript('/'+js_name+'.js', function(){
			console.log(loaded_urls)
		})
	}
}

// 해당 버튼을 누를시에 파일을 새로 불러온다
$(document).on('click', '.go_action', function(){
	get_jsfile('tmp_script')
})

위 소스에 대해서 간단히 설명을 해주자면, 버튼을 최초 누를때는 tmp_script.js파일에 있는 ready함수가 실행되면서, ready함수 안에 있는 tmp_script_ready()함수가 실행된다.
그리고 차후에 버튼을 다시 누를때는, loaded_urls변수에 미리 넣어놓은 함수 객체를 실행시켜서 javascript파일을 다시 불러오지 않고 해당 함수들을 object에 저장된 문자열로 구분해서 사용이 가능해진다.


//-------------- 2022.10.11 추가

css를 추가하고 싶다면, 아래와 같이 하면된다.

$("<link/>", {
	rel: "stylesheet",
	type: "text/css",
	href: '/css_file_name.css'
 }).appendTo("head");

href에 css파일 경로 및 주소를 적으면 된다.