프론트엔드 첫걸음

Google API key가 깃허브에 노출되었다고 메일이 왔다.API 코드를 git에 그대로 노출시키는 실수를 했다.git에 코드를 push하자마자 경고 메일이 날라왔다.깃헙 어느주소 어느경로의 firebase.config.js파일 안에 키가 그대로 노출되어 있다고....We have detected a publicly accessible Google API key associated with the following Google Cloud Platform project:Project [프로젝트명] (id: [프로젝트 아이디]) with API key [API키]The key was found at the following URL: https://github.com/깃헙주소/client/src/fireb..

[문제상황]Google API key가 깃허브에 노출되었다고 메일이 왔다.API 코드를 git에 그대로 노출시키는 실수를 했다.git에 코드를 push하자마자 경고 메일이 날라왔다.깃헙 어느주소 어느경로의 firebase.config.js파일 안에 키가 그대로 노출되어 있다고....We have detected a publicly accessible Google API key associated with the following Google Cloud Platform project:Project [프로젝트명] (id: [프로젝트 아이디]) with API key [API키]The key was found at the following URL: https://github.com/깃헙주소/client/src..

1. 단일 인스턴스 패턴 (Singleton Pattern)설명: 애플리케이션에서 특정 객체가 단일 인스턴스만 존재하도록 보장하는 패턴입니다. 예를 들어, 데이터베이스 연결 객체, 웹소켓 연결 객체 등이 여기에 해당합니다.예시class Singleton { constructor() { if (!Singleton.instance) { Singleton.instance = this; } return Singleton.instance; } // Other methods here...}const instance = new Singleton();Object.freeze(instance); // 객체를 수정할 수 없게 만듦export default instance;활용: 데이터베이스 ..

SkeletonUtils를 사용하여 Three.js에서 애니메이션 캐릭터를 클론하는 방법에 대해 설명하겠습니다. SkeletonUtils는 주로 react-three-fiber와 같은 라이브러리와 함께 사용됩니다. 이 유틸리티는 Three.js의 SkinnedMesh 및 Skeleton을 포함한 복잡한 3D 모델을 올바르게 클론하는 데 유용합니다.기본적인 단계Three.js 및 SkeletonUtils 가져오기3D 모델 로드SkeletonUtils를 사용하여 모델 클론클론된 모델 장면에 추가예제 코드아래는 SkeletonUtils를 사용하여 모델을 클론하고 react-three-fiber를 사용하여 장면에 추가하는 예제입니다: import React, { useRef, useEffect } from 'r..

문제상황텍스트 크기에 맞춰 캔버스 사이즈를 바꾸는 예제에서 measureText를 사용해 canvas.width를 바꿔준 후에 font에 관한 설정이 사라지는 것을 발견 FONT_SIZE = Math.floor(innerWidth * 0.15) ctx.font = FONT_SIZE + 'px Creepster, cursive' canvas.width = ctx.measureText(TEXT).width canvas.height = FONT_SIZE  해결https://stackoverflow.com/questions/65602038/cannot-set-canvas-width-and-change-font-at-the-same-time캔버스 크기를 변경하면 컨텍스트도 재설정되기 때문에 font siz..

https://www.jetbrains.com/help/webstorm/running-and-debugging-typescript.html#ws_ts_run_debug_server_side_ts_node Running and debugging TypeScript | WebStorm www.jetbrains.comjs파일은 마우스 우클릭을 클릭하면 Run~ 으로 시작하는 초록삼각형 버튼을 찾을수있는데,ts파일은 컴파일하기~ 밖에 없고, 컴파일 한다음에 js파일을 Run하는수밖에 없나 싶다.방법이 있다.Install ts-nodenpm install --save-dev ts-nodeRun/Debug configruation 수정  Node parameters--require ts-node/registerW..

이미지와 이미지에 대한 설명이 반복되는 페이지에서 이미지에 대한 설명은 padding이 필요하고 이미지는 padding없이 가득 채워야하는 경우가 있다. 이때 이미지에 대한 설명이 들어가는 요소에 개별적으로 패딩을 반복해서 줄 수도 있지만 이미지 컨테이너 요소의 margin을 조정하면 padding이 필요한 자식요소에 일관된 padding값을 적용할수있다. See the Pen Untitled by JEONG (@cona) on CodePen.

https://www.clien.net/service/board/cm_mac/13119792 키보드 몇개가 안눌려지고, 키가 모두선택 기능을 한다던가 (나의 경우는 i 를 눌렀더니 ide의 블록이 전체선택되었다) 하는 에러가 발생한다면?? 이는 자신도 모르게 마우스키를 활성화 해버린것이다. 손쉬운 사용으로 들어가서 마우스키를 비활성화 하면된다.

타입스크립트의 타입으로 void가 쓰이는 경우는 세가지 경우가 있다. 매개변수, 메서드 일때의 void와 함수일때의 void가 다른데, 매개변수, 메서드에서의 void는 Return 값을 사용하지 않겠다(상관하지않겠다) 라는 뜻이고, 함수에서의 void는 return값이 '없다'는 뜻이다. //함수를 선언하고 그밑에 바로 함수를 구현하면 위에 있는 함수의 선언에 대한 부분은 타입이 된다. function forEach(arr: number[], callback: (el: number) => undefined): void; function forEach() { } 구현하기 싫으면 declare 로 선언하면 되는데, 여기서 callback함수의 리턴값을 undefined로 해줬을때와 void로 해줬을때의 차..

interface A { a: string } // 객체리터럴은 추가속성검사라는 것이 있다. // 이렇게 추가 속성이 들어가면 추가속성검사를 함 const obj1: A = { a: 'hello', //원래 타입에 있는 속성 b: 'wolrd' // 원래 타입에 없는 속성 => 에러 }; // 이 객체를 따로 빼주고 타입을 정해주면 에러가 나지 않음 const objHelloWorld = { a: 'hello', b: 'world' } const obj2 : A = objHelloWorld; https://www.typescriptlang.org/play?ssl=21&ssc=1&pln=1&pc=1#code/JYOwLgpgTgZghgYwgAgILIN4Chm+XALmQGcwpQBzLAXyzoHp7lBcGsB..