전체 글

[PIXI] app.view(사실상 캔버스 태그) 속성 살펴보기

app.view = pixi 도우미 클래스로 생성한 app.view는 결국 캔버스 태그이기 때문에 HTML Canvas 기초 전반은 한번 훑는 것이 좋다. 아래 링크가 전반적으로 잘 설명되어 있어서 첨부한다. https://unikys.tistory.com/274 [HTML5 튜토리얼] Canvas 기초 강좌 * 이번에는 HTML5의 강력한 기능 중 하나인 태그에 대해서 알아보자. 2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황 2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, unikys.tistory.com 관련 포스팅 app.view.style = CSSStyleDeclaration 관련 포스팅 즉 app.view는 캔버스..

[HTML & CSS][DOM] CSSStyleDeclaration 알아보기

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration 참고 블로그 (학습 내용) [2022.05.19] DOM - 노드 CSS 스타일(CSSStyleDeclaration), 클래스 추가/삭제 하기(className, classList) 문서 객체 모델(DOM)을 자바스크립트로 조작하여 노드의 CSS style과 class를 추가/삭제 하는 방법이다.자바스크립트에서 DOM을 조작하여 노드에 style을 넣어볼 것이다.먼저, ul태그에 스타일을 넣어보 velog.io CSSStyleDeclaration 쉽게 말해, 노드 css 스타일! HTMLElement 객체의 style 프로퍼티에 의해서 참조된다. 아래와 같이 자바스크립트에서 DOM을..

[HTML][Canvas] 태그 Canvas 알아보기

This browser doesn't support canvas 그리고 위의 DOM 객체를 가져와서 context를 뽑아낸 다음에 조작해서 써야한다. var canvas = document.getElementById("canvas1"); var context = canvas.getContext("2d"); context를 가지고 여러 가지 도형이나 그림을 그리면 된다. : fillRect로 채워진 사각형, fillText로 텍스트, moveTo로 시작점으로 간다음 lineTo로 이은 선, rect로 속이 빈 사각형을 그려주기 var canvas = document.getElementById("canvas1"); var context = canvas.getContext("2d"); context.fillR..

[Pixi.js] 환경설정과 PIXI 객체 살펴보기

git init npm install pixi.js index.html에서 아래 추가 해주거나 npm으로 다운받지 않더라도 아래 라인을 추가해주면 된다. index.html PIXI STUDY 1 2 3 2022년 12월 21일 PIXI 환경설정과 기본 속성 학습 (Source1) (Source2) 위와 같이 예시 코드 작성 app.js const Application = PIXI.Application; const app = new Application(); 여기까지 해준 뒤, 콘솔에 PIXI를 작성하면, 펼쳐보도록 한다. 엄청나게 많이 나온다...👍 이제 실무에서 픽시는 export default class 고양이팝업 extends 기본팝업 { app: PIXI.Application | null; cl..

[Git] git ignore

https://shlee0882.tistory.com/230 Nodejs 기본 설정(NPM Express .gitignore 설치) 1. node js 자바스크립트는 웹브라우저 프론트에서 꼭 필요한 언어였고, 웹브라우저에 종속적이었다.웹에 종속적이었던 자바스크립트를 분리하여 실행가능하게 한 것이 nodejs이다.nodejs는 js runner shlee0882.tistory.com 설정 파일(.gitignore) 생성 .gitignore 파일을 프로젝트 최상위 루트에 생성한 후 그 안에 버전관리에 포함하지 않을 파일을 패턴에 맞게 작성해 준다. • 표준 Glob 패턴을 사용한다. • 아무것도 없는 라인이나, "#"으로 시작하는 라인은 무시한다. • 슬래시(/)로 시작하면 하위 디렉토리에 적용되지(Recu..

[Pixi.js] 픽시 공부 시작

https://youtu.be/_HjQTzpbRK4 회사 스택인 픽시를 아주 씹어먹어보고 싶어서 유튜브 튜토리얼 영상을 보고 따라해볼까한다. 나는 무언가를 각잡고 공부한다(시작한다)의 기준이 영상학습이다. 이 공부를 시작하게 된 계기는 다음과 같다. 회사에서 아이템이 겹칠 때 가장 위에 뜬 팝업의 버튼이 눌리지 않는 이슈가 있었는데, 버튼 아래에 다른 픽시앱 아이템과 겹쳤기 때문이다. 더 상세하게 기술하자면, 해당 픽시앱의 특정 플래그에 마우스 좌표상의 클릭 이벤트가 등록있었는데 위에 다른 팝업이 켜지는데도 플래그를 꺼주지 않았다. 따라서 추가 팝업이 열릴 때 픽시앱의 플래그를 끄고, 추가된 팝업이 다시 닫힐 때 픽시앱의 플래그 켜는를 추가하여 이슈는 해결하였다. 이 과정에서 스스로 아쉬웠던 점은 이펙티..

[스프링] 인텔리제이, 이클립스 스프링스타트 임포트

https://start.spring.io/ 인텔리제이는 그래들, 이클립스는 메이븐으로 해보겠습니다. 당연히 메이븐을 인텔리제이에서, 그래들을 이클립스에서 하는 것도 가능하지만 정보 공유차 각각 한 케이스만 방법 기록해둡니다. Gradle로 하기 : IntelliJ 프로젝트 구조에서 자바 17로 바꿔주고 프로젝트와 모듈 탭에서 sdk 17로 바꿔주세요 여기까지는 구글링으로 쉽게 찾아보셨을 겁니다. 그런데.... 안되는 분들이 있을겁니다.(저도 그랬음,,,) 아래 세팅 꼭 해줍시다(찾는데 이틀걸림) Maven : eclipse 이클립스 파일 -> 임포트-> EXISTING MAVEN 입력 및 선택-> 브라우즈 한 담에 생성한 스프링부트 클릭 이제 재밌게 스프링 해볼까요? 'ㅅ' 2022-12-22T20:1..