오르막길

공부 배경가시화 모니터링 테스트 중, 규모에 비해 과한 성능이 요구되는 것을 발견하고 비코드적인 면으로 여러 최적화 시도를 하게 되었습니다.개발자 입장에서 코드 최적화도 중요하지만그 외 쉽게 놓칠 수 있는 최적화 방법을 정리해 두고자 글을 작성하게 되었습니다.앞으로도 놓쳤던 최적화 방법이 있다면 계속해서 추가할 예정입니다. 출처유니티 공식 문서를 바탕으로 유니티 21.3.16f1 버전에서 적용 가능하도록 작성되었습니다. 목차1. Occlusion Culling2. Resources 폴더3. Build Compression 설정 : WebGL 1. Occlusion Culling다른 오브젝트에 가려(오클루전된) 카메라에 보이지 않는 오브젝트의 렌더링을 비활성화하는 기능3D 컴퓨터 그래픽스에서는 대부분의..

공부 배경관제 시스템 가시화 업무 중, 건물 전체를 자연스럽게 보여주는 연출을 구현하기 위해 유니티 시네머신을 공부했습니다.시네머신은 기본적으로 정말 유용한 기능도 많고, 스크립트와 함께 활용하면 무궁무진한 연출이 가능합니다.필요한 상황에 따라 어떤 기능을 써야 할지 고민될 때 참고하기 위해 글을 작성하게 되었습니다. 출처https://www.youtube.com/watch?v=2oOIp22Y11U https://docs.unity3d.com/Packages/com.unity.cinemachine@2.8/manual/index.html About Cinemachine | Cinemachine | 2.8.9About Cinemachine Cinemachine is a suite of modules for ..

1. 빌드 설정 및 빌드 (1) Publishing Settings - Decompression Fallback 체크 (2) publish setting - compression format을 disabled 으로 설정 2. nginx 설치 https://nginx.org/en/download.html nginx: download nginx.org https://bakingdevlog.tistory.com/13 NGINX 윈도우 설치하기 NGINX 윈도우 설치하기 Installing NGINX Windows 윈도우에 NGINX(엔진엑스)를 설치하는 방법에 대해 알아보겠습니다. 1. NGINX 다운받기 🔗 아래 링크에서 Windows Stable 버전을 다운받습니다. 다운링크: http:// bakingd..

Goal 🥅 직접 WebGL Templete을 커스텀해보자 Problem 🚨 이전에 다른 개발자들이 제공하는 템플릿은 전혀 먹히지 않았다 대부분 UnityLoader 를 사용했는데 UnityLoader is not defined 에러가 발생하며 전혀 작동하지 않았다. 그래서 유니티포럼 검색 결과 유니티 2020 버전 이후로는 UnityLoader 관련 플러그인 등이 호환되지 않음을 알게 되었다! WebGL build not working correctly. "UnityLoader is not defined". WebGL build not working correctly. "UnityLoader is not defined". hey, i have two issues with my unity when i t..

Goal mousePosition을 Canvas 좌표로 바꾸어 보자 Problem 시작 지점을 단순히 startPos = Input.moustPosition으로 했더니 캔버스의 중심좌표 (정가운데)에서 생성되는 문제 Cause & Solution RectTransformUtility.ScreenPointToLocalPointInRectangle RectTransformUtility.ScreenPointToLocalPointInRectangle RectTransformUtility.ScreenPointToLocalPointInRectangle public static bool ScreenPointToLocalPointInRectangle(RectTransform rect, Vector2 screenPoin..

공공데이터 포털에서 제공하는 이미지 링크를 사용하려는데, 이미지가 뜨지 않고 엑스박스(엑박)이 떠서 당황했던 적이 있었다. 구글링해본 결과, img 형식을 지켜야하는 것은 같지만, 추가로 지정해줘야하는 부분이 있었다. 바로 refferPolicy를 설정해준다는 것이다. Referrer-Policy - HTTP | MDN Referrer-Policy - HTTP | MDN The Referrer-Policy HTTP header controls how much referrer information (sent with the Referer header) should be included with requests. Aside from the HTTP header, you can set this policy i..

부모→ 자식간의 prop은 가능하지만 자식→부모간의 prop은 불가능하다. redux없이 어떻게 state를 주고받으면 좋을까? 자식에게 함수를 전달하고, 자식이 부모의 함수를 호출해주면 된다. 예를 들어 버튼 자식 컴포넌트를 누르면, 버튼내용으로 모드를 바꾸는 기능을 구현한다고 하자. text는 버튼에 들어갈 내용이고, selectMode는 부모가 가지고 있는 함수이다. // TextButton.jsx : 버튼 자식 컴포넌트 export default function TextButton({ text, selectedMode }) { const onClick = () => { // 이 버튼을 클릭하면 console.log(text); selectedMode(text); // 부모의 selectedMode..

리액트 프로젝트를 진행하던 중 외부 라이브러리 스크립트를 가져와 사용해야 하는 일이 생겼다. 여기저기 구글링 하며 알아본 정보를 정리하고자 한다. 1. effect - hook 이용하기 https://usehooks.com/useScript/ useScript usehooks.com 직접 설명하는 것보다 훨씬 잘 정리된 글이다. 원래는 이 방법으로 구현하고자 했고, 코드도 작성해 두었지만 다른 라이브러리도 있지 않을까 싶어 더 찾아보었다. 2. Hemlet 사용하기 https://www.npmjs.com/package/helmet helmet help secure Express/Connect apps with various HTTP headers. Latest version: 6.0.1, last pub..

SCSS 란? SASS와 비슷한, 문법적으로 멋진 CSS라는 뜻. SASS 보다 늦게 나왔고, 약간의 문법 차이가 있으나 매우 비슷하다. 넓은 범용성 높은 호환성 중괄호로 중첩을 표현 세미콜론으로 속성을 구분 CSS와 좀 더 비슷 공식 레퍼런스나 프레임워크가 SCSS를 선호 중첩, 변수 선언, 연산자 등 보유 MUI란? https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. mui.com..

webRTC(Web Real-Time Communication) 웹 브라우저가 서로 통신할 수 있도록 설계된 API 웹 브라우저 상에서는 어떠한 플러그인도 필요 없이 음성 채팅과 화상채팅, 데이터 교환까지도 가능하게 하는 기술 WebRTC 기술은 P2P(Peer-to-Peer) 통신에 최적화 Kurento란? 전체 WebRTC 스택의 기능적 구현을 제공하는 미디어 서버 (미디어 서버 : 압축(인코딩)된 동영상 파일들이 미디어서버로 들어오면 해석(디코딩) 한 후 사용자(Client) 가 볼 수 있게 재포장(압축) 해서 사용자의 동영상 Player 형태에 맞게 보내주는 역할) HTTP, RTP, WebRTC를 포함한 네트워크 스트리밍 프로토콜 등 다양한 기능 지원 openVidu란? ttps://docs.o..