괴물공장 괴물공장

상태(State) 상태(State)는 컴포넌트의 상태를 나타내며, 변화할 수 있는 데이터의 집합 상태는 직접 변경할 수 있다. 상태가 변경되면 컴포넌트를 다시 렌더링한다. 상태는 외부에 비공개하며, 컴포넌트가 스스로 관리해야 한다. 상태는 this.state.xxx를 직접 변경하지 않고 this.setState()를 통해 값을 변경하며, 값이 변경되는 아래 메서드가 자동으로 호출된다. shouldComponentUpdate(nextProps, nextState) componentWillUpdate() render() componentDidUpdate() 프로퍼티 (props) 프로퍼티는 외부에서 컴포넌트와 소통하는 창구 역할 프로퍼티는 읽기 전용이다. 프로퍼티는 부모 요소에서 설정하는 것이다. 소기값과 ..

자바스크립트는 웹 브라우저에서 실행되는 언어로 외부 모듈을 가져오는 기능을 지원하지 않았으며 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..

Create project Github에 접속하여 새로운 프로젝트 저장소를 생성한다. https://github.com/ Build software better, together GitHub is where people build software. More than 36 million people use GitHub to discover, fork, and contribute to over 100 million projects. github.com Add .gitignore 로 설정한다. Node.js 프로젝트를 생성할 때 필요한 설정파일들을 자동으로 생성해준다. 작업할 폴더로 이동하여 github에 생성한 프로젝트를 다운로드 받는다. git clone https://github.com/neotmons/..

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