괴물공장 괴물공장

무료 아이콘팩을 제공하는 Ionicons의 경우, 따로 아이콘을 위한 리소스 관리가 필요 없다는 점에서 웹 혹은 앱 개발 시, 자주 사용되고 왠만한 기본 아이콘이 제공되고 있어서 자주 사용되고 있다. https://ionicons.com/ Ionicons: The premium icon pack for Ionic Framework Ionicons is an open-sourced and MIT licensed icon pack. ionicons.com 하지만 SVG 파일만 제공하고 있기 때문에 UX 디자인 과정에서는 SVG 파일 사용이 불가능하기 때문에 PNG, JPG 파일이 필요한데, SVG 파일에서 편리하게 PNG 파일을 추출할 수 있는 사이트가 있어 공유한다. 추가로 해당 사이트의 경우에는 SVG ..

Expo는 Facebook, Google 계정과 연동할 수 있는 패키지를 제공하고 있음. 이를 위해서는 Facebook, Google 개발자 사이트에 접속하여 권한을 등록한 후 Expo 코드에서는 고유ID를 통해 계정 정보에 접속하면 됨. Facebook - Expo Documentation behavior (string) -- The type of login prompt to show. Must be one of the following values: 'system' (iOS default) -- Attempts to log in through the Facebook account currently signed in through the device Settings. This will fallback ..

언젠가 한번쯤 아이들과 함께 모바일 게임을 만들어 봐야지라고 생각했었다. 하지만 삶에 치이고 일에 치이다 보니 조금씩 잊혀져 버리고 있었다. 그러다 몇일 전, 첫째(11세)가 가르쳐주지도 않은 파워포인트의 액션 기능들을 가지고 이상한 복불복 게임을 만들어서 둘째에게 자랑하는 모습을 보게 되었다. "아.. 피는 못 속이는 구나, 얘도 공돌이구나.." 개발 관련 공부는 나중에 얘가 하고 싶어하면, 기회가 되면 시켜봐야지 했는데, 본인도 하고 싶어하고 관심도 있어 보이니 간단한 게임을 하나 만들어 보기로 했다. 개발툴은 기왕 시작하는거 제대로 해보자는 생각에 나도 공부 할 겸, 딸도 가르쳐 볼 겸 Unity로 정했다. "과연 애가 이걸 이해할 수 있을까?" 라는 의문이 들기도 하지만, 뭐.. 안되면 말고~ 기..

자바스크립트는 웹 브라우저에서 실행되는 언어로 외부 모듈을 가져오는 기능을 지원하지 않았으며 Node.js 또한 이를 지원하지 않았습니다. 하지만 개발 효율성 향상을 위해 ES2015에서 외부모듈을 가져오기 위한 import, export를 지원하였고 Noje.js에서도 이를 지원하게 되었습니다. 외부 모듈 로드 방식은 간단합니다. 외부에 공개할 함수는 함수명 앞에 export를 붙이고 모듈을 불러오는 곳에서는 파일 상단에 import 키워드를 사용하면 됩니다. // export_module.js export function add (a, b) { return a + b } export function mul (a, b) { return a * b } // main.js import { add, mul ..

Node.js는 비동기 처리 방식을 권장하지만 상황에 따라서 비동기 함수들이 순차적으로 처리해야 하는 상황이 있다. 별다른 고려 없이 순차 처리를 지원하기 위해서는 콜백함수 내 콜백함수를 지정하게 되고 호출의 중첩이 심화되고 코드의 가독성이 심하게 떨어지게 되고, 개발 효율 또한 상당히 저하된다. (aka 콜백지옥) 아래는 비동기함수를 이용하여 a.txt, b.txt, c.txt 3개 파일을 순차적으로 로드하는 코드이다. const fs = requre('fs') fs.readfile('a.txt', 'utf-8', (err, data) => { console.log('read a.txt', data) fs.readfile('b.txt', 'utf-8', (err, data) => { console.lo..

Node.js는 효율적인 자원운용을 위해 비동기 처리를 기본으로 함으로 동기 처리를 기본으로 하는 여타 다른 프레임워크와는 함수의 사용 방식에 조금 차이가 있습니다. 아래 코드에서 상단이 일반적인 파일 로드를 위한 동기적 파일 로드 함수의 사용 예제이며, 하단이 비동기적 파일 로드 방식입니다. readFile 함수 호출 시, readHandler 함수를 인자로 전달하여 파일 로드가 완료되면 readHandler가 호출되는 방식입니다. const fs = requre('fs') // --- 동기적 파일 로드 -- const data = fs.readFileSync('test.txt', 'utf-8') consol.log(data) // --- 비동기적 파일 로드 -- fs.readFile('test.txt..

Protopie는 최근 주목 받고 있는 UX Deisgn Tool로 Sketch와 같이 매우 직관적인 Design UX와 함께 다양한 Interaction지원을 지원함으로써 잘만 활요하면 많은 시간이 소요되는 Prototyping을 단시간에 상당히 완성 높은 결과물을 얻을 수 있다. ProtoPie - Create the most advanced prototypes as easy as Pie Piece complex interactions together, build sensor-aided prototypes and share your amazing creations in a matter of minutes. All in the easiest way possible. www.protopie.io 특히 P..

prisma를 시작히기 전에 터미널에 'yarn add dotenv'를 실행한다. 서버를 먼저 세우고, 그 다음에 primsa 서버 코드를 추가한다. dotenv 모듈 설치 여러가지 환경 설정 파일을 관리하는 패키지로 .env 파일에 설정값을 보관하고 해당 값을 필요한 시점에 가져올 수 있는 역할을 수행한다. > yarn add dotenv src 폴더에 .env 파일을 생성하고 Port 와 같은 Application 전체에서 사용이 필요한 환경 변수를 입력함. GraphQL Sever 생성 server.js 파일에 아래와 같이 코드를 입력함. require("dotenv").config(); import { GraphQLServer } from "graphql-yoga"; const PORT = pro..