함수, 배열, 루프, JSON 및 NoSQL을 사용하여 뒤처진 느낌을 받거나 어디서부터 시작해야 할지 모르는 사람들을 위한 일반 Javascript 복습
- Barbara Streisand원래의
- 2024-10-31 00:32:29420검색
여기에서는 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이 설치된 폴더여야 하며 서버를 시작하는 터미널 폴더와 동일해야 합니다.
먼저 시도해 보세요
- python -m http.server 또는 을 입력하세요.
- 위의 방법이 작동하지 않으면 python3 -m http.server를 입력하세요. 반환을 누르면 Python 3은 명령이 실행된 디렉터리에서 간단한 HTTP 서버를 즉시 시작합니다. 이 디렉터리에는 인덱스 파일도 있어야 합니다. 또는 다른 사람들이 작동하지 않는 경우 옵션 3
- 이전 버전의 경우 python -m SimpleHTTPServer 8000을 입력하세요
Python 경로에 인덱스(홈) 파일을 만드는 방법.. 웹 서버가 있는 동일한 폴더에 저장하세요. 이 코드를 복사하여 index.html로 저장하세요
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
데이터 준비
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 파일을 변경하세요.
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
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)로 이동하여 아래 내용을 편집하고 바꾸고 저장합니다
<!DOCTYPE html>
<body>
<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>
</body>
<!-- next up..we need to return this data in table format-->
</html>
5 속성 탭으로 이동하여 마지막 항목인 정적 웹 호스팅을 누릅니다. 그런 다음 편집을 클릭하고 활성화한 다음 저장을 클릭합니다. 이렇게 하면 버킷 링크가 공개 웹사이트로 전환됩니다.
6 개체 탭으로 돌아가서 업로드를 누른 다음 새로 생성된 JSON 파일을 저장한 위치로 이동하여 이 작업을 완료하세요. 이제 json 파일이 s3에 있습니다.
7 JSON 파일이 성공적으로 업로드되면 s3 버킷의 개체 섹션에 표시됩니다. JSON 파일을 두 번 클릭하면 개체 개요를 볼 수 있는 속성 탭이 표시됩니다. 제공된 개체 URL을 클릭하면 원시 JSON 데이터가 나타납니다. Javascript에서 데이터를 가져오는 데 필요하므로 이 URL 링크를 복사하여 어딘가에 저장하세요. 이 URL 링크는 임시 웹사이트 역할을 하며 공개적으로 액세스 가능한 S3 버킷인 새로 생성된 일반 웹사이트에 대한 액세스를 제공합니다. 이 버킷에 파일을 저장하고 언제든지 다른 사람들과 공유할 수 있습니다.
8 AWS에서 json 파일에 액세스하려면 로컬 서버에서 사용되는 것과 다른 코딩이 필요합니다. 먼저 사용자에게 웹페이지 링크를 제공해야 합니다. 가상 주문 데이터에 대한 내 공개 링크는
입니다.
https://rickd.s3.us-east-2.amazonaws.com/orders4.json 그러면 코드는 원래 코드와 다른 다음과 같아야 합니다. 이 코드에서는 배열을 표시하는 대신 테이블 요소를 추가하여 표시가 테이블 형식이 되도록 합니다
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
다음은 헤더와 스타일을 추가하는 동일한 코드입니다
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
2부
배열, 루프 및 함수, 코딩의 일부 구성 요소, 프로그래밍의 기본 필수 요소
배열 - 가장 중요한 데이터 구조
자바스크립트에서 데이터는 중괄호로 묶이고 쉼표로 구분된 키-값 쌍으로 구성됩니다. 배열에는 데이터 행을 나타내는 각 개체가 있는 여러 자바스크립트 개체가 포함되어 있습니다. 이를 JSON 형식 또는 Javascript 객체 표기법이라고 합니다.
루핑/반복 - 가장 중요한 루프는 for 루프이지만 다른 유형의 루프에 대해서도 공부해야 합니다. for 루프는 데이터 배열을 반복하고 각 패스에 대해 작업을 수행합니다. 우리의 사용 사례에서는 가져오기 요청을 통해 프런트엔드에 데이터를 표시합니다.
함수
함수는 버튼을 누르는 것과 같은 일종의 이벤트에 대한 응답으로 실행되는 코드 블록, 명령 집합입니다. 어떤 경우에는 함수가 필요하지 않지만 다른 경우에는 일부 코드가 제대로 작동하려면 함수가 필요합니다. 함수에는 이름이 있거나 익명입니다. 호출되거나 자체 실행될 수 있습니다. 드레드 화살표 표기법은 처음에는 겁이 나지만 널리 사용되므로 익숙해지세요.
조건부 논리 마지막으로 if / else 문도 있습니다. if(조건) {다음에 이렇게 하세요} else { 저렇게 하세요}
결론적으로 이번 강의에서는 간단한 개요만 제공하므로 더 많은 지식을 얻으려면 이러한 모든 주제에 대해 공부해야 합니다. 저는 일종의 입문서인 로드맵만 제공하고 있으며 나머지는 프로그래머로서 배워야 합니다.
행복한 코딩하세요!!
부록
우리의 일반 js, nosql 사용 사례는 여기에서 코드를 찾을 수 있는 막대 차트입니다...https://dev.to/rickdelpo1/stacked-bar-chart-using-a-json-data- source-plain-vanilla-javascript-plain-css-and-no-chart-libraries-2j29
저자 Rick Delpo에 대해.. https://javasqlweb.org/about.html
위 내용은 함수, 배열, 루프, JSON 및 NoSQL을 사용하여 뒤처진 느낌을 받거나 어디서부터 시작해야 할지 모르는 사람들을 위한 일반 Javascript 복습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!