Props


Props?

prperties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소


Props 특징

1) Props는 부모컴포넌트에서만 사용 가능합니다.

2) 변하지 않는 데이터를 다룰 때 사용합니다.


Props 렌더링 과정 

props 렌더링 → props 값 설정 → props 기본 값 설정 → props 값 검증


1. jsx 내부에서 props 렌더링


this키워드로 props에 접근 가능합니다.


PropComponent.js


import React, {Component} from 'react';
import PropTypes from 'prop-types';

class PropComponent extends Component{
render(){
return(
<div>
<p>안녕하세요, 제이름은 {this.props.name} 입니다.</p>
</div>
)
}

export default PropComponent;


app.js

import React, { Component } from 'react';
import './App.css';
import PropComponent from './component/PropComponent';

class App extends Component {
render() {
return (
<PropComponent name="hyeung"/>
);
}
}

export default App;


실행 결과




2. props 값 설정, 기본값 설정


defaultProps 객체를 이용해서 기본으로 값을 설정 가능하고, 별도 설정이 없다면 기본으로 설정된 값이 사용 됩니다.


값을 설정하는 방법은 두 가지가 있습니다.


1) 클래스 밖에서 설정



PropComponent.defaultProps= {
name : 'default name'
}


2) transform-class-properties 문법


class PropComponent extends Component{
static defaultProps = {
name : '기본 이름'
,age : 30
}
render(){
return(
<div>
<p>안녕하세요, 제이름은 {this.props.name} 입니다.</p>
<p>나이는 {this.props.age}살 입니다.</p>
</div>
)
}
}



3. props 값 검증


props 값 검증을 위해 타입을 지정할 수 있습니다.


1) props type 지정


type역시 값 설정과 같이 두가지 방법으로 설정이 가능합니다.


isRequired를 사용하면 필수값으로 지정이 가능합니다.


import React, {Component} from 'react';
import PropTypes from 'prop-types';

class PropComponent extends Component{
static defaultProps = {
name : '기본 이름'
,age : 30 // 제거 시 에러(isRequired)
}
static propTypes = {
name : PropTypes.arrayOf(PropTypes.string)
,age : PropTypes.number.isRequired
}
render(){
return(
<div>
<p>안녕하세요, 제이름은 {this.props.name} 입니다.</p>
<p>나이는 {this.props.age}살 입니다.</p>
</div>
)
}
}
PropComponent.defaultProps= {
name : 'default name'
}

PropComponent.propTypes = {
name : PropTypes.string
}

export default PropComponent;

 

2) props type 종류

- array : 배열

- bool  : true, false

- func  : 함수

- number : 숫자

- object : 객체

- string : 문자열

- symbol : ES6문법의 심볼 객체

- node   : 렌더링할 수 있는 모든 것(숫자, 문자열, element 또는 이들로 구성된 배열)

- element : 리액트 요소

- instanceof(MyClass) : 특정 클래스의 인스턴스

- oneOf(['male','Female']) : 주어진 배열 요소 중 값 하나

- oneOfType([React.PropTypes.string, React.PropTypes.number]) : 주어진 배열 안 요소중 하나

- arrayOf(React.PropTypes.number) : 주어진 종류로 구성된 배열

- objectOf(React.PropTypes.number) : 주어진 종류의 값을 가진 객체

- shape({name:React.PropTypes.string, age:React.PropTypes.number}) : 주어진 스키마를 가진 객체

- any : 아무 종류



3) 타입 관련 error


타입관련된 에러를 직접 발생 시켜 봤습니다.


name 타입을 잘못 입력하고, 

필수값인 age를 입력하지 않았습니다.


PropComponent.js


import React, {Component} from 'react';
import PropTypes from 'prop-types';

class PropComponent extends Component{
static defaultProps = {
// name : '기본 이름'
// ,age : 30 // 제거 시 에러(isRequired)
}
static propTypes = {
// name : PropTypes.arrayOf(PropTypes.string)
name : PropTypes.string
,age : PropTypes.number.isRequired
}
render(){
return(
<div>
<p>안녕하세요, 제이름은 {this.props.name} 입니다.</p>
<p>나이는 {this.props.age}살 입니다.</p>
</div>
)
}
}

export default PropComponent;

  

app.js

 
class App extends Component {
render() {
return (
<PropComponent name={3} />
);
}
}


페이지는 정상적으로 렌더링 되는 것처럼 보이지만




개발자 도구 콘솔창에는 에러가 발생 했습니다.


첫 번째는 string 타입인데 number 타입을 적용 한 경우

두 번째는 필수값을 입력하지 않아 undefined가 들어가서 발생한 경우 입니다.




관련 포스팅

[React] State

[React] Props



참고 : 리액트를 다루는 기술(저:VELOPERT)




저작자표시 비영리

'언어 > ReactJS' 카테고리의 다른 글

[React] 컴포넌트 반복  (0) 2019.05.05
[React] Ref  (0) 2019.05.02
[React] 이벤트 핸들링  (2) 2019.04.25
[React] State  (0) 2019.04.12
[React ]개발 환경  (1) 2019.04.08

React 개발환경


1. React?



React는 자바스크립트 라이브러리로 오직 View만 신경쓰는 라이브러리 입니다.


React는 DOM을 복사해서 Virtual DOM을 사용합니다.


변화가 생겼을 때 페이지 전체를 렌더링 하지않고, 변화한 부분만 실제 DOM에 적용하는 방식을 사용합니다. 



2. 개발 환경




1) Node.js / npm 설치


Babel, Webpack등을 사용하기 위해 NodeJS와 npm 설치가 필요합니다.


아래 URL에서 다운 가능합니다.


https://nodejs.org/ko/download/


설치를 완료하고 node -v 명령과 npm-v 명령으로 

노드와 npm 버전 확인이 가능합니다.




2) yarn 설치




npm은 의존하는 라이브러리 개수가 많으면 속도가 매우 저하 되기때문에 yarn 도구도 설치해줍니다.


아래 URL에서 windows용 다운 가능합니다.


https://yarnpkg.com/en/docs/install#windows-stable


yarn 역시 yarn -v명령으로 버전확인이 가능합니다.


해당 명령이 실행되지 않을 경우

 

yarn이 설치되어있는 경로 \bin폴더 까지 환경변수를 잡아주시면 됩니다.


3) VSCODE 설치



Visual Studio Code는 에디터 이지만, 


javascript 외에도 확장 프로그램을 설치하면 


C, Java, Spring boot 등 다양한 언어도 사용 가능해서 간편합니다.


아래 URL에서 설치 다운 가능 합니다.


https://code.visualstudio.com/download



3. 테스트 프로젝트 생성


1) create-react-app 도구 설치


npm, yarn 도구 둘다 설치 가능합니다.


저는 yarn을 이용해서 전역으로  설치했습니다.


터미널에 다음과 같이 입력해서 설치합니다.


> yarn global add create-react-app


2) 프로젝트 생성


create-react-app 도구를 이용해서 프로젝트를 생성합니다.


터미널에 다음과 같이 입력해서 설치합니다.


> create-react-app 프로젝트 명


프로젝트명으로 대문자는 사용이 불가합니다.


작업 환경에 따라서 1분~3분정도 소요됩니다.



3) 로컬 서버 실행


프로젝트가 생성되었으면, 해당 프로젝트로 이동 후


터미널창에 아래와 같이 입력하면 빌드후 로컬 서버가 실행됩니다.


로컬서버는 기본으로 3000번으로 열립니다.


파일이 수정될때마다 자동으로 다시 빌드하고 페이지를 리로드합니다.


> yarn start




참고 : 리액트를 다루는 기술(저:VELOPERT)

저작자표시 비영리

'언어 > ReactJS' 카테고리의 다른 글

[React] 컴포넌트 반복  (0) 2019.05.05
[React] Ref  (0) 2019.05.02
[React] 이벤트 핸들링  (2) 2019.04.25
[React] State  (0) 2019.04.12
[React] Props  (1) 2019.04.11

트리(Tree)


트리(Tree)?

트리는 비 선형(Non-linear) 자료구조로 root(부모), leaf(자식)로 구성됩니다.


트리의 레벨은 깊이를 의미하며, 높이는 가장 높은 레벨을 의미합니다.


이진트리?

이진트리 : 이진트리는 가장 널리 쓰이는 트리의 형태로, 자식을 1~2개만 가지는 트리



이진트리의 레벨이 d, 노드의 수가 N이라고하면

아래 식을 만족합니다.

완전 이진트리?


최 하위 노드를 제외하고 자식노드가 꽉찬 트리


연결리스트를 이용한 이진트리 예제


트리는 비 선형구조라 순서가 없지만, 자동으로 입력하기위해 순서를 부여 하였습니다.


tree로 사용할 구조체 


값, 자식 노드(left, right)와 

값을 자동으로 넣기 위해 next 할당


초기 root와 부모노드를 위한 변수 parent 선언


parent 노드를 지정해주면서 left, right에 값을 할당


#include "stdio.h"
#include "stdlib.h"

typedef struct _tree
{
char value;
struct _tree *left;
struct _tree *right;
struct _tree *next;
} tree;

tree *root, *parent;


초기화 함수


void init_tree(void){
root = (tree*)malloc(sizeof(tree));
root->left = NULL;
root->right = NULL;
root->value = '\0';
parent = root;
}


트리에 값을 넣는 함수


임시 트리에 값을 할당하고, 최초 root인 경우를 제외하고는 left, right에 할당


tree *addVaule(char value){
tree *new;
new = (tree*)malloc(sizeof(tree));
new->value = value;
new->left = NULL;
new->right = NULL;
if(parent->value != '\0' && parent->left != NULL && parent->right != NULL){
if(!parent->right->next)parent->right->next = new;
parent = parent->next;
}
if(parent->value=='\0'){ // root
parent->value = new->value;
}else if(parent->left == NULL){ // left
parent->left = new;
if(!parent->next)parent->next = new;
}else{ // right
parent->right = new;
if(!parent->left->next)parent->left->next = new;
}
}


순서대로 전위, 중위, 후위 순회 방식으로 출력하는 함수


재귀 방식을 사용해서 출력 합니다.


void printPreorder(tree *t){
printf("%-2c",t->value);
if(t->left)printPreorder(t->left);
if(t->right)printPreorder(t->right);
}
void printInorder(tree *t){
if(t->left)printInorder(t->left);
printf("%-2c",t->value);
if(t->right)printInorder(t->right);
}
void printPostorder(tree *t){
if(t->left)printPostorder(t->left);
if(t->right)printPostorder(t->right);
printf("%-2c",t->value);
}


메인함수

트리를 초기화 한 후 A~G 문자를 삽입 한 후 

전위, 중위, 후위 순회에 맞게 출력합니다.

void main(){
init_tree();
char treeValue[] = {'A','B','C','D','E','F','G'};
for(int i=0; i<sizeof(treeValue); i++){
addVaule(treeValue[i]);
}
printf("PreOrder : ");
printPreorder(root);
printf("\nInOrder : ");
printInorder(root);
printf("\nPostOrder : ");
printPostorder(root);
}

아래와 같은 이진 트리를 생성하고 순회합니다.



실행결과


참고 : C로 배우는 알고리즘 (이재규)



관련 포스팅



저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 삽입 정렬(Insertion Sort)  (0) 2019.04.19
[C] 선택 정렬(Selection Sort)  (0) 2019.04.19
[C] 큐(Queue)  (2) 2019.04.01
[C] 스택(Stack)  (1) 2019.03.29
[C] 연결리스트(LinkedList)  (0) 2019.03.28

큐(Queue)


큐(Queue)?

큐는 FIFO(First In First Out)구조로 가장 먼저 들어간 값이 가장먼저 나오는 구조입니다.


삽입하는 put 동작과 삭제하는 get 동작이 있습니다.


front(앞)에서 값을 얻어내고, rear(뒤)에 값을 넣습니다.


1. 큐 형태


2. 큐 종류


큐의 종류는  선형 큐, 원형 큐, 우선순위 큐 등이 있습니다.


- 선형 큐(Linear Queue) : 기본적인 큐의 형태로 막대모양의 큐로 빈 공간 사용 시 모든 자료를 꺼내거나 옮겨야 한다는 단점이 있음

- 원형 큐(Circular Queue) : 선형큐의 단점을 보완하는 구조로 front와 rear가 연결된 형태

- 우선순위 큐(Priority Queue) : 데이터 삽입 시 우선순위에 따라 정렬 후 저장하는 방식



배열을 이용한 원형 큐 예제


원형큐의 경우 front, rear 구분을 위한 공간이 하나 필요합니다.

그래서, 크기가 10인 큐의 경우 사용가능한 공간은 9가 됩니다.


큐로 사용할 int형 배열 선언 및 초기화 함수


#include "stdio.h"
#define MAX 10

int queue[MAX];
int front, rear;

void init_queue(){
front = rear = 0;
}


초기화 함수


front와 rear값을 같게하면 초기화 가능


void clear_queue(){
front = rear;
}


put 함수


(rear+1) % 큐 크기 == front 일 경우 오버 플로우 발생


int put(int k){
if((rear+1) % MAX == front){
printf("QUEUE OVER FLOW!\n\n");
return -1;
}else{
queue[rear] = k;
rear = ++rear % MAX;
return 1;
}


원형큐는 아래 그림과 같이 모듈러를 생각하면 편합니다.

get 함수


front와 rear가 같을 경우 빈 값이므로 언더플로우 발생


int get(){
int k;
if(front == rear){
printf("QUEUE UNDER FLOW!\n\n");
return -1;
}else{
k = queue[front];
front = ++front % MAX;
return k;
}
}


큐의 값을 출력하는 함수


void print_queue(){
printf("\n");
for(int i=front; i!=rear; ++i % MAX){
printf("queue[%d]=%d\n",i,queue[i]);
}
if(front == rear){
printf("queque is empty!!! \n");
}
printf("\n");
}

메인함수

큐의 크기가 10이므로 10번째 값을 넣을때에 오버플로우가 발생하고,
10번째 값을 가져올 때에는 언더플로우가 발생합니다.

void main(){
init_queue();
put(1);
put(3);
put(6);
put(9);
put(7);
put(2);
put(0);
put(0);
put(10);
put(20); // 10번째 값
printf("################################################################\n");
print_queue();
for(int i=0; i<3; i++){
get();
}
printf("################################################################\n");
print_queue();
for(int i=0; i<7; i++){
get();
}
printf("################################################################\n");
put(0);
put(0);
put(10);
clear_queue();
print_queue();
}

실행결과


참고 : C로 배우는 알고리즘 (이재규)




저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 삽입 정렬(Insertion Sort)  (0) 2019.04.19
[C] 선택 정렬(Selection Sort)  (0) 2019.04.19
[C] 트리(Tree)  (0) 2019.04.07
[C] 스택(Stack)  (1) 2019.03.29
[C] 연결리스트(LinkedList)  (0) 2019.03.28

스택(Stack)


스택(Stack)?

스택은 LIFO(Last In First Out)구조로 


가장 나중에 들어간 값이 가장먼저 나오는 구조입니다.


삽입하는 PUSH와 삭제하는 POP 동작이 있습니다.


1. 스택 형태


2. PUSH


3. POP



배열을 이용한 예제


스택으로 사용할 int형 배열 선언 및 초기화 함수


#include "stdio.h"
#define MAX 10


int stack[MAX];
int top;


void init_stack(void){
top = -1;
}


스택에 push하는 함수


스택 크기보다 크면 오버플로우 발생


int push(int t){
if(top >=MAX-1){
printf("########### STACK OVER FLOW ###########\n");
return -1;
}else{
stack[++top] = t;
return t;
}
}


스택에서 pop하는 함수


스택 크기보다 작으면 오버플로우 발생


int pop(void){
if(top<0){
printf("########### STACK UNDER FLOW ###########\n");
return -1;
}
return stack[top--];
}

스택의 값을 출력하는 함수


void print_stack(void){
printf("PRINT STACK \n");
for(int i=top; i>=0; i--){
printf("%-6d",stack[i]);
}
printf("\n");
}

메인함수

11개의 값을 push할 경우 10개는 정상적으로 push 되지만,
나머지 1개의 값은 스택 오버플로우가 발생합니다.

두번째 pop을 수행할 때 5개의 값은 정상적으로 pop 되지만,
나머지 1개의 값은 스택 언더플로우가 발생합니다.

void main(){
init_stack();
printf("########### PUSH ###########\n");
for(int i=0; i<11; i++){
push(i);
}
print_stack();
printf("########### POP ###########\n");
for(int i=0; i<5; i++){
pop();
}
print_stack();
for(int i=0; i<6; i++){
pop();
}
}

실행 결과

참고 : C로 배우는 알고리즘 (이재규)






저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 삽입 정렬(Insertion Sort)  (0) 2019.04.19
[C] 선택 정렬(Selection Sort)  (0) 2019.04.19
[C] 트리(Tree)  (0) 2019.04.07
[C] 큐(Queue)  (2) 2019.04.01
[C] 연결리스트(LinkedList)  (0) 2019.03.28

연결리스트(LinkedList)



연결리스트(LinkedList)?

연결리스트는 동적인 자료구조로 배열처럼 메모리에 연속된 공간을 차지하지 않습니다.


1. 단순 연결리스트(Simple LinkedList)


노드와 다음링크를 가리키는 링크로 구성


처음 시작을 의미하는 head와 마지막 노드인 tail로 구성

2. 환형 연결리스트(Circular LinkedList)


가장 마지막 노드가 처음의 노드를 가리키는 연결리스트

3. 이중 연결리스트(Doubly LinkedList)


전, 후 노드를 가리키는 링크를 가지는 연결리스트


단순 연결리스트 예제


구조체 (key, value, 다음을 가리키는 링크로 구성) 선언


typedef struct _node
{
int key; // key
char *value; // value
struct _node *next; // 다음 노드의 위치
} node;
node *head, *tail; // head, tail


초기화 함수

head 와 tail 초기화


void init_list(void){
head = (node*)malloc(sizeof(node));
tail = (node*)malloc(sizeof(node));
head -> next = tail;
tail -> next = tail;
}

노드 삽입 함수
입력받은 노드의 다음에 삽입


node *insert_list(int key, char *value, node *t){
node *s;
s = (node*)malloc(sizeof(node));
s->key = key;
s->value = value;
s->next = t->next;
t->next = s;
return s;
}

노드 삭제 함수
입력받은 노드를 삭제

int delete_list(node *t){
node *s = head;
while(s->next != tail){
if(s->next==t){
s->next = t->next;
free(t);
break;
}else{
s = s->next;
}
}
}

노드 검색 함수
key를 이용해서 원하는 노드를 검색

node *find_node(int key){
node *s = head->next;
while(s != tail->next){
if(key == s->key){
break;
}else{
s = s->next;
}
}
return s;
}


전체 검색 함수

void findAll(){
node * t = head->next;
printf("#########findAll()########\n");
while(t != tail){
printf("find(%d) = %s , address = %d\n",t->key,find_node(t->key)->value,&t->next);
t = t->next;
}
printf("##########################\n");
}

메인 함수
노드 초기화 후 5개 데이터를 추가하고 2개의 데이터 삭제 후 전체 출력

void main(){
init_list();
insert_list(0,"apple",head);
insert_list(1,"banana",find_node(0));
insert_list(2,"melon",find_node(1));
insert_list(3,"grape",find_node(2));
insert_list(4,"pineapple",find_node(3));

delete_list(find_node(2));
delete_list(find_node(1));
findAll();
}

실행 결과


참고 : C로 배우는 알고리즘 (이재규)


관련 포스팅


[Data Strcuture] - 트리(Tree)

[Data Strcuture] - 큐(Queue)

[Data Strcuture] - 스택(Stack)

[Data Strcuture] - 연결리스트(LinkedList)




저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 삽입 정렬(Insertion Sort)  (0) 2019.04.19
[C] 선택 정렬(Selection Sort)  (0) 2019.04.19
[C] 트리(Tree)  (0) 2019.04.07
[C] 큐(Queue)  (2) 2019.04.01
[C] 스택(Stack)  (1) 2019.03.29

VSCODE 환경 C개발환경


Visual Studio Code에서 C개발 환경 설정 방법입니다.


1.MinGW 다운로드


아래 URL에서 다운가능합니다.


https://sourceforge.net/projects/mingw-w64/files/latest/download


2. 환경변수 설정


아래 경로와 같이 설치된 경로 \bin폴더까지 복사를 한 후


D:\Program Files (x86)\mingw-w64\i686-8.1.0-posix-dwarf-rt_v6-rev0\mingw32\bin


Path변수에 추가를 해줍니다.




3. gcc컴파일러 확인


커맨드창 혹은 VSCODE 콘솔창에서 


gcc --version 명령을 통해 컴파일러 버전을 확인합니다.



4. 컴파일 및 테스트


컴파일 확인 결과 exe가 정상적으로 생성되는걸 확인할 수 있습니다.



저작자표시 비영리

'언어 > C' 카테고리의 다른 글

[C] 계좌 관리 프로그램  (2) 2017.01.10
[C] 파일 입·출력  (0) 2017.01.05
[C] 자기 참조 구조체와 연결리스트  (2) 2017.01.04
[C] 동적 메모리  (0) 2017.01.03
[C] 공용체  (0) 2016.12.27

VSCODE 환경 SpringBoot 개발환경



보통 스프링 부트를 사용할 때 STS를 주로 사용하지만,


평소에 자주 사용하는 VSCode에 스프링 부트 개발 환경을 구성 해봤습니다.


가장 먼저, VSCode에서 스프링 부트를 사용하기 위해서는 


아래 두 확장 패키지를 설치해야 합니다.


1. Java Extension Pack(Micosoft)

  - java언어 지원 기능, 디버거, 테스트 실행, maven 프로젝트 관리 등의 확장을 패키징 한 패키지

2. Spring Boot Extension Pack(Pivotal)

  - spring 프레임워크에 적용할 수 있는 유용한 기능이 들어있는 패키지


각각 검색해서 설치 후 창을 다시 열어줍니다.




확장 패키지 설치가 끝났다면, JDK 경로를 설정해줍니다.


[파일] - 기본설정 > 설정을 눌러줍니다.



설정에서 JDK를 검색 한 후 


setting.json에서 편집을 눌러줍니다. 



아래 그림처럼 jdk 경로를 추가해줍니다.


 "java.home" : "jdk 설치 경로" 




jdk 설정까지 끝났다면, spring boot 프로젝트를 생성 해보겠습니다.


[보기] - 명령 팔레트 또는 Ctrl + Shfit + P를 입력해줍니다.


명령 팔레트에서 spring Initalizr를 클릭해줍니다.



언어를 선택하는 화면입니다.


JAVA를 선택 합니다.



Group ID를 지정하는 화면입니다.


저는 com.example로 지정했습니다.



Artifact ID를 지정하는 화면입니다.


저는 demo대신 test로 지정했습니다.



spring boot 버전 선택 화면입니다.


저는 Current 버전인 2.1.3 버전을 선택했습니다.



추가 도구(의존성)를 선택하는 화면입니다.


Spring Boot 개발 도구와 

서블릿을 사용을 위한 Web은 

필수로 선택 해야 할 것 같습니다.



기본적으로 만들어지는 프로젝트 구조입니다.



.\mvnw spring-boot:run 명령을 실행하면 

 

테스트 코드가 동작하는 걸 확인 할 수 있습니다.



저작자표시 비영리

'언어 > Spring' 카테고리의 다른 글

[Spring] 파일 업로드 null 파일(?) 생성  (0) 2017.11.09

자바스크립트 자료형



자바스크립트는 var, const, let 키워드를 사용하고, 값에 따라서 자료형이 달라집니다.


자바스크립트의 자료형은 아래와 같습니다.


- Boolean   : true, false

- Number    : 64비트 형식의 IEEE 754값으로 정수나 부동소수

              상징적인 값 - 숫자가 아님(NaN), 무한대(Number.MAX_VALUE, Number.MIN_VALUE)

- String    : 문자열

- undefined : 값을 할당하지 않은 변수의 값

- null      : 존재하지 않는 값을 가리키는 값

- Object    : 객체(Collection), 대표적으로 Array와 Date가 있음

  객체이름.변수명 = 값 형태 또는 객체이름['변수명']=값 의 형태로 사용 가능


아래 코드처럼 typeof함수를 제공하기때문에 


typeof함수로 타입을 확인할 수 있습니다.


var age = 50;
var name = "홍길동";
var testYn = false;

// typeof로 타입을 확인 할 수 있는 typeof함수를 제공
console.log('나이 타입 == ',typeof(age), "이름 타입 == ",typeof(name));
console.log('테스트 여부 == ',jobYn, "테스트 타입 == ",typeof(testYn ));


undefined와 null은 전혀 다른 존재입니다.


값을 할당하지 않았을 때 undefined이 들어있습니다.


일치연산자(===)를 사용하면 값과 타입까지 비교 가능합니다.


var undefinedT;
var nullT = null; 

// undefined과 null은 전혀 다른 존재
console.log("undefined == ",undefinedT);
console.log("null == ",nullT);

// 추가로 일치 연산자(===)는 값과 타입까지 비교
// 비교연산자로 값과 타입 비교
if(undefinedT==undefined && typeof(undefinedT)=='undefined'){
    console.log("비교연산자 테스트");
}
// 일치연산자로 값과 타입 비교
if(undefinedT===undefined){
    console.log("일치연산자 테스트");
}



저작자표시 비영리

'언어 > JavaScript' 카테고리의 다른 글

[JavaScript] replace() method  (0) 2017.11.09

Express를 이용한 NodeJS 웹서버 구축


안녕하세요 오늘은 요새 공부중인 NodeJS로 웹서버를 구축 해 보겠습니다.


짧은 시간에 웹서버를 구축할 수 있다는 소문을 듣고


로컬 웹 서버 구축을 해보게 되었습니다.


가장 먼저 아래 명령을 이용해서 express-generator 패키지를 설치합니다.


express프레임워크 중에서 express-generator 패키지가 

기본 프로젝트 구조까지 잡아주는 패키지라고 합니다.


npm i -g express-generator



패키지를 설치하신 뒤에는 원하는 경로로 이동한뒤에 


아래와 같은 명령으로 프로젝트를 생성합니다.


express 프로젝트 이름 --view=템플릿 엔진



프로젝트를 생성 후 이동해보면 기본 구조대로 


프로젝트가 생성되어 있습니다.



해당 프로젝트의 경로로 이동한 뒤 


아래와 같은 명령을 입력합니다.


npm i



package-lock.json 파일이 생성되고, 필요한 패키지들을 추가 해줍니다.



다음과 같이 npm start 명령을 실행하면


기본으로 설정된 웹서버가 구동이 됩니다.



아래와 같이 방화벽 경고 창이 뜨는데 


엑세스 허용 해주시면 됩니다.



http://localhost:3000 으로 접속해보면


아래와 같은 테스트 페이지가 뜨는걸 확인할 수 있습니다.



웹서버에 접속하면 터미널에 Web Access 로그가 찍히는 것도 확인 할 수 있습니다.



마지막으로 자동으로 생성된 프로젝트 구조입니다.



구조에 대한 상세한 설명은 다음 포스팅에서 이어서 하도록 하겠습니다.





저작자표시 비영리

'언어 > NodeJS' 카테고리의 다른 글

nodemailer 모듈을 이용한 Gmail 연동  (0) 2019.06.02

+ Recent posts

티스토리툴바