본문 바로가기

💻 DEV/연구목록15

[WebGL - regl] (전략) WebGL 좌표계를 픽셀 좌표계로 변환 WebGL의 기본 좌표계왼쪽 위: (-1, 1)오른쪽 아래: (1, -1)SVG의 기본 좌표계SVG의 기본 좌표계는 픽셀 좌표를 사용합니다:왼쪽 위: (0, 0)오른쪽 아래: (width, height)1단계. WebGL 좌표계 -> 픽셀 좌표계 변환:WebGL의 (-1, 1) -> SVG의 (0, 0)으로 매핑되고, (1, -1) -> SVG의 (width, height)으로 매핑됩니다.function webglToPixel(x, y, canvas) { const width = canvas.width; const height = canvas.height; return { x: (x + 1) * 0.5 * width, y: (1 - y) * 0.5 * height };} 2단계. rel.. 2024. 8. 8.

[WebGL - regl] (2) regl 예제 속 GLSL 코드 해석 ◼︎ 셰이더 코드 & GLSL 기본 코드해석* 셰이더 코드:- Graphics Programming에서 GPU가 화면에 렌더링할 그래픽을 제어하기 위해 작성하는 프로그램- 그래픽스 카드의 GPU에서 직접 실행이 된다. → 버텍스 셰이더 (Vertex Shader): 각 정점의 위치를 반환하고, 정점의 속성(색상, 좌표) 처리- 입력 : 정점 데이터 입력 받음- 출력 : 반환된 정점 위치와 관련 정보 출력 → 프래그먼트 셰이더 (Fragment Shader): 화면의 각 픽셀에 색상 값을 계산- 입력 : 각 픽셀의 데이터 입력 받음- 출력 : 최종 색상 값을 화면에 출력* GLSL: GPU에서 실행되는 셰이더 프로그램을 작성하는 언어 ◼︎ vec2 : 2차원 벡터 - 2개의 부동 소수점 값으로 구성(2D .. 2024. 8. 8.

[WebGL - regl] (1) regl 이란? ◼︎ regl (npm) 이란?→ WebGL의 추상화 레이어, WebGL을 더 쉽게 사용할 수 있도록 해주는 경량화된 라이브러리 : 간단한 명령→ WebGL의 복잡한 API를 단순화→ 선언형 프로그래밍 스타일 지원 : 고성능 그래픽 렌더링을 보다 직관적으로 수행할 수 있게 해줌 ◼︎ regl 특징→ 간단한 API : 복잡한 WebGL 설정을 간단한 명령으로 대체→ 성능 최적화 : 상태 관리와 명령 큐를 효율적으로 처리해 성능 극대화→ 모듈화 : 파이프라인과 렌더링 명령을 모듈화해서 재사용 가능 ◼︎ regl 설치npm install (--save) reql# (줄여서) npm i -S reql# 최신 npm에는 --save 옵션이 기본 동작으로 포함돼 있기에 생략해도 됨 ◼︎ regl 기본 예시impor.. 2024. 8. 8.

[Figma] We can't open that file 에러 해결 (WebGL) 접근 (요약) Figma를 사용하던 와중 예기치 않은 에러와 맞닥뜨렸습니다. "We can't open that file"이라며 크롬 브라우저 내 WebGL 설정 관련 에러였습니다. 해결토록 합시다. 1. 에러 메시지 2. 해결 방법 1. 에러 메시지 Uh oh... we can't open that file we can't open the editor because WebGL isn't supported, or is disabled, in your browser. if your browser supports WebGL, check out this help article to find out how to enable it. 2. 에러 해결 1단계) chrome://flags 접속 2단계) WebGl Dr.. 2023. 12. 13.

[Git] SSH 키 생성하는 방법 & SSH 키 찾는 방법 접근 (요약) 형상관리 툴 Github 원격저장소에서 특정 프로젝트를 Pull 받아야하는 일은 빈번합니다. Pull을 받는 방법으로는 크게 'HTTPS' 방식과 'SSH(key)' 방식으로 구분할 수 있습니다. 기존에 'HTTPS' 방식으로 큰 인증 과정없이 쉽게 하던 과정을, Github에서는 지양하라고 권고했고, 보안에 더욱 유리하고 강력한 'SSH(key)' 방식을 추천하고 사용하길 권장했습니다. 따라서, 이 방법을 접근해보고자 합니다. 1. Git > 로그인 > 우상단 Profile > settings > "SSH and GPG keys" 2. SSH 키 조회 (생성했었나? 로컬에 있나?) (2.1). (로컬) SSH 키 조회 (어디엔가 존재할 것이라는 과거 기억..) 3. SSH 키 생성 (3... 2023. 11. 15.

[Tomcat] Tomcat 포트 번호 여러 개 사용하기, 추가하기(windows) 필요성 서비스 배포를 하려던 과정 중에 있습니다. 사용하던 전용 포트는 외부에서도, 내부에서도 접근이 가능한 포트인지라 외부에서는 접근이 불가하지만 내부에서는 사용이 가능한 포트 하나를 톰캣 내에서 추가로 열어주고자 합니다. 아래에서 순서대로 그 방법을 깔끔하게 정리해보도록 하겠습니다. 접근 (요약) 1. Tomcat 설치 경로 > conf > server.xml 파일 열기 (1.1). server.xml 수정 작업 2. appBase로 지정할 폴더 생성 (2.1). 하위에 ROOT 폴더 및 web.xml 작업 3. (해주지 않아도 되는 과정 - 참고) appBase로 지정한 폴더 하위 작업 (3.1). 하위에 ROOT 폴더 및 web.xml 작업 4. Tomcat 구동 후 폴더 생성 확인 방법 1. T.. 2023. 7. 19.

[Status] HTTP 응답 상태 코드 모음 필요성 웹 애플리케이션 프로젝트를 진행하다보면 200, 304, 404, 500 등 수많은 Status(상태)를 접할 수 있습니다. 자주 마주하는 상태들은 익숙해 손쉽게 해결할 수 있지만, 뜬금없이 맞이하는 상태들은 작업 난처하게 만들 때가 있습니다. 때마다 찾아볼 수 밖에 없는 HTTP 응답에 관한 상태코드를 정리해보겠습니다. 접근 1. HTTP 상태 코드 의미 2. HTTP 상태 코드 종류 상세 1. HTTP 응답 상태 코드 "의미" HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 여부를 표시합니다. 응답은 세 자리 숫자로 반환되고, 앞자리는 1~5로 크게 5가지 그룹으로 나눠지며, 뒷 숫자에 따라 상세하게 달라집니다. 2. HTTP 상태 코드 "종류" 정보 응답 100 Con.. 2023. 3. 8.

[Spring Boot] (작성중)war 파일 배포하기 (외부, 외장 톰캣) 필요성 사내에서 개발한 Spring Boot 프로젝트의 배포를 앞두고, 로컬 PC에서의 정상적인 운영 검토를 마쳤습니다. 이후 외부 서버 PC에서 돌아가고 있는 톰캣에 이를 war 파일로 배포하는 과정을 수행하게 됐습니다. 로컬에서의 배포와는 사뭇 다르게 외부 톰캣으로의 배포를 위한 과정과 추가적인 설정 등을 깨달았고, 헤맸던 과정을 공유하며 오랜 기간 기억에 저장하고자 기록을 남기게 됐습니다. (+ 자잘한 사이드 지식) 접근 1. STS (Spring Tool Suite) 2. Window 11 서버PC 3. Tomcat 9 4. war file 방법 1. Spring Boot 프로젝트의 JDK 설치 & Installed JREs 등록 p 2. Spring Boot 프로젝트의 maven build 정상.. 2023. 2. 1.

[연구목록] (Linux & Docker) DB Dump 파일 생성하고 파일 이동시키기 필요성 어느 프로젝트에 대해 로컬에 DB 관련 정보를 남겨두지 않은 채 작업을 하다가, (더 자세히는 로컬에 남겨진 DB정보가 그 어디에도 없는 상태에서) Dbeaver를 통해 붙어놓은 DB 정보에 의존하며 작업을 해왔습니다. 그런 상황이 지속이 되고, 어느덧 Dbeaver에 붙어놓은 DB 정보에 문제가 발생해 더 이상 접근이 불가한 상황에 맞닥뜨렸습니다. 그렇게 DB 정보를 몽땅 날릴 위기에 처해본 결과, 남은 타 프로젝트의 DB 관련 정보들을 Dump 파일로 생성해 백업을 해두는 절차를 숙지해둬야겠단 생각이 들었습니다. 접근 1. Linux 운영체제 사용 2. Docker 사용 3. PostgreSQL 사용 방법 1. Linux 운영체제 터미널로 Docker > PostgreSQL 컨테이너 접근 ``.. 2023. 1. 16.

이전 1 2 다음

티스토리툴바