Post

[영어기초문법] 현재시제 동사, be동사 과거(was, were)

  • 현재 시제 동사
    1. 현재진행 시제로 쓰지 않고 현재 시제로 쓰는 동사.
    2. 다음과 같은 동사는 ing가 아니라 현재 시제로 쓴다.
      want, love, prefer, know, agree, remember
      need, like, hate, believe, understand, forget
    3. have가 가지고 있다는 의미일 땐 현재 시제.
    4. have가 먹다는 의미일 땐 현재 시제, 현재 진행 시제 둘 다 쓸 수 있다.
  • be 동사 과거 시제
    1. ( I / he / she / it ) was
    2. ( we / they / you ) were
  • be 동사 과거 시제 부정문
    1. ( I / he / she / it ) was not / wasn’t
    2. ( we / they / you ) were not / weren’t
  • be 동사 과거 시제 의문문
    1. was ( I / he / she / it )
    2. were ( we / they / you )


Post

Grammar Gateway Basic


현재 시제 부정

1)  I, You, We, They /  don't      / 동사원형

2) He, She, It         /   doesn't   / 동사원형


현재 시제 의문문

1)  do / I, You, We, They / 동사원형

2)  does /   He, She, It    / 동사원형


현재 시제 현재 진행형의 차이
- 현재 시제는 일반적으로 일어나는 일, 주기적으로 일어나는 일을 뜻함
- be 동사(am, are => do / is => does)
- 동사의 형태
- 현재 진행형일 땐 ing
- 현재 시제, 현재 시제 의문문일 땐 반드시 동사 원형
- 3인칭이라서 동사뒤에 s, es가 붙는지


Post

GameObject와 GameComponent 관계
게임 내 모든 Object는 모두 GameObject이다. 하지만 안에 들은 내용물로 각각 다른 GameObject가 된다.
내용물이 바로 Component이다.
GameObjec가 컨테이너(빈상자)라고 생각하면 된다.

Canvas란?
Canvas Component를 가진 GameObject. 모든 UI요소의 부모요소.
Canvas가 없을 땐 어떤 UI를 생성하든 같이 생성된다.

UI 렌더 순서
하이어라키 뷰에 나열된 순서대로(위에서 아래로) 랜더됨.
렌더 순서 함수
// obj가 현재 위치한 계층에서 가장 먼저 렌더링 되도록한다(가장 안쪽)
obj.transform.SetAsFitstSibling();
// obj가 현재 위치한 계층에서 가장 나중에 렌더링되도록 한다(가장 위에)
obj.transform.SetAsLastSibling();
// obj를 현재 위치한 계층에서 3번째 요소가 되는 위치에 놓는다(안쪽에서부터 3번째 렌더링)
obj.transform.SetSiblingIndex(3);

캔버스의 렌더링 모드와 속성
총 3가지 렌더링 속성
*Sceen Space - Overlay
캔버스가 씬 내부 어느곳에 있어도 화면 전체를 덮는 모습.
화면의 크기나 해상도가 변경되면 그에 맞춰서 캔버스의 크기도 자동 변환

*Sceen Space - Camera
카메라 Projection 속성에 따라 다르게 렌더
Perspective라면 원근감 있게 렌더(원근감의 정도는 Field of View속성에 따라 달라짐)

*World Space
캔버스의 소팅 레이어 순서에 따라 렌더됨.

Canvas Scaler 컴포넌트
Canvas에 추가된 컴포넌트.
Canvas안에 있는 UI 전체 요소 의 스케일과 픽셀 밀도를 제어
폰트크기. 이미지..
UI Scale Mode
*Constant Pixel Size
UI 요소의 위치나 크기가 화면상의 픽셀 단위에 의해 설정됨.

*Scale With Screen Size
지정된 참조 해상도에 따라 달라짐
=> 보통은 이걸로 기기해상도를 맞춘다.
너비나 높이를 기준으로 맞추기 때문에 화면이 잘리지 않는다.
참조 해상도는  x 960 y 630
ScreenMatchMode는 0(Width 기준) 으로 하였다.



*Constant Physical Size

화면 해상도와 참조 해상도의 가로세로 비율이 다를 때 캔버스를 스케일하는 방법 설정.


Post


1. Create-UI-Button 생성

2. Canvas와 Button과 EventSystem이 생긴다. 여기서 Button의 Button(Script)로 가서 클릭 시 호출될 함수를 연결해줘야 한다.

(위 사진 처럼 나는 MainCamera 안에 스크립트를 생성했고, MyButtonCilck이란 함수를 연결시켰다)

3.UIExample 스크립트 생성. MyButtonCilck 함수를 선언해서 디버그 메시지를 추가한다.

4. 스크립트가 있는 Main Camera를 연결하고, MyButtonClick함수를 연결시킨다.

5.클릭시 Console 창에 디버그 메시지가 뜬다.



나는 바보같이 OnGUI 함수를 찾고 있었다..

사실 지금도 OnGUI가 뭔지 모르겠다..ㅇ<-<

옛날에 있던 안좋은 함수라는 것 뿐?

아무튼 너무 돌아서 간듯하다 ㅠ


Post

생활코딩 주소 : https://opentutorials.org/course/2136/11915


템플릿 엔진 Jade를 소개


정적 + 동적의 장점을 합쳐서 만든 템플릿 엔진

템플릿 엔진 중 Jade 공부


참고 코드 : http://expressjs.com/ko/guide/using-template-engines.html


1. jade  모듈 설치

npm install jade --save


2. 설치 후 코드에 jade 엔진을 사용하겠다는 소스코드를 추가

app.set('view engine', 'jade');


3. 템플릿이 있는 디렉터리를 알려준다.

그리고 views 라고 하는 디렉터리를 생성.(관습적으로 views라는 이름을 사용)

app.set('views', './views');


4. 템플릿에 대한 라우터 만들기

(템플릿엔진은 send가 아닌 웹페이지를 만들어내는 것이라 render()사용)

그리고 temp.jade라는 파일을 views 안에 만든다.

app.get('/template', function(req, res){

res.rennder('temp');

});


* node app.js가 번거롭다면 supervisor app.js 라고 친다.

 supervisor는 app.js 를 등록하면 app.js 가 수정될 때마다 알아서 재시작을 해준다.


5. temp 안에 head라고 적으면

소스코드 보기에서 <head></head> 라고 찍힌 것을 확인할 수 있다.

그런데 만약 

html

head

body


라고 하면 순서대로
<html></html><head></head><body></body> 라고 나온다.
이유는 안에 들어간다고 알려주지 않았기 때문이다.
알려주려면 tab으로 들여쓰기를 한다.

html

head

body


코드를 보기 좋게 하려면

app.locals.pretty = true;



-(마이너스는 화면에 출력되는 녀석이 아니라는 뜻

한줄 띄면 다음 문장의 태그 생성을 의미하므로

안에 내용을 넣고 싶다면 태그 다음에 한줄 띄지말고

적을 것

 

html

head

body

h1 hello Jade

ul

-for(var i = 0; i<5; ++i)

li coding



만약 시간을 출력하고 싶다면?


html

head

body

h1 hello Jade

ul

-for(var i = 0; i<5; ++i)

li coding

div= time


time이란 변수를 외부에서 줘야 한다.

외부에서 주는 것은 우리가 이 페이지를 호출하는 코드에서 인자를 추가해주면 된다.

app.get('/template', function(req, res){

res.render('temp', {time:Date()});

});


helloWorld.js

var express = require('express');

var app = express();

app.set('view engine', 'jade');

app.use(express.static('public'));

app.locals.pretty = true;

app.get('/template', function(req, res){

res.render('temp', {time:Date()});

});


app.get('/', function(req, res){

res.send('Hello World!');

});


app.get('/login', function(req, res){

res.send('Login Please');

});


app.get('/dynamic', function(req, res){

var lis = '';

for(var i = 0; i < 5; ++i)

{

lis = lis + '<li>coding</li>';

}

var time = Date();

var output = `

<!DOCTYPE html>

<html>

<head>

<meta acharset="utf-8">

<title></title>

</head>

<body>

Hello zzㅋㅋㅋdseer2312312fsdd

<ul>

${lis}

</ul>

${time}

</body>

</html>`;

//var output = ''; 

res.send(output);

});


app.listen(3000, function(){

console.log('Example app listening on port 3000!');

});


temp.jade


html

head

title 타이틀입니다

body

h1 hello Jade

ul

-for(var i = 0; i<5; ++i)

li coding

div= time


Post

Nodejs Express-웹페이지를 표현하는 방법

생활코딩 주소 : https://opentutorials.org/course/2136/11858


웹페이지에 데이터를 보여주는 방식을 공부하는 시간이었다.

정적 데이터로 표현해도 되지만

자바스크립트?? 를 이용해서 좀 더 편리하게 보여줄 수 있다는걸 깨달았다.


var express = require('express');

var app = express();

app.use(express.static('public'));


app.get('/', function(req, res){

res.send('Hello World!');

});


app.get('/login', function(req, res){

res.send('Login Please');

});

/*

app.get('/dynamic', function(req, res){

  var lis = '';

  for(var i=0; i<5; i++){

    lis = lis + '<li>coding</li>';

  }

  var time = Date();

  var output = `

  <!DOCTYPE html>

  <html>

    <head>

      <meta charset="utf-8">

      <title></title>

    </head>

    <body>

        Hello, Dynamic!

        <ul>

          ${lis}

        </ul>

        ${time}

    </body>

  </html>`;

  res.send(output);

});*/


app.get('/dynamic', function(req, res){

var lis = '';

for(var i = 0; i < 5; ++i)

{

lis = lis + '<li>coding</li>';

}

var time = Date();

var output = `

<!DOCTYPE html>

<html>

<head>

<meta acharset="utf-8">

<title></title>

</head>

<body>

Hello zzㅋㅋㅋdseer2312312fsdd

<ul>

${lis}

</ul>

${time}

</body>

</html>`;

//var output = ''; 

res.send(output);

});


app.listen(3000, function(){

console.log('Example app listening on port 3000!');

});

Post

생활코딩 Nodejs Express 설치 + 간단 웹어플 만들기


생활코딩 주소

https://opentutorials.org/course/2136/11885

https://opentutorials.org/course/2136/11886


홈페이지 ( http://expressjs.com/ko/starter/generator.html ) 를 참고하여 Nodejs Express를 설치한다.


express 설치

새로운 디렉터리 생성하고 폴더를 npm 폴더로 만들기 위해서 npm init을 해준다.

그러면 package.json 파일이 생성된다.

그후 npm install --save express 라고 하면 npm이 express 패키지를 다운받는다.

만약 성공적으로 깔렸다면 node_modules 폴더가 생성되어있다.

mkdir temp

cd temp

npm init

npm install --save express


(apckage.json이 이미 있다면 npm init을 해줄 필요는 없다)




Express, 간단한 웹앱 만들기

http://expressjs.com/ko/starter/hello-world.html

이 페이지의 HelloWorld 예제를 따라할 것이다.


***


var express = require('express');

var app = express();


app.get('/', function(req, res){

res.send('Hello World!');

});


app.get('/login', function(req, res){

res.send('Login Please');

});


app.listen(3000, function(){

console.log('Example app listening on port 3000!');

});

***


을 적어서 저장하고 node app.js 명령어로 실행 후

인터넷에 localhost:3000 이라고 치면 Hello World가 뜨는걸 알 수 있다.


사용자는 보통 url을 쳐서 get 방식으로 접속하는 것.

그래서 get 방식으로 ('/') 홈에 들어온 사용자에게 메세지를 줄 수 있다.





Post

생활코딩

카테고리 : Server - JavaScript(NodeJS) - 콜백(callback)함수


node sample.js  라고 치면 sample.js를 실행시킬 수 있다.

하지만 그냥 node라고 치면 자신이 직접 커맨드 창에 입력 할 수 있게 된다.


콘솔창

console.log(1+1)


결과값

2

undefined



콘솔창

a = [3, 1, 2];


결과값

[3, 1, 2];



콘솔창

console.log(a);


결과값

[3, 1, 2]



콘솔창

a.sort();


결과값

[1, 2, 3]

Post

저번에 것 이어서 같은 모듈과 NPM단원이다.


NPM을 이용해 다른 사람이 만든 프로그램을 자신의 프로그램의 부품으로 사용

EX. underscore


npm을 현재 디렉토리를 지정하는 명령어를 사용

더 찾아보니 package.json을 만들어 준다고 한다.

package.json은 대충 프로젝트 내의 사용할 파일을 모아둔 것?? 인 것 같다

( 검색해 봤는데 다들 넘 당연하게 package.json 을 쓰고있다.. ) 

npm init


name이 뜬다. 이프로젝트의 이름을 지정하는 것

server_side_javascript라고 지정한다.

version은 server side javascript tutorials


그 외는 다 Enter 한다. 그러면 package.json이란 파일이 생겼다.

내용은 아래와 같다.( npm 등록한 걸 사용할 수 있는 초석 완료 )

{

  "name": "server_side_javascript",

  "version": "1.0.0",

  "description": "",

  "main": "FirstExServer.js",

  "scripts": {

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

  },

  "author": "",

  "license": "ISC"

}


설치 명령어 +방법

npm install underscore


나는 여기서 에러가 뜸

please include the following file with any support request npm-debug.log


이런 에러가 떴는데, 오타를 score인데 socre이라고 오타나서 그런듯

아니면 관리자 권한으로 프롬프트 실행시키고 

https://superuser.com/questions/42537/is-there-any-sudo-command-for-windows

를 참고해서 runas /noprofile /user:Administrator npm install underscore 라고 치니까 되었다.

에러의 원인은 둘 중에 아마 오타때문에 난 듯 싶다..(명령어 보니까 전부 socre 이라고 치고 있었다;;;)


아무튼 위 명령어를 치면 package.js 가 생기고 node_modules 폴더가 있다.


버전이 underscore@1.8.3 extraneous 라고 뜬다는데 난 안떴음.

이 extraneous는 불완전하게 설치되었다는 뜻임.

안전하게 설치하려면 

npm install underscore --save  


 달라진 부분은 dependencies 라는 부분이 코드에 추가가 됨.

이 패키지는 1.3.8 버전에 의존하고 있다는 걸 표시하는 것.


이제 underscore를 사용해보자

underscore는 기존 array의 함수가 빈약하여 도와주는 역활을 한다.

기존 array의 첫번째 값을 가져오려면 다음과 같다.


var _ = require('underscore');

var arr = [3, 6, 9, 1, 12];

console.log(arr[0]);


이것을


var _ = require('underscore');

var arr = [3, 6, 9, 1, 12];

console.log(_.first(arr));


arr[0] 에서 _.first(arr) 로 바꾸면 똑같이 첫번째 값 3이 나온다.

마지막값은 좀 더 까다롭다.
arr[length-1]를 해야하기 때문이다. 
하지만 _.last(arr) 를 해서 아주 쉽게 가져올 수 있다.


Post

생활코딩에 nodejs 강좌가 있어서 

부랴부랴 듣는중.. 

아래는 정리한것이다.

다하고 리니지m 해야지 ㅋㅋ


모듈과 NPM

https://opentutorials.org/course/2136/11854


1.모듈이란? 모델. 부품. nodejs의 역활. 서버를 만드는 역활

미리 사람들이 만든 웹서버를 배우는 것이 이번장 목표.

nodejs는 http 라는 부품을 가지고 있고, 그 사용설명서를 찾는 법 설명

const http = require('http');             // http라는 모듈을 요청


2.메뉴얼에 나온 함수 사용해보기

우리가 사용하는 컴퓨터의 os를 알아보자


var o = require('os');

console.log(o.platform());



module.js 라고 저장 후 해당 경로로 가서

node moudle.js 라고 치면 자신의 os가 나온다.

나는 윈도우 win32


3. 다른 사람이 만든 모듈을 사용하는 방법? NPM

Node Package Manager


NodeJS가 제공하는 모듈 : HTTP, OS

JavaScript가 제공하는 모듈 : Date, String, Array


타인의 모듈을 사용하는 방법? NPM (Node계의 앱스토어)

www.npmjs.com


npm install uglify-js -g

-g 가 붙으면 전역, 붙지 않으면 사용 프로젝트에만 사용함.

아래 내용이 나옴



`-- uglify-js@3.0.19

  +-- commander@2.9.0

  | `-- graceful-readlink@1.0.1

  `-- source-map@0.5.6


pretty.js 파일 작성


function hello(name){

console.log('Hi,'+name);

}


hello('hihi');


저장 후 uglityjs pretty.js 실행 하면 줄바꿈이 사라진 코드가 보임

uglityjs pretty.js -m 이라고 하면 name이 o로 바뀜. 이름을 바꿔도 상관없는 변수의 이름을 바꿔줌

uglityjs pretty.js -o uglified.js -m 으로 uglified.js -m  파일로 저장할 수도 있고

uglityjs pretty.js -o uglified.js -m 으로 pretty.min.js -m 파일로 작아졌다는 의미를 부여해서 저장할 수 있다.






▲ top