본문 바로가기

💻 DEV/연구목록19

[Tip] className 표현 종류 & Live Template ('cn') 요약 1. className 표현 종류- (1) className={} (2) class="" (3) className=' ' 2. className → Live Template으로 활용 (cn) 상세 1. className 표현 종류(1) class="" (2) className={} (3) className=' ' // (1) class=''OOO// (2) className={}OOO// (3) className=''OOO HTML의 (1) class는 JSX에서 className으로 사용해야함.→ 왜냐하면 class는 JavaScript의 예약어이기에 사용 불가! JSX에서는 (2) className={'...'} (3) className="..."는 같은 결과차이점은.. 2025. 6. 10.

[Tip] lorem 약어 다루기 (feat.html) 요약 1. lorem 약어 사용하기 상세 1. lorem 약어 사용하기1) lorem 을 html 태그 내에 입력하고 Tab을 클릭하면 임의의 글이 자동완성된다.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cupiditate, dolore eaque eligendi facilis inventore itaque minima officiis possimus praesentium, quam qui quidem recusandae sed, sit suscipit tempore! Eius, natus! 2) lorem 뒤에 숫자를 입력하고 Tab을 클릭하면 해당 숫자만큼의 어절만 표현돼 임의의 글이 자동완성된다.lorem5.. 2025. 6. 10.

[Snippets] Snippets 다루기 (= live template) 요약 1. Snippets 이란?- 정의 (WebStorm에서는 Live Template)- 장점 2. Snippets 다루기 (webstorm)- snippets 적용하기- Snippet Generator상세 1. Snippets 이란? [1]. snippets이란? - 스니펫(Snippet)은 IDE나 코드 편집기에서 사용하는 코드 자동 완성용 단축 코드이다.(몇 글자의 축약어만 입력하고 Tab 또는 Enter를 누르면, 미리 저장해둔 코드가 자동으로 입력된다.) [2]. 장점1. 개발 속도 향상 : 반복적으로 작성하는 코드를 단축어 한 번으로 완성 2. 오타 방지 : 일관된 문법으로 빠르게 작성 가능 3. 개발 표준 유지 : 팀 규칙에 맞춘 템플릿 코드를 강제하거나 자동 삽입 2. Snip.. 2025. 6. 7.

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

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

이전 1 2 3 다음

티스토리툴바