티스토리

짱이 될거야

검색하기

블로그 홈

짱이 될거야

jeong57.tistory.com/m

짱이 되었어 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Unity 코드 순서대로 실행하기 (delay) React의 경우, 시간 순서대로 코드를 진행하고 싶을 때(axios 등), async ~ await를 사용한다. Unity의 경우에는 StartCoroutine, IEumerator를 사용한다. 코드를 순서대로 실행하고 싶은 함수 앞에 `IEumerator`를 적어주고, 해당 함수를 불러올 때 StartCoroutine(함수 이름())으로 불러온다. IEumerator 함수 내에서는 코드 사이에 delay를 걸어줄 수 있는데, yield return new WaitForSeconds(시간)으로 적어주면 된다. 예시 public void Start() { StartCoroutine(Example()); } IEnumerator Example() { yield return new WaitForSeconds.. 공감수 0 댓글수 0 2022. 11. 4.
Unity Canvas 크기 고정하기 Unity 프로젝트를 수행할 때, 해상도에 따라 화면 크기가 달라진다. 이때 버튼 등의 위치가 변경될 수 있기 때문에 Canvas 크기를 고정하면 좋다. Canvas의 Inspector > Canvas Scaler UI Scale Mode: (기본) Constant Pixel Size -> (수정) Scale With Screen Size Reference Resolution: 원하는 크기로 고정 x: 1920, y: 1080 공감수 0 댓글수 0 2022. 11. 2.
Unity 비활성화된 Object에 접근하기 unity에서 비활성화한 object를 script에서 불러와보자. 우선, 비활성화한 object 위에 상위 object를 만들어야 한다. 이때 상위 object는 활성화된 상태여야 한다. (비활성화된 object를 script에서 바로 불러올 수 없다.) 이후, script에서 상위 오브젝트(활성화 상태)를 가져온다. 접근하고자 하는 오브젝트 = GameObject.Find("상위 오브젝트").transform.Find("접근하고자 하는 오브젝트").gameObject; 예시 A: 활성화된 상위 Object B: 접근하고자 하는 Object (비활성화 상태) using System.Collections; using System.Collections.Generic; using UnityEngine; pu.. 공감수 0 댓글수 0 2022. 11. 1.
Unity Scene 전환 Unity에서 Scene 전환하기 1. File > New Scene: 새로운 scene 생성 2. Assets/Scenes에 저장 3. File > Build Settings... 클릭 4. 생성한 Scene을 'Scenes In Build'에 넣는다. 그러면 인덱스가 생성되는데, 이 인덱스를 씬 전환에 사용한다. (이름으로 할 수도 있지만 그것보다는 인덱스가 좀 더 명확하다.) 5. Script에 씬 전환하는 코드를 작성해준다. 아래 예시 코드는 button을 누르면 count 숫자가 증가하고, count=2가 되면 scene이 0에서 1로 전환되도록 구현해두었다. using System.Collections; using System.Collections.Generic; using UnityEngin.. 공감수 0 댓글수 0 2022. 10. 31.
Unity 한글 폰트 적용하기, 한글 깨짐 해결 현재 2021.3.11f1 버전을 쓰는데, 한글을 입력하면 ㅁㅁ과 같이 네모로 나타난다. 해결방법은 폰트를 다운로드하고 적용하는 것이다. 1. 폰트를 다운받고, Assets/Fonts 폴더 만들어서 파일 넣는다. 2. 폰트 파일 우클릭 후 Create > TextMeshPro > FontAsset을 누른다. 3. 입력하고자 하는 컴포넌트의 Inspector에서 'Font Asset'을 찾고, 다운로드한 폰트 파일을 선택하면 된다. 공감수 0 댓글수 0 2022. 10. 31.
Unity 2D Fade In/Out Fade Out (기본 화면 -> Black) 1. 2D Canvas 생성 2. Canvas > UI > Image(name: ‘Black’) 생성 후 stretch로 canvas에 꽉 차도록 설정 Anchors를 화면을 조금 벗어나도록 설정해준다. (혹시 화면에 꽉 찰 때 빈 틈이 생길까봐) 이미지 색을 검은색으로 변경 3. 이미지 alpha 값을 0으로 하고 비활성화 4. Assets/Scripts 폴더 생성 후 FadeScript.cs 작성 -> Canvas에 삽입 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class FadeScript : MonoB.. 공감수 0 댓글수 0 2022. 10. 28.
Unity 3D Minimap: v2. Fixed map(2D) 프로젝트 초기 설정 1. 프로젝트 생성 2. Plane 생성 (2:1 비율 지도로 시작) 3. Cube 생성 (움직이는 캐릭터 될 예정) 캐릭터 이동 설정 Live Map과 동일하게 MoveController.cs 생성 후 cube component에 적용 미니맵 초기 설정 1. Canvas 생성 2. Canvas > Raw Image (Minimap) 생성 후 지도 그림 넣기 미니맵 스크립트 작성 Minimap.cs 작성 후 cube component에 삽입 using System.Collections; using System.Collections.Generic; using UnityEngine; public class Minimap : MonoBehaviour { public RectTransform.. 공감수 0 댓글수 0 2022. 10. 27.
Unity 3D Minimap: v1. Live map(3D) 프로젝트 초기 설정 1. 프로젝트 생성 2. GameObject > 3D Object > Plane 생성 3. GameObject > 3D Object > Cube 생성 (character 될 예정) 4. Assets/Images 폴더 생성 후 free image 다운로드 (plane에 삽입) 미니맵 초기 설정 1. 2D로 바꾸고 Canvas 생성 2. Canvas > 우클릭 > UI > Image (Minimap) Size: 110, 110 위치: 오른쪽 아래 미니맵을 넣을 껍데기 3. Canvas/Minimap > 우클릭 > UI > Raw Image (Map Image) 생성 4. Assets/Images 폴더 안에서 우클릭 > Create > Render Texture (MiniMapRT) 5. .. 공감수 0 댓글수 0 2022. 10. 27.
Unity 팝업창 제작 (3D에서 2D 버튼 만들기) Unity에서 3D 프로젝트를 만든 후, 버튼을 클릭하면 팝업창이 뜨는 기능을 구현해보자. 팝업창 제작 가이드 1. Scene을 2D로 바꾼다. 2. GameObject > UI > Button: 클릭하면 팝업창 나오는 버튼 3. Button을 클릭하고 shift+alt 누르면 canvas 정중앙에 배치 가능하다. 4. Hierarchy > Create Empty > 'Popup' 생성 5. Popup/Background (Button) 만들고 검은색 반투명으로 설정. canvas 화면에 꽉 차게 만들기 shift+alt 누르고 stretch/stretch 선택하면 canvas 화면에 100% 차지 팝업 바깥을 눌렀을 때 팝업이 없어지게 만들기 위해서(=On Click() 걸기 위해서) backgroun.. 공감수 0 댓글수 0 2022. 10. 26.
Unity 설치 가이드 1. 공식 홈페이지 접속 개인 > "Personal" > Windows용 다운로드 https://unity.com/kr/download 다운로드 지금 Unity를 다운로드하고 전 세계적으로 가장 큰 인기를 누리는 2D/3D 멀티플랫폼 경험 및 게임 제작용 개발 플랫폼을 사용하세요. unity.com 2. UnityHubSetup.exe 설치 '동의함' > 설치 3. Unity 로그인 Sign in > Google로 로그인 4. Install Unity Editor Install Unity Editor Install tab 2022.1.20f1 Install Microsoft Visual Studio Community 2019 체크되어 있는지 확인하고 다운로드 시작 Visual Studio Communit.. 공감수 0 댓글수 0 2022. 10. 25.
Vuex: url 새 탭으로 열기 서비스 페이지를 만들 때 간혹 다른 url로 이동해야 하는 경우가 있다. 서비스 사이트 내의 url이라면 router를 사용하면 되지만, 아예 외부 사이트(예를 들면 github 등)로 이동하는 것이라면 새로운 탭을 열어주는 것이 서비스 이용 측면에서 좋다. = 우리 사이트를 계속 열어둔 상태이기 때문에 서비스 이용자를 뺏기지 않는다. (만약 하나의 탭에서 외부 사이트로 이동해버리면 우리 서비스를 다시 이용할지 불확실하기 때문이다) 따라서 a 태그를 사용하는 것이 아니라 다른 방법을 사용해야 하는데 매우 쉽다. 링크를 걸 태그에 onClick event를 걸어주고, 해당 태그를 클릭하면 openInNewTab 함수가 실행되도록 한다. openInNewTab 함수에서는 전달받은 url을 가져와서 windo.. 공감수 1 댓글수 1 2022. 10. 5.
Vue: video 삽입하기 (자동재생, 반복재생) Vuex를 활용한 프로젝트에서, 비디오를 삽입하고 그 위에 문구를 띄우고자 한다. 방법은 크게 video와 iframe, 두 가지이다. 1. video 파일을 가지고 있는 경우, video 1. 동영상 삽입 src/assets/video 폴더를 생성하고, 그 안에 비디오 파일을 넣어뒀다. 이 경우, video tag와 source tag를 활용하면 된다. 먼저, 비디오가 화면에 꽉 차지 않을 경우 여백이 남는데 그 부분의 css를 설정할 수 있도록 div 태그를 만든다. 그리고 그 안에 video tag를 넣고 그 밑에 source tag를 넣는다. source tag의 src 속성에는 현재 비디오가 있는 위치-나는 상대 위치를 선호한다-를 넣으면 된다. 2. 동영상 속성 설정 동영상 자동재생을 하고 싶.. 공감수 1 댓글수 1 2022. 10. 4.
Vuex에서 api 요청 느릴 경우 페이지 렌더링 해결 편법 현재 진행하고 있는 프로젝트에서 프론트는 Vuex를, 백엔드는 JPA를 사용하고 있다. 프론트에서 백으로 API 요청을 보내면 몇 백개의 데이터를 정제해서 돌려주는 경우가 있는데, 이때 요청 후 결과를 받기까지 약 0.5초 가량이 걸린다. 이것 때문에 페이지 렌더링에서 문제가 발생하는데, 자주 언급했던 것처럼 결과가 오기 전에 페이지가 렌더링 되어버리기 때문에 화면에 제대로 된 데이터를 보여주지 못한다. updated 시점에서 axios 요청을 한 번 더 한다 하더라도 이미 결과 데이터가 오기 전에 존재하던 데이터를 화면에 띄워버렸기 때문에 화면 데이터는 실시간으로 바뀌지 않는다. 결과적으로 해결할 수 있는 방법은 딱 하나이다. 바로, 결과 데이터가 오고 나서 데이터를 띄우는 것이고 vuex에서는 보통 .. 공감수 0 댓글수 0 2022. 9. 28.
Animation On Scroll (AOS): Library 활용 애플 공식 사이트, 토스 사이트처럼 스크롤을 내리면 다양한 애니메이션이 나오면서 구성요소가 튀어나오게 하고 싶었다. 스크롤을 내리면서 opacity를 설정해도 되는데, 좀 더 쉬운 방법이 없을까 찾아보다가 AOS 라이브러리를 찾았다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io npm install aos --save 일단 npm install 하고, AOS를 쓰고 싶은 컴포넌트에서 아래와 같이 임포트 시킨다. import AOS from 'aos'; import "aos/dist/aos.css"; 그리고 script에서.. 공감수 0 댓글수 0 2022. 9. 27.
TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. 프론트 업무를 수행하며 axios 요청을 보냈는데, 계속해서 400 에러가 떴다. GET 요청을 보내면 match / mismatch message를 주는 방식인데, 이때 토큰과 데이터 하나를 보내야 했다. 형식을 맞췄는데 에러가 뜨는 게 이상해서 swagger에서 해봤고, TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. 위와 같은 에러가 뜨는 것을 확인할 수 있었다. 검색해보니까 GET 또는 HEAD 요청을 보낼 때는 토큰이 아닌 다른 데이터를 같이 못 보내기 때문이라고 했다. axios 요청을 보낼 때 POST로 바꿔봤는데, 그러면 백에서는 GET을 받고자 하고 나는 POST를.. 공감수 0 댓글수 0 2022. 9. 27.
Vuex 페이지 렌더링 전 data 호출(undefined) 문제해결 Vue.js를 활용한 프론트 작업 중, 회원정보 수정 기능을 구현했다. 회원가입을 할 때와 거의 동일한 form이기 때문에 router-view 단에서 회원가입, 회원정보 수정View.vue를 만들고, compontents 단에서 회원가입 form을 만들고 재사용하는 방식을 썼다. 문제는, 회원정보 수정 시에는 기존 가입 시에 작성했던 정보를 가져와서 미리 input 혹은 select 등등에 띄워둬야 하는 것이었다. 먼저 store에서(vuex 활용) currentUser(회원정보)라는 state를 만들고, fetchCurrentUser라는 getters에서 api를 통해 정보를 가져오고 저장해둔다. 회원가입 시에는 임의의 회원 data(currentUser)를 만들었는데, 회원정보 수정 시에는 stor.. 공감수 0 댓글수 0 2022. 9. 24.
React 프로젝트, GitHub으로 배포하기 6월부터 스터디원과 함께 React 토이 프로젝트를 만들었다. 7, 8월 동안 SSAFY 프로젝트로 바빠서 진행하지 못했고, 이제부터는 각자 원하는 방향대로 기능 또는 디자인을 추가하기로 했다. 프로젝트명 Hi, My Calendar 기능 설명 Todo 할 일 생성 할 일 조회 할 일 완료처리 할 일 삭제 Emotional Calendar (예정) 감정 입력 수정 삭제 WebView 연동 현재 프로젝트는 서버가 없고, localStorage에 데이터를 저장하는 방식으로 구현되어 있다. 반응형으로 만들었기 때문에 웹뷰를 이용해 모바일에서도 활용하도록 하고 싶은데, 그러기 위해서는 배포를 할 필요가 있다. 본격적인 배포 방법은 배우는 데 시간이 많이 걸릴 것 같아, github에서 제공하는 배포 기능을 활용.. 공감수 0 댓글수 0 2022. 8. 24.
React 채팅방 css React 프로젝트에서 채팅방을 구현했다. 1. dummy data const [test, setTest] = useState([ {type: 0, content: "1", day: getDate(new Date()), time: getTime(new Date())}, {type:1, content: "2", day: getDate(new Date()), time: getTime(new Date())}, {type: 0, content: "3", day: getDate(new Date()), time: getTime(new Date())}, {type: 1, content: "안녕하세요", day: getDate(new Date()), time: getTime(new Date())} ]); 위와 같이 변.. 공감수 0 댓글수 0 2022. 8. 17.
React 페이지 전환 애니메이션 1. 라이브러리 설치 npm install react-transition-group 공식문서: https://reactcommunity.org/react-transition-group/ React Transition Group Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elem reactcommunity.. 공감수 0 댓글수 0 2022. 8. 17.
Firebase Web: URL로 이미지 다운로드하기 프로젝트 진행 중 Firebase에 올린 이미지를 가져와야 하는 부분이 있었다. listAll과 getDownladURL을 활용해서 이미지 URL을 가져와 화면에 출력했고, 거기에다가 저장 버튼을 추가해 버튼을 누르면 이미지가 로컬에 저장되게 하는 기능을 추가하고자 했다. https://firebase.google.com/docs/storage/web/download-files#web-version-9_2 웹에서 Cloud Storage로 파일 다운로드 | Firebase Storage 의견 보내기 웹에서 Cloud Storage로 파일 다운로드 Firebase용 Cloud Storage를 사용하면 Firebase에서 제공하고 관리하는 Cloud Storage 버킷에서 파일을 빠르고 손쉽게 다운로드할 수.. 공감수 0 댓글수 0 2022. 8. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.