a minute read (About 199 words)

Formidable 설치하기

npm i -S formidable

html 에서 파일 입력받기

1
<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">

입력받은 파일을 formData에 담아 서버로 전송하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
fileChange(event) {
    let fileList: FileList = event.target.files;
    if(fileList.length > 0) {
        let file: File = fileList[0];
        let formData:FormData = new FormData();
        formData.append('uploadFile', file, file.name);
        let headers = new Headers();
        /** No need to include Content-Type in Angular 4 */
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');
        let options = new RequestOptions({ headers: headers });
        this.http.post(`${this.apiEndPoint}`, formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success'),
                error => console.log(error)
            )
    }
}

node server에서 수신하기

1
2
3
4
5
6
7
8
9
10
11
12
13
router.post('/cover_img',function(req,res){
  console.log("커버이미지 저장 시작!");
  var form = new formidable.IncomingForm();
  form.parse(req, function (err, fields, files) {
    console.log(files);
    var oldpath = files.uploadFile.path;
    var newpath = "/var/www/html/contents_cover_img/" + files.uploadFile.name;
    fs.rename(oldpath, newpath, function (err) {
      if (err) throw err;
      res.sendStatus(200);
    });
  })
})

참고자료

2 minutes read (About 293 words)

세팅하기

  1. mongoose 설치
    npm install mongoose
  2. mongoose 임포트 해주기
    var mongoose = require('mongoose');
  3. 몽구를 이용하여 db 연결
    mongoose.connect('mongodb://username:password@host:port/database?options...');
    mongoose를 활용한 nodeje mongodb 연결

ObjectId 이용하기

1
mongoose.Types.ObjectId(req.params._id)

Model을 사용하여 update 하기

1
2
3
4
5
6
7
8
Apply.update({_id:saved_id},req.body,{upsert:true},function(err,docs){
  if(err){
    console.log(err);
    res.sendStatus(500);
  }else{
    res.sendStatus(200);
  }
})

$inc 를 활용하여 increase 하기

undefined

없으면 create하고 있으면 update하기

1
2
3
4
5
6
7
8
9
10
11
12
13
router.put('/',function(req,res){
  console.log("스케줄 업데이트 처리 req.body:", req.body);
  delete req.body._id;

  Schedule.findOneAndUpdate({day:req.body.day, time:req.body.time},req.body,{upsert:true},function(err,docs){
    if(err){
      console.log(err);
      res.sendStatus(500);
    }else{
      res.sendStatus(200);
    }
  })
})

upsert: true 항목을 추가한다.

$or를 활용하여 or 서치하기

1
2
3
4
5
6
7
8
9
10
ar userExists = function(u, callback) {
  User.find({$or:[ {'username': u.username}, {'email': u.email}]} , function(err,user) {
    if (err || user.length > 0) {     // user does not come back null, so check length
        callback(1);
        return;
    }
    //no error, no user
    callback(0);
  });
};

NPM mongoose package Document

3 minutes read (About 407 words)

PagerService 준비하기

출력하고자 하는 데이터를 페이지에 담기 위한 PagerService를 준비한다.

PagerService

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import * as _ from 'underscore';

export class PagerService {
    getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
        // calculate total pages
        let totalPages = Math.ceil(totalItems / pageSize);

        let startPage: number, endPage: number;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        let startIndex = (currentPage - 1) * pageSize;
        let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

        // create an array of pages to ng-repeat in the pager control
        let pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

component.ts 혹은 데이터를 총괄하는 service.ts

컴포넌트에서 사용할 두 변수를 선언한다

1
2
3
4
// pager object
pager: any = {};
// paged items
pagedItems: any[];

컴포넌트에서 pagerService를 import하고 특정 페이지로 이동하기 위한 함수인 setPage()함수를 정의한다.

1
2
3
4
5
6
7
8
9
10
setPage(page: number) {
    if (page < 1 || page > this.pager.totalPages) {
        return;
    }
    // get pager object from service
    this.pager = this.pagerService.getPager(this.contents.length, page,6);

    // get current page of items
    this.pagedItems = this.contents.slice(this.pager.startIndex, this.pager.endIndex + 1);
}

pagedItems에는 받아온 데이터를 pager의 startIndex와 endIndex+1까지로 잘라 담아준다.

component.html

실제 pagination을 입혀준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="row-wrapper">
  <nav class="" style="display:inline-block">
    <!-- pager -->
    <ul *ngIf="paymentService.pager.pages && paymentService.pager.pages.length" class="pagination">
      <li [ngClass]="{disabled:paymentService.pager.currentPage === 1}" class="page-item">
          <a class="page-link direction first" (click)="paymentService.setPage(1)" aria-label="First">First</a>
      </li>
      <li [ngClass]="{disabled:paymentService.pager.currentPage === 1}" class="page-item">
          <a class="page-link direction previous" (click)="paymentService.setPage(paymentService.pager.currentPage - 1)" aria-label="Previous">Prev</a>
      </li>
      <li *ngFor="let page of paymentService.pager.pages" [ngClass]="{active:paymentService.pager.currentPage === page}" class="page-item">
      {% raw %}
          <a class="page-link" (click)="paymentService.setPage(page)">{{page}}</a>
          {% endraw %}
      </li>
      <li [ngClass]="{disabled:paymentService.pager.currentPage === paymentService.pager.totalPages}" class="page-item">
          <a class="page-link direction next" (click)="paymentService.setPage(paymentService.pager.currentPage + 1)" aria-label="Next">Next</a>
      </li>
      <li [ngClass]="{disabled:paymentService.pager.currentPage === paymentService.pager.totalPages}" class="page-item">
          <a class="page-link direction last" (click)="paymentService.setPage(paymentService.pager.totalPages)" aria-label="Last">Last</a>
      </li>
    </ul>
  </nav>
</div>

다음을 클릭할때에는 service.ts의 setPage()를 호출하여 pagedItems를 바꾸어 준다.
만약에 데이터를 index를 통해 나누어 받아오고 싶은 경우에는 setPage()의 if 문에서 범위를 넘는 페이지의 요청에 대해 서버에 요청을 날려 다음 데이터들을 받아올 수 있다.

8 minutes read (About 1202 words)

기본 명령어

새 프로젝트 만들기

ng new [project name]

빌드 및 실행

$ ng build
$ node server.js

참고 페이지

Component

컴포넌트는 어플리케이션을 구성하는 작은 조각이다.

@Component 를 클래스 위에 선언하여 컴포넌트를 꾸며주고 필요한 정보를 명시한다.

Selector

selector는 css선택자이며, 태그의 이름이다.

template

우리가 로드하려고 하는 템플릿을 작성한다.

브래킷인 `안에 작성한다.`

각컴포넌트는 html, css, class를 가진다.

컴포넌트는 template을 가진 일종의 directive이다.

ng generate component [componentname]
을 통해 아주 간편하게 컴포넌트를 생성할 수 있다.

Module

모듈은 우리의 어플리케이션을 angulr하게 조직하기 위해 필요한 것이다.

모든 어플리케이션은 앱을 lauch하기 위한 적어도 하나의 root module을 가진다.

모듈은 기능적으로 관력이 있는 컴포넌트들을 묶어준다.

declaration

컴포넌트들을 선언한다.

imports

브라우저에서 앱을 런칭하기 위해 필요한 디펜던시를 인젝트해준다.

bootstrap

root component를 명시하여 모듈이 bootstrap될 때 render하도록 한다.

Service

컴포넌트 사이에 중복된 코드와 데이터를 교환하는데 사용된다.

WorkFlow

  1. Service에 @Injectable()을 추가한다.

뿐만 아니라 import{Injactable} from “@angular/core”도 해주어야 한다.

  1. Injector 즉, Module에게 Providers를 제공하여 서비스에 대해 알게 해야 한다.

providers:[Service]

  1. 컴포넌트에 Dependency를 Inject 해준다.
    • ngOnInit() :
    • constructor(pricate service:Service){}

main.ts

필요한 라이브러리를 import해준다.

BrowserModule

앵귤러 웹사이트를 동작하기 위한 라이브러리이다.

platformBrowserDynamic

웹사이트를 render하기 위한 앵귤러의 라이브러리이다.

라이브러리

Express

Express는 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크이며, Express 애플리케이션은 기본적으로 일련의 미들웨어 함수 호출입니다.

app.use() 및 app.METHOD() 함수를 이용해 애플리케이션 미들웨어를 앱 오브젝트의 인스턴스에 바인드하십시오.

이때 METHOD는 미들웨어 함수가 처리하는 요청(GET, PUT 또는 POST 등)의 소문자로 된 HTTP 메소드입니다.

다음 예에는 마운트 경로가 없는 미들웨어 함수가 표시되어 있습니다. 이 함수는 앱이 요청을 수신할 때마다 실행됩니다.

Example

1
2
3
4
5
var app = express();
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

활용법

Structural Deretive

html element들을 추가 제거 대체하여 레이아웃을 변형한다.

*ngFor = "let carPart of catParts"

어레이를 돌며 객체를 꺼낼때 사용한다.

*ngIf="carPart.inStock>0"

if문을 사용한다.

Pipe

template output을 변형하기 위해 쓰인다.

Method in Components

template output을 변형하기 위해 쓰이며, 선언없이 바로 정의한다.

Model

특정 객체를 선언하도록 ts에서 선언한다.
export const
export const를 통해 상수 객체를 선언하고 가져다 쓸 수 있따.

Property Binding

프로퍼티 바인딩은 컴포넌트의 property를 any Dom element property로 지정할 수 있게 한다.
여기서 컴포넌트의 property가 업데이트 되면 DOM도 자동으로 업데이트 된다.
하지만 DOM에서 업데이트 되었다고 컴포넌트의 property가 업데이트 되지는 않는다.

Class Binding

[class.name]="property"를 통해 property가 참이면 클래스에 name을 추가할 수 있다.

Event Binding

DOM에서 발생하는 다양한 이벤트들을 처리할 수 있다.

(click)=”func()”

클릭이벤가 발생하면 컴포넌트의 func()를 실행시킨다.

Two Way Binding

[(ngModel)}="property"

이를 통해 two way data binding이 가능하다.
이를 쓰기 위해서는 FormModule을 Import해야 한다.

Routes

Angular 내에서 url을 부여하여 옮겨다니기 위함이다.

  1. RouterModule을 Import 해준다.

    import{RouterModule} from "@angular/router"
  2. RouterModule을 imports에 추가해 준다.

    .forRoot([{path:"/race",component:raceComponent},{}])
  3. 링크를 걸어준다.

    a [routerLink]="['/races']"
  4. router-outlet 태그를 먹여준다.

    <router-outlet></router-outlet>

Http Library

  1. json파일을 만든다.
  2. HttpModule을 Import 해준다.
    Http를 위한 library를 추가해야 하지만 HttpModule 내에서 이미 서비스를 provide하므로 할필요 없다.
  3. injector에 httprovider를 추가해준다.
  4. 서비스에 http를 dependency inject해준다. 그리고 get request를 한다.
  5. req에 의해 반환되는 data를 listen한다.

언디파인 방지

if(Array.isArray(this.carParts){}로 감싸 this.carParts가 undefined된 경우를 처리할 수 있다.

2 minutes read (About 342 words)

기본 db 세팅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
create database angular;
use angular;
CREATE TABLE `tb_airport` (
  `AIRPORT_ID` int(11) NOT NULL AUTO_INCREMENT,
  `AIRPORT_NM` varchar(45) DEFAULT NULL,
  `CONTINENT` varchar(45) DEFAULT NULL,
  `NATION` varchar(45) DEFAULT NULL,
  `CITY` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`AIRPORT_ID`)
) ENGINE=InnoDB AUTO_INCREMENT=70 DEFAULT CHARSET=utf8;

CREATE TABLE `tb_ticket` (
  `TICKET_ID` int(11) NOT NULL AUTO_INCREMENT,
  `TICKET_NM` varchar(100) DEFAULT NULL,
  `TICKET_PRICE` int(11) DEFAULT NULL,
  `TICKET_DEPARTURE` varchar(45) DEFAULT NULL,
  `TICKET_ARRIVAL` varchar(45) DEFAULT NULL,
  `TICKET_DEPARTURE_TIME` varchar(45) DEFAULT NULL,
  `TICKET_ARRIVAL_TIME` varchar(45) DEFAULT NULL,
  `TICKET_DEPARTURE_DT` varchar(45) DEFAULT NULL,
  `TICKET_ARRIVAL_DT` varchar(45) DEFAULT NULL,
  `CRE_DT` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`TICKET_ID`)
) ENGINE=InnoDB AUTO_INCREMENT=31 DEFAULT CHARSET=utf8;

CREATE TABLE `tb_usage` (
  `USAGE_ID` int(11) NOT NULL AUTO_INCREMENT,
  `USER_EMAIL` varchar(45) DEFAULT NULL,
  `USER_NM` varchar(45) DEFAULT NULL,
  `USER_ENG_NM` varchar(45) DEFAULT NULL,
  `USAGE_PHONE` varchar(45) DEFAULT NULL,
  `USAGE_ENTITY` int(11) DEFAULT NULL,
  `USAGE_STATUS` varchar(6) DEFAULT NULL COMMENT '003001	신청완료(입금대기)\n003002	입금완료\n003003	환불대기\n003004	환불완료\n003005	종료',
  `USAGE_NATION` varchar(45) DEFAULT NULL COMMENT '도착 국가',
  `USAGE_CITY` varchar(45) DEFAULT NULL,
  `USAGE_DEPARTURE_CITY` varchar(45) DEFAULT NULL COMMENT '출발 도시',
  `USAGE_DEPARTURE_DT` varchar(45) DEFAULT NULL,
  `USAGE_ARRIVAL_DT` varchar(45) DEFAULT NULL COMMENT '도착일',
  `USAGE_MEMO` text,
  `CRE_DT` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`USAGE_ID`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;

CREATE TABLE `tb_wishlist` (
  `WL_ID` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `tb_user` (
  `USER_EMAIL` varchar(100) CHARACTER SET latin1 NOT NULL,
  `USER_PWD` varchar(100) DEFAULT NULL,
  `USER_TYPE` varchar(6) DEFAULT NULL COMMENT '002001	일반 회원\n002002	어드민\n',
  `USER_NM` varchar(45) DEFAULT NULL,
  `USER_ENG_NM` varchar(45) DEFAULT NULL,
  `USER_GENDER` varchar(45) DEFAULT NULL,
  `USER_BIRTHDAY` varchar(100) DEFAULT NULL,
  `USER_PHONE` varchar(45) DEFAULT NULL,
  `USER_USING_FREQ` int(11) DEFAULT NULL,
  `CRE_DT` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`USER_EMAIL`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

angular 강의 6 minutes read (About 900 words)

설치하기

앵귤러는 npm을 사용하여 다음과 같이 설치한다.
이때 반드시 -g 옵션을 사용하여 global하게 설치를 해 주어야 ng 명령어가 등록이 되며, 앵귤러 cli를 설치하기에 앞서서 typescript기반인 angular를 동작시키기 위한 typescript를 설치해 주어야 한다.

1
2
3
sudo npm install -g typescript
sudo npm install -g @angular/cli@latest
sudo npm install --save-dev @angular/cli@latest

만약 aws 환경에서 위 코드를 실행하면 root 권한으로 인한 많은 문제가 발생한다 이때는 뒤에 –unsafe-perm을 붙여서 설치해 준다.

1
2
sudo npm install -g @angular/cli@latest --unsafe-perm
sudo npm install --save-dev @angular/cli@latest --unsafe-perm

앵귤러를 설치한 후에는 앵귤러에 필요한 각종 모듈을 설치해 주면 되며 package.json을 설정하며 필요한 모듈을 설치한다.

1
npm install

도 추가적으로 설치해주어야 하는 기본적인 node-module이다.

1
sudo npm install underscore

angular-cli 에서 scss 사용하기

sass는 루비라는 언어로 동작하기 때문에 먼저 루비를 설치해 줍니다.
리눅스와 맥의 경우는 루비가 기본으로 설치되어 있기 때문에 window의 경우만 설치해 줍니다.

다음의 링크를 통해 설치를 진행합니다.
다운로드

반드시 64비트인 x64로 설치해 줍니다.

ubuntu의 경우는 apt-get을 통해 설치하며 모든 설치 이후 다음 ruby-dev를 설치해주어야 한다.

1
apt-get install ruby-dev

루비 설치가 완료되었으면 다음 명령어를 통해 sass를 설치해 줍니다.

1
gem install sass

sass를 설치하였으면 angular-cli를 활용하여 sass 기반의 프로젝트를 만듭니다.

1
ng new 프로젝트 이름 --style=sass

만약 기존의 프로젝트가 있는 경우라면 다음과 같이 css 기반 프로젝트를 sass기반 프로젝트로 바꾸어 줍니다.

1
ng set defaults.styleExt scss

angualr-cli.json 에 다음의 내용을 추가해 줍니다.

1
2
3
4
5
{
  "defaults": {
    "styleExt": "scss"
  }
}

angular migration

참조

Module

entryComponents

module.ts의 entryComponents는 html내에서 확인되는 태그가 아닌 동적으로만 생성되는 태그를 앵귤러가 알 수 있게 해준다.
앵귤러는 이를 통해 태그를 찾고 컴파일을 수행한다.
만약 html 내에서 확인되는 다른 많은 태그들은 단순히 declarations에만 있으면 된다.

Component

컴포넌트 안에 input 주기

example

undefined

[readonly]=”true”

인풋이 입력되지 않도록 읽기전용으로 바꾼다.

Library

Angular bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Angular material

code flow

1
2
3
4
5
6
7
8
9
10
11
//앵귤러 매터리얼 설치
npm install --save @angular/material @angular/cdk
//매터리얼에 필요한 애니메이션 설치
npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports: [BrowserAnimationsModule],
//달력입력박스를 위한 module.ts에서 임포트
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

// css 파일에서 추가시켜줌
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Angular Material 시작하기

Promise

세팅

1
2
npm install promise
var Promise = require('promise');

로그인 구현

Work Flow

  1. _guards디렉토리 생성
  2. alert component 생성
  3. alert service 생성
  4. auth guard생성
  5. authentication service 생성

jasonwatmore의 Angular를 이용한 로그인 구현 포스팅

ETC

주의 사항

  1. 임포트시 양방향으로 서로서로 import를 하는 circulr 임포트를 하면 안된다.

16 minutes read (About 2471 words)

E비즈니스의 개요

디지털 혁명

  • 기본 경제 패러다임의 변화
    농경사회 -> 산업화 사회 -> 정보화 사회
  • 디지털 경제(신경제)의 개념
    질량, 물질, 교통과 같은 물리적 세계의 한계가 무중력, 가상, 순산적 글로벌 이동과 같은
    디지털 세계의 장점으로 해소 가능
  • 디지털 경제란?
    개인과 기업들이 디지털 네트워크 및 통신 기술 인프라를 기반으로 시공장벽에 구애받지 않고 상호대화, 협업 및 정보검색 할 수 있는 새로운 경제
  • IT 산업 비중의 증가

구경제에서 신경제로

신경제는 곧 ‘지식경제’ - 지식경제라는 단어가 매우 중요하다.

경제의 부가가치 창출이 인간두뇌에 의해 가능하다.

지식경영을 통해 기업이 지식을 수집, 창출, 축적하고, 구성원들 간의 지식 공유 및 활용으로 부가가치 창출 활동을 수행한다.

신경제의 주요 특징

  • 지식: 창출 능력이 기업의 경쟁력의 원천이다.
  • 디지털화: 모든 컨텐츠가 디지털 형태로 변환된다.
  • 가상화: 실제적 사물을 가상세계에서 만나게 함

실제 생활의 위험상황을 배제하여 가상에서 구현하여 체험과 학습이 가능하게 해 준다.

  • 분자화: 조직의 구성원들이 팀으로 재구성됨
  • 통합화/네트웍화: 네트워크에 의해 상호 연결, 통합
  • 비중개화: 네트워크로 중개자의 역할이 사라짐
  • 융합화: 디지털 기기들 간의 융합화 방, 통 융합
  • 혁신: 지속적인 변화와 개선을 추구함

  • 고객중심 생산: 소비자들이 생산과정에 참여
    제품의 설계 및 개발에 소비자들이 참여함
    사용자의 니즈를 명확하게 반영한 소비자 시장에 집중해야

  • 즉시성: 시간기반 경쟁으로 신속한 대응능력이 중요

  • 글로벌화: 글로벌 고객들이 니즈 충족
  • 이슈충돌: 사회적 이슈들에 대해 논쟁이 확대됨

디지털 제품 및 서비스의 거래 증대

  • 디지털 컨텐츠
    뉴스, 사진이미지, 동영상, 음악, 게임, 애니메이션, 논문, 발표자료 등
    DRM 기술의 부상

  • 디지털 서비스
    금융, 여행, 중개 등
    인터넷을 통해 서비스 제공과정을 자동화할 수 있어 효율성 증대

  • 디지털 매체
    디지털 TV, 디지털 라디어, 동영상, 디지털 음악 등
    콘텐츠나 서비스를 온라인으로 전달할 수 있는 수단

E비즈니스와 E커머스의 관계

유입물류, 조업, 유축물류, 서비스, 마케팅 및 판매를 아우리는 개념이 E비즈니스 이며
E 커머스는 위 내용 중 마케팅 및 판매만을 포함한다.

이비즈니스 기술

인터넷 기술

인터넷의 개념적 이해

인터넷이란?

인터넷이란 전세계의 수만 개의 네트워크들을 상호연결한다는 의미를 지닌 Internetwork의 줄임말이다.

개인 관점에서의 인터넷의 의미

생활에 필요한 정보를 접할 수 있는 새로운 매체로 부상

방송, 인쇄물과 같은 기존의 오프라인 매체를 보완할 수 있는 온라인 매체로서의 역할을 담당

인터넷이 개인에 주는 큰 의미는 바로 개인이 거대 기업과 싸울 힘을 가지게 되었다는 데에 있다.

인터넷을 통해 한 개인은 전 세계와 연결되어 자신의 영향력을 발휘할 수 있는 수단이 된다.

기업 관점에서의 인터넷의 의미

기업 내부 프로세스를 효율화하고 조직의 솓고 및 유연성을 증대시키는 수단

상거래를 할 수 있는 추가적인 판매 채널

인터넷의 유래

미국방부가 1969년 연구목적으로 구축한 ARPANET이 인터넷의 전신이다. 초기에는 주로 국방연구 프로젝트를 위해 이용되었고 차츰 외부 연구소 및 대학들도 연결되면서 연구용도 망으로 발전하였다.

이후 교육 및 연구 목적의 학술망으로 발전하였다.

1985년 미과학재단(NSF)의 지원에 의해 NSFNET가 구축되면서 대학에서의 교육 및 연굴를 지원하는 학술망으로 진화발전하였다.

인터넷의 상용화와 함께 세계규모의 망으로 확대되었다.

인터넷의 기술적 이해

패킷교환 방식

전송하고자 하는 메시지를 작은 패킷 단위로 나누어 전송하고 또 패킷이 도착하면 다시 패킷들을 본래 메시지로 조합하는 이른바 패킷교환 방식을 이용한다.

인터넷의 전송방식

패킷교환 방식이란?

인터넷에서 전송하고자 하는 메시지를 작은 패킷 단위로 나누어 전송하고, 패킷이 도착하면 다시 패킷들을 본래 메시지로 조합하는 방식

메시지 전체가 한꺼번에 전송될 필요 없이 통신경로를 따라 패킷들이 각각 독립적으로 이동하므로 전송이 더 효율적이며 빠름

회선교환 vs 메시지 교환 vs 패킷 교환

회선교환의 대표적인 예는 유선 전화망이다.

회선 교환:
송신자와 수신자 간의 토신회선 전체가 동시에 열려있어야 메시지 전송이 가능하므로, 주로 전화망에서 이용된다.

메시지 교환:
회선이 동시에 열릴 필요는 없지만, 한번에 메시지 전체가 구간, 구간을 이동하므로 전송이 크게 지연될 수 있음

패킷교환:
패킷들이 트래픽 상황에 따라 유연하게 이동하므로 지연시간을 최소화하며 전송속도를 극대화할 수 있음

패킷의 구성

헤더 안에 어떤 정보가 들어가는지 알아야함

개별 패킷은 헤더 및 데이터로 구성되어 있으며, 패킷들이 모두 도착했을 때 고정길이의 이들 패킷ㅇ르 조합함으로써 본래 메시지를 재생할 수 있다.

프로토콜의 필요성 및 개념

컴퓨터기술의 발전과 함께 소프트웨어 및 하드웨어의 이질성이 점차 심화됨

네트워크상의 이질적 컴퓨터들 간에 통신이 이루어지기 위해서는 서로 약속된 통신규약이 필요한데, 이를 프로토콜이라고 함

예전의 기업고유 표준은 정보공유가 쉽지 않았던 반면, 최근에는 보편적 성격을 띤 산업표준, 즉 개방형 프로토콜이 요구되고 있음

다양한 기종의 컴퓨터들이 함께 존재하는 네트워크에서는, 하드웨어 및 소프트웨어가 모두 동일 프로토콜을 적용하여 제작되어야만, 상호통신이 가능함

TCP/IP 프로토콜

하드웨어 및 통신기기 제조업체들이 공통적으로 적용할 수 있도록 만든 통신 규약, 이기종 컴퓨터기기들 간의 상호 호환성 및 접속성을 제공하기 위해 개발, 인터넷을 누구나 접속가능한 네트워크가 되게 하는데 핵심적 역할을 담당

HTTP

HyperText Transfer Protocol

웹환경에서 웹페이지 문서를 이용자에게 전달하기 위해 이용되는 인터넷 프로토콜

SMTP

Simple Mail Transfer Protocol

이메일 관련 프로토콜이다.

이메일 송신에 관련되 프로토콜이다.

1980년대에 개발된 문자열 위주의 이메일 프로토콜로서, 서버로 이메일을 전송하는데이용됨

POP 및 IMAP

이메일 수신에 관련된 프로토콜 이다.

Post Office Protocol 및 Internet Message Access Protocol

SMTP를 통해 서버로 전달된 메일을 수신하기 위해 이용됨

FTP

File Transfer Protocol

인터넷 환경에서 서버와 클라이언트 컴퓨터 사이에 파일을 서로 주고 받을 수 있는 프로토콜

인터넷의 애플리케이션

  • 이메일

  • 인스턴트 메시징
    실시간

  • 검색 엔진

  • 스트리밍 미디어 재생
    인터넷에서 동영상을 재생할 때 사용됨.
  • 인터넷 전화(VoIP)
    Voice Over IP
  • 인터넷 TV

인트라넷과 엑스트라넷

월드 와이드웹의 기술

월드와이드웹의 개념

월드와이드웹이란?

웹의 구성요소 / 시험 출제

하이퍼텍스트

웹서버와 웹클라이언트

웹 브라우저

HTML

XML

eXtensible Markup Lnaguage

HTML이 화면 표시 모양을 만들어 내기 위한 언어라면, XML은 데이터 및 정보를 정의하기 위한 언어이다.

웹 2.0

제 2세대의 웹기반 커뮤니티 및 서비스를 의미한다.

웹 2.0 이란?

사용자들이 웹 브라우저만을 통해 소프트웨어 프로그램들을 실행할 수가 있게 되었다.

과거의 웹사이트환경에서는 방문자가 콘텐츠를 받아보는 기능으로만 제한된 반면,

2.0은 참여적 웹이며, 정보원으로서의 웹은 웹 1.0 이다.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×