3종류의 서버 OS

• 서버 OS는 역사적인 변천을 제외하고 현재의 주류를 생각한다면, 다음 3가지로 요약된다.
  • Windows Server(마이크로 소프트가 대표격)
  • Linux(오픈소스 OS의 대표 격, 상용 OS로는 Red Hat등이 제공됨)
  • Unix 계열(서버 제조사들이 제공)
• 20년 전에는 UNIX 계열과 IT벤더 각 사의 독자적인 서버용 OS가 주류였지만,Windows PC와 Linux가 성장하면서 현재 상황에 이르렀다.
• 서버의 역사는 Unix로부터 시작된다.

각 OS의 장점

• Windows Server는 서버용 OS지만, Windows PC와 같은 사용자 인터페이스로 조작할 수 있어 비교적 이해하기 쉽다.
• 또한, 기업이나 단체에서 필요로 하는 기능이 미리 패키지로 되어 있고 마이크로 소프트의 지원도 있다.
• Linux는 Windows로 말하면 명령 프롬프트 화면을 사용하는 사람이 아직 많지만, 최근에는 다양한 GUI툴이 이용된다.
• 무료 모듈이나 필요한 기능을 쌓아 가면 되기 떄문에, 비교적 간단하고 저렴하게 시스템을 구축할 수 있다.

서버 OS의 과거와 현재

• UNIX
  • 1970~ : AT&T에서 개발되어 지금 형태가 됨(끝)
• Linux
  • 1980-1990 ~ : 리누스 토발스(Linus TOrvalds)가 UNIX를 참고하여 개발
• Windows
  • 1980-1990 : NT3.1을 발표
  • 2003 : Windows Server 사용 시작
• 서버용 OS는 클라이언트로부터 오는 동시 다수의 접속에 응답할 수 있는 성능을 가진다.
• Linux는 역사적 배경에서 UNIX 계열과의 친화성이 높다.
• UNIX계는 과거의 소프트웨어 자산 활용이나 장기간 연속 운용에 대응하는 서버 OS로써 현재에도 강력한 지지를 받고 있지만, 일반적인 이용 용도에서는 동등한 기능을 가진 Linux의 이용이 늘고 있다.

Point

• 현재 서버용 OS는 Windows, Linux, UNIX 계열의 3가지가 주류를 이룬다.
• 그중에서도 Windows Server와 Linux의 점유율이 높지만, 필요나 목적에 따라서 도입이 진행된다.

4. 서버의 사양

서버의 기본 사양

• 자동차 사양의 경우 카탈로그를 보면 전장의 치수, 중량, 승차 정원, 엔진과 배기량, 변속디 등이 나와있다.
• 서버로 치면 CPU가 엔진에 해당할 것이다.
• 서버나 PC도 자동차처럼 기본적인 사양으로 형태와 크기, CPU수와 종류, 메모리 용량, 내장디스크 용량 등을 들 수 있다.
• 메모리나 디스크는 설치 가능한 수량, 용량과 함께 장착된 수량, 용량이 기재되는 것이 일반적이다.
• 이밖에도 여러 항목을 나열할 수 있지만, 서버에서 주의해야 할 것은 전원이나, 다중화 기구에 관한 항목이다.
• 대형서버는 많은 전력을 필요로 하므로 서버를 도입할 때 전원 공사가 필요한 경우가 있다.
• 서버 도입 현장에서는 서버를 구입해놓고 공사 준비가 되지 않아, 이용하지 못하는 일이 자주 있다.

서버선정

• 서버 제조사나 판매 업체의 웹 사이트를 보면, 이전과 비교해서 서버를 고르기 꽤 쉬워졌다고 느껴진다.
• 예전에는 서버를 선택할 때 필요한 처리 성능이나 데이터양 등을 계산하고 서버 성능과 대조해서 선정했다.
• 하지만, 지금은 '사용자 수'나 '용도' 등으로 검토할 수 있다.
• 예를들어, "우리 부서의 50명이 이용하는 파일 서버"등의 정보가 있으면, 이누언수와 용도에 따라 조견표와 같은 형식으로 추천 서버가 제시되므로 그중에서 선택할 수 있다.
• 그만큼 서버가 우리 생활에 가까운 준재가 되기 시작했다는 말이다.

서버 사양의 예

서버 선정

• 이전
  • 책상 위에서 성능을 평가해 서버를 선정했다
  • 성능평가 -> 서버선정
• 현재
  • 성능평가에 더해 사용자 수와 용도, 도입 사례 등을 검토하는 것이 주류가 되었다.
  • 성능평가 -> 사용자 수, 용도(서버의 제조사나 판매점 홈페이지게 게재) -> 도입 사례 -> 서버 선정
• 현재는 전문적인 지식을 가지고 있지 않아도 많은 사람들이 서버 선정을 할 수 있는 시대가 되었다.

Point

• 서버의 사양은 PC와 큰 차이는 없으나, 전원이나 다중화 장치는 체크한다.
• 최근에는 다양한 정보가 제공되고 있어, 전문적인 지식이 없어도 서버를 선정할 수 있게 되었다.
• 용도나 사용자 수 등으로 서버를 상상할 수도 있다.

5. 다양한 형태

형태에 따른 종류

• 서버는 형태에 따라 주로 3가지로 나눌 수 있다.

• 타워

  • 데스크톱 PC와 같은 직육면체 모양으로 PC를 크게 만든 형태

• 렉 마운트

  • 전용 랙에 한대씩 설치하는 형태로 확장성과 내장애성이 뛰어나다.
  • 랙 안에서 숫자를 늘려 확장할 수 있고, 전용 랙으로 보호되므로 장애에도 강하다.

• 블레이드, 고밀도

  • 렉 마운트의 파생 형태이며, 주로 대량으로 서버를 이용하는 데이터 센터용 형태이다.
  • 공통 부품은 랙 쪽에 두고, 얇게 소형화된 서벌르 좁은 공간에 집중적으로 설치할 수 있게 되어 있다.
  • 집적률이 매우 높다는 특징이 있다.

• 타워형과 렉마운트형

• 블레이드 형

그 밖의 형태

• 대형 컴퓨터의 메인 프레임이나 슈퍼 컴퓨터는 유닛별로 각각 전용 케이스를 갖고 있었다.
• 또한, CPU, 메모리, 디스크 등의 케이스가 분리되어 있다.
• 메인 프레임은 기업이나 단체에서는 정보 시스템 부서가 관리하는 전용 건물이나 층에 설치되는 것이 일반적이다.
• 정보 시스템 업무에 종사하지 않는 살마이 보기는 어려운 설비지만, 기회가 있으면 봐두는게 좋다.
• 사람 키보다 큰 케이스가 늘어선 광경은 압권이다.

Point

• 서버를 형태로 분류하면, 타워, 랙마운트 블레이드, 고밀도의 3가지 종류가 있다.
• 메인프레임이나 슈퍼컴퓨터 유닛마다 사람 키보다 큰 케이스에 나뉘어 늘어서 있다.

기본적인 시스템 구성의 예

• 지금까지의 설명으로 서버와 시스템에 관한 기본적인 내용을 이해했으리라 생각
• 시스템 구성 예를 보겠다.
  • 가장 단순한 구성은 여러대의 클라이언트 PC와 서버 한 대
  • 기업이나 단체의 부서 업무 시스템이나 파일 서버 등을 예로 들 수 있다.
  • 서버를 위에 배치하고 아래에 클라이언트PC를 두고 있다.
  • 서버와 클라이언트 PC사이에는 네트워크 기기인 라우터나 허브가 있어 LAN환경으로 연결되어 있다.
  • 일반적인 경우 기업이나 단체의 부, 과, 그룹마다 허브가 설치된다.
  • 예
    • 허브의 LAN 포트 수가 24라면 24명의 허브가 필요
    • 실제로는 한 대의 클라이언트가 복수의 다양한 서버와 연결되어 있다.

증가하는 무선 LAN

• 최근 가정집에서 Wi-Fi를 이용하는 삶이 늘고 있는 것처럼 사무실에서 무선 LAN 활용도 증가하고 있다.
• Wi-Fi는 유선 LAN케이블을 부설할 필요가 없기 때문에 사무실 레이아웃이나 좌석의 자유도가 높은 것을 알 수 있다.

Point

• 기본적인 시스템 구성의 예로 유선 LAN 네트워크에는 서버 라우터, 허브, 클라이언트 PC가 있다.
• 최근에는 편의성으로 인해 사무실에서도 무선 LAN 접속이 증가하고 있다.

2. 하드웨어로서의 서버

1. PC와의 구성 차이

서버는 멈출 수 없다.

• 서버와 PC의 큰 차이점은 서버의 경우 24시간 운용하여, 멈출 수가 없다는 것이다.
• PC는 사용자가 출근해서 전원을 켜고 퇴근할 때 전원을 끄는 것이 일반적이지만, 기본적으로 서버는 전원을 끄지 않는다.
• 만약 서버가 정지해 버리면, 대상 업무나 이용하고 있는 사용자 전체에 영향을 미친다.
• PC와의 큰 차이점은 다음과 같다.
  • CPU, 메모리, 디스크 등 유닛별로 교환 및 증설이 가능하게 되어 있다.
  • 각종 부품으로 다중화가 되어 있다.

구성상의 차이

• PC 메인보드 위의 좁은 공간에 CPU, 메모리, 디스크 등이 효율적으로 배치된다.
• 반면에 서버는 교환이나 증설에 대비해 정연하게 배치된다.
• 서버 개별 부품의 신뢰성이 높을 뿐만 아니라, 만약의 경우에도 운용을 정지하지 않고 일부 유닛을 교환할 수 있는 시스템 등을 탑재한 타입도 있다.
• 또한 증설하기 쉬운 구조로 되어 있다.
• 서버는 원래 부품의 성능이 좋고, 게다가 다중화를 포함한 고 신뢰성과 함꼐 가능한 운용을 멈추지 않는 구조이므로, 지속해서 이용할 수 있는 높은 가용성도 가지고 있다.

서버와 PC의 차이 표

Point

• PC를 업무에 사용하는 경우 근무 시간 동안 가동하면 되지만, 서버는 24시간 365일 가동하게 해야한다.
• 운용을 멈추지 않게 하기 위해 PC와는 다른 구성으로 되어 있다.

2. PC와의 성능 차이

요구되는 성능 차이

• 우리가 아무렇지 않게 사용하는 PC엔서는 사용자의 조작이 제대로 반영됐는지 눈으로 볼 수 있게 하는 표시 성능이 중요
• 표시 성능이란 자신이 두드린 키보드의 키나 마우스 클리 등을 정확하게 그리고 실시간으로 표시하는 것
• 이 성능을 전제로 하여 다양한 애플리케이션 소프트웨어의 처리가 이루어짐
• 당연한 말이지만, 그런것을 의식하지 않고 사용할 수 있을 정도의 현대의 PC나 스마트폰의 성능이 뛰어나다는 것이기도 하다.
• 한편 서버에서는 다양한 처리가 적절히 이뤄지고 있는지가 중요하다.
• 서버는 입력(Input)을 바탕으로 처리결과를 출력(Output)하며, 끊임없이 I/O(Input/Output)를 실행하는 가운데 시스템의 전체의 상황, 부하를 감시하고 나아가 자신의 성능을 발휘할 수 있는지 생각한다.
• 서버는 표시성능보다 I/O를 더 중시한다.

유닛과 성능 차이

• 요구되는 성능차이는 위와 같지만, 그 뿐만 아니라 서버와 PC는 각 유닛의 성능에도 큰 차이가 있다.
• 서버는 처리량이 PC보다 훨씬 많기 떄문에 성능과 신뢰성이 더 우수한 CPU, 메모리, 디스크 등으로 구성된다.
• 이런 유닛들의 탑재 수량이나 용량도 많아진다.
• 이 같은 각종 유닛의 탑재 상황차이로 볼 때, 서버가 PC보다 비싼 것은 어쩔 수 없다.

Point

• PC는 표시 성능을 중시하지만, 서버는 표시 성능 뿐만 아니라 성능(I/O 성능)도 중시한다.
• 서버는 CPU등 개개의 유닛이 PC보다 고성능이다.

6. 서버에 접속하는 기기

다양한 종류의 클라이언트

• '어떤 기기를 서버에 연결하는가?'라는 질문에 대다수는 서버라고 대답할 것
• 클라이언트-서버라는 호칭이 있을 정도이므로 이는 모범적인 답안이다.
• 클라이언트 PC에도 여러가지가 존재
  • 데스크톱 PC
  • 노트북 PC
• 예전에는 이 2가지가 대표적이었으나, 현재의 리모트 환경(원격환경)을 고려하면 노트북 PC에 더해 태블릿도 있다.
• 그 폭을 좀더 넓힌다면 스마트폰도 포함될 것
• 리모트 환경에서 접속하는 경우 5장에 설명하는 IMAP 서버 등이 필요한데 이런 환경을 구축하는 기업이나 단체도 늘고 있다.

디바이스의 다양화

• 이 책에서는 처음부터 서버와 산하 컴퓨터, 디바이스 라고 표현해왔음
• 그 이유는 클라이언트 PC뿐만 아니라 IoT 기기 등도 서버에 접속하는 디바이스에 포함하고 싶었기 때문이다.
• 각종 카메라이서 얻은 영상을 서버에서 해석할 수 있다.
• IC 태그 자체에는 디바이스라고 부를 만한 기능은 없지만, IC태그의 데이터를 서버에 불러와 처리할 수 있다.
• 즉 현재 시스템을 고려할 때 서버에 접속할 수 있는 디바이스는 PC나 스마트폰 외에도 다양해지고 있다는 것이다.
• 드론이나 네트워크에 접속할 수 있는 로봇 등도 디바이스에 포함할 수 있다.
• 사용하는 디바이스의 종류를 아래와 같이 정리할 수 있다.
  • 카메라
  • 안테나 IC태그
  • 마이크
  • 드론
  • 로봇

Point

• 서버에 접속하는 긱로는 PC가 대표적이지만, 태블릿이나 스마트폰 등 원격 환경을 통해 다양해지고 있다.
• IoT라는 관점에서는 카메라, IC태그, 마이크, 드론, 로봇 등 목적에 맞는 다양한 디바이스가 서버 산하에 접속된다.

7. 순발력인가 지구력인가.

애플리케이션의 시점

• 서버를 생각할 때 무엇을 하고 싶은지, 무엇을 시키고 싶은지가 중요하다고 앞에서 설명했었다.
• 이번 절에서는 애플리케이션의 시점에서 생각해보겠다.
• 일반적으로 이용하는 시스템은 다음과 같이 2가지로 나눌 수 있다.
  • 입출력을 중요시하는 시스템
    • 입력한 데이터에 대해 처리 결과를 신속하게 돌려주는 시스템
  • 집계나 분석을 중요시하는 시스템
    • 개별적으로 입력된 데이터의 집계나 분석을 중요시하는 시스템
• 대부분의 시스템은 양쪽을 모두 겸비하고 있다.

순발력과 지구력

• 순발력
  • 입출력을 중시하는 시스템은 응답이 중요하므로 '스피드 퀴즈'처럼 순발력을 중시한다.
• 지구력
  • 집계와 분석을 중시하는 시스템은 전체 데이터의 입력 상황을 보면서 처리를 진행해 나가기 떄문에, 오랜 시간에 걸치는 '입학 시험'과 같은 지구력이 필요하다.
• 어느쪽이든 처리를 잘못하는 것은 허용하지 않는다.
• 최근 주목받고 있는 프로세스를 중시하는 시스템은 후자에 해당한다.
• 지금까지 서버의 3가지 이용 형태나 접속 기기에 관해서 이야기 했다.
• 이와 더불어 서버의 내요응로 애플리케이션의 특성도 상정할 수 있으면, 시스템이나 서버의 검토는 확실히 진전될 것.

Point

• 애플리케이션의 시점에서는 입출력을 중시하는 시스템인지, 집계 분석을 중시하는 시스템인지 생각하면 이해하기 쉽다.
• 전자는 순발력이 요구되고, 후자는 지구력이 요구된다.

8. 시스템 모델화 및 구성

모델화의 예

• 서버가 클라이언트 PC나 각종 디바이스에서 데이터를 얻고 갱신하는 모델이라면 사용되는 디바이스는 다양할 것.
• 만일 입출력을 중시하는 시스템이라면, 순발력을 발휘하는 빠른 서버가 필요하리라 예상할 수 있다.
• 또 시스템의 물리적인 이미지도 떠오를 것
• 이러한 축을 정해서 모델화를 하면, 관계자가 시스템이나 서버에 관한 기대나 요구를 구체적으로 확인할 수 있는 동시에, 필요하지 않은 기능도 명확하게 할 수 있다.

모델화에서의 주의점

• 모델화를 할 떄는 무엇을 하고 싶은지, 어떤 처리가 필요한건지에 관하여 관계자 간의 공통된 인식을 갖는 것이 중요하다.
• 여기서는 이해하기 쉽게 접속하는 기기의 종류나 수량, 또 어떠한 데이터를 주고 받을 것인가부터 시작해서 입출력 중시와 집계, 분석 중시 2가지로 정리
• 나아가 어떻게 사용하고 싶은가, 어떠한 시스템인가 하는 서버의 내용인 소프트웨어적인 요구와, 하드웨어로서의 서버는 어떤 것이 적절한지 함꼐 검토해 나갈 필요가 있다.
• 그러기 위해서는 '내용과 외형, 애플리케이션 소프트웨어와 하드웨어 양면에서 생각'해야한다.

소프트웨어와 하드웨어 시점에서의 요구

• 소프트웨어의 요구
  • 어떻게 사용하고 싶은가(순발력 중시, 지구력 중시)
  • 어떤 시스템인가(수동적, 능동적, 고성능)
• 하드웨어의 요구
  • 어떠한 서버가 적절한가
  • 어떠한 디바이스가 필요한가
• 적절한 시스템과 서버가 정해진다.

Point

• 서버를 검토할 때 3가지 이용 형태를 기반으로 모델화해서 검토하면 이해하기가 쉽다
• 서버의 내용인 애플리케이션 소프트웨어, 외형인 하드웨어와 등장인물 (접속기기) 양면에서 생각한다.

서버의 기본적인 형태

• 서버
  • 클라이언트의 요청에 대응하는 것이 기본적인 형태
  • 클라이언트-서버라고 부를 떄는 그러한 역할을 기대한다.
• 시스템은 산하의 클라이언트 PC등의 요청에 대응하는 처리를 한다.
• 클라이언트가 서버에 요청하는 것부터 시작되고, 서버는 요청받은 처리를 '수동적으로 실행'한다.
• 특징으로는 3가지가 존재
  • 서버 한대에 클라이언트 여러 대
  • 서버와 클라이언트가 공통된 소프트웨어를 이용하는 일이 많다(서버용, 클라이언트용으로 나뉘는 경우도 있다.)
  • 클라이언트가 서버에 수시로 요청을 보낸다.

수동적인 이용 형태의 대표적인 예

• 수동적인 이용 형태의 대표적인 예로는 다음과 같다.
  • 파일 서버
  • 프린트 서버
  • 메일이나 웹 서버
  • IoT 서버(디바이스가 수시로 데이터를 올리는 경우)
• 지금까지 일반적으로 서버라고 불리던 것은 여기에서 설명한 클라이언트의 요청에 대응하는 형태에 속하는 것을 알 수 있다.
• 기업이나 단체의 업무 시스템도 대부분 이 형태이다.
• 그러나 그뿐만이 아니라는 것이 현대 서버와 시스템의 흥미로운 점

Point

• 서버는 클라이언트-서버라는 말처럼 산하 컴퓨터가 보내는 요청에 대응하는 형태로 파악하는 경우가 많다.
• 대표적인 예로 파일서버, 프린트서버, 메일서버 등으로 들 수 있다.

4. 서버가 능동적으로 처리하는 형태

클라이언트 컴퓨터나 디바이스에 능동적으로 처리하는 형태

• 클라이언트가 요청해서 처리할 때 비교하면 명확한 차이는 서버로부터 처리를 시작하고 실행한다는 점
• 즉 서버가 클라이언트 PC나 산하의 컴퓨터, 디바이스에 명령해서 처리하는 형태이다.
• 특징
  • 서버 한대에 클라이언트 여러대
  • 서버와 클라이언트에서 반드시 공통된 소프트웨어를 이용하는 것은 아님
  • 서버 측에서 처리 시점을 정하여 실행한다.

능동적인 이용 형태의 대표적인 예

• 능동적인 이용 형태의 대표적인 예로 다음과 같은 것이 있다.
  • 운용 감시 서버
    • 시스템이 정상적으로 동작하는지 감시하는 서버이다.
  • RPA 서버
    • 로봇 프로세스 자동화 서버로 이전에 사람이 하던 일을 로봇에세 맡기는 것을 서버로 구축
  • BPMS 서버
    • 비즈니스 프로세스 관리 소프트웨어라고 부르며 여러 작업을 간소화하여 비즈니스에서 사용하는 업무들을 편리하게 해주는 소프트웨어를 서버로 구축
  • 일반적으로 RPA서버는 BPMS서버의 하위에 존재한다.
  • IoT 서버 (IoT 디바이스를 호출하는 경우)
• 위의 예로 보면 일반적으로는 친숙하지 않지만, 기업이나 단체의 시스템이나 업무운영에서 중요한 역할을 하는 서버

Point

• 서버에서 클라이언트에 대한 능동적인 대응은 기업이나 단체의 시스템과 업무 운영에서 중요한 역할을 하며, 앞으로 늘어날 것으로 예상된다.
• 대표적인 예로 운용 감시, RPA 서버, BPMS 서버 등을 들 수 있다.

5. 높은 성능을 활용하는 형태

고성능 처리의 특징

• 이전 절까지 서버와 산하 컴퓨터의 구성까지는, 처리를 실행하는 것이 클라이언트를 기점으로 하느냐, 서버를 기점으로 하는냐에 차이가 있었다.
• 여기서 설명하는 것은 이전까지와는 다른 관점으로 보는 처리
• 서버는 PC와 달리 높은 성능을 가지고 있다.
• PC를 일반 자동차라고 하면, 서버는 용도에 따라서 성능이나 규모를 바꿀 수 있으므로, F1, 전철 대형 트럭등에 비유할 수 있다.
• 이 차량들은 일반 자동차와는 다른 차원의 높은 성과를 거둘 수 있다.
• 특징
  • 서버와 클라이언트의 구성과 서버 단독에 가까운 구성도 있다.
  • 서버 측에서 독자적인 처리를 실행한다.
  • PC에서는 할 수 없는 높은 성능이 요구된다.

높은 성능을 활용하는 형태의 대표적인 예

• 예
  • AI서버
    • 사람이 했던 각종 판단이나 분석
    • 사람보다도 많은 학습 데이터가 필요하다.
  • 빅데이터 서버
    • 다양한 대량의 데이터
    • 고속으로 분석
    • 구조화 데이터와 비구조화 데이터를 조합하여 분석하기도 한다.
  • (개인적인 생각)메타버스를 구축하는 서버
    • 하나의 3D모델링이 들어가기 위해 사용되는 하드웨어는 고성능 장비가 필요하다.
    • 해당하는 3D모델링을 많이 관여하는 메타버스를 구축하는 서버의 경우 고성능의 그래픽 카드 성능이 필요하다 생각.
• 위의 예를 보면, 향후의 확대를 기대할 수 있는 분야임을 알 수 있다.

Point

• 서버의 높은 성능을 살린 형태는 앞으로 한층 더 확대될 가능성이 높다.
• 서버의 이용 형태는 클라이언트-서버 뿐만 아니라 다양한 가능성이 있다.

1. 서버의 기본

1. 서버를 이해하는 것은 시스템을 이해하는 것.

시스템과 서버

• 사회에는 다양한 시스템이 작동한다.
  • 개인이 이용하는 시스템 예시
    • 온라인 쇼핑 주문 시스템
    • 은행이나 편의점의 ATM 시스템
    • 티머니 등의 교통 시스템 등
  • 비즈니스 관점에서 시스템 예시
    • 편의점, 마트의 POS 시스템
    • 공장의 생산을 관리하는 시스템
    • 휴대전화 통화를 관리하는 시스템
    • 인공위성을 이용하는 과학기술 시스템 등
• 다양한 종류와 규모의 시스템을 하나로 묶어서 이해하기란 어려운 일.
• 어떠한 시스템이든 일정한 규모의 역할을 하기 위해서 반드시 서버가 있어야 한다.

서버의 역할?

• 대부분의의 시스템은 외관인 하드웨어를 보면 다음과 같이 구성된다
  • 서버와 산하의 컴퓨터들
  • 이를 연결하는 네트워크 기기
• 서버는 이것들 중 중심적 역할을 한다.
• 내용물인 소프트웨어를 보면 "무엇이 하고 싶은가, 무엇을 시키고 싶은가" 에 따라 애플리케이션 소프트웨어가 움직인다.
• 서버는 애플리케이션 소프트웨어를 동작시키는 주역이기도 한다.
• 이렇듯 서버는 시스템에서 중요한 역할을 담당하고 있다.
• 서버를 통해 시스템을 살펴봄으로 다양한 시스템을 이용하기 쉬워지는 동시에, 하고싶은 일을 실현하는 시스템을 상상해볼 수 있다.

Point

• 사회에는 다양한 시스템이 있지만, 일정 이상의 규모라면 반드시 서버가 존재한다.
• 서버는 시스템 안에서 중심적인 역할을 한다.

2. 서버는 시스템의 사령탑

사령탑으로서의 존재

• 1절에서는 서버는 시스템에서 하드웨어와 소프트웨어 양면에서 중요한 역할을 한다고 이야기했다.
• 스포츠세계와 비유하면 '사령탑' 같은 존재이다.
  • 많은 선수가 동시에 움직이는 축구나 럭비, 그 밖의 경기에서는 사령탑이 누구인지가 늘 화제가 된다.
  • 상황을 분석해 선수들에게 적절하게 지시하고 선수의 질문을 답하는 등
• 서버는 이런 존재이다.
• 최근은 AI 활용으로 아직 일부이지만 판단을 필요로 하는 일도 할 수 있게 되었다.
• 스포츠세계와 다른 부분이라면 정신적인 지주가 아니라는 것
• 어디까지나 철저히 기술적 혹은 매니지먼트 입장

서버의 3가지 형태

• 서버에는 다음과 같이 3가지 이용 형태가 있다.
  1. 클라이언트의 요청에 대응하여 처리하는 형태
     • 서버에 접속된 클라이언트 PC 같은 산하 컴퓨터의 요청에 대응해 수동적으로 처리
  2. 서버에서 능동적으로 처리하는 형태
     • 서버가 산하 컴퓨터나 디바이스에 대해 능동적으로 처리한다.
  3. 높은 성능을 활용하는 형태(빅데이터, AI에서 활용)
     • 서버 자체가 고성능 하드웨어이므로, 그 특징을 살려 처리한다. 최근 주목받는 기능
• 이후 각각에 대해 설명을 진행하지만, 3가지를 조합해서 사용하기도 한다.

Point

• 서버는 시스템에서 사령탑과 같은 존재
• 서버에는 크게 3가지 이용 형태가 있다.

객체

객체의 예

• 객체
  • 고양이
• 프로퍼티
  • cat.name = "나비"
  • cat.family = "코리안 숏 헤어"
  • cat.age = 0.1
  • cat.weight = 300
• 메소드
  • cat.mew()
  • cat.eat()
  • cat.sleep()
  • cat.play()
• 고양이 객체는 위와같은 프로퍼티를 가지고는 있지만, 인스턴스(생성된 고양이의 종류)마다 다를 것이다.

자바스크립트 객체

• 자바스크립트의 기본 타입은 객체이다.
• 객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다.
• 프로퍼티의 값으로 함수가 올 수 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.

var cat = "나비"; // 일반적인 변수의 선언
// 객체도 많은 값을 가지는 변수의 하나임.
var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 };
console.log(cat)          // 나비
console.log(kitty.name)   // 나비

• 자바스크립트에서는 숫자 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체이다.
• 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 된다.

객체의 프로퍼티 참조

• 자바스크립트에서 객체의 프로퍼티를 참조하는 방법은 다음과 같다

  객체이름.프로퍼티 이름
  

객체이름["프로퍼티 이름"] // 이 방법은 잘 안쓰입니다.

var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 }; console.log(kitty.name) // 나비 console.log(kitty["name"]) // 나비

#### 객체의 메소드(함수) 참조
- 자바스크립트에서 객체의 메소드를 참조하는 방법은 다음과 같다.

객체이름.메소드이름()

var cat = { attack : function(){ return console.log("냥냥펀치!"); } }

cat.attack(); //냥냥펀치!

#### 객체의 생성
- 자바스크립트에서 객체를 생성하는 법은 다음과 같다.
  1. 리터럴 표기(literal notation)를 이용한방법
  2. 생성자함수(constructor function)를 이용한 방법
  3. Object.create() 메소드를 이용한 방법(설명 생략)
- 위와 같은 방법으로 생성되어 메모리에 대입딘 객체를 인스턴스(instance)라고 한다.
  - 본 정리본은 리터럴 표기를 이용한 방법과 생성자 함수를 이용한 방법만 설명합니다.

#### 리터럴 표기를 이용한 객체의 생성
- 자바스크립트에서 객체를 생성하는 가장 쉬운 방법은 리터럴 표기(literal notation)를 이용하는 방법이다.

var 객체이름 = { 프로퍼티1 : 프로퍼티1값 프로퍼티2 : 프로퍼티2값 프로퍼티3 : 프로퍼티3값 ... }

var navi = { name : 나비; family : 페르시안; age : 1, weight: 0.1 };

console.log("우리 집 새끼 고양이의 이름은 " + kitty.name + "이고, 종은 " + kitty.family + "입니다.");

#### 생성자를 이용한 객체의 생성
- new 연산자를 사용하여 객체를 생성하고 초기화 할 수 있다.
- 이떄 사용되는 메소드를 생성자(constructor)라고 하며, 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 한다.
- 자바스크립트는 원시 타입을 위한 생성자를 미리 정의하여 제공한다.

var day = new Date();//new 연산자를 사용하여 Date타입의 객체를 생성 console.log("올해는 " + day.getFullYear() + "년입니다.");

### 프로토 타입

#### 상속
- 상속(inheritance)이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미
- 상속을 통해 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있다.
- 또한, 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있는 장점이 있다.
- 이러한 상속은 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 된다.
- 자바스크립트는 프로토타입 기반 객체지향 언어이며 상속의 개념이 클래스 기반의 객체지향과 다르다.
- 자바스크립트에서 존재하는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 한다.

#### 프로토 타입
- 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다.
- 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.
- 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 한다.

#### 프로토타입 체인
- 자바스크립트에서는 객체 이니셜라이저를 사용해 생성된 같은 타입의 객체들은 모두 같은 프로토타입을 가진다.
- 또한, new 연산자를 사용해 생성한 객체는 생성자의 프로토타입을 자신의 프로토타입으로 상속받는다.

#### 프로토타입의 생성
- 프로토타입을 생성하는 가장 기본적인 방법은 객체 생성자 함수(Object constructor function)을 사용하는 것이다.
- 생성자 함수를 작성하고 new 연산자를 사용해 객체를 생성하면, 같은 프로토 타입을 가지는 객체들을 생성할 수 있다.
- 예제

function champ(line, name, attackmethod){ this.line = line; this.name = name; this.attackmethod = attackmethod; } var myChamp = new champ("원딜", "카이사", "ad"); console.log("내 라인 " + myChamp.line + "갈거고 " + myChamp.name + " 선픽했다. 템트리는" + myChamp.attackmethod + "템트리로 감.");

#### 객체에 프로퍼티 및 메소드 추가
- 이미 생성된 객체에 새로운 프로퍼티나 메소드를 추가하는 방법은 다음과 같다.

function champ(line, name, attackmethod){ this.line = line; this.name = name; this.attackmethod = attackmethod; } var myChamp = new champ("원딜", "카이사", "ad"); myChamp.family = "공허"; myChamp.tmi = function(){ //해당 챔프의 포지션과 이름을 리턴하는 메소드 return this.name + "이며 " + this.line;// this는 다음 키워드에 나옵니다. } console.log("내가 고른 챔프는" + myChamp.tmi() + "이다."); console.log("내 라인 " + myChamp.line + "갈거고 " + myChamp.name + " 선픽했다. 템트리는" + myChamp.attackmethod + "템트리로 감.");

### 객체 다루기

#### this
- 자바스크립트에서 this키워드는 해당 키워드가 사용된 자바스크립트 코드 영역을 포함하고 있는 객체를 가리킨다.
- 예를 들어, 메소드 내부에서 사용된 this 키워드는 해당 메소드를 포함하고 있는 객체를 가리킨다.
- 객체 내부에서 사용된 this키워드는 객체 그 자신을 가리킨다.
- 이러한 this는 변수가 아닌 키워드이므로, 사용자가 임의로 가리키는 값을 바꿀 수 없다.

#### 객체 프로퍼티의 삭제
- 자바스크립트에서 delete 키워드를 이용하여 객체의 프로퍼티를 삭제할 수 있다.

구문 delete 객체이름.프로퍼티이름;

예제

function champ(line, name, attackmethod){ this.line = line; this.name = name; this.attackmethod = attackmethod; } var myChamp = new champ("원딜", "카이사", "ad"); delete myChamp.line; //line 프로퍼티를 삭제함

### 객체 프로퍼티와 메소드
#### 객체 프로퍼티(property)
- 모든 자바스크립트 객체는 Object객체와 Object.prototype 객체의 모든 프로퍼티를 상속받는다(위임을 받아 상위 객체의 메소드(함수)를 사용할 수 있다.)
- prototype 프로퍼티를 이용하면 현재 존재하는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가할 수 있다.

#### 객체 메소드(method)
- 모든 자바스크립트 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티와 메소드를 상속받는다
- 자주 사용되는 대표적인 객체 메소드는 다음과 같다.
  1. hasOwnProperty()
  2. propertyIsEnumerable()  
  3. isPrototypeOf()
  4. isExtensible()
  5. toString()
  6. valueOf()

#### hasOwnProperty()
- 특정 프로퍼티가 해당 객체에 존재하는지를 검사.
- 해당 객체에서 직접 선언한 프로퍼티만을 검사, 같은 이름의 프로퍼티라도 상속받은 프로퍼티는 false 반환
- 예제

function champ(line, name, attackmethod){ this.line = line; this.name = name; this.attackmethod = attackmethod; } var myChamp = new champ("원딜", "카이사", "ad"); myChamp.hasOwnProperty("line"); /true myChamp.hasOwnProperty("name"); //true myChamp.hasOwnProperty("class"); //상속받은 프로퍼티이므로 false

#### propertyIsEnumerable()
- 특정 프로퍼티가 해당 객체에 존재하고, 열거할 수 있는 프로퍼티인지를 검사.
- 예제 생략(자주 사용하지 않습니다.)

#### isPrototypeOf()
- 특정 객체의 프로토타입 체인에 현재 객체가 존재하는지를 검사한다.
- 예제 생략

#### isExtensible()
- 객체에 새로운 프로퍼티를 추가할 수 있는지 여부를 반환합니다.
- preventExtensions() 라는 메소드를 사용하여 해당 객체에 새로운 프로퍼티를 사용할 수 없도록 할 수 있다.
- 예제(자주 사용하진 않지만)

var day = new Date(); // Date 객체를 생성함. // 객체 day에 새로운 프로퍼티를 추가할 수 있는지 검사함. console.log(Object.isExtensible(day)); // true

// 해당 객체에 새로운 프로퍼티를 추가할 수 없도록 설정함. var myDay = Object.preventExtensions(day); console.log(Object.isExtensible(day)); // false

#### toString()
- 이 메소드를 호출한 객체의 값을 문자열로 반환한다.

var arr = [10, "문자열", true]; // 배열 var bool = false; // 불리언 function func() { return 0; } // 함수 arr.toString(); // 10,문자열,true bool.toString(); // false func.toString(); // 함수의 소스 코드가 전부 문자열로 반환됨.

#### valueOf()
- 특정 객체의 원시 타입(primitive type)으로 값을 반환한다.
- 자바스크립트에서는 원시타입의 값이 기대되는 곳에 객체가 사용되면, 내부적으로 이 메소드를 호출하여 처리한다.

function func(n) { this.number = n; }

myFunc = new func(4); console.log(myFunc + 5); // 1번째 : [object Object]5

func.prototype.valueOf = function() { // valueOf() 메소드를 정의함. return this.number; }

console.log(myFunc + 5); // 2번째 : 9

### 전역객체와 래퍼객체

#### 전역객체
- 전역 객체란 자바스크립트에 미리 정의된 객체로 전역 프로퍼티나 전역 함수를 담는 공간의 역할을 한다.
- 전역 객체 그 자체는 전역 범위(global scope)에서 this 연산자를 통해 접근할 수 있다.
- 자바스크립트에서 모든 객체는 전역 객체의 프로퍼티가 된다.
- 웹 브라우저가 새로운 페이지를 로드(load)하면, 자바스크립트는 새로운 전역 개체를 만들고 해당 프로퍼티들을 초기화한다.
- 래퍼객체들

var str = "문자열"; // 문자열 리터럴 생성 var strObj = new String(str); // 문자열 객체 생성 str.length; // 리터럴 값은 내부적으로 래퍼 객체를 생성한 후에 length 프로퍼티를 참조함. str == strObj; // 동등 연산자는 리터럴 값과 해당 래퍼 객체를 동일하게 봄. str === strObj; // 일치 연산자는 리터럴 값과 해당 래퍼 객체를 구별함. typeof str; // string 타입 typeof strObj; // object 타입

#### 표준객체
- 자바스크립트에서 표준 객체(standard object)는 다른 객체의 기초가 되는 핵심적인 객체이다.
- 자주 사용되는 대표적인 자바스크립트 표준 객체는 다음과 같다.
   1. Number 객체
   2. Math 객체
   3. Date 객체
   4. String 객체
   5. Array 객체

지역변수

• 지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킨다.
• 이러한 지역 변수는 변수가 선언된 함수 내에서만 유효, 함수가 종료되면 메모리에서 사라진다.
• 함수의 매개변수 또한 함수 내에서 정의되는 지역변수처럼 동작한다.

function localNum(){
  var num = 10;
  console.log("함수 내부에서 변수 num의 타입은 " + typeof num + "이다."); // num이란 변수가 유효

}

localNum();
console.log("함수의 호출이 끝난 뒤 변수 num의 타입은 " + typeof num + "이다."); // num이란 변수가 유효하지 않기 때문에 undefined로 반환

전역변수

• 전역변수(global variable)란 함수의 외부에서 선언된 변수를 가리킴
• 이러한 전역변수는 프로그램의 어느 영역이나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라진다.

var num = 10;
function globalNum(){
  console.log("함수 내부에서 변수 num의 타입은 " + typeof num + "이다."); // 함수안에서 선언이 없어도 함수밖에 선언된 num이란 변수가 유효
  num = 20; //내부에서 변수 변경

}
globalNum(); //함수 globalNum()을 호출
console.log("함수의 호출이 끝난 뒤 변수 num의 타입은 " + typeof num + "이다."); // 20으로 변경

매개변수

• 자바스크립트에서는 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않는다.
• 함수를 호출할 때도 인수(argument)로 전달된 값에 대해 어떠한 타입 검사도 하지 않는다.
• 함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않는다.
• 이 같은 경우 자바스크립트는 전달되지 않은 나머지 매개변수에 자동으로 undefined 값을 설정한다.
• 다음 예제는 3개의 매개변수를 가진 함수에 대해 각각 다른 수의 인수를 전달하는 예제.

  function addNum(x, y, z) { // x, y, z라는 3개의 매개변수를 가지는 함수 addNum()을 정의함.
    return x + y + z;
  }
  

addNum(1, 2, 3); // 인수로 1, 2, 3을 전달하여 함수를 호출함. -> 6 addNum(1, 2); // 인수로 1, 2을 전달하여 함수를 호출함. -> NaN addNum(1); // 인수로 1을 전달하여 함수를 호출함. -> NaN addNum(); // 인수로 아무것도 전달하지 않고 함수를 호출함. -> NaN

### 미리 정의된 전역함수
- 자바스크립트는 사용자의 편의를 위해 다양한 기능의 여러 전역 함수를 미리 정의하여 제공한다.
- 이러한 전역 함수는 자바스크립트의 어떤 타입의 객체에서도 바로 사용할 수 있다.
- 자바스크립트에서 제공하는 전역함수는 다음과 같다.

#### eval()
   - 문자열로 표현된 자바스크립트 코드르 실행하는 함수
   - 구문 및 예제

  - 구문
  eval("문자열")
  - 예제
  var x = 10, y = 20;
  var a = eval("x + y");
  var b = eval("y + 3");
  console.log(a + "\n" + b);

#### isFinite()
   - 전달된 값이 유한한 수인지를 검사하여 그 결과를 반환한다.
   - 만약 인수로 전달된 값이 숫자가 아니라면, 숫자로 변환하여 검사한다.

- 구문
isFinite(검사할 값);
- 예제
isFinite(123);       // true
isFinite(123e100);   // true
isFinite(0);         // true

#### isNaN()
   - isNaN() 함수는 전달된 값이 NaN인지를 검사하여 그 결과를 반환한다.
   - 만약 인수로 전달된 값이 숫자가 아니라면, 숫자로 강제 변환하여 검사한다.
   - 전달된 값이 숫자인지 아닌지를 확인하기 위하여 typeof 연산자를 대신 사용할 수도 있다.

- 구문
isNaN(검사할값);
- 예제
isNaN(123);       // false
isNaN(123e100);   // false

#### parseFloat()
   - parseFloat() 함수는 문자열을 파싱하여 부동 소수점 수(floating point number)로 반환한다.

- 구문
parseFloat("문자열");
- 예제
parseFloat("123");        // 123
parseFloat("123.000");    // 123

#### parseInt()
   - parseInt() 함수는 문자열을 파싱하여 정수로 반환한다.

- 구문
parseInt("문자열");
- 예제
parseInt("123");        // 123
parseInt("123.000");    // 123
parseInt("123.456");    // 123

#### encodeURI() & encodeURIComponent()
   - encodeURI() 함수는 URI에서 주소를 표시하는 특수문자를 제외하고, 모든 문자를 이스케이프 시퀀스(escape sequences) 처리하여 부호화
   - encodeURIComponent() 함수는 URI에서 encodeURI() 함수에서 부호화하지 않은 모든 문자까지 포함하여 이스케이프 시퀀스 처리.

- 구문
encodeURI(부호화할URI);
encodeURIComponent(부호화할URI);
- 예제
var uri = "http://google.com/search.php?name=홍길동&city=서울";
var enc1 = encodeURI(uri);
var enc2 = encodeURIComponent(uri);

console.log(enc1 + "<br>" + enc2);

#### decodeURI() & decodeURIComponent()
   - decodeURI() 함수는 encodeURI() 함수나 다른 방법으로 만들어진 URI(Uniform Resource Identifier, 대충 자원 식별자)를 해독.
   - decodeURIComponent() 함수는 encodeURIComponent() 함수나 다른 방법으로 만들어진 URI 컴포넌트를 해독.

- 구문
decodeURI(해독할URI);
decodeURIComponent(해독할URI);
- 예제
var enc1 = encodeURI(uri);
var enc2 = encodeURIComponent(uri);
console.log(enc1 + "/n" + enc2 + "<br><br>");
var dec1 = decodeURI(enc1);
var dec2 = decodeURIComponent(enc2);
console.log(dec1 + "/n" + dec2);

#### Number()
- 들어온 객체의 값을 숫자로 반환한다.
- 문법

Number(객체);

#### String()
- 전달받은 객체의 값을 문자열로 반환한다.

String(객체); ```

반복문

• 반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문
• 프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문중 하나이다.

반복문의 형태

1. while문
2. do/while문
3. for문
4. for/in문
5. for/of문(생략)

while문

• 특정 조건을 만족할 때 까지 계속해서 주어진 실행문을 반복 실행한다.
• 구문

  while(표현식){
   표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문.
  }

• 예제

  var i = 1;
  while (i < 10) { // 변수 i가 10보다 작을 때만 while 문을 반복함.
    console.log(i);
    i++; // 반복할 때마다 변수 i를 1씩 증가시켜 변수 i가 10보다 커지면 반복문을 종료함.
  }

• 표현식이 참일 경우에 while문 안에 있는 반복문이 수행된다.
• 반복문 수행 후 표현식으로 돌아와 표현식이 참인지 확인하고 다시 돈다.
• 이런식으로 수행하는 반복문을 loop라고 한다.
• 따라서 반복문을 멈추기 위해서는 표현식이 거짓인 조건을 갖는 실행문을 포함해야 한다.

do/while문

• while문은 루프에 진입하기 전에 먼저 표현식부터 검사한다.
• 그러나 do/while문은 먼저 루프를 한 번 실행한 후에 표현식을 검사한다.
• 즉 do/while문은 표현식의 결과와 상관없이 무조건 한 번은 루프를 실행한다.
• 구문

  do{
   표현식의 결과가 참인 동안 반복적으로 실행하는 실행문
  }while(표현식)

• 예제

   var i = 1, j = 1;
   while (i > 3) { // 변수 i의 초깃값은 1이기 때문에 이 while 문은 한 번도 실행되지 않음.
      console.log((i++));
   }  
   do { // 변수 j의 초깃값은 1이기 때문에 이 do / while 문은 단 한 번만 실행됨.
      console.log("j : " + (j++));
   } while (j > 3);

for문

• while문과 달리 자체적으로 초기식, 표현식, 증감식을 모두 포함하는 반복문이다.
• while문보다는 좀 더 간결하게 반복문을 표현할 수 있다.
• 구문

  for(초기식;표현식;증감식){
   표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
  }

• 초기식, 표현식, 증감식은 각각 생략될 수 있다.
• 각 식에 쉼표(,)를 사용하면 여러개 초기식이나 증감식을 동시에 사용 가능하다.
• 예제

  for (var i = 1; i < 10; i++) {
   console.log("i" + i);
  }

  

for in 문

• 해당 객체의 모든 열거할 수 있는 프로퍼티를 순회할 수 있도록 해준다.
  • 열거할 수 있는 프로퍼티란 모든 enumerable(열거 가능 여부)의 세팅이 true로 설정된 프로퍼티를 의미한다.
  • 쉽게말해 대충 어떤 객체(배열 등등)가 읽을 수 있는 모든 항목을 가져와 for문으로 접근하는 방법
• 구문

  for (변수 in 객체) {
    객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
  }

• 다음 예제는 for/in 문을 사용하여 배열의 요소에 접근하는 예제

  var arr = [3, 4, 5];
  

for (var i = 0; i < arr.length; i++) { // 배열 arr의 모든 요소의 인덱스(index)를 출력함. console.log(i + " "); }

for (var i in arr) { // 위와 같은 동작을 하는 for / in 문 console.log(i + " "); }

![](https://velog.velcdn.com/images/latte-p/post/cd3aaa4c-272f-4f08-9b7a-407a5d957d43/image.png)



#### 기타 제어문
1. continue
   - 루프 내에서 해당 루프의 나머지부분은 건너뛰고 바로 다음 표현식의 판단으로 넘어가게 한다.
   - 구문 및 예제

1. continue;

2. continue 라벨이름;

   var exceptNum = 3;

   for (var i = 0; i <= 100; i++) { if (i % exceptNum == 0) // exceptNum의 배수는 출력하지 않음.

   continue;

   console.log(i + " "); } ```

   2. break

• 루프 내에서 해당 반복문을 완전히 종료시키고 반복문 다음에 위치한 실행문으로 프로그램의 흐름을 이동시킴

• 루프 내에서 표현식의 판단 결과에 상관없이 반복문을 완전히 빠져나가고 싶을 때 사용

• 문법 및 예제

   1. break;
   2. break 라벨이름;
  
   var lectures = ["html", "css", "자바스크립트", "php"];
   var topic = "자바스크립트";
  
   for (var i = 0; i < lectures.length; i++) {
      if (lectures[i] == topic) {
         document.write(topic + " 과목은 " + (i + 1) + "번째 과목입니다.");
      break; // 원하는 값을 찾은 후에는 더 이상 for 문을 반복하지 않고 빠져나감.
      }
   }

  배열

배열이란?

• 자바스크립트에서 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합이다.
• 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다.
• 배열의 특징
  1. 배열 요소의 타입이 고정되있지 않으므로 배열 요소끼리 타입이 다를 수 있다.
  2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 배열 요소가 비어있을 수 있다.
  3. 자바스크립트에서 배열은 Array 객체로 다뤄진다.

배열 생성

• 배열을 만드는 법은 3가지가 존재
  1. 배열 리터럴을 이용하는 방법

      var arr = [배열요소 1, 배열요소 2]; 

  2. Array 객체의 생성자를 이용하는 방법

      var arr = Array(배열요소 1, 배열요소 2);

  3. new 연산자를 이용한 Array객체 생성법

      var arr = new Array(배열요소 1, 배열요소 2);

• 위 세 방법 모두 같은 결과의 배열을 만든다.

배열의 참조

• 배열의 요소를 참조하고 싶을 때는 []를 사용한다.
• 구문 및 예제

  배열이름[인덱스]
  

var arr = [1,2,3,4,5]; console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); console.log(arr[3]); console.log(arr[4]);

![](https://velog.velcdn.com/images/latte-p/post/616cc6ce-66f2-495e-ae35-5c36da7b52e2/image.png)


- 배열의 인덱스는 항상 0부터 시작이다.
- 최대 2^32보다 작은 양수를 사용할 수 있다.

#### 배열 요소의 추가
- 자바스크립트에서 배열에 새로운 배열 요소를 추가하는 방법은 다음과 같다.

arr.push(추가할 요소); arr[arr.length] = 추가할 요소; // length란 해당 객체의 길이를 의미하며 arr배열의 전체길이를 뜻함 arr[특정인덱스] = 추가할 요소; //특정 인덱스를 지정하여 추가

#### 배열의 순회
- 배열의 모든 요소에 접근하고자 할 때 for문과 같은 반복문을 사용하여 접근할 수 있다.
- 예제

var arr = [1,2,3,4,5]; console.log("for in을 이용한 배열순회") for(var idx in arr){ console.log(idx); } console.log("단순 for문 이용한 배열순회")

for(var i ; i<arr.length; i++){ console.log(arr[i]) }

- 다차원 배열의 설명은 생략하고 관련 내용이 나올 시 설명하겠습니다.

### 함수
- 함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다.
- 함수는 필요할때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
- 예제

function addNum(x, y){ return x+ y; }

console.log(addNum(1,2));

#### 자바스크립트에서의 함수
- 함수도 하나의 타입으로 취급한다.
- 함수를 변수에 대입하거나 프로퍼티를 지정하는 것도 가능하다.
- 자바스크립트의 함수는 다른 함수 내 중첩되어 정의될 수 있다.

#### 함수의 정의
- 자바스크립트에서 함수는 function 키워드로 시작되며, 다음과 같은 구성요소를 가진다.
  - 함수의 이름
  - 괄호안에 쉼표로 구분되는 함수의 매개변수
  - 중괄호로 둘러싸인 자바스크립트 실행문

function 함수이름(매개변수1, 매개변수2 ...){ 함수가 호출되었을 때 실행하고자 하는 실행문; }

function addNum(x, y){ return x+ y; }

console.log(addNum(1,2));

#### 반환문 return
- 자바스크립트에서 함수는 반환(return)문을 포함할 수 있다.
- 이러한 반환문을 통해 호출자는 함수에서 실행한 결과를 전달받을 수 있다.
- 또 우려먹는 사골 예시

function addNum(x, y){ return x+ y; //x 와 y 더한값을 반환한다. }

#### 함수의 호출
- 함수는 선언을 한 후 호출해야 실행이 된다.
- 일반적인 함수의 호출은 함수의 정의문과 같은 형태로 호출이 가능하다.

addNum(1,2);

var sum = addNum(1,2); ```

묵시적 타입변환

• 자바스크립트는 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다.
• 즉 문자열 값이 오길 기대하는 곳에 숫자가 오더라도 자바스크립트는 알아서 숫자를 문자열로 변환하여 사용한다.
• 예시

  10 + "문자열" // 문자열연결을 위해 10이 문자열로 변환된
  "3" * "5" // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨
  1 -  "문자열" //NaN 이 예제는 뺼셈 연산을 위해 문자열이 숫자로 변환되어야 하나,
  해당 문자열은 두 번째 예제의 문자열과는 달리 숫자로 변환될 수 없는 문자열
  따라서 NaN으로 반환된다.

• NaN이란 Not a Number의 축약형, 정의되지 않은 값이나 표현할 수 없는 값이라는 의미

명시적 타입 변환

• 묵시적 타입 변환을 많이 사용하지만 명시적으로도 타입을 변환할 방법도 제공한다.
• 해당 전역함수는 아래와 같다.
  • Number()
  • String()
  • Boolean()
  • Object()
  • parseInt()
  • parseFloat()
• 아래 내용 중 일부 불필요하다 생각되어 생략했습니다.

변수

변수의 선언과 초기화

• 자바스크립트는 var 이라는 키워드를 이용하여 선언한다.
• 선언되지 않은 변수를 사용하려고 하거나 접근하면 오류가 발생한다.
• 단 선언되지 않은 변수를 초기화할 경우만 자동으로 선언을 한 후 초기화 한다.

  var month; //month라는 이름 변수 선언
  date = 20; // date라는 이름의 변수를 묵시적으로 선언
  //둘다 사용하는데 이상 없습니다.

  var month; //변수 선언
  var date = 20; // 선언과 동시에 초기화
  month = 10; //변수의 초기화

변수의 타입과 초깃값

• 자바스크립트 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수 있다.

  var num = 10; //변수 선언 초기화
  num = [10, 20, 30]; //배열 대입
  var num; //초기화 후 재선언은 무시됨

• 선언만 하고 초기화하지 않은 변수는 undefined 값을 갖는다.

변수의 이름

• 변수는 이름을 가지고 식별하므로 변수의 이름은 식별자가 된다.
• 변수의 이름은 영문(대소문자), 숫자, 언더스코어(_), $로만 구성된다.
• 숫자로 시작할 수 없다.

연산자

• 다 아는 내용일 수 있으니 빠르게 정리하고 넘어가겠습니다.
• +
  • 왼쪽 피연산자의 값을 오른쪽 피연산자 값과 더함

    a = 1
    b = 1
    a+b = 2

• -
  • 왼쪽 피연산자 값을 오른쪽 피연산자 값을 뺌

    a = 2
    b = 1
    a - b = 1

• *
  • 왼쪽 피연산자 값에 오른쪽 피연산자의 값을 곱합
• /
  • 왼쪽 피연산자 값을 오른쪽 피연산자 값으로 나눈 몫을 반환
• %
  • 왼쪽 피연산자 값을 오른쪽 피연산자 값으로 나눈 나머지를 반환

연산자의 우선순위

• 각종 (), {} ,[]은 제외한 5개중
• *, /, % 은 동일한 위치며 나머지 - ,+ 보다 우선순위가 있다.
• 이하 내용은 생략합니다.

대입 연산자

• 대입 연산자는 변수에 값을 대입할 때 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽이다.
• 앞서 살펴본 산술 연산자와 결합한 복합 대입 연산자가 존재한다.

1. =
   • 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입
2. +=
   • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결과 값을 왼쪽 피연산자에 대입함
3. -=
   • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 뺀 후, 그 결과값을 왼쪽 피연산자에 대입
4. *=
   • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입
5. /=
   • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 나눈 몫을, 그 결괏값을 왼쪽 피연산자에 대입
6. %=
   • 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 나눈 나머지를, 그 결괏값을 왼쪽 피연산자에 대입

증감 연산자

• 증감 연산자는 피 연산자를 1씩 증가 혹은 감소시킬때 사용
• 이 연산자는 피연산자가 단 하나뿐인 단항연산자이다.

1. ++x
   • 피연산자의 값을 1 증가시킨 후 해당 연산을 진행
2. x++
   • 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴
3. --x
   • 피연산자를 1 감소 시킨 후 해당 연산을 진행
4. x--
   • 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴

비교 연산자

• 비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여 참(true), 거짓(false)를 반환한다.
• 비교 연산자는 두개의 피연산자를 가지는 이항연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽.

1. ==
   • 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참 반환
2. ===
   • 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참 반환
3. !=
   • 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참 반환
4. !==
   • 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않고, 타입이 다르면 참 반환
5. >
   • 왼쪽 피연산자가 오른쪽 피연산자의 값보다 크면 참 반환
6. >=
   • 왼쪽 피연산자가 오른쪽 피연산자의 값보다 크거나 같으면 참 반환
7. <
   • 왼쪽 피연산자와 오른쪽 피연산자의 값보다 작으면 참 반환
8. <=
   • 왼쪽 피연산자와 오른쪽 피연산자의 값보다 작거나 같으면 참 반환

논리 연산자

• 주어진 논리식을 판단하여 참, 거짓을 반환
• &&연산자와 ||연산자는 두개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽
• !연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽이다.

1. &&
   • 논리식이 모두 참이면 참을 반환
   • 비교군 두개가 둘중 하나가 true이거나 둘다 false일 떄 false이다
2. ||
   • 논리식중 둘중 하나가 참이면 참을 반환
   • 비교군중 두개 다 false여야 false
3. !
   • 논리식의 결과가 참이면 거짓, 거짓이면 참 반환

비트연산자

• 는 크게 필요한 내용이 아니라는 판단으로 생략하겠습니다.

삼항 연산자

• (표현식) ? x : y
• 표현식이 참일 경우 x, 거짓일 경우 y
• 뒤에서 설명한 if문을 축약시켜 간결하게 해준다.(간단하거나, 특별한 경우에만 사용)

typeof 연산자

• typeof 변수명
• 해당 변수명이 어떤 형인지 알려주는 연산자이다.(이하생략)

instanceof 연산자

• 변수명 instanceof 객체명
• 해당 변수명이 객체의 형을 가지고있는지 판별하는 연산자(true, false 반환)
• 두개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽의 오른쪽이다.

조건문

제어문

• 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 한다.
• 이러한 제어문은 조건문 반복문 등이 포함된다.

조건문

• 조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이다.
• 가장 기본이 되는 if문이다.
• 자바 스크립트에서 사용할 수 있는 조건문의 형태는 아래와 같다.
  • if문
  • if/else문
  • if/else if/else 문
  • switch문

if문

• if문은 표현식의 결과가 true면 주어진 실행문을 실행, 거짓 false 이면 아무것도 실행하지 않는다.

  if(표현식){
  표현식의 결과가 참일경우에만 실행됨
  }

  var x = 10, y = 20;
  if (x == y) {
    console.log("x와 y는 같습니다.");
  }
  if (x < y) {
    console.log("x가 y보다 작습니다.");
  }

• 실행문이 한줄 뿐이라면 중괄호를 생략할 수 있다.

  if (x > y) // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
    document.write("x가 y보다 큽니다.");

  else문

• if문의 표현식의 결과가 참이 아닐 경우 else문 내 실행문을 수행함

  if (표현식) {
    표현식의 결과가 참일 때 실행하고자 하는 실행문;
  } else {
    표현식의 결과가 거짓일 때 실행하고자 하는 실행문;
  }

else if문

• 주어진 조건식을 수행하려고 할 때 표현식이 if/else만으로는 부족하거나 추가를 해야하는 경우 else if를 사용
• 갯수의 제한은 없다.

  if (표현식1) {
    표현식1의 결과가 참일 때 실행하고자 하는 실행문;
  } else if (표현식2) {
    표현식2의 결과가 참일 때 실행하고자 하는 실행문;
  } else {
    표현식1의 결과도 거짓이고, 표현식2의 결과도 거짓일 때 실행하고자 하는 실행문;
  }

삼항 연산자

• 위에서 간단히 정리했으므로 생략하겠습니다.

switch

• if/else문과 마찬가지로 주어진 조건 값에 따라 프로그램이 다른 명령을 수행하도록 하는 조건문
• 주로 정해진 값을 구분해야 할 때 switch문을 사용한다.

  switch (조건 값) {
    case 값1:
        조건 값이 값1일 때 실행하고자 하는 실행문;
        break;
    case 값2:
        조건 값이 값2일 때 실행하고자 하는 실행문;
        break;//멈춤으로 switch문을 빠져나간다. 없을 시 해당 값에서 멈추지 않고 다음 값으로 넘어간다.
    ...
    default:
        조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문;
        break;
  }

• 웹페이지에서 form태그 및 요소를 사용하여 사용자로부터 입력을 받을 수 있다.
• 우리가 인터넷에서 사용하는 아이디 비밀번호 입력, 게시글 쓰기, 덧글 쓰기 전부 Form으로 입력을 받는 것이라고 생각하면 쉽다.
• form태그를 사용함으로 얻어지는 효과는 다음과 같다.
  • 브라우저는 사용자가 요구한 요청에 따른 입력이 가능하게 한다.
  • 데이터 전달을 이용하여 웹서버에 구축된 데이터베이스에 데이터 저장이 가능하게 한다.
  • 기타 등등
• form 태그의 사용 예시

  <form action="처리할 페이지 주소" method="get|post"></form>

• action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다.
• 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.
• method 속성은 입력받은 데이터를 서버에 전달하는 방식을 명시한다.
• 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다.

method 속성

• method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET방식과, POST방식으로 나뉜다.

GET방식

• 주소에 데이터를 추가하여 전달하는 방식
• 데이터가 주소 입력창에 그대로 나타나며 전송할 수 있는 데이터의 크기 또한 제한적
• 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용된다.
• 다만 GET방식의 경우 요청 데이터를 요청 주소 뒤에 그대로 넘기는 방식이기 때문에 데이터가 암호화되지 않아 공격의 우려가 있다.
• 예시 (사진은 순당무 트게더를 구글에 검색하였을 때 주소창 상황입니다.)

POST

• 데이터를 별도로 첨부하여 전달하는 방식.
• 데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없다.
• 보안성 및 활용성이 GET방식보다 높다
• 주로 HTTP 통신 시 JSON이라는 데이터를 넘길떄 POST방식을 사용한다.

다양한 타입의 input 요소

• HTML에서는 다양한 타입의 <input> 요소를 사용하여 사용자로부터 입력을 받을 수 있다.
• 대표적 input 요소는 다음과 같다.
  • 텍스트 입력
  • 비밀번호 입력
  • 라디오 버튼
  • 체크박스
  • 파일 선택
  • 선택 입력
  • 문장 입력
  • 버튼 입력
  • 전송 버튼
  • 필드 셋

1. 텍스트 입력
   • <input>태그의 type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.

     <form>
      <input type="text" name = "search">
     </form>

2. 비밀번호 입력
   • <input>태그의 type 속성값을 "password"로 설정하면, 사용자로부터 한 줄의 패스워드 형테의 데이터를 입력받을 수 있다.
   • 입력 시 별표 혹은 작은 원모양이 표시된다.

     <form>
      <input type="password" name = "passwd">
     </form>

3. 라디오 버튼
   • <input>태그의 type 속성값을 "radio"로 설정하면, 사용자로부터 여러개 옵션(option)중에서 단 하나의 옵션만을 입력받을 수 있다
   • 이떄 서버로부터 정확한 입력을 전송하기 위해서는 radio 요소의 name 속성이 같아야 한다.

     <form>
      <input type="radio" name = "radio_group" value = "jerry" checked>제리
      <br>
      <input type="radio" name = "radio_group" value = "kaisa">카이사      
     </form>

   • checked 속성을 입력하여 미리 선택되는 옵션을 지정할 수 있다.
   • 추가 설명을 하면 라디오 버튼으로 체크한 대상의 데이터는 value값으로 설정하면 된다 예를들면 제리를 선택하였을 때 실제 라디오버튼의 데이터는 value에 세팅된 jerry 이다.

4. 체크박스
   • <input>태그의 type 속성값을 "checkbox"로 설정하면, 사용자로부터 여러개 옵션(option)중에서 단 하나의 옵션만을 입력받을 수 있다
   • 라디오 버튼과 다른점은 여러개 옵션을 한번에 입력받을 수 있다는 것.
   • 이떄 서버로부터 정확한 입력을 전송하기 위해서는 checkbox 요소의 name 속성이 같아야 한다.

     <form>
      <input type="checkbox" name = "lolchamp" value = "jerry" checked>제리
      <br>
      <input type="checkbox" name = "lochamp" value = "kaisa" disabled>카이사      
     </form>

   • checked 속성을 입력하여 미리 선택되는 옵션을 지정할 수 있다.
   • disabled 속성을 사용하여 해당 옵션을 선택할 수 없게 할 수 있다.

5. 파일선택

   • <input>태그의 type 속성값을 "file"로 설정하면, 사용자로부터 파일을 전송 받을 수 있다.

     <form>
      <input type="file" name = "upload_file" accept = "image/*">
      <br> 
     </form>

   • accept 속성을 이용하여 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있다.

6. 선택 입력

   • <select> 요소는 여러개의 옵션이 드롭 다운 리스트로 되어 있으며, 그 중에서 단 하나의 옵션만을 입력받을 수 있다.

   • <option> 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시한다.

     <select name = "fruit">
      <option value="apple"> 사과
      <option value="orange" selected> 귤
      <option value="strawberry"> 딸기
      <option value="peach"> 복숭아
     
     </select>

     

7. 문장 입력
   • <textarea> 요소는 사용자로부터 여러줄의 텍스트를 입력받을 수 있다.

     <textarea name="message" rows="5" cols="30">
     여기에 적으세요.
     </textarea>

   • rows 속성과 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정할 수 있다.

8. 버튼

   • 요소는 사용자가 누를 수 있는 버튼을 나타낸다.
   • 특이하게 2가지 방법이 존재한다.
     • <input>에서 type을 button으로 지정하기
     • <button>태그를 사용하는 방법

       예제
       <input type = "button" value = "type 버튼">
       <button>버튼 태그 버튼</button>

   

9. 전송 버튼
   • <input> 태그의 type 속성값을 "submit"으로 설정하면, 사용자로부터 입력받은 데이터를 서버의 폼 핸들러로 제출하는 버튼을 생성한다.
   • 폼 핸들러란 위에서도 설명했지만 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미한다.

     <form action="전송할 주소">
     form 테스트 : <br>
     <input type="text" name="nickname" value="별명"><br><br>
     <input type="submit" value="전송">
     </form> 

10. 필드 셋
    • <fieldset> 태그는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 한다.
    • <legend> 요소는 fieldset 요소 안에서만 사용할 수 있으며, field 요소의 제목을 나타낸다.

      <form action="전송할 주소">
      <fieldset>
        <legend>입력 양식</legend>
        이름 : <br>
        <input type="text" name="username"><br>
        이메일 : <br>
        <input type="text" name="email"><br><br>
        <input type="submit" value="전송">
      </fieldset>
      </form> 

<input> 태그에서 사용하는 속성들

input 요소의 속성

• input 요소의 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있다.

1. value 속성
   • value 속성은 input 요소의 입력필드에 나타나는 초깃값을 설정한다.

     예시
     <form>
     학과 : <br><input type="text" name="department" value="컴퓨터공학과"><br>
     </form>

2. readonly 속성
   • readonly 속성은 사용자가 입력필드를 볼 수는 있으나, 수정할 수 없도록 설정
   • disabled 속성과 다른 점은 전송 버튼을 누르면 처음 세팅된 초기값이 서버로 전송된다는 점

     예시
     <form>
     학과 : <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>
     </form>

3. maxlength속성
   • maxlength 속성은 입력 필드에 입력할 수 있는 문자의 최대 길이(length)를 설정한다.

     <form>
     학과 : <br><input type="text" name="department" value="컴퓨터공학과" maxlength="10"><br>
     </form>

4. size
   • size 속성은 입력 필드에 보여지는 input 요소의 크기 (size)를 설정한다.
   • maxlength 속성과 달리 입력 필드에 한번에 보여줄 수 있는 문자의 최대 개수만을 의미한다.

     <form>
     학과 : <br><input type="text" name="department" value="컴퓨터공학과" maxlength="10" size = "30"><br>
     </form>

JAVASCRIPT

• HTML, CSS의 추가적인 설명은 새로운 내용이 나올 떄 마다 정리하도록 하겠습니다.
• Javascrip는 객체 기반의 스크립트 언어이다.
• HTML로는 웹의 내용을 작성(뼈대를 작성) CSS로는 웹을 디자인(살을 붙여 형태를 갖춤), JAVASCRIPT로는 웹의 동작(형태를 갖춘 요소가 행동을 함)을 구현할 수 있다.
• 파이썬과 같은 인터프리터 언어로 별도의 컴파일 없이 인터프리터가 스크립트를 한줄한줄 읽어 내리는 방식으로 동작한다고 보면 된다.
• 웹 브라우저에는 기본적으로 자바스크립트 인터프리터가 내장되어있다.
• 본 정리본은 간단한 문법만 정리 할 예정입니다.

자바 스크립트의 특징

• 객체 기반 스크립트 언어이다.
• 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.
  • 자바스크립트 다음버전인 타입스크립트부터 타입을 명시함
• 객체 지향형 프로그래밍과 함수 지향형 프로그래밍 모두 표현할 수 있다.
  • 쉽게말해 자바에서 사용하는 class도 사용이 가능하고 통상적인 active를 사용할 때 함수 호출이 잦다.
• 빠르게 문법을 알아보자

자바 스크립트 작성법

• 자바스크립트 작성법은 css와 다르게 2가지가 존재한다.

1. 내부 자바스크립트 코드로 적용하는 법
   • HTML문서 안에 작성하는 방식이다.
   • 문서 내 <head> 태그와 <body>태그 안에 <script>태그를 적용하여 자바스크립트를 적용하면된다.
   • 예시

     //head 태그 안
      <head>
        <script>
          function a(){
              alert("hello world");
          }
        </script>
      </head>
     //body 태그 안
     <body>
      <p>
        안녕하세요
      </p>
      <script>
        function a(){
          alert("hello world");
        }
      </script>
     </body>

2. 외부 자바스크립트 파일 입력하는 법
   • 자바스크립트는 파일로 따로 관리할 수 있다. 이때 파일 확장자는 .js파일을 이용한다.
   • <script>태그 안에 src 속성을 추가하여 js 파일을 추가할 수 있다.

     //예시
     //hello.js
     function ab(){
     //alert는 브라우저에 출력되는 알림창 입니다.
     alert("hello world");
     }
     //20220709.html
     <head>
     <script src="./hello.js">
     </head>

     

기본 타입

• 언어를 공부하면 항상 딸려오는 타입이다.
• 자료형이라고도 불리며 자바스크립트는 타입 명시가 기본적으로 필요 없이 var를 앞에 붙여 선언한다.
• 다만 파이썬처럼 초기화한 값에 따라 자동으로 타입 지정이 된다.
• 자바스크립트는 여러가지 형태의 타입을 미리 정의하여 제공하며 이를 기본 타입이라고 부른다.
• 자바스크립트의 기본 타입은 원시 타입과 객체 타입으로 구분된다.
• 원시타입은 아래와 같다 ```

1. 숫자(number)
2. 문자열(string)
3. 불리언(boolean)
4. 심볼(symbol) : ECAMScript 6 부터 사용
5. undifined ```

• 객체 타입은 다음과 같다. ```

6. 객체
   var num = 10; //숫자 var myName = "홍길동" //문자열 var str; //undefined

숫자

• 자바스크립트는 모든 수를 실수로 표현한다.
• 매우 큰 수나 작은 수를 표현할 때는 e표기법을 사용할 수 있다.

  var num = 10;//소수점을 사용하지 않음
  var num2 = 10.11;//소수점 사용

문자열

• 자바스크립트에서 큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합을 의미한다.
• 큰따옴표는 작은 따옴표로 둘러싸인 문자열에만 포함이 도며, 작은 따옴표는 큰 따옴표로 둘러싸인 문자열에만 포함된다.

  var str_ex1 = "문자열이다";
  var str_ex2 = '이것도 문자열이다.';
  var str_ex3 = "'얘'를 포함하는 문자열이다.";
  var str_ex4 = '"얘"를 포함하는 문자열이다.';

• 자바스크립트에서는 숫자와 문자열을 더할 수 있다. 이경우 숫자+문자는 문자열로 변환하여, 두 문자열을 연결하는 연산을 수행한다.

  var num = 10;
  var str = "javascript"
  console.log(num + str);

boolean 불리언

• 불리언 값은 참(true)과 거짓(false)을 표현한다.
• 자바스크립트에서 불리언값은 예약어인 true와 false를 사용하여 나타낼 수 있다.

  var firstNum = 10;
  var secondNum = 11;
  console.log(firstNum == secondNum);

null과 undefined

• 자바스크립트에서 null이란 object타입이며, 값이 정해지지 않은 것을 의미한다.
• undefined란 null과 달리 타입이 정해지지 않는 것을 의미한다.
• 따라서 undefined는 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환된다.

var num; //초기화 되지 않는 값은 undefined
var str = null; //object 타입의 null 값

객체

• 자바스크립트의 기본 타입이다.
• 객체는 여러 프로퍼티나 메소드를 같은 이름으로 묶어놓은 일종의 집합체이다.

var bangjang = {
  line : ["support","mid"],
  broadcasting_career : "3",
}
console.log("방장의 주 라인은" + bangjang.line[0] +
"과" + bangjang.line[1]+"이 되겠습니다. 방송경력은" + 
bangjang.broadcasting_career + "년 입니다.");

chrome에서 테스트 방법

• 본 강의에서 사용하는 테스트 방법이다.
• console.log()
  • 브라우저에서 제공하는 콘솔에서 메시지를 출력한다.
  • 일종의 로그 출력이라고 생각하면 되고 아래와 같이 사용한다.

    console.log(입력할 것 입력);

1. 먼저 크롬 위에 아무곳에 우클릭한다.

2. 검사를 클릭, 또는 크롬 우측 점 세개 클릭 - 도구 더보기 클릭 - 개발자 도구 클릭

3. 나온 창에서 console 클릭

4. 출력된 화면을 확인

• HTML 테이블이란 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표
• 엑셀, 한글 표 등의 스프레드 시트 데이터와 동일하다고 보면됨

테이블의 구성

• 주 사용 태그는 <table>, <td>, <tr> 태그이다.

• 상위에 table 태그 1차 하위에 tr 태그, 2차 하위에 td태그가 들어간다고 보면 됨

• td태그 안에는 입력할 수 있는 모든 데이터가 들어가며 해당 데이터는 table 태그도 포함된다.

• 구성 예제

  //항상 table 태그로 시작합니다.
  <table>
  //tr은 테이블의 열을 구분한다
  <tr>
    //th는 각 열의 제목을 나타내며 굵게 표시 및 가운데정렬을 한다
    <th></th>
  
  </tr>
  <tr>
    //td는 각각의 열을 셀로 나뉜다.
    <td></td>
  </tr>  
  </table>
  

테이블 행, 열 합치기

• colspan, 속성과 rowspan 속성은 각각 행, 열을 합칠 수 있다.
• 열을 합치는 예제

  <table border="1">
  <tr>
    <th>챔피언</th>
    <!-- 열을 합칠때 사용하는 colspan -->
    <th colspan="2">라인</th>
  </tr>
  <tr>
    <td>탈리아</td>
    <td>미드</td>
    <td>정글</td>
  </tr>
  <tr>
    <td>애쉬</td>
    <td>원딜</td>
    <td>서폿</td>
  </tr>      
  </table>

• 행을 합치는 예제

  <table>
  <tr>
    <th colspan="2">라인</th>
  </tr>
  <tr>
    <td>미드</td>
    <td>정글</td>
  </tr>
  <tr>
    <td>원딜</td>
    <td>서폿</td>
  </tr>      
  </table>

  

캡션

• <caption>태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.
• 예제

  <table>
  <caption>롤 챔피언</caption>
  <tr>
    <th colspan="2">라인</th>
  </tr>
  <tr>
    <td>미드</td>
    <td>정글</td>
  </tr>
  <tr>
    <td>원딜</td>
    <td>서폿</td>
  </tr>      
  </table>

• 놀랍게도 이게 캡션입니다.

CSS(Cascading Style Sheets)

• 웹페이지의 스타일과 내용적인 부분을 서로 분리해 놓은 서식을 스타일 시트라고 한다.
• css요소는 엄청 많은 요소들을 가지고 있습니다. 따라서 전부다 정리하기엔 본 취지(css 간단한 개념 이해)에는 맞지 않기 때문에 해당 정리본에는 간단한 문법 및 사용법만 정리할 예정입니다.
• 너무 간단하게 작성하여 죄송스럽게 생각하고 추가 설명 및 요소가 궁금하신 분들은 참조 사이트 올려드리겠습니다.

CSS의 적용법

• CSS의 작성법은 3가지로 구분이 된다.

• 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 구분된다.

• 인라인 스타일

  • html의 태그 안에서 작성하는 방식이다. 태그 속성(HTML1 태그의 속성 작성법 확인하기.)에 style 속성을 추가함으로 작성할 수 있다.
  • <a style = "속성 : 속성값; 속성2 : 속성값2;">등의 방식으로 작성된다.
  • 예제

    <h1 style = "color : green;"> 안녕하세요 스타일 시트를 인라인방식으로 작성</h1>
    <h1 style = "color : red;"> 안녕하세요 스타일 시트를 인라인방식으로 작성</h1>

  

• 내부 스타일 시트

  • html요소 중 head 태그 내 style이란 태그로 css스타일을 적용하는 방법이다.
  • 아래와 같이 작성할 수 있다.

    <!--head 태그 안-->
    <style>
    h1{
      /*해당 속성은 글자 색을 바꾸는 속성*/
      color : green;
    }
    /*뒤에서 설명할 선택자를 이용한 작성법*/
    #a{
      color : red;
    }
    </style>
    <body>
    <h1>안녕하세요 스타일 시트를 내부 스타일 시트방식으로 작성</h1>
    <h1 id = "a">안녕하세요 스타일 시트를 내부 스타일 시트방식으로 작성</h1>
    </body>

    

• 외부 스타일 시트
  • 스타일 시트 파일을 생성하여 웹사이트 전체의 스타일을 하나의 파일에서 변경할 수 있게 해준다.
  • 스타일 시트 파일은 .css 확장자로 저장된다.
  • <head> 태그 내 <link>태그를 이용하여 불러올 수 있다.
  • 예제

    <head>
      <!-- rel은 stylesheet뿐만 아니라 다른 것도 들어갈 수 있습니다.
      현재는 stylesheet임을 의미하게 함 -->
      <!-- 경로 입력 시 ./는 현 위치 폴더를 의미합니다. -->
      <link rel="stylesheet" href="./style.css">
    </head>
    <body>
      <h1 id="a">안녕하세요 스타일 시트를 외부 스타일 시트방식으로 작성</h1>
    <h1 class = "a">안녕하세요 스타일 시트를 외부 스타일 시트방식으로 작성</h1>
    </body>

    

CSS문법

• css는 항상 특정 선택자에 어떤 속성을 어떤 속성값으로 부여할 것인가를 중심으로 선언한다.

• 예제

  a {background-color: yellow; font-size:16px;}
  a : 선택자
  background-color, font-size : 속성명
  yellow, 16px : 속성 값
  ;(세미콜론) : 선언 끝

• 선택자의 요소는 다음과 같다.

• html 요소(태그), 아이디(id), 클래스(class), 그룹(group)

• html 요소(태그)

  • 태그의 경우 <a>형태로 구성되어있다. 따라서 별다른 구분자를 주지 않는다.
  • 예제

    a{
      속성: 속성값;
    }

• 아이디(id)

  • 태그는 태그 내부에 속성값(속성값 부여하는 법 HTML1 참조)으로 id명을 부여할 수 있다.
  • <a id = "an">
  • 해당 id는 수많은 a태그중 an이름을 가진 id로 분류된다.
  • 되도록이면 태그명을 구분할 수 있게 이름을 정하는 것이 좋다.
  • 따라서 css에서 id명 부여 시 아래와 같이 작성할 수 있다.

    #an{
      속성:속성값;
    }

  • id명 앞에 #을 입력하여 id 속성값이라는 것을 구분한다.

• 클래스(class)

  • id와 동일하게 태그 내부에 속성값으로 class를 부여할 수 있다.
  • <a class = "an">
  • 해당 클래스명은 수많은 a태그중 an이름을 가진 class로 분류된다.
  • id와 마찬가지로 태그명을 구분할 수 있게 이름을 정하는 것이 좋다.
  • 다만 id와 다른 점은 class는 이름 부여시 여러개를 부여할 수 있다는 것에서 차이가 있다.(id는 1개의 이름만 부여 가능)
  • <a class = "an an1 an2"> 등으로 3개의 클래스명 부여
  • 따라서 css에서 class명 부여시 아래와 같이 작성한다.

    .an{
    속성: 속성값;
    }
    .an1{
    속성: 속성값;
    }

• 그룹 선택자

  • 그룹 선택자는 태그, id, class처럼 별다른 구분을 두는 것이 아닌 여러 선택자를 같이 사용하고자 할 때 사용된다.
  • 예제

    /*이런식으로 입력 시 a태그와 an이름을 가진 id,
    an이름을 가진 클래스의 변경이 이루어진다.*/
    a, #an, .an{
      속성 : 속성값;
    }

css의 주석

• /* 작성할 주석 이름 */으로 작성한다.

Form 태그 설명전 간단한 통신법 이해

• 원래대로면 javascript설명을 한 후 진행하는 것이 이치에 맞지만, <form>태그의 복합적인 요소(설명할게 너무 많음)로 인해 브라우저와 웹서버 통신방법 먼저 설명하고자 한다.(추가 설명은 추후에 추가할 예정)
• 주로 사용하는 1달전 고인이된 Internet Explorer, 죽은 IE의 뒤를 이은 크롬 기반 MS Edge, 구글의 Chrome, 네이버의 웨일 등 인터넷을 접속하기 위헤 사용하는 것들을 "웹 브라우저"라고 한다.
• 일반적인 사람들은 브라우저를 실행시켜 주소창에 원하는 사이트를 입력하여 해당 사이트를 접속하는 방식으로 사용하고 있다.

웹 브라우저와 웹 서버의 통신

• 먼저 웹 브라우저와 웹 서버라는 개념부터 설명하겠다
  • 웹 브라우저 : 인터넷 통신을 하는 IE, Edge , Chrome, 웨일등
  • 웹 서버 : 웹 브라우저에서 요청을 하는 대상 서버
    • 쉽게 생각하면 일반적으로 사용하는 naver, daum, op.gg, fow.kr 등 각종 사이트들은 하나의 웹서버 혹은 서버라고 생각하면 된다.
• 사진출처 : 생활코딩

• 우리가 www.naver.com을 입력하면 네이버라는 사이트에 접속된다는 것을 두눈으로 확인할 수 있을것.

• 그럼 어떻게 네이버라는 사이트에 들어가게 되는걸까?

• 먼저 주소창에 www.naver.com 를 입력하여 엔터를 클릭등의 방법으로 접속하는 것을 네이버 사이트를 가지고 있는 웹서버로부터 웹 브라우저가 하는 행위라고 하며 이를 "요청"(request)이라고 한다.

  • 통상적으로 www앞에 http:// 혹은 https://를 주소창에 같이 입력할때도 있고, 안할때도 있다.
  • 이것은 브라우저가 www앞에 http를 굳이 입력하지 않아도 알아서 http로 요청을 한다고 생각하면 된다.
  • http를 간단하게 설명하면 본 설명문에서 설명하고 있는 html, css등 파일을 송수신하기 위해 사용하고 있는 통신 프로토콜(통신 규약)이라고 할 수 있다.
  • (하지마라)간단한 예시를 설명하면 순당무님의 방송에서 도네이션을 하기 위해서는 트윕 혹은 투네이션의 방식(http방식)을 사용한다. 라는 것과 돈을 보내면(http 요청) 순당무님이 방송에서 받은 도네이션을 확인하여 리액션을 하는(http 응답) 일종의 방식 혹은 약속이라고 생각하면 된다.
  • https는 보안파트에서 잠깐 언급했지만 http를 사용하는 사이트의 위변조 공격 위험을 예방하고자 기존 http에 보안인증서(공개키 방식)를 추가하여 외부로부터 공격에 대비한 방식이라고 생각하면 된다.

• 이런 요청 작업을 진행하면 www.naver.com 주소로 세팅이 되어있는 웹서버가 해당 주소를 요청하였을 때 네이버의 화면들을 보여지기 위한 html, css, javascript, image등 파일을 브라우저로 업로드(이때 해당 파일을 보내는 행위자는 웹서버이기 때문에 업로드라는 표현 사용)를 하여 브라우저에 세팅되는 행위가 응답이라고 생각하면 된다.

• 정리하면

  웹 브라우저가 웹서버에 웹페이지를 달라고 하는 것 : 요청(request)
  요청한 웹페이지를 웹브라우저에 제공하는 것 : 응답(response)

• HTML은 텍스트(text)에 다양한 효과를 주는 여러 태그가 있다.

강조 효과

<b> 와 <strong>

• HTML 문서에서 텍스트를 굵게 표현할 때 <b>(bold)태그 또는 <strong>태그를 사용하면 되고 둘다 종료 태그가 존재한다.
• <b>는 단순히 텍스트를 굵게해주지만, <strong>은 그 내용이 중요하다는 의미도 포함된다.
• 예제

   <!-- 강조효과 -->
   <p><b>안녕하세요 b태그를 사용하였습니다.</b></p>
   <!-- 강조효과 -->
   <p><strong>안녕하세요 strong태그를 사용하였습니다.</strong></p>

<i> 와 <em>

• HTML 문서에서 이탤릭체를 표현하고 싶을 때에는 <i>태그나 <em>태그를 사용한다.
• <i>는 단순히 화면을 이탤릭체로 표현해준다. <em>는 이탤릭체로 변환할 뿐만 아니라 그 내용이 중요하다는 의미도 포함한다.
• <em>과 <strong> 은 검색엔진이 강조된 텍스트를 더 중요하게 만들어준다.
• 예제

   <!-- 이탤릭체 -->
   <p><i>안녕하세요 i태그를 사용하였습니다.</i></p>   
   <!-- 이탤릭체 -->
   <p><em>안녕하세요 em태그를 사용하였습니다.</em></p>

<del>

• 텍스트 위에 가로줄을 보여준다.
• 예제

   <!-- 텍스트 가로줄 -->
   <p><del>안녕하세요 del태그를 사용하였습니다.</del></p>  

<ins>

• 텍스트 아래에 밑줄을 표시해준다.

   <!-- 텍스트 밑줄 -->
   <p><ins>안녕하세요 ins태그를 사용하였습니다.</ins></p>

위 첨자와 아래첨자

• <sup>는 윗첨자
  • 윗첨자의 예 (제곱)
• <sub>는 아래첨자
  • 아래첨자의 예 (화학식 및 로그함수작성 시)
• 예제

   <!-- 위 첨자 -->
   <p>2<sup>2</sup>는 4이다</p>
   <!-- 위 첨자 -->
   <p>log<sub>2</sub>4는 2이다</p>

<q>

• 인용구로 사용되며 사용시 시작태그부터 끝 태그까지 따옴표가 붙는다.
• 예제

   <p><q>안녕하세요</q></p>

  

<blockquote>

• 블록 인용구로 사용되며 별도의 단락을 들여쓰기를 한다.

<abbr>

• 축약형 표현으로 사용되며 마우스를 올려놓으면 title에 세팅된 값이 보여진다.

사용
<abbr title = "방장공부하자시리즈">방장</abbr>

이때 출력되는 방장을 마우스로 올리면 방장공부하자 시리즈가 나옴

<address>

• 주소를 표현할 수 있으며 이탤릭체로 표시된다.
• 위 아래로 공백이 자동으로 삽입된다.

<!-- -->

• 주석으로 사용된다.
• <!---주석내용--> 으로 사용된다.
• 주석안에 주석을 추가할 수 있다.

<!---한줄로 사용할 수 있다. -->

<!--

    여러줄로
    사용할
    수 있다.
    <!-- 주석을 더 추가해 보았다. -->

-->

엔티티

• HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어라고 부른다.
• 이러한 HTML예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 다른 것으로 해석한다.
• 예시

  &lt == < //로 작성된다
  

&gt == > //로 작성된다.

- HTML에서 제공하는 대표적 엔티티

|엔티티문자|엔티티이름|16진수엔티티숫자|설명
|---|---|---|---|
|     |` `|` `|줄 바꿈 없는 공백
|<    |`&lt;`|`&#60;`|보다 작은|
|>    |`&gt;`|`&#62;`|보다 큰|
|&    |`&amp;`|`&#38;`|AND 기호|
|"    |`&quot;`|`&#34;`|큰따옴표|
|'    |`&apos;`|`&#39;`|작은따옴표|

### 문자 셋
- 웹 브라우저가 HTML문서를 정확하게 나타내기 위해 해당 문서가 어떠한 문제셋으로 저장되었는지를 알아야 한다.
- 따라서 HTML문서가 저장될 때 사용된 문자셋에 대한 정보를 `<head>`태그 내의 `<meta>` 태그에 명시한다.
- 예시

//HTML4에서 UTF-8을 사용하는 경우

//HTML5에서 UTF-8을 사용하는 경우

문자셋의 종류

• ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다.
• ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.
• ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋입니다.
• UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋입니다.

링크 <a>

• 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼링크가 존재한다.
• 이러한 하이퍼 링크를 간단히 링크(link)라 부르며, HTML에서는 <a>로 표현한다.
• a 태그의 어원은 ancher(닻, 출처 : 생활코딩)
• <a>태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시한다.
• <a>태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있다.

  예제
  <a 
  href="링크의 주소"
  target=""
  >링크 클릭</a>

• target 속성
  • 링크에 연결된 문서를 어떻게 열지를 명시한다.

//blank
<h2>
  <a href="/html/intro" target="_blank">blank</a>
</h2>

//self
<h2>
  <a href="/html/intro" target="_self">self</a>
</h2>

//parent
<h2>
  <a href="/html/intro" target="_parent">parent</a>
</h2>

//top
<h2>
  <a href="/html/intro" target="_top">top</a>
</h2>

//myframe
<h2>
  <a href="/html/intro" target="myframe">myframe</a>
</h2>

이미지 <img>

• 이미지 삽입을 위한 태그
• 예제 ```
• 통상적으로 사용되는 예제입니다. <img src = "이미지의 경로" width = "이미지의 너피" height = "이미지의 높이" alt = "src 경로에 존재하지 않을 때 대체 글자"
  ```
• src 즉 이미지의 경로는 디스크 내부 경로를 사용해도 되며 인터넷에서 돌아다니는 주소의 경로로 사용해도 된다.

예제
로컬 파일을 가져오는 예
<img src = "../img/1.png" height = "200" width = "200">

인터넷에 등록된 이미지 주소로 가져오는 예
<img src = "https://yt3.ggpht.com/WhakDltWZLnob1bgkPExm3zHO1WBFBA7UTfzFTfLVLvNWo7v6YoCmF6jt6XgXxGhBUg1FV6t=s900-c-k-c0x00ffffff-no-rj" height = "200" width = "200">

• md 파일에서도 적용됩니다.
• 로컬 파일 불러오기 예

• 인터넷에 등록된 이미지 주소로 가져오는 예
• 구글에 돌아다니는 방장 이미지를 가져왔습니다.

리스트

• 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미
• HTML에서는 이러한 리스트를 표현하기 위해 다음과 같은 리스트를 제공
• 리스트는 3가지로 분류된다
  1. 순서가 있는 리스트
     • 예제

       <ol>
       <li>첫번째 순당무</li>
       <li>두번째 순당무</li>
       <li>세번쨰 순당무</li>
       </ol>

• 순서가 있는 리스트의 마커(1, 로마자1 등)는 다음처럼 변경할 수 있다.

  //영문 대문자로 적용
  <ol style="list-style-type: upper-alpha">
  <li>첫번째 순당무</li>
  <li>두번째 순당무</li>
  <li>세번쨰 순당무</li>
  </ol>

• decimal : 숫자 (기본설정)
• upper-alpha : 영문 대문자
• lower-alpha : 영문 소문자
• upper-roman : 로마 숫자 대문자
• lower-roman : 로마 숫자 소문자

2. 순서가 없는 리스트
   • 예제

     <ul>
     <li>순렐리아</li>
     <li>순벡스</li>
     <li>순제리</li>
     </ul>

     

- 순서가 없는 리스트의 마커는 다음의 형태로 바꿀 수 있다.

  //흰색 작은 원모양으로 적용
  <ul style="list-style-type: circle">
    <li>순렐리아</li>
    <li>순벡스</li>
    <li>순제리</li>
  </ul>

- disc : 검정색 작은 원 모양 (기본설정)
- circle : 흰색 작은 원 모양
- square : 사각형 모양

• 정의 리스트

  • 예제

    <dl>
    <dt>미어캣</dt>
    <dd>- 순당무의 구독자 애칭이다.</dd>
    <dt>방장이 좋아하는 음식</dt>
    <dd>- 방장이 좋아하는 음식은 곱창이다.</dd>
    </dl>

  

HTML기초

HTML이란?

• HyperText MarkUp Language라는 거창한 뜻이 있다.
• 하지만 대개 문서 취급을 받고 언어취급을 잘 못받는다.
• HTML은 태그라는 것들로 구성된다.
• 태그는 여러가지가 있고 디자인이나 기능을 결정하는데 사용된다.

태그

• 시작태그과 종료태그가 존재한다.
• 아래와 같은 형태로 되어있다.

  <태그명></태그명>
  <h1></h1> //제목1
  <h2></h2> //제목2
  <br/> //다음행 개행 해당 태그는 하나로 이루어짐

기본구조

• HTML의 기본적인 구조는 아래와 같다.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>제목크기 1 태그</h1>
    <h2>제목크기 2 태그</h2>
    <p>단락 태그</p>
  </body>
  </html>

• <!DOCTYPE html>는 현재 문서가 HTML문서임을 명시한다.
• <html>는 HTML문서의 루트 요소를 정의한다.(최상위)
• <head>는 HTML의 메타데이터(metadata)를 정의한다.
  • 메타 데이터란 HTML문서에 대한 정보로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
  • <head>안에 들어가는<title>은 문서의 제목을 정의하며 아래와 같은 용도로 사용된다.
    • 웹 브라우저의 툴바에 표시된다.
    • 웹 브라우저의 즐겨찾기(favorite)에 추가할 때 즐겨찾기에 제목이 된다.
    • 검색엔진의 결과 페이지에 제목으로 표시된다.
• <body>는 웹 브라우저를 통해 보이는 내용(Content)부분이다
  • <body>안에 들어가는 <h1>~<h6>은 제목을 나타낸다.
  • <body>안에 들어가는 <p>는 단락을 나타낸다.

HTML 요소 구조

• HTML요소(element)는 여러 속성을 가질 수 있다.
• 이러한 속성은 해당 요소에 대한 추가적인 정보를 제공한다.

<p class="클래스명">순게더</p>
p = 태그이름
class = 속성의이름
클래스명 = 속성값
순게더 = 내용
</p> = 종료태그

• 속성이름은 항상 소문자로 입력
• 속성값은 항상 따옴표로 감싼다

  <p
  style = "스타일명:스타일속성"
  class = "클래스명"
  id = "id명"
  >
  <img
  src = "이미지 경로"
  alt = "이미지가 경로에 없을시 나타나는 문장"
  width = "이미지의 너비"
  height = "이미지의 높이"
  >

HTML의 텍스트 요소

제목

• HTML은 제목을 표현할 수 있는 다양한 크기의 태그를 제공한다.
• <h1> 부터 <h6>까지 존재하며 종료 태그가 존재한다.

예제
<h1>제목1의 크기입니다!</h1>
<h2>제목2의 크기입니다!</h2>
<h3>제목3의 크기입니다!</h3>
<h4>제목4의 크기입니다!</h4>
<h5>제목5의 크기입니다!</h5>
<h6>제목6의 크기입니다!</h6>

단락

• 단락이란 내용상 끊어서 구분할 수 있는 하나한의 부분을 의미한다.
• HTML에서는 <p> 태그를 이용하여 단락을 표현한다.

<h3>라떼의 방장 시리즈</h3>
<p>방장 시리즈의 내용1</p>
<p>방장 시리즈의 내용2</p>

띄어쓰기와 줄 나누기(br 태그)

• HTML에서는 띄어쓰기나 줄 나누기를 여러번 하더라도 브라우저를 통해 나타나는 화면에는 전혀 영향을 주지 못한다.
• <br>태그를 사용하면 새로운 단락을 만들지 않도록 줄을 나눌 수 있다.
• <br>태그는 종료태그가 없는 태그이다.

<h3>라떼의 방장 시리즈</h3>
<p>방장 시리즈의 내용1</p>
<br>
<p>방장 시리즈의 내용2</p>

텍스트 서식 미리 정의(pre 태그)

• <pre></pre> 태그는 작성된 텍스트의 모든 띄어쓰기와 글나누기를 그대로 표현한다.

<pre>
라떼의 방장 시리즈
방장 시리즈의 내용1
방장 시리즈의 내용2
</pre>

• 다만 자주 쓰이지 않는 태그이다.

가로 구분선 (hr 태그)

• <hr> 태그 역시 종료 태그가 없다
• 단락을 나눌 때 내용상의 구분을 표현하고자 수평 가로선을 그려준다.

<h3>라떼의 방장 시리즈</h3>
<hr>
<p>방장 시리즈의 내용1</p>
<br>
<p>방장 시리즈의 내용2</p>

• 구분선이 그어진 모습이다.

웹 개발 환경 구축

• 본격 정리에 들어가기 앞서 정리본에 사용되는 프로그램을 소개하고자 합니다.
• 아직까진 Flask(파이썬 기반의 웹 서버 라이브러리)는 사용하지 않기 때문에 웹 머저리 3대장(HTML, CSS, JAVASCRIPT) 들의 기준으로 작성함을 알립니다.

IDE란?

• Intergrate Development Environment 의 약자로 통합 개발환경이라고 합니다.
• 코딩, 디버그, 컴파일, 배포 등 프로그램 개발에 관련된 모든 작업을 하나의 프로그램에서 처리하는 환경을 제공하는 소프트웨어입니다.
• Visual Studio Code, Atom, Intellij, Android Studio 등이 있습니다.
• 이 정리본은 Visual Studio Code 중심으로 다룰 예정입니다.

Visual Studio Code(통칭 VSC) 설치

1. https://code.visualstudio.com/ 접속

2. Download for Windows 클릭 후 설치 프로그램 다운로드

   • 이 화면이 뜨면서 설치파일이 다운로드 됩니다.
   • 만약 다운로드가 되지 않을 경우 중간에 "direct download link"를 눌러주세요

• 인터넷 속도 이슈로 과거파일을 가져왔습니다.(귀찮은거 아님)
  3. 설치한 폴더에 해당 파일을 실행시키거나 다운로드 완료 후 자동 실행으로 설치파일 실행시켜주세요.

4. 동의합니다 체크 후 다음클릭

5. 아이콘 추가 체크 외에 별다른거 할건 없습니다.(본인 기준) 다음클릭

6. 설치 클릭
   • PATH의 추가 기능은 명령 프롬포트(cmd)화면에서 명령어 입력으로 Visual Studio Code를 실행시키는 기능입니다.(본인도 잘 안씀)

7. 설치 완료(사진 생략) 후 메인화면
   • 아래의 사진이 뜰 것이고 완료됩니다

• 그 후 실행버튼을 누르면(사진 생략되었습니다.) 아래와 같은 메인 화면이 나옵니다.

8. 폴더 불러오기로 작업할 폴더를 선택합니다

• 저의 경우 bang-jang-series를 선택하였습니다.

• 열기 누른 후 환경입니다.

• 위 사진의 빨간색 표시는 파일 생성입니다. 파일 생성 시 확장자(뒤에 .md, .html 등)까지 입력해주셔야 합니다.
• 주로 .html, .md, .js, .py, .css 등으로 작성되실겁니다.

• 위 사진의 빨간색 표시는 폴더 생성입니다. 작업 폴더로 선택한 폴더에 생성을 원하실 경우 바깥쪽을 한번 눌러주시고 생성해주시면 됩니다.

• 이상 visual studio code의 설치 설명을 마치겠습니다.
• 웹개발에 사용되는 편집기는 vsc외에 Atom, sublime text 등에서도 웹 개발이 가능합니다.
  • 해당 편집기의 설치는 글에 추가되는 링크로 참조해주시면 감사하겠습니다.
  • VSC 설치법 및 기본 사용법은 본인이 직접 작성함을 알립니다.

강의에 사용되는 실습 템플릿 작성 (html)

• 먼저 html을 작성하기 위해서는 작성해야 할 요소가 많습니다. 따라서 이를 한번에 작성하는 방법을 정리하고자합니다.

1. 새로운 파일 생성 파일명.html 로 생성해주시면 됩니다.

2. 생성된 파일 안에 html입력

• 입력시 위 사진과 같이 선택지가 있습니다. html:5를 선택해주세요

3. 생성된 템플릿

혹시 필요하신 분들을 위해 정리본 및 게시글에 올려드립니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world
</body>
</html>

4. 파일 저장 후 생성한 파일을 폴더 내 크롬 브라우저로 실행

• 만약 크롬 브라우저가 아닌 익스플로러나 엣지로 되어있을 경우(엣지 브라우저의 경우 상관은 없으나 편의상 크롬 브라우저로 통일하겠습니다.)

  1. 해당 폴더로 가서 html파일 우클릭

  

2. 속성 클릭

   

4. 중간에 연결 프로그램 변경 클릭 후 chrome선택 후 확인 클릭(이미 크롬이신분들은 안하셔도 됩니다.)

   

5. 변경된 것 확인 후 하단에 적용 클릭

   

6. 변경 확인

   

• 그 후 해당 파일을 실행시켜봅니다.

  

• html 파일 내용 작성 시 태그 안에서 작성을 진행합니다.

데이터 "처리"와 "이전"

• GDPR은 개인 데이터의 "처리"와 "이전"에 대해 충족시켜야 할 법적 요건을 규정하고 있다.
• "처리"란 개인 데이터에 대해서 행해지는 작업이라고 생각하면 알기 쉬울 것이다.
• 개인 데이터의 취득, 기록, 편집, 보존, 변경 이외에 개인 데이터 목록(리스트)의 작성 및 정렬 등도 "처리"에 포함된다.
• 한펀 "이전"은 EEA(European Economic Area, 유럽 경제 지역) 영역 밖으로 송부하는 것이다.
• 예를들면, 개인 데이터를 포함한 문서를 메일로 EEA 영역 밖으로 송신하는 것, EEA 영역 내에 설치된 서버에 EEA 영역 밖으로부터 접속하는 것 등을 들 수 있다.
• GDPR에서는 EEA영역 내에서 취득한 개인 데이터를 EEA영역 밖으로 "이전"하는 것을 원칙적으로 금지하고 있다.

GDPR을 위반한 경우의 벌금

• 가벼운 경우
  • 최대 기업의 전세계 매출(년간)의 2% 또는 1000만 유로(135억 5천만원)중 높은 쪽
• 명확한 권리 침해인 경우
  • 최대 기업의 전세계 매출(년간)의 4% 또는 2000만 유로(271억) 중 높은쪽

GDPR에서의 데이터 주체(해당 개인)의 8가지 권리

• 정보권
  • 개인정보를 수집하는 경우 정보 제공을 받을 수 있다.
• 접속권
  • 개인 데이터의 접속을 요청할 수 있다.
• 정정의 권리
• 삭제권
• 제한권
  • 개인 데이터 처리를 제한한다.
• 데이터 Portability
  • 기계로 읽을 수 있는 형식으로 받는다.
• 이의권
  • 개인 데이터 처리에 이의를 제기할 수 있다,
• 자동화된 개인의 판단에 관한 권리

GDPR에서 개인 데이터 처리에 있어서 원칙

• 적법석, 공정성 및 투명성 원칙
  • 목적의 제한 원칙
• 개인 데이터의 최소화 원칙
  • 정확성 원칙
• 보관의 제한 원칙
  • 완전성 및 기밀성 원칙

5. 컴퓨터 사기나 업무 방해

부정 송금이나 가상화폐 사취 등의 경우

• 일반적인 사기는 "사람을 속이는" 행위임에 반해, 컴퓨터 사기는 "컴퓨터 등 인간 이외의 것을 속이는" 행위이다.
• 즉 컴퓨터 등에 대해서 거짓 정보를 사용해서 서비스르 부정하게 받은 경우 등이 해당된다.
• 알기 쉬운 예로 위조 전화카드를 만들어 통화하는 것 등과 같은 경우이다.
• 또 피싱 사기 등에서 타인을 사칭하여 속인 후 부정 송금을 하거나, 신용카드 정보를 부정하게 이용하여 이익을 얻는 행위 등이 있다.
• 최근에는 가상화폐의 부정한 거래나 사취 등에 대해서도 적용되고 있다.
• 컴퓨터 사기의 실행순서
  1. 공격자는 피싱 사기 메일 발송(부정 접속 금지법 위반)
  2. 이용자는 가짜 사이트인 것을 모르고 아이디, 비밀번호를 입력
  3. 공격자는 부정하게 ID 비밀번호를 입수
  4. 입수한 ID 비밀번호로 마음대로 로그인
  5. 부정 송금 진행

사이버 공격으로 업무를 방해한 경우의 죄

• 다른 사람의 업무를 방해한 경우 위계 업무 방해나 위력 업무 방해 등이 있는데, 컴퓨터를 파괴하거나 데이터를 파괴한 경우에 적용되는 것으로 "컴퓨터 손괴 등의 업무 방해죄"가 있다.
• 여기서는 손괴라고 되어 있지만, 실제로는 허위 데이터를 위조하거나 부정한 처리를 실행하는 등 컴퓨터에 본래 동작과 다른 처리를 수행시켜서 업무를 방해했을 경우에 적용된다.
• 예시

6. 저작물 무단 이용에 주의

모든 저작물은 저작권으로 보호된다.

• 인터넷상이나 서적 등 세상에는 많은 문장이 있지만 남이 작성한 문장을 마음대로 복사해서 자신의 글로 발표할 수 없다.
• 이는 문장 뿐 아니라, 음악이나 화상 프로그램 등에서도 마찬가지로 저작권으로 보호되고 있다.
• 저작권은 저작물을 창작한 시점으로 자동으로 발생하며, 따로 신고가 필요하지 않다.
• 마음대로 타인의 저작물을 사용하면 저작권 침해가 된다.
• 저작자가 갖는 권리에는 저작자 인격권과 저작권(저작재산권) 2가지가 있다.
• 저작자 인격권
  • 마음대로 변경되거나 일부만 빼내지 않도록 보호하는 권리로 저작자만 가질 수 있는 권리
• 저작재산권
  • 저작자가 그 작품으로 생계를 유지할 수 있도록 재산으로 불 수 있는 권리
  • 그 일부 또는 전부를 양도하거나 상속받을 수 있다.

다른 사람의 저작물을 이용하고 싶은 경우

• 자신의 작품으로 하는 것이 아니라, 타인의 저작물을 타인의 것으로 하여 약간만 이용하고 싶은 경우가 있다.
• 이러한 경우 그 저작물을 이용하지 못하게 된다면 불편하고, 그렇다고 저작권자에게 승인을 얻는 것도 쉽지 않다.
• 일정 조건에 있어서 저작권자의 승낙을 받지 않아도 이용할 수 있는 경우가 있다.
  • 학교 수업에서 이용이나 개인적인 사용을 위한 복제는 허용되고 있다.
  • 일정한 범위 안에서 인용 이라면 규칙을 따르고 있는 상태리면 저작권자의 허가 없이 이용이 가능하다.
• 저작물 중에는 재이용을 쉽게 하기 위해 "크리에이티브, 커먼즈"를 사용하고 있는 경우가 있다.
• 크리에이티브, 커먼즈에서는 작품을 고쳐서 바꾸거나 상업정 이용 등 허가하는 내용을 저작자가 지정한다.
• 여기서 인정되고 있는 범위라면 저작물을 자유롭게 사용할 수 있다.

인용하는 경우의 규칙

• 인용할 필요성이 있는 것
  • 본문과 관계 없는 것은 금지
• 인용하고 있는 부분이 명확하게 구별되어 있을 것
  • 이용자가 인용 부분을 판단할 수 없는 것은 금지(괄호로 묶다, 단락을 구분하다)
• 인용한 부분이 일부일 것
  • 대부분이 인용으로 구성되는 것은 금지
• 인용할 저작물의 출처를 명시해둘 것
  • 인용 출처를 모르는 것은 금지
    • 서적의 경우 저자명이나 제목 출판사명 등
    • 웹페이지의 경우는 사이트명과 URL등
• 마음대로 바꾸지 말것
  • 오자나 탈자를 마음대로 수정하는 것은 금지

7. 보안 관련 법률과 규칙

1. 개인정보 보호법

개인정보와 프라이버시

• 개인정보 보호에 대한 주장은 오래 전부터 있어왔는데 개인정보에도 여러가지가 있다.
• 최근에는 특히 프라이버시, 즉 "타인에게 알리고 싶지 않은 개인정보"가 유출되는 것에 대한 불안이 크다
• 한펀, 기업은 소비자가 요구하는 제품을 만들고 싶어한다.
• 어떤 연령층의 사람들이 구매하고 있는지, 어떤 취미를 가진 사람의 관심을 얻을 수 있는지 등 소비자의 정보를 파악하면 고객에 맞는 상품을 제공할 수 있다.
• 기업의 입장에서 보면 개인정보는 중요한 "재산"인 반면, 개인의 입장에서는 임의대로 사용되면 곤란한 정보이다.
• 따라서 개인정보를 적합하게 취급하기 위해 개인정보 보호법이 마련되었다.
• 한국의 개인정보 보호법은 2011년 3월 29일 재정되어 2011년 9월 30일 시행된 법률로 "개인정보"라는 용어가 정의되어 있다.

개인정보 보호법 개정과 주의점

• 개인정보 보호법이 시행되어도 개인정보 범위가 불명확하기 때문에 개인정보의 취급과 관련해 사업자를 중심으로 불만이 고조되고 있었다.
• 그래서 2017년 10월 개정에서 개인정보의 명확화와 함께, 활용 등을 포함한 내용이 개정되었다.
• 구체적으로는 개인정보에 대한 정의를 "살아 있는 개인에 관한 정보로서 성명, 주민등록번호 및 영상 등을 통하여 개인을 알아볼 수 있는 정보"라고 기술하였다.
  • 일반 개인정보
    • 이름, 생년월일, 주소, 성별
  • 개인 식별 번호
    • 주민등록번호, 운전면허 번호, 여권번호, 외국인 등록번호
  • 민감정보
    • 아래 정보들을 특별히 고려하여 취급하도록 정한 것
    • 사상, 신념, 노동조합, 정당의 가입, 탈퇴, 정치적 견해, 건강, 성생활 등에 관한 정보
    • 그 밖에 정보주체의 사생활을 현저히 침해할 우려가 있는 개인정보로 대통령령으로 정하는 정보
• 개인정보를 취급하는 경우에는 이용 목적을 가능한 특정하고 이용 목적의 달성에 필요한 범위를 넘어 개인정보를 취급하는 것은 금지하고 있다.
  • 개인정보, 개인데이터, 보유 개인 데이터의 차이
    • 개인정보
      • 생존하는 특정 개인을 식별할 수 있는 정보, 다른 정보와 쉽게 대조할 수 있고 그 결과 특정 개인이 식별할 수 있는 정보도 포함된다.
    • 개인 데이터
      • 특정 개인을 검색할 수 있도록 구성한 것(개인정보 데이터베이스 등)에 포함되는 개인정보
    • 보유 개인 데이터
      • 개시, 수정, 삭제 등의 권한을 가지며, 6개월을 초과하여 보유되는 것

2. 개인정보의 활용

개인정보를 제3자에게 제공하는 경우

• 개인정보 보호법은 본인의 동의가 없다면 개인 데이터를 제 3자에게 제공하는 것을 원칙적으로 금지하고 있다.
• 그러나 일정한 절차를 취한 경우에는 본인의 동의없이 제 3자에게 제공할 수 있는데 이것을 옵트-아웃(Opt-out)이라고 한다.
• 반대로, 본인의 동의를 사전에 구하는 것을 옵트-인(Opt-in) 이라고 한다.
• 옵트-아웃으로 제 3자에게 제공하려면 본인이 제 3자 제공을 정지할 수 있는 환경을 마련해야 한다.
• 즉 3자에게 개인정보를 제공한 후 본인이 신청함으로써 정지할 수 있어야 한다.
• 옵트-아웃을 통해 제3자 제공이 확산되면 개인정보 보호법의 원칙인 "제3자 제공 금지"또는 "개인 데이터를 적절히 취급한다"라는 내용을 위반하게 된다.
• 그래서, 옵트-아웃을 통한 제 3자 제공에 대해서는 엄격한 요건이 정해져 있다.
• 또한 민감정보는 옵트-아웃으로 제공할 수 없다.

개인을 특정할 수 없도록 한 후 정보를 활용한다.

• 기업이 소비자나 원하는 상품을 만들 때 필요한 것은 정확한 개인정보라기보다는 통계 데이터나 익명의 데이터로 충분한 것
• 따라서 개정된 개인정보 보호법에는 특정 개인을 알아볼 수 없도록 개인정보를 가공하고 복원할 수 업소록 한것을 "개인정보 비식별조치"라고 정의
• "개인정보에 포함된 내용의 일부를 삭제","개인식별 부호를 모두 삭제" 등 가공을 통해 개인을 식별할 수 없게 하는 K-익명화(k-anoymity)기법이 있다.
• 이와 같이 개인정보를 비식별화된 정보로 변환함으로써 활용하기 쉬워질 것으로 전망하고 있다.

3. 공급자 및 전자메일 관련 규칙

공급자가 책임을 지는 범위

• 인터넷은 익명으로 이용할 수 있어 편리한 한편, 익명이라는 이유로 범죄에 악용될 수 있다.
• 예를 들면, 게시판 등에 비방하거나 상대방을 비방하는 문구가 게시되거나 저작권을 침해하는 내용이 개제되거나 함으로써 피해가 발생한다.
• 이러한 경우 공급자(Provider)가 임의로 삭제하면 게시자로부터 고소당할 우려가 있다.
• 그렇다고 삭제하지 않고 방치하면, 피해자로부터 고소당할 우려가 있다.
• 이렇게 되면 공급자가 곤란하므로 공급자가 져야 하는 책임을 제한하는 "정보통신망 이용 촉진 및 정보보호 등에 관한 법률이 있다."
• 동법에서는, 공급자나 서버 관리자가 "발신자 정보를 열어 볼 수 있는 것"도 정해져 있다.
• 이에 따라 공급자는 경찰 등의 요구가 있으면 IP주소 등 정보의 발신지를 열어 봐야 한다.
• 익명으로 이용하고 있다고 생각하더라도, 경찰 등이 개인으 ㄹ특정하는 것이 가능하다는 것을 잊지 말아야 한다.

"정보통신망 이용 촉진 및 정보보호 등에 관한 법률"의 효과

• 전자 메일을 사용하여 돈을 들이지 않고 대량으로 메일을 보내는 것이 가능하다.
• 무작위로 메일 주소를 생성하여 보낼 수 있었는데, 한편으로 광고, 선전 메일을 보내버리는 "스팸 메일"dl tkghl answprk ehldjTek.
• 이를 위해 "정보통신망 이용촉진 및 정보보호 등에 관한 법률"이 개정되었다.
• 2016년 개정에는 광고, 선전 메일을 발송하려면 원칙적으로 수신자의 사전 승인(Opt-in)이 필요하게 되었다.
• 또한 광고, 선전 메일을 보낼 경우 본문에 보낸 사람의 이름과 연락처, 수신 거부 방법등을 기재해야 한다.
• 이처럼 법률 관련 대책이 진전되고 스팸 메일 필터 등 기술의 발전이 있었지만, 아직 완전히 없어지지 않는 것이 현실이다.

Point

• '정보통신망 이용 촉진 및 정보보호 등에 관한 법률' 제 50조 1항에 따라 공급자가 지는 책임을 제한할 뿐만 아니라 경찰 등의 요구가 있으면 정보의 발신자를 특정할 수 있다.
• 스팸 메일을 막기 위해 정보통신망 이용 촉진 및 정보보호 등에 관한 법률에 대한 개정도 이루어 졌지만, 완전히 스팸 메일을 없애지는 못하고 있다.

데이터를 보호하는 개념을 바꾼 DLP

• 씬 클라이언트는 단말기 분실이나 도난에 효과적인 방법이지만, 도입을 위해서는 서버 구축과 네트워크의 안정적 가동, 이용자의 의식 향상 등 조직의 전체적인 IT기술이 요구된다.
• 또한 지켜야 할 정보에 대한 접근 권한을 부여하는 방법으로는 정식 이용자의 고의적인 정보 유출을 막을 수 없다.
• 그래서 근본적 생각을 바꿔서 지켜야 하는 중요 정보를 정하고 그것을 보호하기 위해 모니터링하는 기술이 DLP(Data Loss Prevention)이다.
• DLP는 사전에 파일이나 데이터베이스, 네트워크 상의 데이터 등을 조사하고 지켜야 할 정보를 정해야 한다.
• 그 후 누군가 그 정보를 외부에 보내려고 하거나, USB 메모리에 복사하는 등의 행동을 감시한다.
• 설정한 정책에 위배되는 행동이 발견되면 해당 행동을 멈추게 하여 정보 유출을 방지한다.

Point

• 컴퓨터에 데이터를 남기지 않기 위해 씬 클라이언트를 도입하는 기업이 늘고 있다.
• 지켜야 할 정보에 주목하는 방법으로 DLP가 있다.

15. 물리적인 보안

잠금 및 출입 체크로 '사람'을 관리

• 정보 유출의 원인으로 인터넷으로부터 부정한 접속과 사이버 공격을 생각할 수 있지만, 실제로는 도난이나 분실, 반출 등이 차지하는 비율이 높다.
• 회사에 물리적인 침입으로 인해 도난 및 다른 부서의 정보 유출 등을 방지하기 위해 잠금 장치 관리가 중요하다.
• 즉, 출입문은 항상 잠금상태로 하고 캐비닛이나 서랍 등도 자물쇠를 채운다.
• 요즘은 사원증이 ID 카드로 되어 있어 허가된 사람만 들어갈 수 있는 출입구도 많이 설치되어 있다.
• ID 카드 사원증을 통해 누가 언제 출입했는지 기록을 남길 수 있으며, 출입 관리에도 사용할 수 있다.
• 이렇게 "사람"에 대한 관리의 중요성이 높아지고 있다.
• 중요도가 높은 정보가 관리되고 있는 장소에 감시 카메라를 설치하는 것도 효과적

책상 및 화면에서 발생하는 정보 유출 대책

• 사무실에서 일하면서 회의 등으로 자리를 비우는 경우 책상 위에 서류를 놓아둔다면 도난을 당하거나 다른 사람이 내용을 볼 수 있게 되는 위험이 있다.
• 그래서 불특정 다수의 사람이 있는 장소에 서류를 방치하지 않고 잠금 장치가 있는 캐비닛에 보관한다.
• 이같은 방침을 클리어 데스크(Clear Desk)라고 한다.
  • 실제로 보안 감사 시 유출 위험이 있는 서류를 책상위에 올려놓는 행위를 지적하곤 한다.(라ㅡ떼)
• 컴퓨터 화면에 대해서도 동일하게 적용되어 화면에 표시되는 내용은 누구나 볼 수 있게 되어 버린다.
• 경우에 따라서는 임의의 조작으로 ID를 도용해 좋지않은 조작을 할지도 모른다.
• 화면을 보지 못하도록 하는 것은 클리어 스크린(Clear Screen)이라고 부르며, 로그인한 상태로 놔두지 않고, 화면을 잠금 상태로 변경한 후 자리를 비우도록 하는 정책을 의미

Point

• 중요한 정보를 지키기 위해서는 정보 시스템 보호 뿐만이 아니라 사무실에서 침입이나 도난이 발생하지 않도록 하는 물리적 보안도 중요하다.
• 사무실에서 몰래 엿보기, 분실 도난, 사칭을 방지하기 위해 클리어 데스크와 클리어 스크린 대책을 실시한다.

16. 가용성을 확보한다.

정전 시 일시적으로 전력을 공급

• 컴퓨터 사용 중에 정전이 발생하면 갑자기 전원이 꺼져 버린다.
• 종료 처리가 제대로 되지 않으면 다음 부팅 시 오류가 발생할 수 있다.
• 특히 낙뢰 등으로 인한 정전인 경우 하드웨어에 허용치 이상의 부하가 걸리게 되어 고장날 가능성이 높아진다.
• 그래서 정전 대책으로 많이 사용되는 것이 "UPS"(Uninterruptible Power Supply, 무정전 전원장치)이다.
• UPS를 사용하면 정전으로 전원 공급이 중단되어도 배터리를 통해 전원을 공급할 수 있다.
• 그 사이에 정해진 순서대로 종료 처리를 함으로써 문제가 발생하는 가능성을 줄일 수 있다.
• 그러나 일반 UPS의 경우 전원 공급 시간은 길어야 15분 정도이다. UPS가 전원을 공급하는 동안 올바른 순서로 종료해야 한다.
• 그래서 UPS에 연결되어 있는 장치를 자동으로 종료해주는 장비가 함께 제공되는 경우도 있다.

트러블(Trouble)에 대비하는 백업 준비

• 정전 뿐만 아니라 어떤 트러블에 대비한 방안을 미리 준비해 두는 것은 비즈니스에서 매우 중요하다.
• 네트워크가 연결되지 않을 떄, 서버가 고장났을 떄, 디스크가 고장 났을 때, 어플리케이션에 문제가 발생했을 떄 등 대체 수단이 없다면 업무는 정지하게 된다.
• 백업이 되는 시스템 환경을 준비해 두는 것을 "이중화"라고 부른다.
• 해당 시스템의 중요도 및 복구시간과 비용의 균형을 고려한 다양한 이중화 방법이 있다.
  • 중요도가 높은 시스템은 항상 백업 시스템을 가동하는 "Hot Standby"(상시 대기 방식)가 사용 -> 즉시 전환
  • 중요도가 낮은 시스템은 문제가 발생한 후 "Cold Standby"(수동 예비 방식)으로 충분 -> 전환에 장기간 소요
  • 그 중간 형태인 "Warm Standby"(예열 대기 방식)도 있다. -> 단시간에 전환

Point

• 컴퓨터는 정전되면 사용할 수 없기 떄문에 전력공급 확보는 가용성 확보에서 필요하다.
• 서버 및 데이터베이스, 네트워크 등 중요한 시스템은 이중화를 통해 업무에 미치는 영향을 최소화하는 노력이 필요하다.

17. 계약 내용을 확인한다.

사업자와 이용자가 합의 사항 "SLA"

• 클라우드 서비스는 어디서나 접속할 수 있어 편리한 반면, 서비스가 정지되면 필요한 정보에 접속할 수 없게 된다.
• 예를 들어 메일이나 파일 공유 서비스의 경우 접속할 수 없다면 일을 진행할 수 없게 되어버릴 수도 있다.
• 개인적으로 사용하는 경우라면 문제될 것이 없지만 업무적으로 사용하는 경우라면 사전에 품질 수준에 대한 합의가 필요하다.
• 이를 위해 사업자는 합의 사항을 서비스 시작 전에 제시하는 것이 필요한데, 이 합의 사항을 SLA(Service Level Agreement)라고 한다.
• 여러 서비스를 함꼐 이용하는 경우 각 사업자의 책임을 명확히 해야 한다.
• SLA는 보안관리 정책이나 서비스에 대한 정의, 서비스 수준 등을 정하게 된다.
• 합의 사항이 충족되었는지 여부를 이용자가 정기적으로 확인할 수 있도록 보고서를 제출하는 경우도 있다.
• 이 때문에 SLA에는 가동률 뿐만 아니라 지연 시간이나 복구까지 걸린 시간, 백업 유무 등도 기재되어 있으며 기준을 충족하지 못한 경우에 대한 처벌도 규정되어 있는 것이 일반적

주의가 필요한 SLA계정

• 물론 SLA는 상황에 따라 개정하기도 한다.
• 서비스 내용을 개정하는 경우나 새로운 서비스를 제공하는 경우는 물론이고, 정기적으로 감사를 받고 있는 것이나 일정기간 동안의 서비스 수준 등이 문서로 기술되어 있다면 이용자는 안심할 수 있다.
• 서비스 내용을 개정할 경우에는 적용하기 전에 일정 기간을 준비하고 이행 작업과 이전 버전과 병행운용 가능 여부 등 이용자가 받아들일 준비를 할 수 있게 되어있는지 여부도 확인한다.

Point

• 업무를 위해 클라우드 서비스 등을 사용하는 경우 SLA에 의한 계약 내용을 확인하고 합의할 필요가 있다.
• 필요에 따라 SLA는 개정되지만 개정으로 인한 결함이나 문제, 영향이 발생하지 않는지 확인한다.

포렌식 관련 주의점

• 컴퓨터는 부팅되는 것만으로도 일부 데이터가 갱신되어 버린다.
• 이때문에 포렌식 할 때 컴퓨터에 해당 컴퓨터에서 작업하는 것은 일절 금지되어 있다.
  • 데이터 분석에는 특수 장비를 사용하여 저장 장치를 복제한 저장장치 사본을 사용한다.
• 또한 시간이 지나면 로그를 삭제할 가능성이 높아질 뿐만 아니라 다른 증거를 수집하는 것도 어렵게 된다.
• 공격이나 의심스러운 활동에 주의를 기울이는 경우에는 가능하다면 신속한 대응이 요구되고 있다.
• 기업에서는 퇴직자 컴퓨터를 초기 상태로 만들어 다른 사람이 사용하도록 하기도 하지만, 데이터가 삭제되어 버리면 조사할 수 없기 때문에, 퇴사자가 주요 인물인 경우에는 증거 보전을 검토한다.

포렌식의 대상

• 컴퓨터의 데이터 복구, 조사, 분석
• 컴퓨터와 서버간 접속 기록에 관한 로그 조사
• 서버와 외부 네트워크간 접속 기록에 관한 로그 조사

포렌식의 흐름

• 데이터 수집
  • 보통 때의 데이터 파악
  • 인시던트 탐지
• 증거 보전
  • 조사 대상자의 디스크를 확보
  • 통신 장비의 로그 확보
• 증거 분석
  • 파일의 위, 변조
  • 의심스러운 처리 조사
  • 통신량 등의 파악

Point

• 컴퓨터에 저장되어 있는 데이터와 로그가 법적인 증거로 인정되기 위해서는 포렌식이 필요하다.
• 컴퓨터가 부팅되면 데이터가 다시 기록되기 때문에 최대한 신속한 증거의 보존이 요구된다.

12. 모바일 기기 관리

모바일 기기를 일괄적으로 관리하는 "MDM"

• 스마트폰이나 태블릿 PC는 컴퓨터와 같은 기능을 제공한다.
• 고속 네트워크가 보급되어 출장지에서도 고객 정보 및 상품 정보 등에 접근할 수 있는 환경이 갖추어졌다.
• 하지만 편리한 반면, 분실이나 도난 등으로 인한 위험이 어느때보다 높아지고 있다고 말할 수 있다.
• 모바일 기기의 보안을 생각할 때 MDM(Mobile Device Management)이라는 단어가 자주 사용되고 있다.
• MDM 도구에서는 단말기 정보의 백업이나 복구, 분실 시 원격 잠금이나 초기화, 어플리케이션 배포 및 갱신, 위치 정보의 취득이나 가동 이력의 표시 등을 중앙에서 관리할 수 있는 기능을 제공한다.

종업원의 단말기를 사용하는 "BYOD"

• 기업이 제공한 단말기 이외에 직원이 개인적으로 보유하고 있는 스마트폰이나 태블릿 PC 등 모바일 기기를 업무에 사용하는 것은 BYOD(Bring Your Own Device)라고 한다.
• 지금까지 업무에 사용하는 것뿐만 아니라 사내에 반입하는 것 자체를 금지했던 기업도 적지 않다.
• 그러나 전화와 메일, 스케줄 관리 등 개인 모바일 기기를 사용하는 것이 효율적이라고 생각하게 되었다.
• 기업은 단말기 구입 비용이 절감되고 개인에게도 여러 단말기를 가지고 다닐 필요가 없으며 익숙한 단말기를 사용할 수 있는 장점이 있다.
• 한편, 개인이 반입한 단말기에 기밀 정보가 저장되면 정보 유출의 위험이 높아진다.
• 그래서 도난이나 분실, 기밀 정보의 인위적인 반출, 소프트웨어 갱신 누락, 바이러스 감염 등 위험을 제대로 이해한 후 관리하는 것이 요구되고 있다.

Point

• 직원들에게 배포한 모바일 단말기를 중앙에서 관리하기 위해 MDM 도구가 사용되고 있다.
• BYOD는 직원이 여러 대의 단말기를 가지고 다닐 필요가 없고 기업의 단말기 구입 비용을 절감하는 장점이 있지만, 보안 측면에서 위험도 적지 않다.

13. 정보 시스템 부서가 파악할 수 없는 IT

임의의 클라우드를 이용하는 것은 위험

• 조직이 어느정도 규모가 되면 IT에 관한 업무는 "정보 시스템 관련" 부서가 담당한다.
• 사내에서 사용하는 시스템의 설계와 구축 뿐만 아니라 네트워크 관리 및 운영도 한다.
• 그러나 최근에는 편리한 클라우드 서비스가 속속 등장하고 있어 IT 부서와 관계없이 이용할 수 있게 된다.
• 예를 들어, 파일 공유 서비스나 온라인 메일 서비스, 작업관리 및 일정관리 도구도 쉽게 사용할 수 있다.
• 이것은 편리한 반면, 보안을 감안할 때는 바람직하지 않다.
• 기밀정보나 개인정보가 클라우드에 저장되어 공유되는 경우, 정보 유출로 이어질 가능성이 있다.
• 이처럼 조직이 관리하고 있는 시스템 이외의 서비스를 직원이 임의로 이용하는 것을 "섀도우 IT"라고 한다.
• 이를 방지하기 위해서는 규칙을 정하는 것뿐만 아니라 편안하게 업무를 할 수 있는 환경을 사내에 준비하는 것도 필요하다.

관할 부서의 차이에도 주의

• 클라우드 서비스 이외에도 정보 시스템 부서가 모르는 IT기기가 이용되는 경우가 있다.
• 예를 들어, 문서를 인쇄할 때 사용하는 복합기기는 많은 부서에 설치되어 있다.
• 이러한 장치는 총무 부서가 관리하는 경우가 많아 정보시스템 부서가 모르는 사이에 구매될 수 있다.
• 그렇게 되면 초기 패스워드가 변경되지 않는 등의 문제가 발생한다.
• 3-10에서 설명했듯이 최근에는 라우터와 네트워크 카메라 IoT 기기를 포함해서 이와 같이 부적절하게 관리되고 있는 기기를 겨냥한 공격이 증가하고 있으며, 보안상의 위험으로 부상하고 있다.

Point

• 직원이 임의로 사용하는 클라우드 서비스 등을 섀도우 IT라고 하는데, 편리하지만 정보유출의 위험이 존재한다.
• 적절한 관리자에 의해 운용되고 있지 않은 기기는 설정이 적합하게 되어있지 않은 경우가 있기 때문에 주의가 필요하다.

올바른 위험 대응은 적절한 위험 평가로부터

• 정보 자산을 보호하기 위해서는 관리 대상 하나하나에 대해서 어떤 위험이 있는지 생각하지 않으면 안된다.
• 각 정보 자산에 대한 위험의 유무, 피해가 발생했을 떄의 영향도, 발생하는 빈도, 복구에 걸리는 시간 등을 확실하게 확인하여 위험을 평가한다.
• 위험 평가(Risk Assessment)
  • 위험을 파악, 분석하고 평가하는 전체 프로세스.
• 위험 관리(Risk Management)
• 또한 "위험 평가로부터 위험 대응까지"를 총칭

위험관리와 위험 평가

• 위험식별
  • 자산의 식별
  • 위험의 명확화
• 위험분석
  • 영향도 분석
  • 발생 빈도의 분석
• 위험평가
  • 허용할 수 있는가(위험 기준과 비교)
  • 우선 순위 설정
• 위험대응
  • 대응책의 수립
  • 대응계획의 작성

위험 대응 4종류

• 위험을 분석하고 평가한 후 해당하는 위험에 어떻게 대응할 것인지 생각해야 한다.
• 일반적으로 위험대응은 위험회피, 위험감소, 위험이전, 위험보유의 4가지로 나뉜다.
• 위험 회피
  • 위험 그 자체를 없애는 것
  • 어떤 소프트웨어를 사용할 때 위험이 있는 경우 해당 소프트웨어를 사용하지 않는것
  • 서류를 분실할 위험이 있는 경우 서류를 보관하고 나가지 않는 방법을 검토하는 것
• 위험 감소
  • 위험의 발생 확률과 피해를 감소시키는 것
  • 바이러스 백신 소프트웨어 도입 또는 소프트웨어 업데이트 등
• 위험 이전
  • 위험을 다른 회사와 나누거나 대체 수단을 획득하는 것
  • 아웃소싱을 통해 업무를 외부 사업자에게 위탁하고, 위험이 현실화되면 보험으로 대응하는 등
• 위험 보유
  • 위험 방지를 하지 않거나 위험을 받아드리는 것.
  • 영향이 그다지 크지 않은 위험인 경우 대응 비용을 생각해서 대응을 하지 않는 것도 하나의 방법이다.

Point

• 위험 평가로부터 위험 대응까지를 포함한 활동을 위험 관리라고 한다.
• 위험 대응은 크게 4개로 구분되며, 그 발생 가능성과 손해의 크기에 따라 대책을 검토한다.

9. 부적절한 콘텐츠로부터 보호

기업에도 도입이 확산되는 "URL 필터링"

• 인터넷에는 공공의 질서와 선량한 풍속에 반하는 사이트 및 방문한 것만으로 악성 코드에 감염되는 사이트가 있다.
• 이러한 사이트에 의도치 않게 접속하게 되는 이용자를 보호해야 한다.
• 미성년자 들이 악질적인 사이트에 접속할 수 없도록 하는 기술의 하나로 URL필터링이 있다.
• 접속하고자 하는 URL이 유해한 URL 목록에 포함되어 있는지 판단하는 기법이 일반적
• 최근에는 기업에서도 직원의 생산성 향상(업무와 관련없는 사이트에 접속하지 않는다.)을 위해, 게시판의 게시물을 통한 정보 유출로부터 조직을 보호하기 위해 도입이 증가하고 있다.

페이지 내용으로부터 접속 가능 여부를 판단한다.(콘텐츠 필터링)

• URL 필터링에서 허용하는 URL을 하나 하나 관리하는 것은 힘든일이다.
• 그래서 표시하려고 하는 콘텐츠 내용을 감시하여 유해 정보 여부를 판단하는 콘텐츠 필터링이 있다.
• 부적절한 키워드가 포함된 페이즈 등 그 내용에 문제가 있는 경우 접속을 거부하거나, 직장, 학교 등에서 사적으로 네트워크를 이용하면 통신을 차단하는 방법이 사용된다.
• 다만, 청소년 보호 목적이라면 필터링이라고 생각되지만, 공급자가 수행하게 되면 "인터넷 검열"에 해당될 가능성이 있다.
• 예를들면, 헌법에는 "검열을 하면 안된다. 통신의 비밀이 침해받아서는 안된다."라고 되어 있다.
• 또한 전기통신사업법에 "전기통신 사업자가 취급 중에 관련된 통신은 검열되어서는 안 된다." "전기통신 사업자의 취급 중에 관련된 통신의 비밀이 침해되어서는 안된다." 라고 규정되어 있다.

Point

• 유해한 사이트로부터 이용자를 보호하는 방법으로 URL 필터링과 콘텐츠 필터링이 있다.
• 공급자 등 통신 사업자가 마음대로 검열하는 것은 헌법과 기타 법률에서 금지되어 있다.

10. 문제의 원인을 규명하는 단서는 기록

정확성이 요구되는 로그 관리

• 어떤 문제가 발생했을 때 그 원인을 규명하기 위해서는 기록이 필요하다.
• "언제", "어디서", "누가", "무엇을" 수행했는지 모른다면 상황이 파악되지 않으며 동일한 문제가 재발할 수도 있다.
• 이것은 공격이 이루어지는 경우에도 동일하다.
• 공격자가 노리고 있는 취약점을 파악하고 근본적으로 해결하지 않으면 동일한 수법으로 공격을 받게 되어 피해가 발생하게 된다.
• 피해가 발생해서 조사할 때는 저장되어 있는 로그를 분석하게 된다.
• 그러나 증거로 사용되기 위해서는 로그의 정확성이 중요하다.
• 또한 문제가 발생하지 않아도 로그를 정기적으로 확인하는 것이 필요하다.
• 로그가 기록되는 곳 ```
• 입퇴실, 네트워크에서 접속과 공격
• 손으로 쓴 기록, 문의 대응
• 택배로 배달, USB연결
• 마우스 조작, 검침 ```
• 로그의 효과
  • 부정방지
    • 로그를 보고 있다느 것을 의식하면 부정행위를 주저하기 때문에 내부 범행을 억제할 수 있다.
  • 전조감지
    • 평상시 로그를 확인하다 보면 이상시의 전조를 발견할 수 있다.
  • 사후조사
    • 로그 분석을 통해 정확하고 빠른 대처와 복구가 가능해진다.

모니터링의 주의점

• 이미 로그를 모니터링하고 있는 기업은 적지 않다. 그러나 실제로는 "뭔가 사건이 일어났기 때문에"로그를 보고 그 원인을 파악하는 경향이 있다.
• 실시간으로 공격의 발생 여부를 파악하려면 평상 시의 상태를 파악하는 것이 필요하다.
• 그러면 보통 떄와 다른 움직임이 있으면 비정상이므로 눈치챌 수 있다.
• 그러나 여러 시스템의 로그를 함께 분석할 수 없다면 공격을 발견할 때 까지 시간이 걸리고, 원인을 파악하기도 어렵다.
• 실제로는 각 시스템마다 개별적으로 로그가 만들어지거나 로그 형식이 통일되어 있지 않는 문제가 있어 로그를 통합하는 제품이 많이 등장하고 있다.
• 예를들어 로그를 시간에 따라 늘어놓는 것만으로 공격의 흐름을 쉽게 할 수 있을지 모른다.
• 평소와 다른 행동에 주의하면 주목하고 감시하는 것이 가능하다.
• 이처럼 실시간으로 진행되는 것이 중요하며, 발생하고 있는 공격을 실시간으로 탐지할 수 있다면 그 시점에 공격에 대처할 수 있다.

Point

• 로그는 쌓아두는 것만으로는 의미가 없으며, 올바르게 보존되어 있는지 여부와 정기적인 확인을 통해 전조를 알아내는 것이 중요
• 로그를 보고 있는 것은 부정을 저지르려는 사람들을 억제하는 효과가 있다.

6. 쇼핑 사이트 등의 신용카드 관리

신용카드 관리의 세계 통일 기준

• 온라인 쇼핑이 일반화 되면서 온라인에서 신용카드의 사용은 불가피한 상태가 되었다.
• 한펀, 신용카드 정보가 유출되는 피해가 전 세계적으로 발생하고 있다.
• 원래 각 카드 회사가 독자적으로 요구하는 보안 수준이 정해져 있었지만, 하나의 가맹점(쇼핑 사이트 등)에서 여러 카드를 사용할 수 있어야 하는 것이 당연한 시대이다.
• 그런데 카드 회사마다 기준이 다르다면 각각이 상이한 모든 기준에 대응하는 것은 힘든 일이다.
• 따라서, 가맹점과 서비스 제공 사업자가 신용카드 정보를 안전하게 취급할 수 있도록 하는 보안 관련 기준이 필요하다.
• 이러한 기준으로써 세계적으로 통일된 것이 PCI DSS(Payment Card Industry Data Security Standard)이며, 국제적인 카드 브랜드 5개 회사가 공동으로 설립한 PCI SSC(Payment Card Industry Security Standards Council)에 의해 운용, 관리되고 있다.

PCI DSS의 요구 기준

• PCI DSS의 요구 기준은 6개 항목과 12개 요구사항으로 정해져 있다.
• 가맹점과 서비스 제공 사업자는 이 요구사항에 대한 준수가 필요하다.
• PCI DSS을 준수하고 있다는 것을 자기 또는 제 3자를 통해 증명될 수 있다면 인증을 받을 수 있다.
• 연간 결제 건수에 따라 인증 수순이 분류되어 있는데 최상위인 경우에는 인증 심사 회사에 의해 년 1회 방문 심사가 필요하다.
• 이 외에도 1~3레벨은 인증 Scanning vendor에 의해 4분기마다 취약점 진단, 년 1회 Penetration Test등이 요구되고 있다.
• 요구 기준
  • 안전한 네트워크 구축과 유지
    • 요건1 : 카드 회원 데이터를 보호하기 위해 방화벽을 설치하고 구성을 유지한다.
    • 요건2 : 시스템 암호와 기타 보안 Patameter에 Vendor가 제공하는 기본값을 사용하지 않는다.
  • 카드 회원 데이터의 보호
    • 요건3 : 저장되는 카드는 회원 데이터를 보호한다
    • 요건4 : 오픈된 공공 네트워크를 통해 카드 회원 데이터를 전송하는 경우는 암호화하다.
  • 취약점 관리 프로그램의 유지
    • 요건5 : 모든 시스템을 악성 코드로부터 보호하고 바이러스 백신 소프트웨어 또는 프로그램을 정기적으로 업데이터 한다.
    • 요건6 : 안전한 시스템과 어플리케이션을 개발하고 유지 보수한다.
  • 강력한 접속 제어 기법의 도입
    • 요건7 : 카드 회원 데이터에 대한 접속은 업무상 필요한 범위 내로 제한한다.
    • 요건8 : 시스템 구성 요소에 대한 접속을 확인, 허용한다.
    • 요건9 : 카드 회원 데이터에 대한 물리적 접속을 제한한다.
  • 네트워크의 정기적인 모니터링 및 테스트
    • 요건10 : 네트워크 리소스 및 카드 회원 데이터에 대한 모든 접속을 추적하고 모니터링한다.
    • 요건11 : 보안 시스템 및 프로세스를 정기적으로 테스트한다.
  • 정보보안 정책의 유지
    • 요건12 : 모든 담당자의 정보보안에 대응하는 정책을 유지한다.

PCI DSS의 심사, 인증 흐름

1. 표준화단체 PCI SSC가 심사기관 QSA, 심사기관 ASV에 인증
2. 심사기관 QSA, ASV는 신용카드 취급 사업자, 카드회사, 쇼핑사이트 등에 각각 QSA는 심사 인증서 발급, ASV는 검사 보고서 작성을 수행한다.

Point

• 신용카드 정보를 안전하게 취급하기 위해, 쇼핑사이트 등에는 PCI DSS를 준수하기 위한 대응이 요구되고 있다.
• PCI DSS는 취급 건수에 따라 인증 레벨이 정해져 있다.

7. 재해 대책도 보안의 일부

재해와 사이버 테러에 대비

• 정보보안 3요소로 "기밀성","완전성","가용성"을 들 수 있는데 시스템 문제 뿐만 아니라 지진이나 화재 등의 재해로 인해 시스템을 사용할 수 없게 된 경우도 가용성이 확보되지 않은 상태
• 경우에 따라서는 사이버테르 등의 피해를 당할 가능성도 있는데, 이렇게 기업의 사업 활동이 중지될 수 있는 가능성을 고려하여 예기치 않은 사태가 발생하더라도 최소한의 비즈니스적인 연속성 확보와 신속한 복구를 해야한다.
• 사전 대책이 없다면 대응이 후순위가 될 수 있기 때문에 재해 등이 발생하기 이전 단계에서 계획을 세워 두어야 한다.
• 이러한 계획을 BCP(Business Continuity Plan : 비즈니스 연속성 계획)이라고 한다.
• 또한 계획뿐만 아니라 지속적으로 개선해 가는 관리 시스템을 구축해야 할 필요도 있다.
• 이것은 BCM(Business Continuity Management : 비즈니스 연속성 관리)라고 부르고 있다.

사전 대책의 예

• 히트
  • 안부 확인의 규칙 정비
  • 대안의 확보
• 모노
  • 설비의 고정
  • 대체 방법의 확보
• 돈
  • 긴급 시에 필요한 자금 파악
  • 현금, 예금의 준비
• 정보
  • 중요한 데이터의 적절한 보관
  • 정보 수집, 발신 수단의 확보

사업에 미치는 영향을 명확하게 생각하는 "BIA"

• BCP를 고려할 때, 예상하는 재해의 규모에 따라 대책은 크게 달라질 수 있다.
• 그래서 업무가 중단되었을 때의 영향과 위험을 정량적, 정성적으로 평가하여 BCP를 수립한다.
• 이를 BIA(Business Impact Analysis : 사업 영향 분석)라고 한다.
• 사업을 계속 수행함에 있어 어떤 업무에 위험이 있는지, 업무가 중지되면 어느 정도의 피해가 있는지, 시스템이 정지하게 되면 어느 정도 기간이 지난 후에 복구되어야 하는지 등을 분석한다.
• 또한 비즈니스를 둘러싼 환경은 점점 변해가기 때문에, BCP를 운용하고 개선하는 것과 동시에 BIA도 계속 갱신을 통하여 새로운 위험과 대책을 검토해야 한다.

Point

• 재해나 사이버 테러에 신속하게 대응하기 위해서는 사전 준비가 필요하며, 무엇을 위해 BCP를 수립할 것인가를 생각하고 계획을 세워야 한다.
• BCP나 BCM, BIA는 한번 실시하고 끝나는 것이 아니라, 환경의 변화와 사업 상황에 맞게 검토하고 개선해 나가야 한다.