[WebGL2-My Cosmos-02] Canvas 공통 설정

이전 글 : [WebGL2-My Cosmos-01] 프로젝트 세팅 [WebGL2-My Cosmos-01] 프로젝트 세팅프로젝트 아이디어WebGL2로 웹에서 3D 그래픽을 구현하고자 내가 좋아하는 우주를 배경으로 시작하고 싶었다.입력한 이름이 은하모양으로 구성되면 재미있을 것 같다는 생각을 했다.홈 화면 - 이jinsk-joy.tistory.com Canvas 공통 설정홈과 코스모스 화면에서 모두 canvas를 사용하므로, 캔버스 크기 및 기본 설정을 관리하는 CanvasOption 클래스를 생성하였다. 생성자와 멤버변수홈화면과 코스모스 화면 둘 다 canvas 태그를 사용하므로 고유의 id를 받아와 각 화면에 맞는 canvas element를 가져온다. 만약 해당 요소가 존재하지 않을 경우 에러를 발생시..

• format_list_bulleted WebGL2/My Cosmos 프로젝트
• · 2025. 3. 9.
• textsms

[WebGL2-My Cosmos-01] 프로젝트 세팅

프로젝트 아이디어WebGL2로 웹에서 3D 그래픽을 구현하고자 내가 좋아하는 우주를 배경으로 시작하고 싶었다.입력한 이름이 은하모양으로 구성되면 재미있을 것 같다는 생각을 했다.홈 화면 - 이름 입력 / 코스모스 화면 - 입력한 이름으로 이루어진 은하 생성으로 큰 방향을 잡았다. 홈의 배경화면에도 WebGL2를 사용하여 효과를 주고 싶었기에 iframe 태그를 이용하기로 하였다. index.html 파일에 홈 화면과 코스모스 화면의 요소가 같이 들어있다.두 화면 모두 WebGL2를 사용해야 하므로 WebGL2로 렌더링 되는 배경과 UI요소를 분리하면 UI 변경과 배경이 서로 영향을 주지 않아 유지보수가 편해지며 다른 화면에서도 재사용이 가능해 확장성도 높아진다. 프로젝트 세팅프로젝트 세팅은 이전에 써놓은..

• format_list_bulleted WebGL2/My Cosmos 프로젝트
• · 2025. 3. 9.
• textsms

[안드로이드] 휴대폰으로 크롬 디버깅하기 (개발자 옵션 확인)

안드로이드 폰에서 크롬 디버깅을 해야할 때 아래와 같이 진행하기 1. 핸드폰에서 개발자 모드 키기(설정 -> 휴대전화 정보 -> 소프트웨어 정보 -> 빌드번호 7번 정도 탭)하면 개발자 모드를 키겠냐는 팝업이 뜨는데 허용하기 2. 개발자 모드가 켜지면 크롬 Inspection 사이트 들어가서 USB 연결해서 디버깅하기개발자 모드가 켜진걸 확인할 수 있다(chrome://inspect 들어가기& 설정 -> 개발자 옵션 -> USB 디버깅 활성화)를 진행하기활성화 모드를 켰으면 휴대전화 정보가 뜨고 현재 휴대폰에 열려있는 크롬 페이지를 확인할 수 있다.디버깅하려고하는 페이지에 inspect를 클릭하면 휴대폰 화면과 개발자 모드가 켜진다. 3. 디버깅을 완료했으면 설정의 개발자 모드 끄기개발자 모드를 활성화하..

• format_list_bulleted 기타 개발
• · 2025. 1. 25.
• textsms

Xcode 시뮬레이터로 iOS 환경 웹페이지 디버깅

macOS에서 Xcode로 iOS 환경에서의 웹페이지를 디버깅할 수 있다. Xcode 시뮬레이터 설정시뮬레이터 설정을 하지 않았다면 시뮬레이터를 다운로드해야 한다 시뮬레이터에서 웹페이지 열기테스트를 진행할 웹페이지를 시뮬레이터에서 바로 열고 싶으면 사파리 브라우저로 접속해 시뮬레이터에서 페이지를 열면 된다.직접 접속하려면 아래와 같은 절차로 진행하면 된다새로운 시뮬레이터를 만들고 싶으면 New Simulator을 통해 만들 수 있다.기존에 있는 시뮬레이터를 사용할 수도 있다.시뮬레이터가 켜지면 사파리에 접속해 디버깅할 웹페이지 주소를 입력하면 된다.

• format_list_bulleted 기타 개발
• · 2024. 12. 27.
• textsms

[Canvas-불꽃놀이-34] 버그 수정 (인앱 브라우저, ios 하단 높이)

이전 글 : [Canvas-불꽃놀이-33] index.js 통합 테스트 [Canvas-불꽃놀이-33] index.js 통합 테스트이전 글 : [Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션) [Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션)이전 글 : [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이jinsk-joy.tistory.com 배포를 하고 나서 이런저런 문제가 발생해 수정 기록을 남겨보도록 하겠다. 카카오톡 메신저 인앱 브라우저 탈출카카오톡으로 링크를 공유해 열어보니 카카오톡 인앱 브라우저를 사용하게 되어 화면 높이를 제대로 인식하지 못하는 문제가 발생했다.입력 후 불꽃놀이 화면으로 넘어갈 때 입력창 높이가 그대로 남..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 12. 27.
• textsms

Vite로 빌드한 Vanilla JavaScript 프로젝트 Github Pages 배포

Vite로 빌드한 바닐라 자바스크립트 프로젝트를 Github Pages를 통해 배포할 수 있다.간단한 프로젝트를 배포하고 싶을 때 Github Pages를 이용하면 편리하게 웹상에 나가 만든 사이트를 올릴 수 있다.코드 수정 시 변경된 내용을 반영하기 위해 다시 빌드하고 배포하는 과정은 번거로울 수 있다.Github Actions를 통해 origin에 푸시하면 자동적으로 수정 내용이 반영되도록 한다. 1.  Github Pages 세팅배포하려는 repository의 Settings -> Pages -> Build and deployment의 source를 Github Actions로 변경한다.  2. Vite 설정 추가Github Pages를 통해 https://.github.io/의 형태로 배포하고 싶..

• format_list_bulleted 기타 개발
• · 2024. 12. 22.
• textsms