Total: Today: Yesterday:
개발/Unity | 2020. 6. 9. 13:03 | Posted by 자수씨

영여 실력이 번역할 정도는 아니지만 내용 파악을 위해 진행한다.

 

 

Addressable Assets (이하 어드레서블 에셋) 의 주요 이점은 컨텐츠의 배열, 빌드 그리고 로드하는 방법을 분리하는 것이다. 전통적으로 이러한 개발 측면에서는 이런 것들이 밀접하게 연관되어 있었다.

전통적인 에셋 관리

Resource 디렉토리에 컨텐츠를 배열하면 기본 애플리케이션에 내장되며 리소스에 대한 경로를 파라미터로 사용하는 Resources.Load 메소드를 사용하여 컨텐츠를 로드해야 한다. 다른 곳에 저장된 컨텐츠를 접근하려면 직접 참조나 asset bundle (이하 에셋 번들) 을 사용한다. 에셋 번들을 사용하는 경우 리소스 로드와 구성 전략을 함께 묶어 경로 별로 다시 로드한다. 에셋 번들이 원격 환경에 있거나 다른 번들에 종송된 경우 모든 번들의 다운로드, 로드 및 언로드를 관리하는 코드를 작성해야 한다.

어드레서블 에셋 관리

에셋에 주소를 부여하면 프로젝트의 위치나 에셋 빌드 방법과 상관없이 해당 주소를 사용하여 로드할 수 있다. 어드레서블 에셋의 경로나 파일이름을 문제 없이 변경할 수 있다. 또한 로딩하는 코드 변경 없이 리소스 폴더 또는 로컬 빌드 대상에서 다른 빌드 위치 (원격 환경 포함) 로 어드레서블 에셋을 이동할 수 있다.

에셋 그룹 스키마 (Asset Group schemas)

스키마는 일련의 데이터를 정의한다. 인스펙터에서 스키마를 자산 그룹에 연결할 수 있다. 예를 들어 packed 모드로 빌드할 때 BundledAssetGroupSchema 스키마가 첨부된 그룹은 에셋 번들의 소스로 작동한다. 새로운 그룹을 정의하는데 사용하는 템플릿으로 스키마 집합을 결합할 수 있다. AddressableAssetsSettings 인스펙터를 통해 스키마 템플릿을 추가할 수 있다.

빌드 스크립트 (Build scripts)

빌드 스크립트는 프로젝트 내에 IDataBuild 인터페이스를 구현한 ScriptableObject 에셋으로 표시된다. 사용자는 자신만의 빌드 스크립트를 생성하고 인스펙터를 통해 AddressableAssetsSettings 객체에 추가할 수 있다. Addressable Groups window (Window > Asset Management > Addressables > Groups) 에서 빌드 스크립트를 적용하려면, 플레이 모드 스크립트(Play Mode Script)와 드롭다운 옵션을 선택한다. 현재 전체 애플리케이션 빌드를 지원하기 위해 구현된 세 가지 스크립트와 에디터에서 반복하기 위한 세 가지 플레이 모드 스크립트가 있다.

플레이 모드 스크립트 (Play mode scripts)

어드레서블 에셋 패키지에는 앱 개발 속도를 높이는 플레이 모드 데이터를 만드는 데 도움을 주는 세 가지 빌드 스크립트가 있다.

에셋 데이터 베이스 사용 (Use Asset Database, faster)

빠른 모드 (BuildScriptFastMode) 를 사용하면 게임 흐름을 진행하면서 빠르게 실행할 수 있다. 빠른 모드는 분석이나 에셋 생성 없이 빠른 반복을 위해 에셋 베이터베이스를 이용하여 에셋을 직접 로드한다.

그룹 시뮬레이션 (Simulate Group, advanced)

가상 모드 (BuildScriptVirtualMode) 는 에셋 번들을 생성없이 컨텐츠를 레이아웃과 종속성을 위한 컨텐츠를 분석한다. 마치 에셋 ResourceManager 가 번들을 통해 로드 된 것 처럼 에셋 데이터베이스에서 로드한다. 게임 플레이 중 번들이 언제 로드 또는 언로드되는지는 Addressable Event Viewer window (Window > Asset Mangement > Addressables > Event Viewer) 에서 에셋 사용량을 확인할 수 있다.

가상모드를 사용하면 로드 전략을 시뮬레이션하고 컨텐츠 그룹을 조정하여 제품 릴리즈에 적합한 균형을 찾을 수 있다.

기존 빌드 사용 (Use Existing Build, requires built groups)

압축 재생 모드 (BuildScriptPAckedPlayMode) 는 이미 구축된 에셋 번들을 사용한다. 이 모드는 배포된 애플리케이션 빌드와 가장 일치하지만 별도의 단계로 데이터를 빌드해야 한다. 에셋을 수정하지 않으면 이 모드는 플레이 모드로 들어갈 때 데이터를 처리하지 않기 때문에 가장 빠르다. Build > New Build > Default Build Script 를 선택하거나 게임 스크립트의 메소드를 사용하여 Addressable window (Window > Asset Management > Addressables > Groups) 에서 AddressableAssetSettings.BuildPlayerContent() 메소드를 이용하여 이 모드의 컨텐츠를 빌드해야 한다.

분석 및 디버깅 (Analysis and debugging)

기본적으로 어드레서블 에셋은 경고/에러에 대해 기록만 한다. 상세 로그를 활성화 하기 위해서는 Player settings window (Edit > Project Settings... > Player) 을 열고 Other Settings > Configuration 섹션으로 이동한 후 Scripting Define Symbols 필드에 ADDRESSABLES_LOG_ALL 를 추가한다.

초기화 객체 (Initialization objects)

어드레서블 에셋 설정에 객체를 첨부하고 런터임에 초기화 프로세스로 전달할 수 있다. CacheInitializationSettings 객체는 런타임 시 유니티의 캐싱 API 를 제어한다. 자체 초기화 객체를 만드려면 IObjectInitializationDataProvider 인터페이스를 구현하는 ScriptableObject 를 만든다. 이는 런타임 데이터로 직렬화된 ObjectInitializationData 를 생성을 담당하는 시스템의 Editor 구성요소이다.

커스터마이징 URL 평가 (Customizing URL Evaluation)

런타임 시에 에셋 (일반적으로 에셋 번들) 의 경로 또는 URL 을 커스터마이징 해야 하는 몇 가지 시나리오가 있다. 가장 일반적인 예는 서명된 URL 을 생성하는 것이다. 다른 하나는 동적 호스트 결정일 수 있다.

아래 코드는 모든 URL 에 쿼리 문자열을 추가하는 예이다.

//Implement a method to transform the internal ids of locations
string MyCustomTransform(IResourceLocation location)
{
    if (location.ResourceType == typeof(IAssetBundleResource) && location.InternalId.StartsWith("http"))
        return location.InternalId + "?customQueryTag=customQueryValue";
    return location.InternalId;
}

//Override the Addressables transform method with your custom method.  This can be set to null to revert to default behavior.
[RuntimeInitializeOnLoadMethod]
static void SetInternalIdTransform()
{
    Addressables.InternalIdTransformFunc = MyCustomTransform;
}

※ Android 플랫폼에서 비디오 파일을 로드할 목적으로 비디오 파일을 어드레서블 파일에 번들로 묶을 경우 CacheInitializationSettings 객체를 생성하고 해당 객체에 Compress Bundles 를 비활성화한 후 ddressableAssetSettings 객체의 초기화 객체 목록에 추가한다. (아직 없는 경우)

 

 

참고자료: https://docs.unity3d.com/Packages/com.unity.addressables@1.9/manual/AddressableAssetsDevelopmentCycle.html

 

Addressable Assets development cycle | Addressables | 1.9.2

Addressable Assets development cycle One of the key benefits of Addressable Assets is decoupling how you arrange, build, and load your content. Traditionally, these facets of development are heavily tied together. Traditional asset management If you arrang

docs.unity3d.com

 

개발/JAVA | 2019. 6. 2. 19:00 | Posted by 자수씨

개요

spring-session 에 저장방식을 redis 로 지정하고 redis 라이브러리를 lettuce 로 지정하였다.

개발서버에서는 정상적으로 동작하였으나 운영서버에서는 같은 AWS EC2 인스턴스임에도 아래와 같은 오류가 발생하였다.

java.lang.ClassCastException: io.netty.channel.epoll.EpollEventLoopGroup cannot be cast to io.netty.channel.EventLoopGroup
    at io.lettuce.core.resource.DefaultEventLoopGroupProvider.getOrCreate(DefaultEventLoopGroupProvider.java:119) ~[lettuce-core-5.1.6.RELEASE.jar:na]

작업1

lettuce Native-Stransports 를 보면 native netty 의 성능이 더 좋으므로 netty-transport-native-epoll 을 디펜던시에 추가하라고 명시되어 있다.

디펜던시를 추가하고 웹 어플리케이션을 재시작하면 위와 같은 오류는 발생하지 않는다. 하지만 로컬 환경에서 native 디펜던시를 추가하는 것은 또다른 문제가 발생할 것으로 보여 다른 방법을 찾아야 했다.

작업2

lettuce Native-Stransports 를 자세히 살펴보니 native netty 를 사용하지 않는 옵션을 발견하였다.

catalina.sh 에 다음과 같이 시스템 프로퍼티를 추가한다.

# netty native settings
JAVA_OPTS="$JAVA_OPTS -Dio.lettuce.core.epoll=false"

재시작 시 native netty 를 사용하지 않고 정상동작 하는 것을 확인하였다.

INFO 15189 --- [enerContainer-1] io.lettuce.core.EpollProvider            : Starting without optional epoll library
INFO 15189 --- [enerContainer-1] io.lettuce.core.KqueueProvider           : Starting without optional kqueue library

작업3

EPollProvider 를 보다보니 io.netty.channel.epoll.Epoll 클래스가 있는지를 체크하는데 저 클래스로 인해 native netty 가 활성화 된 것으로 추가한 기억이 없는 클래스의 위치를 찾기 위해 classloader.jsp 를 인터넷에서 구하여 위치를 확인해보았다.

예전에 tomcat session 을 redis 로 설정하기 위해 ${catalina_base}/lib 에 추가하였던 redis-session-manager-with-dependencies-2.2.2-SNAPSHOT.jar 이 파일이 문제였다. 이번 작업으로 인해 제거해도 무방했던 jar 파일이라 제거하고 테스트를 해보았더니 정상이였다.

결론

문제의 원인은 이전에 추가하였던 redis-session-manager 라이브러리와의 충돌이였다. 어쩐지 인터넷을 찾아봐도 비슷한 내용이 나오지 않더라니...

돌고 돌았지만 문제의 원인은 확인하고 해결할 수 있었다.

개발/JavaScript | 2016. 9. 22. 16:46 | Posted by 알 수 없는 사용자

평소에 자주 사용하지 않았던 자바스크립트 연산자를 알아봤다. 


1. 스프레드(...args) 연산자.
"배열 리터럴의 일부를 반복 가능한 식(다른 배열 리터럴 등)에서 초기화하거나 식을 함수 호출에서 여러 인수로 확장할 수 있습니다."

일반적으로 항목을 연결할때 concat메소드를 많이 이용하는데 스프레드 연산자(...args 로 사용)로도 가능하다.
하지만 스프레드 연산자는 반복 개체로만 연결이 가능하다.

var a = "a";
a.concat(["b","c"],"d"); //  "ab,cd"
var b= ["a"];
b.concat(["b","c"],"d"); //  ["a", "b", "c", "d"]

var a = ["a","b","c"];
...a // ---> Uncaught SyntaxError: Unexpected token ...
var b= ["a","b"];
[...b, ...["c"], "d"]; //  ["a", "b", "c", "d"]

concat 연산자와 비슷하게 사용되지만 반복개체로 호출해야만 에러가 발생하지 않는 것을 확인했다.

2. typeof 연산자.
"식의 데이터 형식을 나타내는 문자열을 반환합니다."

요 근래에 자주 사용하기 시작한 연산자이다.
보통 값을 비교할 때, 값과 값의 타입만 비교하는 "===" 나 "!==" 연산자로 사용한다.
내가 자주 사용하는 메소드는 String메소드(split, trim, replace 등)가 많았던 관계로 String 타입이 아니면 에러를 뱉어내곤 했었다.
그럴때 마다 값의 type만 비교하고 싶을때가 가끔 있었다.

typeof로 비교할수 있는 형식은 'number','string','boolean','object','function','undefined'  총 6가지 이다.
typeof 비교 형식은 대소문자를 가리기 때문에 반드시  소문자로만 적용해야 한다.

typeof "A" === 'string' //true
typeof "A" === 'number' //false
typeof 1 === 'undefined' //false
typeof 1 === 'number' //true
typeof bb === 'undefined' //true 변수 선언 X
typeof {} === 'object' // true
typeof "{}" === 'object' //false

3. void 연산자.
"식의 값을 반환하지 않게 합니다."

반환하면 항상 return을 사용하지만 굳이 함수가 아니더라도 값을 반환하지 않고 undefiend를 반환 하는 연산자이다.

function a (){ return "a" }
a() // "a"
void a() // undefined

var b = "b"
console.log(b) // "b"
console.log(void b) // undefined


4. delete 연산자.
"개체에서 속성을 삭제하거나 배열에서 요소를 제거합니다."

배열 삭제 메소드는 Array.splice()를 사용했었다. 하지만 splice는 배열삭제 메소드로 index도 같이 삭제된다.
delete 연산자를 이용하면 index는 그대로고 해당 index에 값만 삭제되는 것을 확인 할 수 있었다.

var ar = new Array (10, 11, 12, 13, 14);
delete ar[1] // true
console.log(ar) // [10, undefined × 1, 12, 13, 14]

var ar = new Array (10, 11, 12, 13, 14);
ar.splice(1,1) // [11]
console.log(ar) // [10, 12, 13, 14]



5. new 연산자.
"새 개체를 만듭니다."
new constructor([args])

new 연산자의 작업 수행은 아래와 같다.
멤버가 없는 개체를 만든다.
해당 개체에 대해 생성자를 호출하고 this포인터로 새로 만든 개체에 포인터를 전달한다.
생성자는 생성자에 전달된 인수에 따라 개체를 초기화한다.

my_object = new Object;
my_array = new Array();
my_date = new Date("Jan 5 1996");





개발/JavaScript | 2016. 9. 8. 13:34 | Posted by 알 수 없는 사용자


### javascript

SELECT lpad(no, 6, 0) AS nums

  FROM (SELECT right(frame_id, 6) num, @N := @N + 1 AS no

          FROM tables, (SELECT @N := 0) AS TBL1

        ORDER BY num) AS TBL2

 WHERE num <> no

 LIMIT 1


이 쿼리문을


### javascript

" SELECT lpad(no, 6, 0) AS nums " + 

"   FROM (SELECT right(frame_id, 6) num, @N := @N + 1 AS no " + 

"           FROM tables, (SELECT @N := 0) AS TBL1 " + 

"         ORDER BY num) AS TBL2 " + 

"  WHERE num <> no " + 

"  LIMIT 1 "; 


String으로 바꾸거나


### javascript

" SELECT lpad(no, 6, 0) AS nums " + 

"   FROM (SELECT right(frame_id, 6) num, @N := @N + 1 AS no " + 

"           FROM tables, (SELECT @N := 0) AS TBL1 " + 

"         ORDER BY num) AS TBL2 " + 

"  WHERE num <> no " + 

"  LIMIT 1 ";  


String을


### javascript

SELECT lpad(no, 6, 0) AS nums

  FROM (SELECT right(frame_id, 6) num, @N := @N + 1 AS no

          FROM tables, (SELECT @N := 0) AS TBL1

        ORDER BY num) AS TBL2

 WHERE num <> no

 LIMIT 1


쿼리문으로 바꾸고 싶었다.


현재 자바의 Mybatis등을 쓰지 않고 있어 소스에서 쿼리문을 작업할때 String 연결을 하고있는데 이 작업이 매우 번거롭다.

좀더 편하게 작업할 수 없을까 하여 위의 이미지처럼 html파일로 간단하게 만들어 버렸다.



정규식으로 문자열 맨 뒤에 [ "+ ] 를 붙이고 맨 앞에 [ " ] 를 붙이고 마지막엔 [ ; ] 를 붙이는 것으로 원하는 것을 해결하였다.


변경하고자 하는내용이 textarea에 담겨있다면


String.replace(/\n/gi, ' " + \n" ').replace(/^/, '" ').replace(/$/, ' "; ');

로 String 문자열을 연결하거나,

위의 정규식을 사용할 것이라면 순서는 반드시 맞춰주어야 한다.


String.replace(/\"\s{0,2}\+{0,1}\;{0,1}/gi, '');

로 연결된 String 문자열을 제거하면 된다.


적용 방법은 아래와 같다.

### javascript

<body>

<textarea id="replace"></textarea>

<textarea id="replaced"></textarea>

</body>

<script>

function replace(){

var value = document.getElementById('replace').value;


// String 문자열 연결

var replaced = document.getElementById('replace').value.replace(/\n/gi, ' " + \n" ').replace(/^/, '" ').replace(/$/, ' "; ');

// String 문자열 제거

var replaced = document.getElementById('replace').value.replace(/\"\s{0,2}\+{0,1}\;{0,1}/gi, '');


document.getElementById('replaced').value = replaced;

document.getElementById('replaced').select();

}

</script>



개발/JavaScript | 2016. 4. 12. 16:13 | Posted by 짜장이누나



개발을 하다가 복사/붙여넣기를 막아야 하는 상황이 있습니다.

Keycode를 이용하여 아주 간단하게 막을 수 있습니다!!!

바로 아래 코드를 보시죵~!


### JS


//입력창에 Ctrl+V 막기
function preventKeyCtrlV(){
if(event.ctrlKey && event.keyCode == 86 ){ 
event.returnValue=false; 
}
}

//입력창에 Ctrl+C 막기
function preventKeyCtrlV(){
if(event.ctrlKey && event.keyCode == 67 ){ 
event.returnValue=false; 
}
}


+ Javascript 에서 Keycode 값을 쉽게 알수 있는 사이트를 알아냈습니다!

 아래 사이트에 접속하여 알고자하는 키를 입력하면 바로 Keycode를 알 수 있습니다.









 이 글은 오니님의짱꺤뽀 블로그와 같은 글 입니당구리당당

오~~~랜만에 자바스크립트 포스팅 완료!!





개발/ActionScript3 | 2016. 4. 6. 19:41 | Posted by 자수씨

FlashBuilder 로 개발 후 빌드할 때 빌더에서 제공해주는 "Export Release Build" 를 이용하고 있었습니다.

반복되는 작업이라 불편함을 느끼게 되어 ANT Task 가 없나 찾아봤더니 어도비 사이트에서 관련글을 찾을 수 있었습니다.

특별하게 설명할 부분은 빌드패스 설정하는 부분인데 소스 경로와 라이브러리 경로 두 부분입니다.


### xml

<?xml version="1.0" encoding="utf-8"?>

<project name="vince_client" basedir=".">

<!-- Flash Builder 가 설치된 경로를 확인하여 설정합니다. -->

<property name="FLEX_HOME" value="C:/Program Files/Adobe/Adobe Flash Builder 4.7 (64 Bit)/eclipse/plugins/com.adobe.flash.compiler_4.7.0.349722/AIRSDK" />

<target name="VinceProject">

<property name="PROJECT_NAME" value="VinceProject" />

<property name="SWF_NAME" value="VinceProject.swc" />

<antcall target="compile" />

</target>

<target name="compile">

<mxmlc file="${APP_ROOT}/src/${PROJECT_NAME}.as" output="${DEPLOY_DIR}/${SWF_NAME}">

<!-- Get default compiler options. -->

<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml" />

<!-- List of path elements that form the roots of ActionScript 

            class hierarchies. -->

<source-path path-element="${FLEX_HOME}/frameworks" />

<!-- 소스 프로젝트를 추가합니다. -->

<!--

<source-path path-element="경로" />

-->

<!-- List of SWC files or directories that contain SWC files. -->

<compiler.library-path dir="${FLEX_HOME}/frameworks" append="true">

<include name="libs" />

<include name="../bundles/{locale}" />

</compiler.library-path>

<!-- 외부 SWC 라이브러리 경로를 추가합니다. -->

<!--

<compiler.library-path dir="경로" append="true">

<include name="하위경로" />

<include name="하위경로2" />

</compiler.library-path>

-->

</mxmlc>

</target>

</project>



  • 소스 경로: <source-path /> 로 추가됩니다.
  • 라이브러리 경로: <compiler.labrary-path /> 로 추가되며 하위 디렉토리가 있을 경우에는 <include /> 를 이용합니다.

확실히 반복작업은 빌드 스크립트를 이용하는 것이 작업량도 줄여줄 뿐더러 실수도 줄여줍니다.



'개발 > ActionScript3' 카테고리의 다른 글

플래시 트레이싱 툴 - Vissy Flash Tracer  (0) 2016.04.05

개발/ActionScript3 | 2016. 4. 5. 12:06 | Posted by 자수씨

actionscript 로 flash 게임 개발을 시작한지 얼마되지 않아 그 동안 문명의 혜택을 받지 못했었는데, 최근에 주변 개발자의 도움을 받아 tracing 툴을 설치하였습니다.


Vissy Flash Tracer: https://code.google.com/archive/p/flash-tracer/


현재는 개발이 종료된 상태이며 최신버전은 3.91 입니다.





별도의 디버그 모드로 실행하지 않아도 툴 자체에서 디버거와 연결하여 동작하기 때문에 trace(...) 로 코딩한 부분을 확인할 수 있습니다. 다운로드 페이지에서 각 플랫폼에 맞게 다운 받아 실행하시면 될 듯 합니다.


설치 전에 트래이싱을 할 브라우저에 플래시 디버거를 설치해야 합니다.




'개발 > ActionScript3' 카테고리의 다른 글

Export Release Build(swc 빌드) ANT 이용하기  (0) 2016.04.06

개발/JavaScript | 2015. 5. 29. 11:36 | Posted by 알 수 없는 사용자

당연하게 Rest Api에서 받아오는 Json Data를 callback 함수로 사용하다가 문득 변수를 선언하지 않고 전달하는 callBack함수 결과 자체를 변수로 사용할 수 있는것에 의문점을 가지고 생각해보았다.

 
function test(call){
	callbackTest(call, function(result){
		callResult = result;
	});
	console.log('callResult : ' +callResult);
}

function callbackTest(call, callback){
	callback(call);
}


결과는 다음과 같다.



test() 블록 안에서 var callResult를 선언하지 않아도 callResult 변수는 정상 동작 한다.

자바 스크립트는 블럭의 의미가 없다.

가장 가까이에서 선언된 변수를 찾아서 사용되고 있을 뿐이다.

callbackTest ()가 여러개 선언되어있을 때 가장 가까운 블럭의 callback에서의 변수 callResult를 찾아서 사용하였다.

원하는 변수를 찾기가 어려워진다.

다른 함수에서 test()함수를 선언 후 callResult를 호출하여도 test()블록 안에 function에서 사용한 callResult 변수가 사용되었다.

test블록 내에서 사용하는 _callResult변수를 사용하니 write()안에서는 에러가 발생한다.


변수 선언 안해도 가까운 블럭 내에 있는 변수를 사용하여 편리하지만 예상치 못한곳에서 사용될 수 있으니 적절히 선언해서 사용해야 겠다.


개발/JavaScript | 2015. 5. 27. 11:15 | Posted by 알 수 없는 사용자

이미 UI 구조가 다 만들어진 프로젝트에서 스크립트 작업을 하려는데 웬걸!!

크롬 개발자모드(F12)에서 내가 선언해 놓은 스크립트에 debug가 걸리지 않습니다.

선언해 놓은 스크립트들은 동작하는데 말이죠..

그런데 잘보니 스크립트가 동적으로 불려져서 내가 선언해놓은 스크립트에서 에러를 찾지 않고있습니다. ( ↓ )

동적스크립트로 불려질 수 밖에 없는 구조적인 문제를 해결하지 못하니 옆에계신 선임님과 자수씨의 도움으로 내 원래의 스크립트에서 디버그가 걸리도록 방법을 알아 봤습니다.

방법1 : 클래스를 만들고 해당 클래스가 정의되지 않았을 경우에만 클래스를 불러온다.

### javascript

var Class = {

// javascript

}

this['UI'] = Class;// 또는 this.UI = Class;

if (typeof this['UI'] == 'undefined') {

  this['UI'] = Class;

}


예제 소스

### javascript

(function($) {

var Class = {

initComponentOnce: function initComponentOnce() {

$(document).on('loggerOnload','.test', function(){

console.log("initComponentOnce() onload Trigger");

});

},

mailAdminConfig : {

onload: function(){

console.log("mailAdminConfig.onload");

},

getTree : function(){

console.log("mailAdminConfig.getTree");

}

}

}

if (typeof this['testUI'] == 'undefined') {

this['testUI'] = {};

}

this['testUI']['_ma'] = Class;

if (typeof this['testUI']['_ma'] == 'undefined') {

this['testUI']['_ma'] = Class;

}

})(jQuery);



이 방법을 사용 하기 전에 만들어져있던 스크립트가 아래처럼 되어있었습니다.

var abab = {

cdcd : function(){

}

}

var abab = 이 부분을 abab : 으로 바꾸면 UI.abab로 접근이 가능합니다.

기존 메소드들의 접근을 바꾸기 어렵고, 변경작업이 크기 때문에 단지 디버그만 걸고 싶다면 방법2가 빠릅니다!!


방법 2 : 강제로 디버그 걸리게 밑에 한줄 추가한다.

작성한 스크립트파일 맨 밑에 이거 한줄 추가하면 됩니다.


//# sourceURL= 디버그 걸고 싶은 파일명.js


이 내용은 아래 주소를 클릭하면 자세한 내용으로 확인 할 수 있습니다 (영어주의!!)

https://developer.chrome.com/devtools/docs/javascript-debugging




개발/CSS | 2015. 5. 7. 18:26 | Posted by 짜장이누나



 오랜만에 포스팅합니다.

포탈 관리자 작업하다가 아래와 같은 에러가 발생하여....


outerHTML 이 뭐지....???????  하는 궁금증이 생겨 알아보았습니다.


outerHTML을 설명하기위해 innerHTML과 비교하여 설명하겠습니다.




1. outerHTML

 * (html element).outerHTML : 현재 요소를 포함한 내부 html 전체를 반환한다.


 예제 html 코드


###html

<div class="exampleTB">

<table class="useYN">

<tr>

<td>

<input type="radio" value="use">사용<br>

<input type="radio" value="unused">사용 안함

</td>

</tr>

</table>

<table class="job">

<tr>

<td>

<input type="radio" value="use">학생<br>

<input type="radio" value="unused">직장인

</td>

</tr>

</table>

</div> 


위의 예제 코드에서 현재 "useYN"을 기준으로 outerHTML을 적용하면,


###javascript

var $targetHTML = $('div exampleTB table.useYN');

$targetHTML.outerHTML; // outerHTML


// 결과

###html

<table class="useYN">
<tbody><tr>
<td>
<input type="radio" value="use">사용<br />
<input type="radio" value="unused">사용 안함
</td>
</tr>
</tbody></table>


결과 useYN 요소를 포함한 html이 모두 반환된다.


2. innerHTML

 * (html element).innerHTML : 현재 요소는 제외하고 내부 html 전체를 반환한다.


위의 예제 소스를 이용하여

현재 "useYN"을 기준으로 innerHTML을 적용하면,


###javascript

var $targetHTML = $('div exampleTB table.useYN');

$targetHTML.innerHTML; // innerHTML



 // 결과

### html

<tr>

<td>

<input type="radio" value="use">사용<br />

<input type="radio" value="unused">사용 안함

</td>

</tr> 


결과 useYN 요소를 제외하고 내부 html이 모두 반환된다.





'개발 > CSS' 카테고리의 다른 글

긴문장을 (...) 처리하여 주는 text-overflow  (0) 2015.02.10