[JavaSrcipt] 티스토리 콘솔창 꾸미기

 

이쁜 뻘짓 발견

---

티스토리에서 개발자 도구( F12 ) 를 켰을때 콘솔창에 아래와 같이 로그가 이쁘게 나왔다.

이 문구를 커스텀화 하고 싶어 검색하니 아래처럼 bind 함수를 활용하여 출력할 수 있었다.

<script>
	let cssRule= "font-size:2em; font-family:Nanum Gothic";
	let cssLogo1 ="color:#39549a;" +"font-size: 60px;" +"font-weight: bold;" +"letter-space:-1px;" +"font-family:Tahoma,Arial,sans-serif";
	let cssLogo2 ="color:#231916;" +"font-size: 60px;" +"font-weight: bold;" +"letter-space:-1px;" +"font-family:Tahoma,Arial,sans-serif";
	if(window.console!=undefined){
		setTimeout(console.log.bind(console,"%cDev%cDaveLee", cssLogo1,cssLogo2),0);
		setTimeout(console.log.bind(console,"%c 운동하는 개발자",cssRule),0);
	}
</script>

야호 바로 적용해봐야지!

 

 

되긴 됐는데...

---

성공은 했지만 처음나왔던 로그가 자꾸 붙어서 출력된다.

소스를 보니 내가 작성한 스크립트보다 먼저 불러오고 있다.

 

 

 

편집을 위해 티스토리 스킨편집 HTML 로 갔으나 저 스크립트가 보이지 않고, 저 스크립트의 소스가 어딘지도 못찾겠어서 접근할 수 없다.

 

 

그래서 콘솔창을 클리어를 먼저해주면 되겠지라고 생각했다.

<script>
	console.clear();
	
	let cssRule= "font-size:2em; font-family:Nanum Gothic";
	let cssLogo1 ="color:#39549a;" +"font-size: 60px;" +"font-weight: bold;" +"letter-space:-1px;" +"font-family:Tahoma,Arial,sans-serif";
	let cssLogo2 ="color:#231916;" +"font-size: 60px;" +"font-weight: bold;" +"letter-space:-1px;" +"font-family:Tahoma,Arial,sans-serif";
	if(window.console!=undefined){
		setTimeout(console.log.bind(console,"%cDev%cDaveLee", cssLogo1,cssLogo2),50);
		setTimeout(console.log.bind(console,"%c 운동하는 개발자",cssRule),50);
	}
</script>

 

는 경기도 오산 이었다. 클리어가 먼저 실행 되어버려서 로그가 나중에 찍힌다. 분명 TISTORY 스크립트가 더 위에 있을텐데?

 

해결

---

조용히 동작순서를 검색해 본다..

출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

자바스크립트 동작 순서 원리 등을 참조하니 타임아웃이 늦게 작동한다. 두 스크립트 모두 타임아웃이 걸려 있으니, 콘솔 클리어도 동일하게 타임아웃을 걸어주면 순서대로 작동할것이다.

<script>
	setTimeout(()=>{
	console.clear();
	},0);
	
	let cssRule= "font-size:2em; font-family:Nanum Gothic";
	let cssLogo1 ="color:#39549a;" +"font-size: 60px;" +"font-weight: bold;" +"letter-space:-1px;" +"font-family:Tahoma,Arial,sans-serif";
	let cssLogo2 ="color:#231916;" +"font-size: 60px;" +"font-weight: bold;" +"letter-space:-1px;" +"font-family:Tahoma,Arial,sans-serif";
	if(window.console!=undefined){
		setTimeout(console.log.bind(console,"%cDev%cDaveLee", cssLogo1,cssLogo2),50);
		setTimeout(console.log.bind(console,"%c 운동하는 개발자",cssRule),50);
}
</script>

 

 

결과는?

 

 

무야호~ 성공!

 

후기

---

아직까지 자바+Spring Boot 를 주력으로 하고 있지만, 최근 프로젝트는 FrontEnd 단을 작업할 것 같다. 새로 작업하면서JS, CSS 등 예전에 알았지만 까먹었던 것들이나 새로 공부하게될 것들을 시간이 된다면 작성해야겠다.

 

---

👀 참조해 보세요

함수 바인딩

함수 바인딩

 

자바스크립트 동작 순서

자바스크립트는 어떻게 작동하는가: 이벤트 루프와 비동기 프로그래밍의 부상, async/await을 이용