![]()
1.개요Node.js에 조금더 익숙해지기 위해, 영단어 공부를 위한 게임을 만들고자하였다. 2.사용한것Vite의 바닐라로 프로젝트를 만들었고npm의 물리엔진을 위한 matter-jsgithubpages 배포를 위한 gh-pages라이브러리를 사용하였다.{ "name": "english-voca-game", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "predeploy": "npm run build", "deploy": "gh-pages -d dist" }, "devDe..
![]()
1. JQuery jQuery는 자바스크립트 라이브러리로, HTML 문서의 클라이언트 측 조작을 단순화하고 간소화하는 데 도움을 주는 도구이다. 2. JQuery 특징2-1.DOM 조작jQuery는 CSS 선택자를 사용하여 HTML 문서의 요소를 선택하고 조작할 수 있는 강력한 기능을 제공합니다. 예를 들어, $('p')와 같은 선택자를 사용하여 모든 요소를 선택할 수 있습니다. 2-2.이벤트 처리jQuery는 이벤트 핸들러를 쉽게 연결하고 제어할 수 있는 메서드를 제공합니다. 예를 들어, .click(), .hover(), .on() 등의 메서드를 사용하여 클릭, 호버 등의 이벤트를 처리할 수 있습니다. 2-3.애니메이션과 효과jQuery는 요소의 애니메이션 효과를 쉽게 추가할 수 있는 메서드..
1.깃헙 리포지토리생성Public으로 만들어서 만든 Vite,Node.js 프로젝트를 올린다. 2.Githubpages배포settings에서 Pages 에서 Branch를 main으로 설정하고 save를 누른다.아직 홈페이지에 들어가도 원하는 화면을 못볼것이다. 3.gh-pages 모듈을 설치프로젝트에서 npm의 다음 모듈을 설치해준다.npm i gh-pages 4. package.json 수정"homepage" 에 자신의 깃헙 페이지 주소를 넣고"predeploy": "npm run build", "deploy": "gh-pages -d dist"를 스크립트 내부에 추가한다.{ "name": "fruit-game", "private": true, "version": "0.0.0", ..
1.Vite 프로젝트 생성하기우선 Vite 프로젝트를 생성해준다.PS C:\Users\asa\Desktop\code\JavaScript\fruit_game> npm create vite@latest > create-vite√ Project name: ... fruit-game√ Select a framework: » Vanilla√ Select a variant: » JavaScriptScaffolding project in C:\Users\asa\Desktop\code\JavaScript\fruit_game\fruit-game...Done. Now run: cd fruit-game npm install npm run devPS C:\Users\asa\Desktop\code\JavaScript\fr..
1.ViteVite는 프런트엔드 개발 환경을 위한 빌드 도구로, 개발 서버를 빠르게 시작하고, 빌드 속도를 높이며, 최신 웹 기술을 쉽게 사용할수있게 해준다. 2.Vite 특징빠른 개발 서버HMR (Hot Module Replacement): 코드가 변경될 때 페이지를 새로 고치지 않고 변경된 모듈만 빠르게 교체하여 즉각적인 피드백을 받는다최신 JavaScript 지원빠른 빌드 3.Vite 사용하기공식홈페이지에서 Vite 프로젝트를 만드는 법을 알수있다.Node.js를 우선 다운받고 다음 명령어로 만들다. y를 입력해준다.PS C:\Users\asa\Desktop\code\Web\vitetest> npm create vite@latestNeed to install the following p..
1.npm(Node Package Manager)JavaScript 프로그래밍 언어의 패키지 관리자다양한 오픈 소스 패키지를 쉽게 설치하고 관리할 수 있다. 2.npm기능패키지 설치 및 관리의존성 관리스크립트 실행 3.사용법Node.js 프로젝트에서 패키지 초기화$npm init원하는 패키지 다운로드$npm install 패키지이름 원하는 패키지 삭제$npm uninstall 패키지이름
1.Node.js서버 사이드 애플리케이션을 개발하기 위한 오픈 소스 런타임 환경Node.js는 브라우저 외부 환경에서 자바스크립트 애플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 Built-in API를 제공한다. 2.Node.js 특징JavaScript 런타임비동기 I/O단일 스레드 이벤트 루프npm(Node Package Manager)제공 3.Node.js 사용처웹 서버: Express.js와 같은 프레임워크를 사용하여 웹 서버를 쉽게 구축할 수 있다.API 서버: RESTful API 또는 GraphQL API 서버를 만들기 위해 사용실시간 애플리케이션:시간 데이터 스트리밍 애플리케이션 등에 적합마이크로서비스: Node.js는 가벼운 런타임 환경으로, 마이크로서비스..
