분류 전체보기

[2D WebGL][pixi.Js] 세부사항

PixiJS : 아키텍처 개요 PixiJS: Architecture Overview pixijs.io 아키텍처 개요 PixiJS가 어떻게 결합되는지에 대한 개요 코드 PixiJS는 GitHub에서 호스팅되는 오픈 소스 제품 GitHub 리포지토리와 마찬가지로 각 PixiJS 클래스의 원시 소스 파일을 찾아 다운로드 할 수있을뿐만 아니라 기존 문제 및 버그를 검색하고 직접 제출할 수도 있다. PixiJS는 TypeScript라는 JavaScript 변형으로 작성되었으며, 사전 컴파일 단계를 통해 JavaScript에서 유형 검사를 할 수 있다. 구성 요소 PixiJS는 모듈식 렌더링 엔진. 콘텐츠를 생성, 업데이트 및 표시하는 데 필요한 각 작업은 자체 구성 요소로 나뉜다 이렇게 하면 코드가 더 깔끔해질 ..

[2D WebGL][pixiJS] Getting Started!

https://youtu.be/GuY_PROTr0I: 참고영상 코드

[2D WebGL][pixiJS] Architecture Overview

PixiJS 응용 프로그램의 구성 요소 HTML 파일 만들기 웹 서버를 사용하여 파일 제공 PixiJS 라이브러리로드 응용 프로그램 만들기 생성 된보기를 DOM에 추가 스테이지에 이미지 추가 업데이트 루프 작성 파일 제공 PixiJS로 로컬로 개발하려면 웹 서버를 실행해야합니다. 웹 브라우저는 로컬로 로드된 웹 페이지에 로컬 파일(예: 이미지 및 오디오 파일)을 로드하지 못하도록 합니다. 새 HTML 파일을 두 번 클릭하기만 하면 PixiJS 단계에 스프라이트를 추가하려고 할 때 오류가 발생합니다. XAMPP 또는 http-server Node.js 패키지를 사용하여 파일을 쉽게 제공 할 수 있습니다. 선택한 브라우저를 열고 위치 표시 줄에 입력하여 모든 것이 작동하는지 테스트하십시오. (몽구스는 기본적..

[자바스크립트] module 사용법 3가지

자바스크립트의 모듈 방식에는 1. * 별칭 이용하여 JS 전부를 불러오기(all) 2. { } 안에 이름을 전부 쉼표로 이어서 가져오기 3. default 지정하기 등 이 있다. three.js에서는 대체로 1번 방식을 많이 사용하는 편이다. 2번 방식 index.html teacher.js (export) export function tset() { console.log("test"); } export function cheer() { console.log("cheer"); } student.js (import) import { cheer, tset } from "./teacher.js"; function nervous() { tset(); cheer(); } nervous(); 1번 방식 : 2번 방..

[3D WebGL][three.js] three.js 프로젝트 시작해보기

Three.js – JavaScript 3D Library (threejs.org) Three.js – JavaScript 3D Library threejs.org BUILD 안에서 html안에 스크립트로 넣는 스타일로 작성하려면 js 혹은 min.js(js와 같은데 압축 버전일 뿐), 모듈 방식을 쓴다면 module.js를 사용하면 된다. 장면 만들기 – three.js docs (threejs.org) three.js docs threejs.org 위 링크에 기재되어 있는 예제링크 모듈 방식 : 똑같은 결과 npm i three

[깃허브 리드미] 기술스택 아이콘 추가하기

[Github] github profile 꾸미기 (velog.io) [Github] github profile 꾸미기 내 github 계정 이름과 똑같은 이름의 repository를 만든다! 그러면 GitHub 프로필에 README.md를 추가하는 데 사용할 수 있는 "special" 한 저장소라고 뜬다 \~~ 귀엽 ❤✅ Public & Add a README file 에 꼭 체크 하 velog.io GitHub - Ileriayo/markdown-badges: Badges for your personal developer branding, profile, and projects. Badges for your personal developer branding, profile, and projects. ..

[자바스크립트] 조코딩-카카오API 활용실습

[Node.js] 무신사 상품 재입고 알림 만들기 (ver 1.1) :: 코딩 공부 일지 (tistory.com) [Node.js] 무신사 상품 재입고 알림 만들기 (ver 1.1) https://cocoon1787.tistory.com/741 [Node.js] Node + Kakao API로 상품 재입고 알림 만들기 (ver 1.0) 🚀 이제 날이 슬슬 추워지기 시작하는 것 같고 패딩도 좀 필요해서 무신사에.. cocoon1787.tistory.com 개발 가이드 | Kakao Developers 문서 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao...

[css] png 파일 이미지만 보이게 처리하기

Blue Yellow Pink .btn { background-color: transparent !important; border: none !important; outline: none !important; cursor: pointer !important; }

[css] 로고에 마우스 올리면 약간 커지는 귀여운 애니메이션

로고 (html) 스타일 css .logo { cursor: pointer; transition: transform 300ms ease; } .logo:hover { transform: scale(1.1); }

[FE 번들러] parceljs

🚀 시작하기 (parceljs.org) 🚀 시작하기 ko.parceljs.org 🚀 시작하기 Parcel[파설, /parsəl/]은 개발 경험에서 차이를 느낄수 있는 웹 애플리케이션 번들러 입니다. 멀티코어 프로세싱으로 불꽃 튀게 빠른 성능을 제공하고 그 어떤 설정도 요구하지 않습니다. 먼저 npm 으로 Parcel 을 설치 npm: npm install -g parcel-bundler 그 다음, package.json 파일을 프로젝트 디렉토리에 만드세요. npm init -y Parcel 은 어떤 유형의 파일이라도 진입점으로 취할 수 있지만 HTML 이나 JavaScript 파일이 좋습니다. 만약 HTML 파일 내에 상대경로로 메인 JavaScript 파일을 연결 했다면, Parcel 은 이 또한 처리..