[ javascript ] 웹 3.0 기초

웹 3.0 기초 - 웹3.0 기술생태계이해 및 개발환경 설정(1회차)

 

WEB(WWW, World Wide Web)의 시작

 

팀 버너스리가 보다 효율적으로 자료를 공유하기 위해 WEB을 개발, WEB을 실현하기 위한 4가지 구성요소인

1. HTML: 문서를 체계적으로 표현하기 위한 HyperTextMarkupLanguage 를 개발

2. HTTP: 문서를 전송하기 위한 HyperTextTransferProtocol을 개발

3. WEB SERVER: HTTP를 사용하여 HTML을 전송하는 주체, 즉 서비스를 제공하는 웹 서버를 개발

4. WEB BROUSER: HTML로 만들어진 문서를 HTTP로 전송하고, 해당 서비스를 사용자가 사용하기 위해 웹을 개발하였다.

 

Node.js

Node.js는 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다.

자바스크립트 엔진: 자바스크립트 파일을 컴퓨터가 읽을 수 있도록 변환해주는 역할을 한다. ex.V8

런타임: 특정 언어가 구동되는 환경을 의미한다.

 

자바스크립트 파일을 컴퓨터가 읽을 수 있도록 변환하는 V8을 내장하고(V8은 인터프리터의 기능?)

자바스크립트 언어가 웹 브라우저 외의 다른 환경에서도 구동되는 환경을 제공하는 것이 Node.js다.

 

Node.js를 설치하면 자동으로 npm이 설치된다(Node.js는 npm을 포함한다) npm은 node package manager의 줄임말로,

자바스크립트 언어를 구동하는 환경에서 자주 사용되고, 재사용되는 자바스크립트 코드들을 패키지로 만들어서 사용할 수 있는데

그러한 패키지를 모아놓은 저장소가 npm이다. 다른 사람들이 만들어 놓은 패키지를 npm install [패키지 이름]을 명령으로 cmd에서 설치할 수 있다. 그 후 const 변수이름 = require(패키지이름); 하면 변수 이름으로 패키지 사용이 가능하다.

 

npm은 세계에서 가장 큰 소프트웨어 저장소다. npm is the world's largest software registry.

전 세계의 오픈 소스 개발자들이 npm을 사용하여 소프트웨어 패키지를 공유하고, 필요하면 다른 사람들이 만든 패키지를 빌려 사용한다. 그리고 여러 조직들이[ex. 회사, 기관] 조직 내부에서만 사용하는 코드나 비공개 패키지를 관리하는 것에 npm을 사용한다.ex. 기업은 자체적으로 npm 레지스트리(저장소)를 설정하여 외부와 공유하지 않는 라이브러리나 모듈을 관리할 수 있다.

 

npm은 세 가지 뚜렷한 구성요소들로 구성되어 있다.

 

1. 웹 사이트---> 웹 사이트 형태로 제공되는 다양한 기능을 갖추고 있다.

npm은 웹 사이트를 통해 사용자들이 패키지를 검색하고,

관리하며, 배포하는 데 필요한 여러 도구와 인터페이스를 제공한다.

 

2. CLI(the Command Line Interface)

3. 저장소

 

(자바스크립트 파일 구동에 필요한, 즉 어떤 기능을 구현하기 위한) 패키지들을 찾기 위해,

프로파일을 설정하기 위해(npm 계정을 생성하고, 관리하는 것을 의미) ---> 내가 작성한 패키지를 공유하거나, 내가 사용하는 패키지를 관리하는 등의 작업을 할 수 있게 된다, npm의 다양한 다른 기능들을 관리하기 위해 웹 사이트를 사용한다.

***npm의 다양한 다른 기능을 관리한다는 것은(manage other aspects of your npm experience)

패키지의 버전 관리, 설치된 패키지의 업데이트, 프로젝트의 의존성 등을 웹 사이트나 명령어를 통해 관리할 수 있다는 것을 의미한다.

 

Node.js에서 npm을 사용해 웹서버 구축하기

우선 html파일만 존재한다면 npm init 명령어로 package.json 파일을 만들어준다.

npm init 명령어는 npm 패키지 초기화를 위한 명령어로

새로운 Node.js 프로젝트를 시작할 때 package.json 파일을 생성한다.

이 명령어는 프로젝트에 대한 기본 정보를 입력받고, 설정을 통해 package.json 파일이 작성된다.

만약 기본 값을 자동으로 설정하려면 -y 옵션을 추가할 수 있다.

npm init은 단순히 package.json 파일을 초기화하는 작업이다.

***npm create은 예를 들면 리액트 프로젝트와 같이 주로 특정 템플릿을 기반으로 프로젝트를 생성하는 명령어다.

 

npm에서 제공하는 live-server패키지를 설치하기 --> 코드의 실시간 반영을 확인할 수 있다.

npm install -D live-server

-D는 개발자모드 install 대신 i만 작성해도 됨.

 

***<table>태그 내의 <tr>태그는 행을 나타낸다. <td>는 열을 나타낸다.

속성 rowspan은 행을 합치고, colspan은 열을 합치는 기능을 한다.

vscode에서 블록지정 잡았을 때 동일한 값 지정하는 방법: ctrl + D

 

ESLint와 prettier 파일을 설정함으로써 프로젝트 팀원들과 소스코드 형식 통일하기]

ESLint는 코드를 정적으로 분석하여 문제를 빠르게 찾아낸다.

코드를 정적으로 분석한다는 것은(statically analyzes your code to quickly find problems)

프로그램을 실행하지 않고, 작성된 코드에 문제가 없는지 검사하는 것이다.

ESLint는 ECMAScript/Javascript 코드에서 찾아낸 패턴들을(형식?들을) 식별하고, 보고하는 도구로

코드의 일관성을 높이고, 버그(bugs)를 방지하는 것을 목표로 한다.

터미널에 다음 명령어를 사용하여 ESLint를 설치하고, 설정할 수 있다.

npm init @eslint/config@latest

 

prettier는 줄바꿈, 공백, 들여쓰기 등과 같은 작성하는/작성된 코드의 스타일을 교정해주는 역할을 한다.

ESLint는 잘못 입력한 문법을 자동으로 수정하기 위해 사용하고,

prettier는 팀원간의 코딩 컨벤션(관습)을 맞추기 위해 사용한다.

ESLint에도 코드를 포맷팅하는 설정이 있기 때문에 prettier랑 같이 사용하면 충돌이 나는 부분이 있다.

그래서 ESLint의 원래 포맷팅 기능을 없애버리고: eslint-config-prettier

eslint에 prettier의 포매팅 기능을 추가해준다: eslint-plugin-prettier

 

리액트를 사용하는 프로젝트인 경우 아래와 같은 플러그인을 추가적으로 설치해야 한다.

eslint-plugin-react : 리액트 규칙이 들어있는 플러그인

eslint-plugin-react-hooks : 리액트 훅스 규칙이 들어있는 플러그인

eslint-plugin-jsx-a11y : JSX 요소의 접근성 규칙에 대한 정적 검사 플러그인

eslint-plugin-import : ES6의 import, export 구문을 지원하는 필수 플러그인

 

npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

 

그리고 리액트 관련 규칙을 포함된 라이브러리 설치하기

→ npm install --save-dev eslint-config-airbnb #리액트 관련 규칙을 포함하는

 

---

 

node_modules를 설치하려면 먼저 해당 폴더에 package.json 파일을 생성해야 한다.

package.json 파일을 생성한 후 npm install 명령어를 실행하면 node_modules 폴더가 생성된다.

그리고 node_modules 폴더 안에 필요한 패키지들이 설치된다.

- npm init으로 package.json 파일 생성 → npm install로 node_modules 폴더 생성 → 생성된 node_modules 폴더안에 필요한 패키지 설치

→ node_modules 폴더는 패키지 설치 시 자동으로 만들어진다. node_modules 폴더는 npm이 패키지를 관리하는 폴더로,

설치한 모든 패키지가 이 폴더 안에 들어간다. npm init으로 package.json 파일은 수동으로 생성하지만,

node_modules 폴더는 npm install 명령어를 실행할 때 설치된 패키지들과 함께 자동으로 생성된다.

---

웹 3.0 기초 - 웹3.0 기술생태계이해 및 개발환경 설정(2회차)

 

웹 1.0: 콘텐츠 제공자들이 만들어준 데이터들을 단방향적으로 정보를 수집하는 형태 ( Read Only )

웹 2.0: 컨텐츠를 소비만했던 사용자가 직접 컨텐츠를 생산하는 형태로 발전,

사용자는 컨텐츠의 소비 및 생산하는 주체가 됨 ( Participatory )

 

VR, AR, MR 그리고 XR

- Virtual Reality(VR) - 가상의 세계, 가상의 세계에 내가 들어가는 것

- Augmented Reality(AR) - 현실 세계에는 존재하지 않지만 특정 디바이스를 통해서 가상의 이미지가 보이는 것,

현실세계에 가상 이미지가 존재하는 것, 예를 들면 포켓몬 고와 같은 게임이 있다.

- MR(Mixed Reality, AR+VR) - 현실세계에 가상세계가 구축되는 것

- XR(Extended XR, AR, MR 개념을 모두 포함함) 

---

 

jQuery(제이쿼리)

jQuery는 빠르고, 작고(small, 용량이 작다는 의미인듯, 경량화?), 특징이 풍부한 자바스크립트 라이브러리다.

- 특징이 풍부한 자바스크립트 라이브러리: feature-rich Javascript library

jQuery는 HTML 문서와 같은 것들을 여기저기 돌아다녀 조작한다(traversal and manipulation), 이벤트 핸들링[처리](event handling), 애니메이션, 그리고 수 많은 브라우저를 가로질러 작동하는 API를 사용하기 쉽도록 더 간단하게 만들어준다.

***API가 나온 배경: 2기종과 통신하기 위해 나오게 되었다: 하나의 기능을 갖고,  모바일 디바이스·PC·하드웨어 장비에서 통신하고 싶은데 언어가 다른 장비들은 어떻게 통신이 이루어질까? 에서 착안된 것이 WEB API를 이용해서 통신을 하자라는 해결방안이 나오게 됨. 초기에 XML으로 통신하는 soap방식과 json으로 통신하는 규격이 만들어졌다. Web api로 통신할 때 json데이터를 주고받는 것이 보편적인 방식이 되었다.

 

- JSON과 XML은 (통신에서, Web api사용시)애플리케이션 간(2기종간) 데이터 교환에 사용되는 데이터 표현이다. JSON은 사람과 기계 모두가 읽을 수 있는 오픈 데이터 교환 형식이다. JSON은 모든 프로그래밍 언어에 독립적이다 → 어떤 플랫폼에서든 사용이 가능하다는 장점이 있다.

 

jQuery를 사용해서 정적인 페이지에 동적인 효과를 추가하기

 

- jQuery 파일을 다운로드한 뒤 프로젝트 내 js폴더를 만들고, 그 안에 다운로드한 jQuery 파일을 넣는다.

그리고 jQuery를 사용할 html <head>태그 내에 <script>를 작성해준다. 예를 들면,

<script src="jQuery파일이 있는 경로" type="text/javascript" /> --> jQuery파일의 타입은 javascript라는 의미다.

혹은 jQuery파일을 다운로드한 후에 폴더에 넣고, 해당 경로를 src 속성 값에 적을 필요 없이 jQuery파일이 존재하는 주소값을 적어도 무방하다. <script src="https://code.jquery.com/jquery-3.6.0.min.js" />

html5 이전에는 text/javascript가 보편적으로 사용, html5이후에는 application/javascript가 사용되기 시작했다.

 

html문서가 모두 로드된 뒤에 javascript가 실행되어야하고,

html문서 모두 로드된 뒤에 자바스크립트를 실행하는 기능을 제공하는 jQuery의 메서드를 사용함으로써 에러를 방지한다.

```

$(document).ready(function() { // $(document).ready(function(){});

  console.log('ready!!');

})

```

 

jQuery의 ajax를 사용할 때 jQuery.ajax() 작성으로 시작하는데 jQuery의 축약어가 $(달러기호)로 예약되어 있어

$(달러기호만으)를 사용하여 $.ajax() 메서드를 사용할 수 있다 *** ajax는 비동기 방식으로 진행된다

// jQuery의 ajax() 메서드를 사용하는 법
$.ajax({
  url: "json파일 또는 서버로 요청할 주소"
}).then((data) => {
	// 데이터를 성공적으로 받아왔을 때
    console.log('Success', data);
}).catch((error)=>{
	// 데이터를 받아오는 과정에서 에러가 생겼을 때
    console.log('Error', error);
});

 

JSON파일에서 대괄호[]는 배열을 의미하고, 중괄호{}는 객체를 의미한다.

 

vscode에서 위아래 길이가 다른 문자열 모두 블록지정하는 방법

Ctrl+Alt로 위아래(세로로) 커서 지정한다음 컨트롤+Shift누르고 화살표로 블록범위 지정해서 편집하기

 

document(html파일)의 상태가 "ready"일 때까지 웹 페이지는 안전하게 조작될 수 없다

웹 페이지가 완전히 로드되지 않은 상태에서 dom을 조작한다면 에러가 발생할 수 있다는 것이다.

jQuery는 문서의(document) 준비 상태를 감지한다. $(document).ready() 안에 포함된 코드는

페이지의 DOM이 자바스크립트 코드 실행을 위해 준비되었을 때 한 번만 실행된다 → DOM구조가 준비되었을 때 실행되는

// input의 타입은 checkbox, checkbox에 onchange(변화)가 발생하면 onDecafChange()함수를 호출한다.
<input id="decafe-checkbox" type="checkbox" onchange="onDecafChange()" />

//------------------------------------------------------------------------

function onDecafChange() {
    // checkbox에 변화가 감지될 때마다 loadMenu() 호출
    loadMenu();
}

function loadMenu() {
	let isChecked = $('#decafe-checkbox').is(":checked");
    console.log('onDecafChange', isChecked);
    
function formatPrice(price) {
	return String(price/1000).replace('.', ',');
}
    
    $.ajax({
    	url: 'menu-item.json'
    })
    .then((data)=>{
    	// console.log(data);
        
        let html = "";
        
        $.each(data, function(index, item) {
        	// console.log('Item', index, item);
        
            let calcDecaf = isChecked && item.changeDecaf;

            let tall = calcDecaf? item.tall+300: item.tall;
            let grande = calcDecaf? item.grande+300: item.grande;
            let venti = calcDecaf? item.venti+300: item.venti;
        
            if(calcDecaf) {
              html += '<tr>';
              html += '  <td>';
              html += `    <span class="item-title font-ored">${item.kname}</span>`;
              html += '    <br>';
              html += '    <span class="item-subtitle font-ored">' + item.ename + '</span>';
              html += '  </td>';
              html += `  <td class="menu-item-price font-ored">${formatPrice(tall)}</td>`;
              html += `  <td class="menu-item-price font-ored">${formatPrice(grande)}</td>`;
              html += `  <td class="menu-item-price font-ored">${formatPrice(venti)}</td>`;
              html += '</td>';
            } else {
              html += '<tr>';
              html += '  <td>';
              html += `    <span class="item-title font-ored">${item.kname}</span>`;
              html += '    <br>';
              html += '    <span class="item-subtitle font-ored">' + item.ename + '</span>';
              html += '  </td>';
              html += `  <td class="menu-item-price font-ored">${formatPrice(tall)}</td>`;
              html += `  <td class="menu-item-price font-ored">${formatPrice(grande)}</td>`;
              html += `  <td class="menu-item-price font-ored">${formatPrice(venti)}</td>`;
              html += '</td>';
            }
        });
        // $('#menu-tbody').append(html);
        $('#menu-tbody').html(html);
    })
    .catch((error)=>{
    	console.log(error);
    });
}

$(document).ready(function() {
	// DOM구조가 완전히 준비되었을 때 $(document).ready()함수안의 코드가 실행된다.
	loadeMenu();
});

 

$.each() - jQuery의 each() 메서드

객체의 속성이나 배열의 인덱스(요소)를 순회할 때 사용하는 jQuery 메서드다.

 

현재 페이지 url 관련 메서드

Location 인터페이스 search 속성은 search문자열이다, query string이라 불리기도 한다.

search string(query string)은 URL 매개변수로 '?'물음표 기호 뒤에 따라오는 문자를 포함한다.

현대 브라우저는 querystring에서 파라미터를 추출하여 parse하기 쉽게 만드는

URLSearchParams와 URL.searchParams를 제공한다.

 

Location의 search 속성 값은 string(문자열)이다.

실습에서 배운 window.location.search는 해당 url에서 ?를 포함해 ?뒤의 파라미터들을 문자열로 반환한다.

 

```

let search = window.location.search;

 

// search에 담긴 값의 타입은 문자열, 값은 ?index=0

console.log('search', search); 

```

---

 

 

웹 3.0 기초 - 웹3.0 개발을 위한 기초프로그래밍 - (3회차)

웹 1.0은 사용자가 소비하는 주체 - 콘텐츠를 생산하는 주체와 소비하는 주체가 나뉘어진다.

콘텐츠를 소비하는 주체와 만드는 주체가 명확히 구분됨.

 

웹 2.0은 사용자도 콘텐츠를 생산할 수 있어 콘텐츠를 공급하는 주체의 범위가 넓어짐, 통신의 양방향이 이루어짐

소비자가 콘첸츠를 소비도하고, 공급도 하는 형태를 이루게 됨

 

웹 3.0은 콘텐츠를 소비하고 생성하는 것에 더하여 소유하게된 것이 웹 3.0의 특징,

데이터를 플랫폼 회사 종속이 아닌 내가 소비하고 만들고, 소비하고, 소유하게 됨, 탈중앙화

 

이어서...

---

 

참고

1. Node.js와 npm: https://www.zerocho.com/category/NodeJS/post/57387cb8715202c8679b3af1

2. About npm(npm 정의 참고): https://docs.npmjs.com/about-npm