어쨌든 공부하는 블로그

expo로 빌드해서 사용하고 있는데 갑자기 이런 경고창이 뜨면서 에뮬레이터와 연결이 되질 않았다 터미널에서 r (reload)를 입력하면 경고창이 뜨는데, 해당 부분을 수정해주고 저장하면 다시 정상적으로 연결되어 화면이 뜬다 코드 상에서 에러가 있을 경우에 reload 하기 전에는 저렇게 연결이 안 되는 것 같다

1. 깃허브에 repository(원격 저장소) 만들기2. 로컬 저장소 만들기프로젝트 폴더에서 Git bash here 누르고$ git init명령어 입력 3. repository와 로컬 저장소 연결$ git remote add origin [URL]URL은 레포지토리에서 Code 버튼 누르면 뜨는 HTTPS 주소다* SSH로 연결시키려면 따로 키 발급이 필요 // 연결된 repository 변경$ git remote set-url origin [URL]// 연결된 repository 삭제$ git remote rm origin// 연결된 repository 확인$ git remote -v  4. 만약 repository에 gitignore 등 파일이 올라가 있을 경우(없을 경우 생략)$ git pull..

npx react-native doctor로 확인한 내역... 오늘 닥터를 몇 번이나 호출했는지 모르겠다 처음에는 adb도 에러( Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device. )가 떴는데, 안드로이드 스튜디오에서 가상 머신을 실행시켜주고 나니 해결이 되었다 JDK Error jdk8을 다운받으래서 다운받았었는데 이번엔 jdk버전이 17 이상 20이하여야 된댄다... https://www.oracle.com/java/technologies/downloads/#jdk17-windows 새롭게 jdk17을 다운받아준다 사용자 변수와 시스템 변수에 각각..

react-native run-android 명령어가 안 먹히고 module이 없다... 만 반복해서 한참 헤메던 끝에 남들의 rn 프로젝트랑 내 컴퓨터에 생성된 rn 프로젝트의 폴더 상태가 다르단 걸 깨달음 원래 이렇게 다 있고 android 폴더에서 작업을 진행하면 되는 건데 내 프로젝트 폴더는 이게 전부였다 처음 생성해 보는 거라 이상하다고도 여기질 못함 npm uninstall -g react-native-cli npm install -g react-native-cli npm install -g react-native cmd에서 react native cli을 언인스톨 해주고 다시 인스톨 해 준다 다운받는 과정에서 뭐가 잘못됐었는지... 환경변수 설정에서 뭐가 잘못됐는지... 다시 다운받고 npx..

Effect 특정 코드들이 처음 컴포넌트를 렌더링 할 때에만 실행되고, state가 변경되어 리렌더링 할 때에는 실행되지 않게 하기 위해 사용할 수 있다 function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); useEffect(() => { console.log("Call the API."); }, []); return ( {counter} click me ); } 위와 같이 useEffect의 첫번째 argument에 함수를 넣어두면, 첫번째 render 시점에만 동작하고, state가 변경되어 리렌더링되어도 여러 번 실행되지 않는다 딱 한 번만 실행되는 것이다 ..

Props * Props: 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법(인자) function SaveBtn() { return Save Changes; } function ConfirmBtn() { return Confirm; } function App() { return ( ); } 기존의 방식대로라면 버튼을 여러 개 만들 때, 각각 컴포넌트로 만들어주어서 렌더링한다 하지만 각각의 버튼에 공통된 속성들(ex. style)이 들어간다고 가정한다면, 하나의 수정사항이 생길 때마다 모든 버튼 컴포넌트를 수정해야 하는 문제가 생긴다 function Btn(props) { return ( {props.text} ; } function App() { return ( ); } 직접 생성..

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)를 통해 엘리멘트를 만들어내어 랜더 할 수 있다 하지만 사실상 쓸 일 없..

스크롤뷰에 버튼들을 넣고 게임을 실행시켜 보니, 버튼들의 위에서는 스크롤뷰가 제대로 스크롤 되지 않았다 원인은 버튼 오브젝트에 BindEvent를 통해 터치 이벤트를 구현하는 과정에서 UI_EventHandler 컴포넌트에서 상속받았던 IDargHandler 였다 Drag 기능을 쓰지 않음에도 해당 컴포넌트에 IDragHandler가 들어가 있어 버튼 오브젝트가 DragEvent를 가로챈 것이다 public class UI_EventHandler : MonoBehaviour, IPointerClickHandler, IDragHandler 그냥 IDragHanlder를 상속받는 부분을 지우고, 핸들러 관련된 코드를 지워주면 정상적으로 버튼 부분을 드래그 해도 전체 슬라이더가 스크롤 된다 만일 한 게임 내에..

일반적으로 Sprite들은 canvas 위에 올라간 UI의 뒤에 보이게 되는데, 이를 UI 앞으로 보이게 하고 싶었다 우선 Main Camera 외에 UI_Camera를 만들어 준 다음 위와 같이 각 카메라 설정을 해 주면 된다 체크해야 하는 부분은 Main Camera Clear Flags = Don't Clear 또는 Depth Only Culling Mask = Default Depth (UI Camera의 Depth보다 숫자가 높으면 된다) UI Camera Culling Mask = UI Depth 사용할 UI의 Layer는 UI로 설정되어 있어야 한다 그리고 Canvas 컴포넌트에서 Render Mode를 Screen Space - Camera로 변경해 준 다음, UI_Camera를 Rende..