어쨌든 공부하는 블로그

State const root = document.getElementById("root"); let counter = 0; const Container = () => ( Total clicks: {counter} Click me ); ReactDOM.render(, root); content를 작성하던 위치에 중괄호를 열고 변수를 담아줄 수 있다 변경 사항을 다시 HTML 문서에 반영하고 싶다면 전체를 재렌더링해 주면 된다 function App() { const data = React.useState(); const counter = data[0]; const modifier = data[1]; return ( Total clicks: {counter} Click me ); } 위와 같은 방식으로 us..

CreateElement const root = document.getElementById("root"); const h3 = React.createElement( "h3", { id: "title", onMouseEnter: () => console.log("mouse enter"), }, "Hello I'm a title" ); const btn = // 생략 const container = React.createElement("div", null, [h3, btn]); ReactDOM.render(container, root); 가장 기본적인 방식으로, createElement(HTML tag, property, content)를 통해 엘리멘트를 만들어내어 랜더 할 수 있다 하지만 사실상 쓸 일 없..

Assets > Resources > Data > StatData.json (유니티 상에서 추가가 안 되니 폴더로 직접 이동하여 만들어준다) { "stats": [ { "level": "1", "hp": "100", "attack": "10" }, { "level": "2", "hp": "150", "attack": "15" }, { "level": "3", "hp": "200", "attack": "20" } ] } Assets > Scripts > Data > Data.Content.cs (클래스명에 .이 들어가서 오류가 뜨지만, 클래스 사용 안 할 거기 때문에 무시) * data 파일을 어떤 포맷으로 읽어들일 것인가를 나타내기 위한 스크립트 파일 #region Stat [Serializable] p..

코루틴을 사용하면 이전에 함수에서 진행 중이던 상황을 저장했다가 복원하여 그대로 이어서 수행하게 할 수 있다 * yield break; 를 하게 되면 함수를 완전히 빠져나오게 된다 // 코루틴 사용 예 StartCoroutine("CoExplodeAfterSeconds", 4.0f); IEnumerator CoExplodeAfterSeconds(float seconds) { Debug.Log("Explode Enter"); yield return new WaitForSeconds(seconds); Debug.Log("Explode Execute!"); } // 코루틴 사용 및 삭제 Coroutine co = StartCoroutine("CoExplodeAfterSeconds", 4.0f); StartCo..

오브젝트를 재사용 하기 위해 pool을 사용한다(소규모 게임에서는 굳이 필요 없으나, 규모가 커지고 성능을 높여야 할 때 유용) 풀링할 객체 vs 안 할 객체 구분법 : 특정 컴포넌트의 존재 여부로 판단한다 Assets > Scripts > Managers > Poolable.cs public class Poolable : MonoBehaviour { public bool isUsing; } 객체를 구별하는 용도의 컴포넌트로 사용한다 Assets > Scripts > Managers > PoolManager.cs (Resource Manager를 보조하는 역할로 사용) public class PoolManager { class Pool { public GameObject Original { get; pr..

Effect의 경우, 같은 effect를 여러 번 불러오게 되면, 불러올 때마다 manager를 호출하는 게 부하를 줄 수 있으므로 캐싱을 해둔다 public class SoundManager { Dictionary _audioClips = new Dictionary(); public void Init() { // Init } // Scene 이동 시 캐싱된 audio source&clip 초기화 public void Clear() { foreach (AudioSource audioSource in _audioSources) { audioSource.clip = null; audioSource.Stop(); } _audioClips.Clear(); } public void Play(string path,..

AudioSource audio = GetComponent(); audio.PlayOneShot(audioClip); audio.PlayOneShot(audioClip2); PlayOneShot 함수: clip을 한번 재생시킨다(여러 개 겹쳐서 실행시키면 그대로 겹쳐서 재생시킴) * 만약 audio clip이 재생되고 있는 중에 해당 클립을 들고 있는 게임 오브젝트가 destroy된다면 중간에 사운드가 끊기게 된다 -> 클립을 게임 오브젝트가 들고 있는 게 아니라, manager가 관리하게 만든다 Assets > Scripts > Utils > Define.cs에 Sound 열거체를 추가해준다 public enum Sound { Bgm, Effect, MaxCount // 열거체 내 오브젝트의 개수 파악..

Geolocation function onGeoOk() { // geolocation 정보를 받아오는 것을 성공했을 경우 실행 const lat = position.coords.latitude; const lng = position.coords.longitude; } function onGeoError() { // Error 발생 시 실행할 코드 } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); API 받아오기 // 1. 해당하는 API KEY 발급 const API_KEY = "api_key"; // 2. 제공되는 url에 API_KEY를 비롯한 정보를 넣고 불러오기 const url = `url`; fetch(url) .then(res..

자식 요소를 가진 HTML Element 만들기 const li = document.createElement("li"); const span = document.createElement("span"); li.appendChild(span); 이후 li를 document 문서 내에 넣으면 span element까지 같이 들어가게 된다 event.target.parentElement // event를 받은 target의 부모 element를 제거 function 함수명(event) { const li = event.target.parentElement; li.remove(); } 혹은 parentNode(부모가 element가 아닌 경우도 받아올 수 있다)를 사용해도 된다 JSON const player =..

Math // 0부터 1 사이의 무작위 값을 반환하는 함수 const random = Math.random(); // 반올림 함수 const number = Math.round(숫자); // 올림 함수 const number = Math.ceil(숫자); // 내림 함수 const number = Math.floor(숫자); // 0부터 9 사이의 무작위 값을 반환하는 함수 const random = Math.floor(Math.random() * 10); 새 HTML 요소 만들기 // 지정한 태그를 가진 새 HTML Element 만들기 const bgImage = document.createElement("태그"); // HTML 문서 내 body에 자식(가장 뒤에)으로 element 삽입하기 doc..