함수, 배열, 루프, JSON 및 NoSQL을 사용하여 뒤처진 느낌을 받거나 어디서부터 시작해야 할지 모르는 사람들을 위한 일반 Javascript 복습

여기에서는 NodeJS나 외부 라이브러리를 사용하지 않고 Plain Vanilla JS를 배워보겠습니다. 일부 Google 시트 데이터를 JSON으로 변환하고 이를 AWS S3 버킷에 저장한 다음 일반 js를 사용하여 가져오는 사용 사례부터 바로 시작하겠습니다. 대부분의 수업은 hello world 프로그램으로 시작하며 다른 것은 많지 않습니다. 그러나 여기서는 실제로 즉시 프로그래밍할 내용이 있으므로 모든 프로그래밍 언어의 핵심 요소인 배열과 루프를 연습할 수 있습니다. 게다가 여기에서 데이터 과학의 세계로 진출하여 저처럼 경력을 쌓을 수도 있습니다.

데이터를 처음 연구할 때 SQL을 생각하지만 SQL이 과도하고 필요하지 않은 앱이 많이 있습니다. 몇 가지 지표가 있는 대시보드에서는 다른 데이터와 관계가 없는 간단한 JSON 플랫 파일을 데이터 소스로 사용할 수 있습니다. 대시보드는 이 NoSQL 형식을 사용할 수 있으며 마케팅 그룹 보고 요구 사항에 널리 사용됩니다.

환경을 설정하려면 스프레드시트 데이터를 json으로 변환하기 위한 Google Chrome과 json 크롬 확장 프로그램만 필요합니다. 그런 다음 일반 웹사이트로 무료 AWS와 S3 버킷이 필요합니다. IDE의 경우 Windows 메모장만 사용합니다. 또한 자바스크립트 가져오기 API가 http 프로토콜을 사용하므로 C 드라이브에서 데이터를 가져오는 것이 작동하지 않으므로 데이터를 가져오려면 로컬 네트워크가 필요하므로 이를 위해 웹 서버가 필요합니다. 무료 AWS를 공개하기 전에 먼저 로컬 웹 서버를 설정하여 데이터를 테스트하겠습니다. 이를 위해 간단한 Python을 사용하겠습니다.

환경 설정
로컬 Python 서버 및 인덱스 파일을 설정하는 단계

AWS 원격 서버를 생성하기 전에 먼저 Python을 사용하여 로컬 웹 서버를 설정해야 합니다. 수행 방법은 다음과 같습니다

먼저 Python이 설치되어 있는지 확인하세요. 홈 폴더 c:Usersyourname이 기본값으로 지정되는 명령 프롬프트를 열고 python을 입력하세요. 버전 정보가 표시되면 해당 버전이 설치된 것이며 아래 6단계로 이동할 수 있습니다(단, 인덱스 파일이 먼저 홈 폴더에 저장되어 있는지 확인하세요)
Python이 설치되어 있지 않으면 다음 지침을 따르세요

Windows의 Python 서버
1 검색 영역으로 이동하여 cmd를 입력한 다음 명령 프롬프트를 누르면 홈 폴더(일반적으로 C:UsersyourName) 경로가 포함된 검은색 화면이 열립니다.
2 Python을 입력하면 설치되면 버전 번호가 표시됩니다
3 설치되지 않은 경우 가져오기 버튼이 표시됩니다. 이 버튼을 누르면 몇 분 안에 다운로드가 설치됩니다(또는 Chrome에서 Python을 다운로드하면 됩니다)
4 완전히 설치되면 cmd 프롬프트를 다시 열고 Python을 다시 입력하세요
5 버전 정보가 표시됩니다....파이썬이 이미 설치되어 있는 경우 여기에서 시작합니다
6 python -m http.server를 입력하면 서버가 시작됩니다(이 cmd 창을 열어두세요)
7 인덱스 파일을 홈 폴더에 저장했는지 확인하세요(파일 탐색기에서 c:를 클릭한 다음 Users, yourName을 클릭하여 홈 폴더를 엽니다)
7a 8단계에서 localhost로 이동하는 동안 cmd를 열어 둡니다. cmd를 닫으려면 다시 열고 다시 시작해야 합니다
8 Chrome으로 이동하여 localhost:8000을 입력하면 기본 색인 페이지가 나타납니다....색인 파일 생성 방법은 아래를 참조하세요

Mac의 Python 서버
Mac에서는 터미널을 열고 위의 2단계부터 시작합니다. 단, 사전 설치된 Python 버전에 따라 위의 3가지 다른 옵션을 시도해야 할 수도 있습니다. 홈 폴더는 Python이 설치된 폴더여야 하며 서버를 시작하는 터미널 폴더와 동일해야 합니다.

먼저 시도해 보세요

1. python -m http.server 또는
을 입력하세요.
2. 위의 방법이 작동하지 않으면 python3 -m http.server를 입력하세요. 반환을 누르면 Python 3은 명령이 실행된 디렉터리에서 간단한 HTTP 서버를 즉시 시작합니다. 이 디렉터리에는 인덱스 파일도 있어야 합니다. 또는 다른 사람들이 작동하지 않는 경우 옵션 3
3. 이전 버전의 경우 python -m SimpleHTTPServer 8000을 입력하세요

Python 경로에 인덱스(홈) 파일을 만드는 방법.. 웹 서버가 있는 동일한 폴더에 저장하세요. 이 코드를 복사하여 index.html로 저장하세요

     

<header>
</header>

   <p> hi there, this is our first html page </p>

데이터 준비

1 이 데이터를 복사하여 빈 Google 시트에 붙여넣으세요
이것은 주문 데이터베이스를 갖춘 가상의 회사입니다

order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0

매우 중요 - 데이터를 붙여넣은 후 강조 표시된 상태에서 Google 시트에서 데이터를 누른 다음 텍스트를 열로 분할하세요

2 json 크롬 확장 프로그램 받기
시트를 생성하기 전에 Chrome을 활성화하여 json으로 저장하세요.
Google 시트 툴바에 JSON 아이콘을 추가하는 간편한 바로가기를 찾았습니다...이것은 Chrome 확장 프로그램입니다
먼저 이 링크로 이동하세요 https://chromewebstore.google.com/detail/sheets-to-json/enmkalgdnmcaljdfkojckdbhkjmffmoa
그런 다음 페이지 맨 오른쪽에 있는 Chrome에 추가를 누르세요
그런 다음 빈 Google 시트를 열면 페이지 상단 근처 툴바의 마지막 항목으로 JSON 아이콘이 표시됩니다

3 데이터를 json으로 변환
위의 데이터를 시트에 붙여넣은 다음 텍스트를 열에 붙여넣은 다음 json 아이콘을 누르고 다운로드로 이동하여 json 파일을 받으세요

4 이 json 파일을 Python과 인덱스 파일이 있는 동일한 폴더에 저장합니다...저는 Orders.json으로 저장했습니다

프로그램 실행

5 인덱스 파일에서 데이터 가져오기...서버 및 파일 구성 테스트

공용 서버의 데이터에 액세스하기 위해 아래에서 사용할 코드와 다른 다음 코드를 포함하도록 index.html 파일을 변경하세요.

     

<header>
</header>

   <p> hi there, this is our first html page </p>

6 localhost:8000을 호출하고 데이터를 봅니다
7 로컬 서버에서 json을 가지고 놀고 나면 AWS에서 공개 S3 버킷을 생성할 수 있습니다

AWS S3 버킷을 공개 서버로 구성

JSON 파일을 원격으로 저장하는 가장 간단한 방법은 AWS S3를 사용하는 것입니다. 기존 데이터 서버에서 스키마를 생성하지 않음으로써 우리는 서버리스가 됩니다. 우리는 어디에서나 버킷 링크에 연결할 수 있는 S3를 갖춘 AWS 클라우드에 있습니다. 이전에 말했듯이 noSQL S3 접근 방식에는 몇 가지 제한 사항이 있습니다. 그러나 그것은 또한 큰 이점을 가지고 있습니다. 데이터 작업을 할 때, 인간의 본성은 하나의 Excel 테이블에 크게 의존했던 옛날과 비슷하게 하나의 테이블만 사용하려는 경향이 있습니다. 이 하나의 플랫 파일 형식은 몇 가지 측정항목을 처리할 수 있으므로 청중에게 복잡성을 가중시키지 않습니다. 플랫 파일의 이상적인 사용 사례는 간단한 대시보드입니다.

먼저 AWS s3 버킷을 생성한 다음 JSON 파일을 업로드합니다. 방법은 다음과 같습니다.

1 프리 티어 AWS에 가입하고 AWS 콘솔에서 S3로 이동하여 고유한 버킷 이름을 생성하세요

2 공개로 설정합니다. 버킷 권한 탭으로 이동하여 공개 액세스 차단을 해제합니다. 공개 액세스 차단 섹션으로 이동하여 편집, 선택 취소 및 저장합니다.

3 권한 탭에 머물면서 버킷 정책을 수정하고 기존 내용을 지우고 다음으로 바꾼 후 변경 사항을 저장합니다(아래 버킷 이름을 실제 이름으로 바꾸는 것을 잊지 마세요)

order_no,order_date,product_line,dollar_amt,product1,product2,product3
12340,01-03-22,prod1,400,400,0,0
12341,01-02-22,prod2,50,0,50,0
12342,1-16-22,prod3,50,0,0,50
12343,1-17-22,prod1,100,100,0,0
12344,1-15-22,prod2,50,0,50,0
12345,2-5-22,prod1,100,100,0,0
12346,2-6-22,prod3,20,0,0,20
12347,2-7-22,prod1,100,100,0,0
12348,3-23-22,prod2,200,0,200,0
12349,3-5-22,prod3,20,0,0,20
123410,3-29-22,prod1,100,100,0,0
123411,3-25-22,prod1,100,100,0,0
123412,4-23-22,prod1,500,500,0,0
123413,4-24-22,prod2,100,0,100,0
123414,5-10-22,prod3,50,0,0,50
123415,5-15-22,prod1,500,500,0,0
123416,5-25-22,prod2,50,0,50,0

4 그런 다음 여전히 권한 탭에 있는 동안 교차 출처(cors)로 이동하여 아래 내용을 편집하고 바꾸고 저장합니다

    <div id="myData"></div> <!--data result displays in this html div-->

    <script type="text/javascript">
convert();  //run the convert function..this converts json to html and displays to the front end in the myData div
                 // async is needed to run await which is the newest way to return a promise..await must be used inside a function
    //When you then put await in front of a function you're instructing the program to wait until that operation is complete before moving on.
async function convert() {
                //let response = await fetch('https://rickd.s3.us-east-2.amazonaws.com/orders4.json'); //get data from rickd s3 bucket in aws
                      //replace rickd with your bucket name
   let response = await fetch('orders.json'); //get data locally instead of from s3..orders.json is in same folder where python is installed
                let data = await response.json(); //getting data array in json format...waiting for all the data to come in

                    //then iterate over javascript array for as many times as there are js objects inside the array
            for (var i = 0; i < data.length; i++) {
                data[i].product1 = parseInt(data[i].product1); //this converts from string to int just the val for product1
              } //end for loop
         //we are rendering the array and not data in table format
myData.innerHTML = JSON.stringify(data, null, "\t"); //first stringify json object then render result inside html div tag
console.log(JSON.stringify(data, null, "\t")) //this is more readable, this is the pretty print..press ctrl-shift-J to view
  //console.log(JSON.stringify(data)) //prints all as one line / a string, this is the record format

} //end function
    </script>


<!-- next up..we need to return this data in table format-->

위 내용은 함수, 배열, 루프, JSON 및 NoSQL을 사용하여 뒤처진 느낌을 받거나 어디서부터 시작해야 할지 모르는 사람들을 위한 일반 Javascript 복습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!