생활코딩 - Node.js(JavaScript) & 웹 애플리케이션 만들기

1. Node.js(JavaScript)

• 웹브라우저가 있고 웹서버가 있으면 웹브라우저의 우리가 주소를 입력해서 요청하면 웹서버는 그 요청에 따른 정보를 찾아서 응답해주는 관계에 있다.

• Node js는 웹서버로 써도 사용될 수 있다. 왜냐하면 웹서버 기능을 내장하고 있기 때문이다.

• Node js가 경로에 해당되는 파일을 읽어서 그 값을 가져오는 거다. 그리고 그것을 response.end 괄호 안에 다가 위치 시키게 되는거다

  response.end(fs.readFileSync(__dirname + url));

• 자바스크립트 줄 바꿈

  \n

1-1. form 태그

• 내 정보를 서버로 보내거나 혹은 서버로 보내지 않더라도 자체 웹페이지에서 사용자와 상호작용을 하기 위해 입력값이나 버튼과 같은 이벤트 요소가 필요할때 사용되는 HTML의 태그가 바로 form 태그이다.
• 속성
  • action : form을 전송할 서버 쪽의 script 파일을 지정, 전송되는 서버 url 또는 html 링크
  • method : 전송 방식 선택
    • get : 256~4096 byte까지만 전송 가능
    • post : 입력 내용의 길이에 제한 X, 수정/삭제/생성 같은 것을 할때 반드시 사용

1-2. 값으로서 함수

• 자바스크립트에서는 처리방법을 그룹핑하는 함수 조차도 데이터이기도 하기 때문에 배열과 객체에다가 담을 수 있다.
• 조건문하고 반복문은 값이 될 수 없다.
• 함수는 값이고 객체는 값을 저장하는 그릇이다라고 하는 특성을 이용해서 서로 연관된 데이터와 서로 연관된 처리방법을 담고 있는 함수들을 그룹핑 하는 걸 통해서 코드의 복잡성을 획기적으로 낮출 수 있다.

const q = {
  v1:'v1',
  v2:'v2',
  f1:function (){
    console.log(this.v1);
  },
  f2:function(){
    console.log(this.v2);
  }
}
 
q.f1();
q.f2();

2. 웹 애플리케이션 만들기

• 웹브라우져가 설치되어 있는 컴퓨터를 클라이언트라고하고 웹 서버라는 소프트웨어가 설치되어 있는 컴퓨터를 서버 컴퓨터라고 부른다.
• 웹브라우져가 설치되어 있는 컴퓨터를 통해서 그 주소에 해당되는 서버 컴퓨터에게 웹페이지를 요청하게 된다. 그러면 서버 컴퓨터는 웹 서버라는 소프트웨어가 설치되어 있어서 그 웹 서버 소프트웨어가 요청을 받아서 그 서버 컴퓨터에 저장되어 있는 그 문서를 읽어서 그것을 다시 클라이언트 컴퓨터에게 쏴주는데 그것을 응답한다라고 한다. 즉, 클라이언트는 요청하고 서버는 응답한다.
  

2-1. HTML(Hypertext Markup Language)

• 하이퍼 텍스트라는 것은 문서와 문서가 링크로 연결 되어있다라는 것이다.
• HTML에 있어서 가장 중요한게 하이퍼 텍스트라는 특징이라는 것이고 다른 말로는 링크라고 볼 수 있다. 그리고 바로 이 링크로 인해서 문서와 문서가 그물망처럼 연결돼서 링크로 연결 된 하나의 거대한 정보 덩어리를 만든 것이 바로 웹이라고 할 수 있다. 그래서 링크는 HTML의 본질이라고 할 수 있다. 그리고 HTML은 웹의 중심이라고 할 수 있기 때문에 이 HTML 본질이 웹의 본질이라고도 볼 수 있다.
• 태그

  • a 태그 : 링크 태그
    • 속성
      • href = "링크된 페이지의 URL 주소” : 해당 링크로 이동
      • target = “_blank” : 사용자가 링크를 클릭 했을때 현재 창이 아니라 새 창에서 열림
  • li 태그 : 리스트 태그
  • ol 태그 : 순서 있는 리스트 그룹 태그
  • ul 태그 : 순서 없는 리스트 그룹 태그
  • nav 태그 : 네비게이션을 위한 리스트 태그
  • header 태그 : 헤더 영역 표현 태그
  • article 태그 : 본문 영역 표햔 태그

2-2. CSS(Cascading Style Sheet)

• CSS는 style을 내기 위한 언어이다.
• HTML과는 완전히 다른 독립된 언어이다. 그런데 CSS는 HTML을 떠나서는 살 수 없는 언어이다.
• HTML이라는 언어를 디자인하기 위해 고안된 것이다.
• 박스 모델

  • height : 높이
  • width : 너비
  • padding : 컨탠츠와 테두리 간의 간격
  • border : 테두리
  • margin : 서로 다른 컨텐츠의 테두리와 간격

• float : 두 개의 컨텐츠가 나란히 화면에 배치되게 하는 기능성을 가지고 있는 효과
• HTML & CSS - 정적인 언어
• JavaScript & PHP - 동적인 언어

2-3. PHP

• 순수 HTML은 내용이 많아질수록 많은 코드를 써야하고 코드가 복잡해지고, 변경이 쉽지 않기 때문에 생산성이 떨어집니다. 그래서 프로그래밍 문법을 이용하여 조건문, 반복문 등을 이용하여 반복작업을 빠르게 처리할 수 있는 동적 페이지가 필요한데, php를 이용하면 간단하게 동적페이지를 사용할 수 있습니다.
• PHP로 작성된 코드를 HTML 코드 안에 추가하면, 웹 서버는 해당 코드를 해석하여 자동으로 HTML 문서를 생성합니다.

<?php ?> - php 시작과 끝을 알려주는 태그

echo - 페이지에 문장을 출력

문자와 문자 더할 때 - “String”.”String”

$변수명 - 변수 사용할때

$_GET[“가져올 값”]; - 폼에 입력한 값을 받아 오는 역할

• 연산자, 조건문, 반복문, 함수는 자바스크립트랑 같다.

• 배열

  • 자바스크립트 : list = new Array(“one”,”two”,”three”);
  • PHP : list = array(“one”,”two”,”three”);

• PHP 배열 길이 : count($배열명);

2-4. IP(Internet Protocol)

• 인터넷 프로토콜을 사용하는 여러 장비들이 서로 정보를 주고받기 위해서는 주소를 가지고 있어야 한다. 그 주소가 IP 주소이다.
• 웹 사이트에 IP로 접수할 수도 있지만 도메인이라는 것을 통해서도 접속할 수 있다.
• IP 주소의 치명적인 단점은 기억하기가 어렵다는 것이다.

2-5. 도메인

• 서버 컴퓨터를 일종의 소유지라고 비유를 한다면 그 소유지의 이름을 우리가 도메인 네임이라고 부를 수 있다.
• 도메인 네임을 웹브라우져의 주소창에다 입력하면 그 도메인 네임에 해당하는 IP 주소로 접속하게 된다.
• 도메인을 이용해서 특정한 서버에 접속하긴 했지만 실제로 컴퓨터 동작할때는 도메인을 통해서 서버에 접속하는게 아니다. 도메인은 사람이 보기 편한 것일 뿐이고 실제로 서버에 접속하는 것은 도메인이라는 식별자를 통해서 하는 것이 아니라 IP 주소를 통해서 접속하는 것이다.

2-6. DNS(Domain Name System)

• IP의 이름이라고 할 수 있는 도메인 네임이 동작하는 체계 시스템이다.
• 웹브라우져의 주소창에 도메인 네임를 입력하게 되면 네임 서버에 먼저 접속해서 도메인 네임라는 사이트의 IP가 무엇인지 물어보고 네임 서버는 각각의 도메인 별로 IP가 어떻게 되는지를 알고 있기 때문에 도메인 네임라는 사이트의 IP가 무엇인지 응답하게 된다. IP가 뭔지 알게 되었으니까 해당 서버에 접속 할 수 있고 응답을 받을 수 있게 된다.
• 웹 사이트를 만들때 도메인을 쓰고 싶으면 도메인을 구입해서 네임 서버에 등록해야한다.
  

2-7. IPv6

• Pv4의 주소 고갈 문제를 해결하기 위하여 기존의 IPv4주소 체계를 128비트 크기로 확장한 차세대 인터넷 프로토콜 주소이다.

• 공유기 IP는 공인 IP라고 하고 인터넷 전체, 전세계에서 유일무이한 IP를 가지고 있어야만 사용자들이 여기에 접속할 수 있다.

• 공유기에 연결된 컴퓨터나 휴대폰, 노트북 등이 가지고 있는 IP는 사설 IP라고 한다. 사설 IP는 공유기 안에서만 유일하고 중복되지 않는다면 이 기기에 접속 할 수 있게 된다.

2-8. 포트포워딩

• 공유기의 포트를 통해 이 공유기와 연결된 기기들의 특정 포트에 진입할 수 있게 하는 기능이다. 만약 공유기에 컴퓨터와 핸드폰이 연결되어 있는데 그냥 공유기 주소 + 포트번호로 입력한다면 공유기의 '어느 기기'의 포트로 들어가야하는 지 알 수 없다. 따라서 포트 포워딩은 공유기에 연결된 기기의 포트를 특정 번호를 통해 전달(forwarding)해 주는 것이라고 이해할 수 있다.

2-9. 유동 IP

• 장비에 고정적으로 IP를 부여하지 않고 컴퓨터를 사용할 때 남아 있는 IP 중에서 돌아가면서 부여하는 IP이다.

2-10. DDNS

• IP 주소에 대한 변경 사항을 자동으로 감지하고 업데이트할 수 있다.

2-11. 웹 호스팅

• 웹 서버를 운영하기 위한 모든 것을 제공하는 것이다.
• 장점은 애플리케이션을 업로드만 하면 된다는 것이다. 신경쓸게 없고 애플리케이션을 잘 만드는 것에 집중하면 된다
• 단점은 웹 애플리케이션을 동작하는 용도로만 사용 가능하다는 것이다. 왜냐하면 운영체제 레벨에서 접근해서 뭔가 할 수 있는 여지가 전혀 없기 때문이다. 그냥 웹사이트를 운영하는데만 사용 할 수 있다.
• 일반적으로 웹 호스팅은 한대의 컴퓨터에 여러명의 사용자들이 들어가서 같이 한대의 컴퓨터의 자원을 공유하고 있기 때문에 만약에 이웃을 잘못 만나서 이웃이 대박이 나면 자신의 사이트가 느려진다.
• 가장 사용하기 쉽고 비용도 대체로 저렴하기 때문에 직접 집에서 서버를 운영하는 것이 아니라면 제일 먼저 고려해 볼 만 한것이다.

2-12. 서버 호스팅

• 서버의 용도로 사용할 수 있는 서버 컴퓨터를 제공하는 것이다.
• 자신이 필요한 것들은 직접 설치해서 운영해야 한다.
• 컴퓨터로 할 수 있는 모든 일을 다 할 수 있다. 자유도가 높기 때문에 활용도가 높다는 장점이 있다.
• 단점은 직접 운영해야한다는 것이다.

2-13. 클라우드 컴퓨팅

• 컴퓨팅 리소스(스토리지 및 인프라)를 인터넷을 통해 서비스로 사용할 수 있는 주문형 서비스이다. 개인과 기업이 물리적 리소스를 직접 관리할 필요가 없으며 사용한 만큼만 비용을 지불하면 된다.
• Infrastructure as a Service(IaaS) : 컴퓨팅, 스토리지, 네트워킹, 가상화 등 IT 인프라 서비스에 대한 주문형 액세스를 제공합니다. IT 리소스를 가장 높은 수준으로 제어하며 기존 온프레미스 IT 리소스와 가장 유사합니다.
• Platform as a Service(PaaS) : 클라우드 애플리케이션 개발에 필요한 모든 하드웨어 및 소프트웨어 리소스를 제공합니다. PaaS를 사용하면 기업은 기본 인프라의 관리 및 유지보수에 대한 부담 없이 애플리케이션 개발에 집중할 수 있습니다.
• Software as a service(SaaS) : 기본 인프라에서 유지보수 및 앱 소프트웨어 자체 업데이트에 이르기까지 전체 애플리케이션 스택을 서비스로 제공합니다. SaaS 솔루션은 클라우드 인프라 제공업체에서 서비스와 인프라를 모두 관리하고 유지보수하는 최종 사용자 애플리케이션인 경우가 많습니다.
  

후기

• IP를 통해 웹 사이트를 접속할 수도 있다는 것을 알게 되었다. 그리고 도메인을 통해 IP 주소를 가지고 오고 서버에 보내고 있었다는게 신기했다. 내가 모르는 곳에서 이런 일들이 일어나고 웹 사이트를 보여주었구나 엄청나다라는 생각이 들었다.
• 우리 컴퓨터에서 웹 사이트 불러오는데에 어떤 식으로 작동하고 서버를 어떤식으로 불러오는지 몰랐었는데 요번에 알게되어 너무 좋았고 설렜다.