괴물공장 괴물공장

React Native에서 react-native-youtube 패키지를 사용하면 Youtube 영상을 앱 내에서 재생하는 것은 가능하지만 재생하는 Video의 제목과 재생시간, 채널명과 같은 기본정보는 가져오지 못한다. Google API 활용하면 Video의 기본정보를 가져올 수 있다. 어딘가 이를 처리해주는 패키지가 있을 것 같은데, 찾을 수가 없어서 필요한 모듈을 직접 만들어 보기로 했다. 제일 먼저 해야 할 일은 Youtube Data API 이용 권한을 획득하는 것이다. 방법은 간단하다 아래 주소로 이동하여 프로젝트를 생성하고 API Key를 발급 받으면 된다. https://console.developers.google.com/apis/dashboard Google Cloud Platform..

2020년 여름. 코로나19와 연일 계속 되는 기록적인 폭우로 아무 계획 없이 여름 휴가를 맞이하게 되었다. 계획이 없다고 하여 연일 계속되는 야근으로 지친 심신을 무시하고, 휴가를 연기하자니 힘들고, 그렇다고 아무 의미 없이 집에서 넷플릭스나 보며 휴가를 낭비하는건 너무 아깝다. 문득 그동안 막연히 생각하던 서비스를 하나 만들어 볼까? 라는 생각이 들었다. 오늘은 2020년 8월 8일 토요일, 출근까지 남은 시간은 앞으로 열흘 열심히 달리면 얼추 가능하지 않을까? (회사에서 흔히 일어나는 일이고 난 야근에 익숙하니까) "그리고 실패하더라도 뭔가 남는건 있겠지? 아무것도 안하는 것보다는 낫겠지." (예를 들면 패배감이나 피곤함, 허리통증 같은거?) 일단 뭐든 시작이 반이라고 아래와 같이 그럴싸한 계획도 ..

React Native로 별짓을 해도 하단의 네비게이션 바는 다크 모드 적용이 안되서 그냥 styles.xml 파일에서 네비게이션바 색상을 고정시켜 버렸다. 그러니까 되네.. 그냥 할껄.

React Native에서는 Axios를 활용하여 Node.js 서버로 파일을 전송할 수 있다. 일단 Server에 아래와 같이 파일 업로드를 위한 페이지를 생성한다. Clien가 /api/upload 페이지에 post 메시지를 uploadMiddleware, uploadController를 인자로 요청하면, // Server.js server.express.post("/api/upload", uploadMiddleware, uploadController); Upload 페이지는 uploadMiddleware가 호출되고 client로부터 전달받은 데이터 중 "file"이라는 이름을 가진 파일을 uploads/ 폴더에 저장한다. uploadController는 req 에서 서버에 저장된 file 정보(위치..

1. 프로젝트 생성 개발환경 설정 단계에서 Expo를 설치했다면 Expo를 사용하여 React Native 프로젝트를 생성할 수 있다. 프로젝트 생성을 위한 커맨드는 아래와 같다. expo init [Project Name] 명령을 실행하면 사용자는 ① 프로젝트 템플릿 선택(기본, 샘플포함) ② 프로젝트 이름 설정 할 수 있습니다. 2. 프로젝트 실행 프로젝트가 정상적으로 생성되었다면 해당 폴더로 이동하여 서비스를 실행해 줍니다. cd [Project Name] npm start 또는 expo start 정상적으로 서비스가 시작되면 자동으로 웹브라우저에 아래와 같은 화면이 나타나고, 동일한 네트워크에 연결된 Mobile에 Expo 앱을 설치한 후, QR코드를 촬영하면 생성된 프로젝트가 표시된다. 자, 이..

리앤트 네이티브는 Windows / Mac OS에도 모두 사용 가능하지만, iOS향 앱을 빌드하기 위해 필요한 X-Code는 Mac OS에서만 설치가 가능한 관계로 대부분 Mac OS 사용을 권장한다. (강의도 Mac OS가 대부분이다. 쳇!!!) 하지만 수십년(?) 전 처음 PC라는 것을 접할때부터 Windows만 고집한 진성 Windows 유저임으로 (사실 Mac이 없다.ㅠㅠ) 이번에도 Windows를 기준으로 개발환경을 구축하고자 한다. 1. Node.JS 설치 React 및 Javascript 라이브러리 실행을 위한 필수 요소로 아래 주소에서 최신 버전 다운/설치 필요 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript ..

리액트 네이티브 (React Native) 소개 리액트 네이티브는 리액트 작동 원리는 바탕으로 모바일 앱을 제작할 수 이는 페이스북 오픈소스 프레임워크로 자바스크립트 주요 개념(ES6)과 리액트 사용법만 알고 있다면, 단일 소스로 Android, iOS 앱을 동시에 진행할 수 있다. https://facebook.github.io/react-native/ React Native · A framework for building native apps using React A framework for building native apps using React facebook.github.io 리액트 네이티브는 이름에서 설명하듯 C 또는 Java를 이용하여 만든 앱과 구별하기 힘든 Nativie 앱을 개발할 수..