전체 글 썸네일형 리스트형 Node.js공부 2 - 맛보기 1. 필요한 모듈 import 하기어플리케이션에 필요한 모듈을 불러올 땐, require 명령을 사용한다.HTTP 모듈을 불러오고 반환되는 HTTP 인스턴스를 http 변수에 저장한다. var http = require("http"); 2. 서버 생성하기위에서 만든 http 인스턴스를 사용하여 http.createServer() 메소드를 실행한다.그 후 listen 메소드를 사용하여 포트 8081과 연결하여 준다. 다음 코드는 언제나 "Hello World"를 리턴하는 포트 8081의 웹서버를 생성해준다. http.createServer(function(request, response) {response.writeHead(200, {'Content-Type: 'text/plain'});response.e.. 더보기 Node.js 공부 1 동아리에서 서버 직무를 맡게되어서 Node.js공부를 미리 하고자 하였다. 참고한 홈페이지는 https://velopert.com/133 이다. 1. Node.js란?NodeJS는 구글 크롬의 자바스크립트 엔진에 기반해 만들어진 서버 사이드 플랫폼을 말한다. 공식사이트에서 쓰여진 그대로 말하자면, Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. Node.js는 이벤트 기반, 논 블로킹 I/O모델을 사용해 가볍고 효율적이다. Node 자체로써는 웹서버 역할을 하지 않습니다. 즉, 일부 라이브러리를 사용하여 HTTP 서버를 직접 작성해야합니다. Node.js 는 그저 코드를 실행할 수 있는 JavaScript 런타임일 뿐입니다. 런타임이란? 런타임은 컴퓨.. 더보기 React Native 공부 10 - 간단한 구현해보기 MyPage 화면을 구성하기 앞서 앞에 배운 내용을 토대로 텍스트 띄우기, 아이콘 띄우기 등 간단한 테스트 소스코드를 구현해 보았다.. import React, {Component} from 'react';import {Text, View} from 'react-native'; export default class TestMyPageScreen extends React.Component{ _onPressLink() { Alert.alert("my 페이지로 넘어가랏!!!"); } render(){ return( Hi This is test message. I hope you'll get better on react-native ); }} 다음과 같이 TestMyPageScreen.js 코드를 작성하였고, .. 더보기 React Native 공부 9 - Handling Text Input and Touch Handling Text Input TextInput은 사용자가 텍스트를 입력할 수 있게 해주는 기본 component이다. onChangeText prop은 text가 변화할 때마다 불리는 function이고, onSubmitEditing prop은 text가 보내질 때마다 불리어 지는 function이다. 아래 예제는 single word마다 🍕로 변형해서 출력해주는 형식이다. import React, { Component } from 'react';import { AppRegistry, Text, TextInput, View } from 'react-native'; export default class PizzaTranslator extends Component { constructor(props).. 더보기 React Native 공부 8 - Layout with Flexbox React Native - Layout with Flexbox component들은 flexbox 알고리즘을 사용하여 그들의 자손들의 layout을 구체화시킬 수 있다. Flex Direction component's style 은layout의 주축을 설정한다. default 는 column 이고 row, column중 하나를 선택 할 수 있다. import React, { Component } from 'react';import { AppRegistry, View } from 'react-native'; export default class FlexDirectionBasics extends Component { render() { return ( // Try setting `flexDirection` .. 더보기 React Native 공부 7 - Dimensions Height & Width 1. Fixed Dimensions (정적으로 지정하기 - 예시) import React, { Component } from 'react';import { AppRegistry, View } from 'react-native'; export default class FixedDimensionsBasics extends Component { render() { return ( ); }} // skip this line if using Create React Native AppAppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics); 2. Flex Dimensionscomponent style에서 fl.. 더보기 React Native 공부 6 - State & Style React Native 홈페이지 - State 1. component를 control 할 수 있는 데이터 타입은 props, state 두 가지 이다. props를 사용하게 되면 component의 수명동안 정적인 형태를 지니게 되며, props는 부모에 의해 설정된다. 반면에, 동적인 데이터(변화할 데이터)들은 state를 사용해야한다. 2. 일반적으로, constructor에서 state 초기화를 선언하고나서 setState 문을 통하여 변화를 요구할 수 있다. 3. 만약, 지속적으로 깜빡거리는 텍스트를 만들고 싶을 경우를 예로 들어보자. blinking component 가 생성되자마자, text는 설정된다. 따라서 text그 자체로는 prop 의 성격을 지닌다. setState가 불리어질때, Bl.. 더보기 React Native 공부 5 - Props 1. 대부분의 components들은 생성될 때 각각 다른 매개변수들로 unique하게 구성됩니다. (구체적으로 표현되기 때문에 각각의 components들이 unique하다고 생각하시면 될 것 같습니다.) 예를 들면, 간단한 React Native component는 Image인데, image를 생성할 때, source라는 prop(속성)을 사용하여 이미지 보이기 및 감추기를 제어할 수 있습니다. 아래 코드에서 {pic} 이라는 괄호를 주목해보면 - 이 괄호(block영역)는 변수 pic을 JSX로 포함시킵니다. 어떤 JavaScript 표현이라도 JSX 내 괄호{ } 안에 표현할 수 있습니다. import React, { Component } from 'react';import { AppRegistr.. 더보기 이전 1 ··· 7 8 9 10 11 다음
