<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>프론트앤드 기술 &#8211; SEO Korea</title>
	<atom:link href="https://seokorea.net/category/javascript-2/feed/" rel="self" type="application/rss+xml" />
	<link>https://seokorea.net</link>
	<description>SEOKorea.net 은 한국인을 위한 SEO 정보와 인터넷 사업정보, 그리고 인터넷 광고 정보와 해외 우수 Merchant를 한국의 윤리적 Publisher들에게 제공해 여러분에게 수익과 유쾌한 인생을 제공합니다.</description>
	<lastBuildDate>Mon, 31 Jul 2023 16:42:54 +0000</lastBuildDate>
	<language>ko-KR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.4</generator>
	<item>
		<title>JavaScript 기반의 오픈 소스 게임 개발 프레임워크 : Egret Engine</title>
		<link>https://seokorea.net/javascript-%ea%b8%b0%eb%b0%98%ec%9d%98-%ec%98%a4%ed%94%88-%ec%86%8c%ec%8a%a4-%ea%b2%8c%ec%9e%84-%ea%b0%9c%eb%b0%9c-%ed%94%84%eb%a0%88%ec%9e%84%ec%9b%8c%ed%81%ac-egret-engine/</link>
					<comments>https://seokorea.net/javascript-%ea%b8%b0%eb%b0%98%ec%9d%98-%ec%98%a4%ed%94%88-%ec%86%8c%ec%8a%a4-%ea%b2%8c%ec%9e%84-%ea%b0%9c%eb%b0%9c-%ed%94%84%eb%a0%88%ec%9e%84%ec%9b%8c%ed%81%ac-egret-engine/#respond</comments>
		
		<dc:creator><![CDATA[seokorea]]></dc:creator>
		<pubDate>Mon, 31 Jul 2023 16:20:32 +0000</pubDate>
				<category><![CDATA[프론트앤드 기술]]></category>
		<guid isPermaLink="false">https://seokorea.net/?p=4582</guid>

					<description><![CDATA[Egret Engine은 HTML5와 JavaScript 기반의 오픈 소스 게임 개발 프레임워크입니다. 이 프레임워크는 웹 브라우저에서 실행되는 게임을 개발하기 위해 만들어졌으며, 모바일 디바이스나 데스크톱 컴퓨터 등 다양한 플랫폼에서 동작할 수 있습니다. Egret Engine은 게임 제작을 위한 다양한 도구와 기능을 제공하여 개발자들이 빠르고 효율적으로 게임을 개발할 수 있도록 도와줍니다. Egret Engine의 주요 특징과 기능은 다음과 같습니다: 1. HTML5 기반: Egret Engine은 웹 표준인 HTML5와 JavaScript를 기반으로 하고 있어 웹 브라우저를 통해 게임을 실행할 수 있습니다. 따라서 플러그인이나 추가 ...]]></description>
										<content:encoded><![CDATA[<p>Egret Engine은 HTML5와 JavaScript 기반의 오픈 소스 게임 개발 프레임워크입니다. 이 프레임워크는 웹 브라우저에서 실행되는 게임을 개발하기 위해 만들어졌으며, 모바일 디바이스나 데스크톱 컴퓨터 등 다양한 플랫폼에서 동작할 수 있습니다. Egret Engine은 게임 제작을 위한 다양한 도구와 기능을 제공하여 개발자들이 빠르고 효율적으로 게임을 개발할 수 있도록 도와줍니다.</p>
<p>Egret Engine의 주요 특징과 기능은 다음과 같습니다:</p>
<p>1. HTML5 기반: Egret Engine은 웹 표준인 HTML5와 JavaScript를 기반으로 하고 있어 웹 브라우저를 통해 게임을 실행할 수 있습니다. 따라서 플러그인이나 추가 설치 없이 게임을 플레이할 수 있습니다.</p>
<p>2. 2D 게임 개발: Egret Engine은 주로 2D 게임 개발을 위해 설계되었습니다. 2D 그래픽 및 애니메이션을 지원하며, 게임의 레이아웃 및 인터페이스를 쉽게 구성할 수 있습니다.</p>
<p>3. 크로스 플랫폼 지원: Egret Engine은 다양한 플랫폼을 지원합니다. PC, 모바일 기기, 웹 브라우저 등에서 실행되며, 게임의 크기나 비율을 자유롭게 조절하여 다양한 디바이스에서 동작할 수 있습니다.</p>
<p>4. 풍부한 리소스 라이브러리: Egret Engine은 다양한 이미지, 사운드, 애니메이션 등의 리소스를 지원하며, 리소스 관리를 용이하게 할 수 있습니다.</p>
<p>5. 개발 도구 제공: Egret Engine은 개발자들이 게임을 개발하고 관리할 수 있는 통합 개발 환경과 도구를 제공합니다. 이를 통해 게임 개발 과정을 더욱 효율적으로 수행할 수 있습니다.</p>
<p>이제 간단한 Egret Engine 기반의 게임을 만들어보겠습니다. 이 예시에서는 간단한 클릭 게임을 만들어보겠습니다.</p>
<p>1. Egret Engine 설치: 먼저 Egret Engine을 설치합니다. Egret Engine 공식 웹사이트(https://www.egret.com/)에서 다운로드하여 설치할 수 있습니다. <a href="https://github.com/egret-labs/egret-core">깃헙 주소</a></p>
<p>2. 프로젝트 생성: Egret Wing 또는 Egret Launcher를 사용하여 새로운 프로젝트를 생성합니다. 프로젝트 생성 후, 프로젝트 폴더 안에 `src` 폴더를 만들고, 그 안에 `Main.ts` 파일을 생성합니다.</p>
<p>3. 게임 코드 작성: `Main.ts` 파일에 다음과 같은 코드를 작성합니다.</p>
<p>&#8220;`typescript<br />
class Main extends egret.DisplayObjectContainer {</p>
<p>private score: number = 0;<br />
private scoreText: egret.TextField;</p>
<p>public constructor() {<br />
super();<br />
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);<br />
}</p>
<p>private onAddToStage(event: egret.Event) {<br />
this.createGame();<br />
}</p>
<p>private createGame() {<br />
// 배경 설정<br />
const bg: egret.Shape = new egret.Shape();<br />
bg.graphics.beginFill(0x333333);<br />
bg.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);<br />
bg.graphics.endFill();<br />
this.addChild(bg);</p>
<p>// 점수 텍스트 설정<br />
this.scoreText = new egret.TextField();<br />
this.scoreText.text = &#8220;Score: 0&#8221;;<br />
this.scoreText.textColor = 0xffffff;<br />
this.scoreText.x = 20;<br />
this.scoreText.y = 20;<br />
this.addChild(this.scoreText);</p>
<p>// 클릭 이벤트 추가<br />
this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTap, this);<br />
}</p>
<p>private onTap(event: egret.TouchEvent) {<br />
// 클릭 시 점수 증가<br />
this.score += 10;<br />
this.scoreText.text = &#8220;Score: &#8221; + this.score;<br />
}<br />
}</p>
<p>// 게임 시작<br />
egret.runEgret({ renderMode: &#8220;webgl&#8221;, audioType: 0, calculateCanvasScaleFactor: function(context: any) { return 1; }});<br />
egret.MainContext.instance.stage.scaleMode = egret.StageScaleMode.SHOW_ALL;<br />
egret.MainContext.instance.stage.orientation = egret.OrientationMode.AUTO;<br />
egret.MainContext.instance.stage.maxTouches = 1;<br />
egret.runEgret();<br />
egret.registerImplementation(&#8220;eui.IAssetAdapter&#8221;, new AssetAdapter());<br />
egret.registerImplementation(&#8220;eui.IThemeAdapter&#8221;, new ThemeAdapter());<br />
egret.runEgret({ renderMode: &#8220;webgl&#8221; });</p>
<p>// 게임 뷰 초기화<br />
const gameView = new Main();<br />
egret.MainContext.instance.stage.addChild(gameView);<br />
&#8220;`</p>
<p>4. 게임 실행: 프로젝트 폴더에서 `index.html` 파일을 웹 브라우저로 열어 게임을 실행합니다. 클릭하면 점수가 증가하는 간단한 클릭 게임이 생성됩니다.</p>
<p>위 코드는 단순한 예시일 뿐이며, Egret Engine은 더 다양한 기능과 확장성을 제공하여 게임을 더욱 풍부하고 복잡하게 개발할 수 있습니다. 게임 개발에 익숙해지면 Egret Engine의 다른 기능과 도구를 활용하여 더욱 흥미로운 게임을 만들어볼 수 있습니다.</p>
<p>&nbsp;</p>
<p>egret 엔진의 장점은?</p>
<p>&nbsp;</p>
<p>Egret Engine은 HTML5 기반의 게임 엔진으로서 다양한 장점을 가지고 있습니다. 주요 장점은 다음과 같습니다:</p>
<p>1. 크로스 플랫폼 지원: Egret Engine은 HTML5와 JavaScript를 사용하여 게임을 개발하므로 웹 브라우저를 비롯한 다양한 플랫폼에서 실행이 가능합니다. PC, 모바일 기기, 태블릿 등 다양한 플랫폼에서 호환성을 제공하며, 별도의 플랫폼마다 개발을 하지 않아도 됩니다.</p>
<p>2. 웹 기술 사용: 자바스크립트와 HTML5를 기반으로 하기 때문에 웹 개발에 익숙한 개발자들은 쉽게 접근하여 게임을 개발할 수 있습니다. 또한 웹 표준 기술을 활용하기 때문에 웹 브라우저만 있으면 게임을 즉시 플레이할 수 있습니다.</p>
<p>3. 강력한 그래픽 지원: Egret Engine은 2D 그래픽과 애니메이션을 지원하는 강력한 그래픽 엔진을 제공합니다. 이를 통해 높은 품질의 게임 그래픽과 애니메이션 효과를 구현할 수 있습니다.</p>
<p>4. 높은 성능: Egret Engine은 효율적인 렌더링 기술과 최적화된 코드를 통해 높은 성능을 제공합니다. 게임이 부드럽게 실행되고 반응이 빠른 사용자 경험을 제공합니다.</p>
<p>5. 간편한 개발 환경: Egret Engine은 개발자들이 쉽게 게임을 개발할 수 있도록 편리한 개발 도구와 API를 제공합니다. 또한 다양한 예제와 튜토리얼을 제공하여 개발 학습을 도와줍니다.</p>
<p>6. 커뮤니티와 생태계: Egret Engine은 커뮤니티와 생태계가 활발하게 운영되고 있습니다. 개발자들은 커뮤니티를 통해 정보를 교류하고 지원받을 수 있으며, 다른 개발자들이 개발한 리소스나 플러그인을 활용하여 개발 속도를 향상시킬 수 있습니다.</p>
<p>7. 비용 절감: Egret Engine은 오픈 소스 기반의 엔진으로 무료로 사용할 수 있습니다. 이를 통해 게임 개발에 필요한 비용을 절감할 수 있습니다.</p>
<p>이러한 장점들로 인해 Egret Engine은 웹 기반 게임 개발을 위한 강력하고 인기 있는 선택지가 됩니다. 또한 HTML5 게임이 점점 더 인기를 얻으면서 Egret Engine과 같은 엔진의 중요성과 사용성이 더욱 높아지고 있습니다.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://seokorea.net/javascript-%ea%b8%b0%eb%b0%98%ec%9d%98-%ec%98%a4%ed%94%88-%ec%86%8c%ec%8a%a4-%ea%b2%8c%ec%9e%84-%ea%b0%9c%eb%b0%9c-%ed%94%84%eb%a0%88%ec%9e%84%ec%9b%8c%ed%81%ac-egret-engine/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>웹퍼블리셔가 되고싶니? 웹퍼블리셔 과정</title>
		<link>https://seokorea.net/%ec%9b%b9%ed%8d%bc%eb%b8%94%eb%a6%ac%ec%85%94%ea%b0%80-%eb%90%98%ea%b3%a0%ec%8b%b6%eb%8b%88-%ec%9b%b9%ed%8d%bc%eb%b8%94%eb%a6%ac%ec%85%94-%ea%b3%bc%ec%a0%95/</link>
					<comments>https://seokorea.net/%ec%9b%b9%ed%8d%bc%eb%b8%94%eb%a6%ac%ec%85%94%ea%b0%80-%eb%90%98%ea%b3%a0%ec%8b%b6%eb%8b%88-%ec%9b%b9%ed%8d%bc%eb%b8%94%eb%a6%ac%ec%85%94-%ea%b3%bc%ec%a0%95/#respond</comments>
		
		<dc:creator><![CDATA[seokorea]]></dc:creator>
		<pubDate>Wed, 29 May 2019 17:01:54 +0000</pubDate>
				<category><![CDATA[SEO 와 기술]]></category>
		<category><![CDATA[프론트앤드 기술]]></category>
		<guid isPermaLink="false">https://seokorea.net/?p=3437</guid>

					<description><![CDATA[과정 수강하기 (무료) 웹퍼블리셔는 PC나 모바일에서 웹사이트의 보이는 부분을 다루는 직업입니다.  HTML로 구조와 컨텐츠를 만들며  CSS로 꾸며줍니다. 그리고 여기에 Javascript로 보이는 부분의 동작을 작동시키는데, 이렇게 서버쪽이 아닌 보이는 부분(프론트앤드) 까지의 작업이 기본적인 웹퍼블리셔가 하는 일입니다. 그래서 웹퍼블리셔를 프론트앤드 개발자라고 부르기도 합니다.이 과정은 처음으로 HTML, CSS를  배우기 시작하시면서 웹퍼블리셔가 되기 위해 준비하시는 분들을 위한 과정입니다.여러분께 단계별 교육으로 간단한 UI 부터 반응형 웹까지 제작할 수 있는 수준으로 여러분을 안내합니다.]]></description>
										<content:encoded><![CDATA[<p><a href="https://seokorea.net/wp-content/uploads/2019/05/webpublisher7685003.jpg" rel="image_group"><img fetchpriority="high" decoding="async" class="alignnone size-full wp-image-3440" src="https://seokorea.net/wp-content/uploads/2019/05/webpublisher7685003.jpg" alt="webpublisher7685003" width="768" height="500" srcset="https://seokorea.net/wp-content/uploads/2019/05/webpublisher7685003.jpg 768w, https://seokorea.net/wp-content/uploads/2019/05/webpublisher7685003-300x195.jpg 300w" sizes="(max-width: 768px) 100vw, 768px" /></a></p>
<p>과정 수강하기 (무료)</p>
<p><a href="https://www.shop2school.com/learningpath/html-css-javascript-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94%EA%B0%80-%EB%90%98%EA%B3%A0%EC%8B%B6%EB%8B%88-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EA%B3%BC%EC%A0%95/"><img decoding="async" class="alignnone size-large" src="https://www.shop2school.com/wp-content/uploads/2019/05/웹_개발_버튼.png" alt="" width="700" height="100" /></a></p>
<p>웹퍼블리셔는 PC나 모바일에서 웹사이트의 보이는 부분을 다루는 직업입니다.  HTML로 구조와 컨텐츠를 만들며  CSS로 꾸며줍니다. 그리고 여기에 Javascript로 보이는 부분의 동작을 작동시키는데, 이렇게 서버쪽이 아닌 보이는 부분(프론트앤드) 까지의 작업이 기본적인 웹퍼블리셔가 하는 일입니다. 그래서 웹퍼블리셔를 프론트앤드 개발자라고 부르기도 합니다.이 과정은 처음으로 HTML, CSS를  배우기 시작하시면서 웹퍼블리셔가 되기 위해 준비하시는 분들을 위한 과정입니다.여러분께 단계별 교육으로 간단한 UI 부터 반응형 웹까지 제작할 수 있는 수준으로 여러분을 안내합니다.</p>
<p><iframe title="HTML, CSS, JavaScript - 웹퍼블리셔가 되고싶니? 웹퍼블리셔 과정" width="955" height="716" src="https://www.youtube.com/embed/aFBcmbTvnus?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><script> </script></p>
]]></content:encoded>
					
					<wfw:commentRss>https://seokorea.net/%ec%9b%b9%ed%8d%bc%eb%b8%94%eb%a6%ac%ec%85%94%ea%b0%80-%eb%90%98%ea%b3%a0%ec%8b%b6%eb%8b%88-%ec%9b%b9%ed%8d%bc%eb%b8%94%eb%a6%ac%ec%85%94-%ea%b3%bc%ec%a0%95/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>왕초보를 위한 JavaScript 강좌 3 Object 를 만드는 초 간단 방법</title>
		<link>https://seokorea.net/%ec%99%95%ec%b4%88%eb%b3%b4%eb%a5%bc-%ec%9c%84%ed%95%9c-javascript-%ea%b0%95%ec%a2%8c-3-object-%eb%a5%bc-%eb%a7%8c%eb%93%9c%eb%8a%94-%ec%b4%88-%ea%b0%84%eb%8b%a8-%eb%b0%a9%eb%b2%95/</link>
					<comments>https://seokorea.net/%ec%99%95%ec%b4%88%eb%b3%b4%eb%a5%bc-%ec%9c%84%ed%95%9c-javascript-%ea%b0%95%ec%a2%8c-3-object-%eb%a5%bc-%eb%a7%8c%eb%93%9c%eb%8a%94-%ec%b4%88-%ea%b0%84%eb%8b%a8-%eb%b0%a9%eb%b2%95/#respond</comments>
		
		<dc:creator><![CDATA[seokorea]]></dc:creator>
		<pubDate>Sat, 07 Nov 2015 19:03:05 +0000</pubDate>
				<category><![CDATA[프론트앤드 기술]]></category>
		<category><![CDATA[javascript]]></category>
		<guid isPermaLink="false">http://seokorea.net/?p=1777</guid>

					<description><![CDATA[아주 간단한 방법으로 객체를 만들어 보도록 합니다. 새로운 객체를 정의 하기 위해 var, new 사용할 필요 없이 그냥 다음과 같은 형식으로 지정해 주시면 됩니다. 객체 이름 = {속성:속성값, 속성:속성값} 다음은 그 예입니다. [php] amy = {name:&#34;amy kim&#34;, age:7 }; tom = {name:&#34;tom lee&#34;, age:3 }; [/php] 객체 이름 다음에 속성들을 콤마로 나누면 됩니다. 그리고 그 속성은 콜론(:) 마크로 속성: 속성값 형태로 표현하면 됩니다. 이렇게 정의한 객체를 프린트 아웃하는 예 입니다. [php] document.write(amy.name + &#34; &#34; ...]]></description>
										<content:encoded><![CDATA[<p><iframe loading="lazy" title="왕초보를 위한 JavaScript 강좌 3 Object 를 만드는 초 간단 방법" width="955" height="716" src="https://www.youtube.com/embed/DZzZRv8krLk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p>아주 간단한 방법으로 객체를 만들어 보도록 합니다.</p>
<p>새로운 객체를 정의 하기 위해 var, new 사용할 필요 없이<br />
그냥 다음과 같은 형식으로 지정해 주시면 됩니다.</p>
<p>객체 이름 = {속성:속성값, 속성:속성값}</p>
<p>다음은 그 예입니다.<br />
[php]<br />
amy = {name:&quot;amy kim&quot;, age:7 };</p>
<p>tom = {name:&quot;tom lee&quot;, age:3 };<br />
[/php]</p>
<p>객체 이름 다음에 속성들을 콤마로 나누면 됩니다. 그리고 그 속성은  콜론(:) 마크로<br />
속성: 속성값 형태로 표현하면 됩니다.</p>
<p>이렇게 정의한 객체를 프린트 아웃하는 예 입니다.</p>
<p>[php]</p>
<p>document.write(amy.name + &quot; &quot; + tom.age)<br />
[/php]</p>
<p><script> </script></p>
]]></content:encoded>
					
					<wfw:commentRss>https://seokorea.net/%ec%99%95%ec%b4%88%eb%b3%b4%eb%a5%bc-%ec%9c%84%ed%95%9c-javascript-%ea%b0%95%ec%a2%8c-3-object-%eb%a5%bc-%eb%a7%8c%eb%93%9c%eb%8a%94-%ec%b4%88-%ea%b0%84%eb%8b%a8-%eb%b0%a9%eb%b2%95/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
