VisualStudio Code 에서 React 개발환경을 설정하는 순서를 나열해 봤습니다.


Typescript

Webpack

React

을 구성했고 추가적으로 

react-hot-loader

Babel

TSLint


를 설정하는 방법을 기술하였습니다.


추후 화면 Capture 를 추가할 예정입니다. (일단은 제가 확인하기 위한 내용으로...)



<source path>\React\>mkdir typescript-react-webpack

<source path>\React\>cd typescript-react-webpack


<source path>\React\typescript-react-webpack>code .

<source path>\React\typescript-react-webpack>mkdir src

<source path>\React\typescript-react-webpack>mkdir build


npm config list


npm set init.author.name "<Your Name>"

npm set init.author.email "yourAccount@woojja.com"

npm set init.author.url "www.woojja.com"

npm set init.license "MIT"



<source path>\React\typescript-react-webpack>npm init -y


Wrote to 

<source path>\React\typescript-react-webpack\package.json:


######################  package.json  ###########################

{

  "name": "typescript-react-webpack",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "JH.Woo <woojja@bachilab.com> (www.bachilab.com)",

  "license": "MIT"

}

###############################################################



Part 1 — Typescript and Webpack


<source path>\React\typescript-react-webpack>npm install --save-dev typescript webpack webpack-cli


<source path>\React\typescript-react-webpack>copy con webpack.config.js


ctlr + z


######################  webpack.config.js  ###########################


var path = require("path");


var config = {

    mode: 'development',

  /*

   * app.ts represents the entry point to your web application. Webpack will

   * recursively go through every "require" statement in app.ts and

   * efficiently build out the application's dependency tree.

   */

  entry: ["./src/app.ts"],


  /*

   * The combination of path and filename tells Webpack what name to give to

   * the final bundled JavaScript file and where to store this file.

   */

  output: {

    path: path.resolve(__dirname, "build"),

    filename: "bundle.js"

  },


  /*

   * resolve lets Webpack now in advance what file extensions you plan on

   * "require"ing into the web application, and allows you to drop them

   * in your code.

   */

  resolve: {

    extensions: ["*", ".ts", ".tsx", ".js"]

  },


  module: {

    /*

     * Each loader needs an associated Regex test that goes through each

     * of the files you've included (or in this case, all files but the

     * ones in the excluded directories) and finds all files that pass

     * the test. Then it will apply the loader to that file. I haven't

     * installed ts-loader yet, but will do that shortly.

     */

    rules: [

      {

        test: /\.tsx?$/,

        exclude: /node_modules/,

        use: ['ts-loader']

      }

    ]

  }

};


module.exports = config;


###################################################################




<source path>\React\typescript-react-webpack>npm  install --save-dev ts-loader



make file : index.html, src/app.ts, and src/some_module.ts


##########################  src/some_module.ts  ########################

const greeting: string = "Hello World!";


export default greeting;

###################################################################


##########################  src/app.ts  ################################

import greeting from "./some_module";


console.log(greeting);

###################################################################


##########################  index.html ################################

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Getting Started with Typescript, ReactJS, and Webpack</title>

  </head>

  <body>

    <script src="build/bundle.js"></script>

  </body>

</html>

###################################################################


<source path>\React\typescript-react-webpack2>copy con tsconfig.json

{

    "compilerOptions": {

      "jsx": "react",

      "module": "commonjs",

      "noImplicitAny": true,

      "outDir": "./build/",

      "preserveConstEnums": true,

      "removeComments": true,

      "target": "ES5"

    },

    "exclude": [

      "node_modules"

    ]

}

ctlr + z


<source path>\React\typescript-react-webpack>npm run build


index.html 실행



console 확인.




Part 2 — ReactJS


<source path>\React\typescript-react-webpack>npm install --save react react-dom


<source path>\React\typescript-react-webpack>npm install --save-dev @types/react @types/react-dom @types/react-router-dom // @types/webpack-env


############################## some_module.ts ==>  Hello.tsx #####################################

// Remember to rename your file to Hello.tsx and

// place it within your src/ directory

import * as React from "react";


interface HelloProps {

  name: string;

}


class Hello extends React.Component<HelloProps, {}> {

  render() {

    return <div>Hello, {this.props.name}</div>;

  }

}


export default Hello;

###################################################################



########################### app.ts ==>  app.tsx  ########################################

import * as React from "react";

import * as ReactDOM from "react-dom";

import Hello from "./Hello";


ReactDOM.render(

  <Hello name="Willson" />,

  document.getElementById("root")

);

###################################################################


##########################  index.html ###############################

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Getting Started with Typescript, ReactJS, and Webpack</title>

  </head>

  <body>

    <!-- this is where our Hello component will get rendered into -->

    <div id="root"></div>


    <script src="build/bundle.js"></script>

  </body>

</html>

###################################################################



########################  webpack.config.js  ############################

var path = require("path");


var config = {

    mode: 'development',

  /*

   * app.ts represents the entry point to your web application. Webpack will

   * recursively go through every "require" statement in app.ts and

   * efficiently build out the application's dependency tree.

   */

  entry: ["./src/app.tsx"],


  /*

   * The combination of path and filename tells Webpack what name to give to

   * the final bundled JavaScript file and where to store this file.

   */

  output: {

    path: path.resolve(__dirname, "build"),

    filename: "bundle.js"

  },


  /*

   * resolve lets Webpack now in advance what file extensions you plan on

   * "require"ing into the web application, and allows you to drop them

   * in your code.

   */

  resolve: {

    extensions: ["*", ".ts", ".tsx", ".js"]

  },


  module: {

    /*

     * Each loader needs an associated Regex test that goes through each

     * of the files you've included (or in this case, all files but the

     * ones in the excluded directories) and finds all files that pass

     * the test. Then it will apply the loader to that file. I haven't

     * installed ts-loader yet, but will do that shortly.

     */

    rules: [

      {

        test: /\.tsx?$/,

        exclude: /node_modules/,

        use: ['ts-loader']

      }

    ]

  }

};


module.exports = config;

####################################################################


<source path>\React\typescript-react-webpack>npm run build



part 3 — Hot Module Replacement in React (react-hot-loader)


npm install --save-dev react-hot-loader


########################  webpack.config.js  #############################

const webpack = require('webpack');


module.exports = {

...,


plugins: [

new webpack.HotModuleReplacementPlugin()

], 

...


}


####################################################################


A huge development boost will give you react-hot-loader (Hot Module Replacement). 

It will shorten your feedback loop during development. 

Basically whenever you change something in your source code, 

the change will apply in your app running in the browser without reloading the entire page.


######################## app.tsx  ##################################

import * as React from "react";

import * as ReactDOM from "react-dom";

import Hello from "./Hello";


ReactDOM.render(

    <Hello name="Willson" />,

    document.getElementById("root")

  );


module.hot.accept();

####################################################################


참고 :

https://medium.com/@francesco.agnoletto/how-to-set-up-typescript-with-babel-and-webpack-6fba1b6e72d5


https://github.com/Kornil/simple-ts-react-app




import * as React from "react";

import * as ReactDOM from "react-dom";

// hot reload for development

import { AppContainer } from "react-hot-loader";


import App from "./App";


import "./style.scss";


const root = document.getElementById("root") as HTMLElement;


const render = (Component: React.SFC) => {

  ReactDOM.render(

    <AppContainer>

      <Component />

    </AppContainer>,

    root,

  );

};


render(App);


if (module.hot) {

  module.hot.accept("./App", () => {

    render(App);

  });

}


module.hot.accept();

####################################################################


Part 4 — Babel



<source path>\React\typescript-react-webpack>npm install --save-dev babel-core babel-loader

<source path>\React\typescript-react-webpack>npm install --save-dev @babel/core source-map-loader

<source path>\React\typescript-react-webpack>npm install --save-dev @babel/preset-typescript @babel/preset-react @babel/preset-env



<source path>\React\typescript-react-webpack>copy con .babelrc

{

  "presets": ["@babel/react", "@babel/typescript", ["@babel/env", { "modules": false }]]

}

ctrl + z



Tokenization is skipped for lines longer than 20k characters for performance reasons.



part 5 — Setting up TSLint


npm install --save-dev tslint tslint-react



########################  tslint.json  ##################################

{

  "extends": ["tslint:recommended", "tslint-react"],

  "rules": {}

}

####################################################################


행복한 고수되십시오. 


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\













Posted by woojja


안녕하세요? 


WebAPI 을 작성하면서 Autofac 을 사용해 보려는데...

이거 뭐... 현명한 선택인지... ^^;


Owin 이 포함되어야하므로...


Install-Package Autofac

Install-Package Autofac.Owin

Install-Package Autofac.WebApi2

Install-Package Autofac.WebApi2.Owin


행복한 고수되셔요.


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













Posted by woojja


PowerShell 을 사용하여 MachineKey 를 작성하는 방법입니다.


Appendix A: How to generate a <machineKey> element

아래 Function 을 PowerShell 에 Copy & Paste 하여 Enter 를 쾅! 칩니다. ^^


# Generates a <machineKey> element that can be copied + pasted into a Web.config file.
function Generate-MachineKey {
  [CmdletBinding()]
  param (
    [ValidateSet("AES", "DES", "3DES")]
    [string]$decryptionAlgorithm = 'AES',
    [ValidateSet("MD5", "SHA1", "HMACSHA256", "HMACSHA384", "HMACSHA512")]
    [string]$validationAlgorithm = 'HMACSHA256'
  )
  process {
    function BinaryToHex {
        [CmdLetBinding()]
        param($bytes)
        process {
            $builder = new-object System.Text.StringBuilder
            foreach ($b in $bytes) {
              $builder = $builder.AppendFormat([System.Globalization.CultureInfo]::InvariantCulture, "{0:X2}", $b)
            }
            $builder
        }
    }
    switch ($decryptionAlgorithm) {
      "AES" { $decryptionObject = new-object System.Security.Cryptography.AesCryptoServiceProvider }
      "DES" { $decryptionObject = new-object System.Security.Cryptography.DESCryptoServiceProvider }
      "3DES" { $decryptionObject = new-object System.Security.Cryptography.TripleDESCryptoServiceProvider }
    }
    $decryptionObject.GenerateKey()
    $decryptionKey = BinaryToHex($decryptionObject.Key)
    $decryptionObject.Dispose()
    switch ($validationAlgorithm) {
      "MD5" { $validationObject = new-object System.Security.Cryptography.HMACMD5 }
      "SHA1" { $validationObject = new-object System.Security.Cryptography.HMACSHA1 }
      "HMACSHA256" { $validationObject = new-object System.Security.Cryptography.HMACSHA256 }
      "HMACSHA385" { $validationObject = new-object System.Security.Cryptography.HMACSHA384 }
      "HMACSHA512" { $validationObject = new-object System.Security.Cryptography.HMACSHA512 }
    }
    $validationKey = BinaryToHex($validationObject.Key)
    $validationObject.Dispose()
    [string]::Format([System.Globalization.CultureInfo]::InvariantCulture,
      "<machineKey decryption=`"{0}`" decryptionKey=`"{1}`" validation=`"{2}`" validationKey=`"{3}`" />",
      $decryptionAlgorithm.ToUpperInvariant(), $decryptionKey,
      $validationAlgorithm.ToUpperInvariant(), $validationKey)
  }
}


그러면 추가한 Generate-MachineKey 를 사용해 봐야겠죠?!


ASP.NET 4.0 application 에서는 Machine Key 작성시 Option Parameter 를 주지 않아도 됩니다.


PS> Generate-MachineKey

<machineKey decryption="AES" decryptionKey="..." validation="HMACSHA256" validationKey="..." />


하지만 ASP.NET 2.0 과 3.5 application 에서는 HMACSHA256 을 지원하지 않으므로 Parameter 로 "SHA1" 을 넣어줘야 한다네요.


PS> Generate-MachineKey -validation sha1

<machineKey decryption="AES" decryptionKey="..." validation="SHA1" validationKey="..." />


ASP.NET 그리고 Web.config 파일에 MachineKey element 를 추가해 줍니다.


<configuration>

  <system.web>

    <machineKey ... />

  </system.web>

</configuration>


행복한 고수되셔요.



woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













'Security' 카테고리의 다른 글

[SECURITY] MachineKey 만들기  (0) 2018.08.03
Posted by woojja



Time Zone Identifiers 정보입니다.

https://docs.microsoft.com/en-us/previous-versions/visualstudio/visual-studio-2008/bb384272%28v%3dvs.90%29


UTC Time 을 Localtime 으로 변경하시려면...


TimeZoneInfo koreaStandardTimeZone 

= TimeZoneInfo.FindSystemTimeZoneById("Korea Standard Time");

DateTime koreaStandardTime 

= TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, koreaStandardTimeZone);

MessageBox.Show(koreaStandardTime.ToString("yyyy-MM-dd HH:mm:ss"));



이렇게 사용하시면 되겠습니다.



행복한 고수되셔요. ^^

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













'.NET' 카테고리의 다른 글

[.NET] Time Zone Identifiers  (2) 2018.07.24
[.NET] Clone  (0) 2017.05.31
[.NET] Collection was modified; enumeration operation may not execute.  (4) 2017.05.30
[.NET] .NET Core Roadmap  (0) 2017.02.10
[.NET] Bit 연산에 대한 내용입니다.  (0) 2014.05.07
[.NET] Telerik Code Convertor  (0) 2014.05.07
Posted by woojja

Node.JS 테스트 중 CentOS 에 rpmforge 를 설치해야만 하게 됐는데요.


찾았던 자료들이 너무 오래되어서 Download Site 가 사라져버려 접속이 안되고 있었습니다.


그래서 업데이트 한 링크를 바탕으로 설치하는 방법입니다.


내용은 

https://centos.pkgs.org/6/repoforge-x86_64/rpmforge-release-0.5.3-1.el6.rf.x86_64.rpm.html

에 있습니다.



  1. Download the latest rpmforge-release rpm from
    http://ftp.tu-chemnitz.de/pub/linux/dag/redhat/el6/en/x86_64/rpmforge/RPMS/
  2. Install rpmforge-release rpm:
    # rpm -Uvh rpmforge-release*rpm
  3. Install rpmforge-release rpm package:
    # yum install rpmforge-release


1. wget http://ftp.tu-chemnitz.de/pub/linux/dag/redhat/el6/en/x86_64/rpmforge/RPMS/  로 Download 받습니다.

2. sudo rpm -Uvh rpmforge-release*rpm 을 실행하여 설치합니다.

3. sudo yum install rpmforge-release 로 Package 를 설치합니다.


다음 산을 넘으러 가보겠습니다.


행복한 고수되십시요. 


woojja ))*

₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩₩













Posted by woojja

계속 업데이트 됩니다. ^^


Default Application 설정

http://www.rubicode.com/Software/Bundles.html#RCDefaultApp




행복한 고수되셔요~ ^^


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













Posted by woojja
2018.02.19 11:20

VisualStudio Code 를 이용하여 React 로 조그만 예제를 만들면서 정리한 내용...


개인적인 정리 내용입니다. 

 


React 를 생성하려면 WebPack이 필요하고 별도의 설정이 필요하지만 대신 

facebook 에서 만든 Create-React-App 을 사용하면 

별도의 WebPack 설치와 설정없이도 React 를 개발 할 수 있다.


npm install -g create-react-app



create-react-app movie-app 은 Terminal 에서 실행하는 것이 좋다.

VS Code 에서 실행 시 Error 가 발생한다.



cd movie-app



vscode terminal 에서 


npm start


port 를 바꾸고 싶을 때는 

"PORT=4000 npm start" 

를 입력한다.


propTypes


propTypes 변수에 담아야 한다.


    static propTypes = {

        title:PropTypes.string.isRequired,

        image:PropTypes.string.isRequired

    }



React Life Cycle


Render : componentWillMount() => render() => componentDidMount()


Update : componentWillReceiveProps() => shouldComponentUpdate() = true => componentWillUpdate() => render() => componentDidUpdate()


State 는 state 배열에 담아야 한다.

state 를 변경할 때는 

      this.setState({greeting : 'woojja'}) 와 같이  setState 를 사용하여 값을 변경


state  를 변경하면 render 가 다시 실행된다.


        movies : [

            {

              id:16,

              title:'transformer',

              poster:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsdR9axnghll6mVM3Yae1r7Il0A8yGc_JJynAiH_fCXwSANcRj'

            }, 

            ...this.state.movies // '...' : 기존의 Data 를 유지한다는 의미 

        ]


smart component, dumb component



class component (smart component) : state 를 가짐.

class Movie extends Component{


    render() {

        return(

            ...

        );

    }

}


functional component (dumb component) : state 를 가지지 않는다. Life cycle, render function 도 없고 Props 만 가지며 

단순 Return 만 존재한다.


function MoviePoster({image, title}){

    return(<img src={image} alt={title + ' Poster'} />);

}


functional component 의 Validation Check


MoviePoster.PropTypes = {

    poster : PropTypes.string.isRequired

}


Promise : 새로운 Concept (Asynchronous programming)



=> arrow function 에는 return 의미가 포함되어 있음.



www.npmjs.com/package/react-lines-ellipsis


npm install --save react-lines-ellipsis


import LinesEllipsis from "react-lines-ellipsis"




npm run build


  39.99 KB  build/static/js/main.47ccf7c1.js

  706 B     build/static/css/main.a3112408.css


압축해서 build folder 에 넣음.


Package.json 에 아래 구문을 추가

  "homepage" : "https://github.com/iPeterPan/react_movie_app",


변경했으니 다시한번 

npm run build


Install gh-pages and add deploy to scripts in package.json


npm install --save gh-pages


Package.json 에 아래 구문을 추가

"predeploy": "npm run build",

"deploy": "gh-pages -d build"


특정 branch 를 deploy 하려면

"deploy": "gh-pages -b master -d build",


The predeploy script will run automatically before deploy is run.

If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:


First, change your repository's source branch to be any branch other than master.

Additionally, tweak your package.json scripts to push deployments to master:



Deploy the site by running npm run deploy


npm run deploy


Ensure your project’s settings use gh-pages

Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:





  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject",

    "predeploy": "npm run build",

    "deploy": "gh-pages -b master -d build -repo https://github.com/iPeterPan/react_movie_app.git"

  }



행복한 고수되셔요...  ^^


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\













'Web > React' 카테고리의 다른 글

[React] React 정리  (0) 2018.02.19
Posted by woojja
2018.02.08 00:24

이 글은 sachabarbs 님의 글을 번역? 한 것입니다.


https://sachabarbs.wordpress.com/2017/05/15/madcap-idea-part-1-start-of-the-client-side-portion-of-the-web-site/


번역이 매끄럽지 않습니다. 유념하시어 참고만하시기 바랍니다.


MadCap Idea part 1 : 
Start of the Client side portion of the web site


저는 아주 특별한 사람 Peter O'Hanlon 에게 특별한 감사를 표합니다.
Peter O'Hanlon 은 code Project 의 Legend 이며 다방면에서 멋진 친구입니다.
이 엄청난 article 을 검토해도 되겠냐는 저의 요청에 Peter 는 자신의 사업을 운영하는 가족이 있는 사람이며 자신만의 멋진 아이디어를 가졌음에도 불구하고 즉시 예라고 말해 주었고, 일을 마칠수 있게 해주었습니다.
고맙습니다 Peter. 당신께 경의를 표합니다.



실제로 저는 Very 를 (말장난을 용서하세요.) 만들고 싶었지만  단순한 uber type 의 Uber app 을 만들었습니다.  
그 app 에는 다음과 같은 기능적 요구사항이 있습니다.

  • 클라이언트가 사용할 수 있는 web interface 가 있어야 합니다. Client 는 "driver" 가 될수도 탑승하는 "Pickup client(승객)"이 될 수도 있습니다.
  • "Pickup Client" 가 사용할 수 있는  web interface 가 있어야 합니다. 그래서 "Pickup Client" 가 선택한 "Pickup Client" 의 위치를 지도에 표시합니다.
  • "Pickup Client" 는 Pickup 임무를 요청 할 수 있습니다. 이 경우 "Driver" 가 이 임무에 대한 지역에 있는 입찰자 입니다.
  • "Pickup Client" 의 위치는 "Driver" 의 지도상에 보여져야 합니다.
  • "Driver" 는 "Pickup Client" 의 임무에 입찰하며, 입찰한 "Driver(s)" 의 위치는 "Pickup Client" 에게 보여져야합니다. 
  • 입찰에 참여한 "Driver" 의 수락한 정보는 "Pickup Client" 에게 보내집니다.
  • "Pickup Client" 가 "Driver" 를 수락하면 할당된 "Driver(s)" 의 위치만 "Pickup Client" 현재 지도상에 보여집니다.
  • "Driver" 에 의해 픽업되어 "Pickup Client" 가 행복하면  "Pickup Client" 는 "Driver" 를 1~10 점으로 평가할 수 있으면 "Driver" 또한 "Pickup Clinet" 를 1~10 점으로 평가 할 수 있습니다.
  • "Pickup Client" 가 임무를 "완료"로 표시한 후에만 평가를 할 수 있습니다.
  • "Driver" 나 "Pickup Client" 는 항상 자신의 이전 평가를 볼 수 있어야 합니다.

여러분에게는 아이들 장난처럼 보일수도 있지만 (단순히 CRUD 작업을 사용한다면 나에게도 그렇겠지만), 저는 이 App 이 학습경험을 위한 것이기 때문에  간단한 SignalR Hub 와 두개의 database table 을 사용하지는 않을 것입니다.
저는 이 프로젝트를 평소와는 다른 완전히 다른 기술 Set 을 사용하여 작성하려고 합니다.
사용하는 기술의 일부는 초당 수십만건의 요청에도 견딜 수 있도록 쉽게 확장 할 수 있습니다. (Kafka 가 담당합니다.)

사용할 수 있는 가능한 기술들.

  • WebPack
  • React.js
  • React Router
  • TypeScript
  • Babel.js
  • Akka
  • Scala
  • Play (Scala Http Stack)
  • MySql
  • SBT
  • Kafka
  • Kafka Streams
(React/Webpack) 같은 기술들은 다른 blog 에서 다루어졌겠지만 이중 일부는 새로운/통찰력있는 자료가 될 것으로 생각됩니다.
Webpack 에 대해 들어본적이 없어서 새로울 수 있겠지만 여러분에게 충분한 정보가 되길 기대합니다.

천마디 말보다 더 잘 설명하는 한장의 그림이 있습니다.

Demo


Github


다음에 계속 됩니다.


행복한 고수되십시오. ^^


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\














'Web' 카테고리의 다른 글

[Web] MadCap Idea part 1  (0) 2018.02.08
[Web] HTTP Status Error Code  (0) 2013.03.05
Posted by woojja

재미있네요. 


Python 을 좀 보고 있는데요.

글 제목 처럼 Python 에서는 Global Scope 에 있는 변수의 값을 Local Scope 의 코드에서 변경할 수 없대요. 



n = 1

print('Return value of n : ' + str(n))

def func1(g):
return g + n

print('Return value of func1 : ' + str(func1(1)))


def func2(h):
n = 2
return h + n

print('Return value of func2 : ' + str(func2(1)))

print('Return value of n : ' + str(n))



이 녀석들의 결과 값은...



Return value of n : 1

Return value of func1 : 2

Return value of func2 : 3

Return value of n : 1



이렇습니다. ^^;

다른 언어와는 좀 다르네요.




Global Scope 변수의 값을 변경 하려면 이렇게 해야겠네요.



n = 1


print('Return value of n : ' + str(n))


def func3(h):
n = 2
return h + n , n

return_value = func3(5)
print('Return value of func3 : ' + str(return_value[0]))

n = return_value[1]
print('Return value of n : ' + str(n))




이렇게 하면...


Return value of n : 1

Return value of func3 : 7

Return value of n : 2



요렇게 나옵니다. ^^


재밌다고 해야할까요? 여튼 새로운 사실을 하나 알았네요...



행복한 고수되셔요... ^^


woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
















Posted by woojja

 

다음 article 은 MSDN 의 내용을 한글로 바꾼 내용입니다.

참고만 하시기 바랍니다.

 

Tutorial : SignalR 2 시작하기

 

 

이 Tutorial 은 SignalR 을 사용하여 real-time chat application 을 만드는 방법을 보여줍니다.

빈 ASP.NET web application 에 SignalR 을 추가하고 생성한 HTML page 에 message 를 보내고 표시합니다.

 

이 tutorial 은 다음과 같은 Software 의 버전을 사용합니다.

• Visual Studio 2013
• .NET 4.5
• SignalR version 2

 

 

Visual Studio 2012 에서 이 Tutorial 사용하기

Visual Studio 2012 에서 이 Tutorial 을 수행하려면 다음 절차를 따르십시오.

• Package Manager 를 최종버전으로 Update 하십시오. the latest version.

• Web Platform Installer 를 설치하십시오..

• Web Platform Installer,에서  Visual Studio 2012 용 ASP.NET and Web Tools 2013.1 를 검색해서 설치하십시오.  그러면 Hub 같은 SignalR class 용 Visual Studio template 들이 설치될 것입니다.

• 일부 template (OWIN Startup Class 같은) 들은 사용할 수 없으므로 대신 Class 파일을 사용하면 됩니다.

 

 

Tutorial Version

SignalR 의 이전버전에 대한 사항은 SignalR Older Versions. 을 참조하십시오.

 

질문과 의견

이 Tutorial 이 얼마나 맘에 들었는지, 어떻게 하면 개선할 수 있는지 페이지 아래쪽에 의견을 남겨주십시오.

만약 Tutorial 에 직접 연관된 질문이 아니라면 ASP.NET SignalR forum 이나 StackOverflow.com 에 글을 게시할 수 있습니다.

 

 

개요.

이 Tutorial 은 간단한 Browser based chat application 을 개발하는 방법을 보여줌으로써 SignalR 개발을 소개합니다.

빈 ASP.NET web application 에 SignalR library 를 추가하여, client 에 message 를 보낼 hub class 를 생성하고, 사용자들이 chat message 를 보내고 받을 HTML page 를 생성합니다.

MVC 5 의 MVC view 를 사용하는 MVC 5 에서 chat application 을 생성하는 방법을 보여주는 유사한 Tutorial 은 Getting Started with SignalR 2 and MVC 5. 를 참조하십시오.

  

 

노트
이 튜토리얼은 버전 2 의 SignalR 애플리케이션을 생성하는 방법을 보여줍니다.
SignalR 1.x와 2 사이의 변경 사항에 대한 자세한 내용은 SignalR 1.x 프로젝트 업그레이드하기와 Visual Studio 2013 Release Notes 를 참조하십시오.

 

SignalR 은 실시간 사용자 상호작용이나 실시간 데이터 update 가 요구되는 Web Application 을 구축할 수 있도록 하는 Open-source .NET Library 입니다.

Social application, Multiuser Game, Business collaboration, 그리고 뉴스, 날씨 혹은 재무 업데이트 application 등이 예가 될 수 있습니다.


이들은 종종 real-time application 이라 불리웁니다.

SignalR 은 real-time application 구축 process를 간소화 합니다. ASP.NET Server library 와 JavaScript client library 를 포함하고 있어 client-server 연결을 쉽게 관리할 수 있으며 Client 로 content update 를 쉽게 Push 할 수 있습니다.

기존의 ASP.NET application 에 SignalR library 를 추가하면 real-time 기능을 얻을 수 있습니다.


 

Tutorial 은 SignalR 개발 작업 진행을 보여줍니다.
• ASP.NET web application 에 SignalR library 추가하기.
• clinet 에 Content 를 Push 하기 위해서 Hub class 를 생성하기.
• application 을 설정하기 위해 OWIN startup class 생성하기.
• web page 에 SignalR jQuery library 를 추가하여 message 를 보내고 Hub 로 부터 온 Update 사항을 표시합니다.


다음 Screen shot 은 browser 에서 동작하는 chat application 을 보여줍니다. 각 새로운 사용자는 사용자가 chat 에 참여한 후 의견을 게시할 수 있고,  추가한 의견을 볼 수 있습니다.
 

Chat instances


Sections:
• Project 설정
• Sample 실행
• Code 검사
• 다음단계
 

 프로젝트 설정

이 Section 은 Visual Studio 2013 과 SignalR versin 2 를 사용하여 빈 ASP.NET web application 을 생성하는 방법을 보여줍니다.  SignalR 을 추가하고 chat application 을 생성합니다.

 

필수사항:

• Visual Studio 2013.

만약 Visual Studio 를 가지고 있지 않다면 무료 Visual Studio 2013 Express Development Tool 를 얻을 수 있는 ASP.NET Downloads 를 참조하십시오.

 

다음 단계는 ASP.NET 빈 Web Application 을 생성하기 위해서 Visual Studio 2013 을 사용합니다. 그리고 SignalR library를 추가합니다:

 

1. Visual Studio 에서 ASP.NET Web Application 을 생성하십시오.
 

Create web


2. New ASP.NET Project 창에서 Empty 를 선택한 채로 두고 Create Project 를 클릭합니다.
 

Create empty web

 

 

 

3. Solution 탐색기에서, project 를 오른쪽 클릭하여, Add | SignalR Hub Class (v2) 를 선택하십시오. class 의 이름을 ChatHub.cs 로 지정하고 project 에 추가하십시오.

이 단계는 ChatHub class 를 생성하고 project 에 SignalR 을 지원하는 script file 과 assembly references 를 추가합니다.

 

 

Note

Tools | Library Package Manager | Package Manager Console 을 열어 명령을 실행하여 project 에 SignalR 또한 추가할 수 있다.

 

 

install-package Microsoft.AspNet.SignalR

만약 SignalR 을 추가하기 위해 console 을 사용한다면 SignalR 을 추가한 이후에 별도의 단계에서 SignalR hub class 를 생성하십시오.

 

Note

만약 Visual Studio 2012 를 사용한다면 SignalR Hub Class(2) template 을 사용할 수 없습니다.

ChatHub 를 호출하는 대신 평범한 Class 를 추가할 수 있습니다.

 

4.  Solution 탐색기에서 Script node 를 확장합니다. project 내에 jQuery 와 SignalR 용 Script library 가 보일 것입니다.

5. 새 ChatHub class 에 있는 code 를 다음 code로 바꾸십시오.

 

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

 

 

6. Solution 탐색기에서 프로젝트를 오른쪽 클릭하여 나온 메뉴에서 Add | OWIN Startup Class 를 클릭합니다.

새 클래스 이름을 Startup 이라 입력하고 OK 를 클릭합니다.

 

Note

만약 visual Studio 2012를 사용한다면 OWIN Startup class template 을 사용할 수 없습니다.

Startup 을 호출하는 대신 보통 class 를 추가할 수 있습니다.

 

7. 새 Startup class 의 내용을 다음 내용으로 바꾸십시오.

 


using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}   

 

8. Solution 탐색기에서 project 를 오른쪽 클릭해서 나온 메뉴에서 Add | HTML Page 를 클릭합니다.

새로운 page 의 이름을 index.html 로 지정합니다.

>[!NOTE] >JQuery 와 SignalR library 사용하기 위해 reference 의 version number 를 변경해야할 수도 있습니다.

 

9. Solution 탐색기에서 방금전에 생성한 Html page 를 오른쪽 클릭하여 나타난 메뉴에서 Set as Start Page 를 클릭합니다.

10. HTML page 의 기본 code 를 다음 code 로 변경합니다.

 

Note

package manager 가 SignalR script 의 마지막 버전을 설치했을 수도 있습니다.

아래 script reference 가 project 의  script 파일의 version 과 일치하는지 확인하십시오.

(hub 를 추가하는 대신 NuGet 을 사용하여 SignalR 을 추가했다면 차이가 날것입니다.)

 

 


<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion">
        </ul>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box. 
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

 

11. project 전부를 저장하십시오.

 

 

Sample 실행

 

1. project 를 debug mode 로 실행시키기 위해 F5 를 누릅니다. HTML page 가 browser 에 뜹니다 그리고 user name 을 입력하도록 깜빡입니다.
 

Enter user name


 

2. user name 입력

3. browser 의 address line 의 URL 을 복사합니다. 그리고 두개 이상의 browser 에서 엽니다.

각각의 browser 에서 유일한 user name 을 입력합니다.

4. 각 browser 에서 의견을 입력하고 Send 를 click 합니다. 의견이 모든 browser 에 나타날 것입니다.

 

Note

이 간단한 chat application 은 서버에 discussion context 를 유지하지 않습니다. hub 는 모든 현재 user 에게 의견을 broadcast 합니다.

User 는 chat 에 가입한 후에 가입한 시간 후에 추가된 message 를 볼 수 있습니다.

 

 

다음 screen shot 은 세 browser 에서 돌아가는 chat application 을 보여줍니다. 한 instance 가 message 를 보내면 나머지 모든 browser 가 update 됩니다:

 

Chat browsers


 

5. Solution 탐색기에서 실행중인 application 의 Script Document node 를 검사하십시오. hubs 라는 script file  이 SignalR library 에 의해 realtime 에 동적으로 생성됩니다. 이 file 은 jQuery script 와 server-side code 간의 communication 을 관리합니다.


 

 

Code 검사

SignalR chat application 은 두개의 기본 SignalR 개발 작업을 보여줍니다: server 에서 main coordination object 로써 hub 를 생성하는 작업과 message 를 보내고 받는데 SignalR jQuery library 를 사용하는 작업입니다.

 

SignalR Hubs

Code sample 에서 ChatHub class 는 Microsoft.AspNet.SignalR.Hub class 로 부터 파생되었습니다. Hub class 로부터 파생하는 것은 SignalR application 을 구축하는데 사용하는 유용한 방법입니다.

hub class 에 public method 를 생성할수 있어서 web page 의 script 로 부터 호출하여 method 에 접근할수 있습니다.

 

chat code 에서 client 는 새로운 message 를 보내기위해서 ChatHub.Send method 를 호출합니다.

그러면 hub 는 Client.All.broadcastMessage 를 호출함으로써 모든 client 들에게 message 를 보냅니다.

 

Send method 는 몇가지 hub 개념을 보여줍니다.

• client 들이 호출할 수 있는 public method 를 hub 에 선언합니다.  

• 이 hub 에 연결된 모든 client 에 접근하기 위해 Microsoft.AspNet.SignalR.Hub.Clients dynamic property 를 사용합니다.
• client 들을 업데이트 하기위해 client 의 function(broadcastMessage function 같은) 을 호출합니다.

 

public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message);
    }
}


 
SignalR 과 jQuery

Code sample 의 HTML page 는 SignalR hub 와 commiunication 하기 위해 SignalR jQuery library 를 사용하는 방법을 보여줍니다.

code 에서의 필수작업은 hub 를 참조하기 위해 proxy 를 선언하고, client 에 content 를 push 하기 위해 호출할 수 있는 function 을 선언하는 것입니다. 그리고 hub 에 message 를 보내기위해 connection 을 시작하는 것입니다.

다음 code 는 hub proxy 를 위한 reference 를 선언합니다.

 

var chat = $.connection.chatHub;


 

Note

JavaScript 에서 server class 와 class 의 member 에 대한 reference 는 camel case 를 사용합니다.

code sample 에서 C# 의 ChatHub 를 JavaScript 에서 chatHub 로 참조합니다.

 

다음 code 는 script 에서 callback function 을 생성하는 방법입니다.

server 의 hub class 는 이 function 을 이용하여 각 client 에 content update 를 push 합니다.

표시하기전에 content 를 HTML 로 encode 하는 두줄은 선택사항이며 script injection 을 방지하는 간단한 방법을 보여줍니다.

 

chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message.
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page.
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

 

다음 code 는 hub 와의 connection 을 여는 방법을 보여줍니다 code 는 connection 을 시작하고 난뒤 HTML page 의 Send button 의 click event  를 처리하기 위한 function 을 전달합니다.

 

Note

이렇게 하면 event handler 가 실행되기전에 connection 이 설정됩니다.

 


$.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {
            // Call the Send method on the hub.
            chat.server.send($('#displayname').val(), $('#message').val());
            // Clear text box and reset focus for next comment.
            $('#message').val('').focus();
        });
    });

 

다음 단계

여러분은 SignalR 이 real-time web application 을 구축하는 framework 이라는 걸 배웠습니다.

ASP.NET application 에 SignalR 을 추가하는 방법, hub class 를 생성하는 방법, hub 로 부터 message 를 보내고 받는 방법 과 같은 몇가지 SignalR 개발 작업에 대해서도 배웠습니다.

sample SignalR application 을 Azure 에 배포하는 방법에 대한 walkthrough 는 Using SignalR with Web Apps in Azure App Service.를 참조하십시오.

Windows Azure Web Site 에 Visual Studio web project 를 배포하는 방법에 대한 자세한 내용은 Create an ASP.NET web app in Azure App Service. 를 참조하십시오.

고급 SignalR 개발 개념을 배우려면 SignalR source code 와 참조가 있는 다음 사이트에 방문하십시오.


• SignalR Project
• SignalR Github 와 Samples
• SignalR Wiki

 

 

 

행복한 고수 되셔요. ^^

 

woojja ))*

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

 













'.NET > SignalR' 카테고리의 다른 글

[SignalR] Tutorial: Getting Started with SignalR 2  (0) 2017.11.23
Posted by woojja

티스토리 툴바