본문 바로가기

💻 DEV54

[Webstorm] SSH Key Passphrase 인증 (헤매인 스토리) 접근 (요약)개발을 위해 사용하던 (IDE) IntelliJ Ultimate version 말고도 Webstorm이 무상제공됨(비영리)을 확인했습니다.따라서 JavaScript & TypeSript 전용 웹 개발 프로젝트를 위해 사용을 해보려다가, 설정에서 헤매인(?) 스토리를 담습니다. 둘 다 JetBrains사에서 다루는 IDE이다 보니 한 쪽의 프로그램에서의 settings 값들을 다른 한 쪽의 프로그램으로 모두 import 를 해올 수 있었고, 그렇게 전 무심코 settings 값들을 import 를 해오면서 모든 문제의 시작이 있었던 것 같습니다. WebStorm 내 VCS에 Github 계정이 token으로 로그인이 되어있음에도 불구하고,프로젝트 clone을 위해 rsa(SSH key)를 명확.. 2024. 11. 22.

[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.

[Github - git flow]Git Flow 전략 - squash merge Git Flow Strategy 를 통해서 프로젝트 협업 · 형상관리를 이어가고 있습니다.생성한 feature 브랜치를 develop 브랜치에 병합(merge)할 때에 흐름과 방법을 메모하고자 작성합니다.특히 커밋-푸시 이력을 간결·정돈되게 해주는 squash merge를 중점적으로 다루고자 합니다. 요약 1. 프로젝트 생성 (Owner or Admin) 2. 로컬에서 Clone 후 git flow init 3. develop 브랜치 생성 4. feature 브랜치 생성 5. push 및 PR (Pull Request) 6. PR close & squash merge 상세 1. 프로젝트 생성 (Owner or Admin) 2. 로컬에서 Clone 후 git flow ini.. 2024. 8. 6.

[Github] Git 푸시 해주는 계정 바꿔주기(username, useremail) 인텔리제이를 사용해 개인과 회사의 2개 Github 계정에 대한 version control을 진행하며 프로젝트의 클론 등을 간편하게 사용하고 있습니다. 클론 이후, 프로젝트에 대해 커밋-푸시 작업이 이어지던 과정 회사의 프로젝트에 개인의 계정으로 푸시가 진행되고 이력이 남고 있다는 것을 알게되고는 프로젝트마다 Git push를 해주는 계정을 변경-지정해주는 방법을 찾아 정리합니다. 요약 1. 현재 연결된 계정 알아보기 2. 희망하는 계정으로 변경하기상세 1. 현재 연결된 계정 알아보기# 현재 계정의 닉네임(이름) 알아보기git config user.name# 현재 계정의 이메일 알아보기git config user.email 2. 희망하는 계정으로 변경하기# 희망하는 계정의 닉네임(이름)으로 변.. 2024. 8. 2.

[Github] main branch를 master 로 바꾸고 default 값 변경하기 Git Flow strategy을 통해 프로젝트 협업-형상관리를 하고 있습니다. Git에서 프로젝트를 생성할 시, main(default) 브랜치가 생성이 됩니다.master, develop, release 브랜치 등이 필요한 가운데, main 브랜치를 master 브랜치로 바꾸는 방법을 설명드리겠습니다. 요약 1. 첫 번째 방법 (web상에서 변경) 2. 두 번째 방법 (command로 변경)상세 1. 첫 번째 방법 (web상에서 변경) 첫 번째 방법은 Github(web)에서 변경입니다.◼︎ 1) 브랜치명을 바꾸고자 하는 프로젝트 레파지토리로 진입을 합니다.◼︎ 2) settings > General 에 진입합니다.◼︎ 3) 'Default branch' 섹션에서 main 브랜치로 설정돼 있음.. 2024. 8. 2.

[NEXT.js] 5. Link 컴포넌트 사용 이슈 ( new- link ) 1. 정의 & 특성 2. Nextjs 13 버전 업데이트 후 사용법상세 1. 정의 & 특성기존의 태그는 하위에 태그를 포함해서 작성해야 했습니다.그러나, Nextjs 13 버전으로의 업데이트 이후 태그를 사용하지 않아도 되는 것으로 변경 됐습니다. next/link : 태그 없이 사용 가능 # 기존방식 Home # --------------------------# 변화된 방식 Home. 2. Nextjs 13 버전 업데이트 후 사용법 npx @next/codemod new-link . - codemod 를 실행해 new-link를 설치하고, 업데이트 된. 버전의 nextjs13 Link 태그를 사용하게 된다. next/link 2024. 6. 19.

[NEXT.js 14] 5. Layout(feat. { children }: { children: ReactNode }) props Layout 1. 정의 & 특성 2. 코드 예시 3. 관련 에러상세 1. 정의 & 특성Next.js 에는 Layout 컴포넌트가 존재하고 이는 여러 경로간에 공유되는 UI입니다. Layout 컴포넌트는- 파일에서 React 구성요소를 내보내도록 정의할 수 있고,- 렌더링 중에 하위에 레이아웃(page UI)가 존재할 경우, 하위 요소를 받아오기 위한 children props를 작성해야 합니다. ㄴ 이를 하기 위해서는, { children }: { children: ReactNode } 구문을 사용해서 이뤄질 수 있습니다. { children }: { children: ReactNode } 이 구문은 TypeScript의 객체 구조 분해와 타입 정의를 결합한 것입니다.(따라서, 객체의 특정 .. 2024. 6. 18.

이전 1 2 3 4 ··· 6 다음

티스토리툴바