웹 프론트엔드
JS 튜토리얼
함수, 배열, 루프, JSON 및 NoSQL을 사용하여 뒤처진 느낌을 받거나 어디서부터 시작해야 할지 모르는 사람들을 위한 일반 Javascript 복습
함수, 배열, 루프, 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이 설치된 폴더여야 하며 서버를 시작하는 터미널 폴더와 동일해야 합니다.
먼저 시도해 보세요
- 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Python vs. JavaScript : 학습 곡선 및 사용 편의성
Apr 16, 2025 am 12:12 AM
Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.
JavaScript 및 웹 : 핵심 기능 및 사용 사례
Apr 18, 2025 am 12:19 AM
웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.
자바 스크립트 행동 : 실제 예제 및 프로젝트
Apr 19, 2025 am 12:13 AM
실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.
JavaScript 엔진 이해 : 구현 세부 사항
Apr 17, 2025 am 12:05 AM
보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.
Python vs. JavaScript : 개발 환경 및 도구
Apr 26, 2025 am 12:09 AM
개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.
JavaScript 통역사 및 컴파일러에서 C/C의 역할
Apr 20, 2025 am 12:01 AM
C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.
Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교
Apr 21, 2025 am 12:01 AM
Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.
웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션
Apr 22, 2025 am 12:02 AM
JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.
