프론트엔드 첫걸음

개요사용자의 입력을 요구하는 서비스에서는 화면을 떠날 때 '떠나시겠습니까?' 를 묻는 경우가 있다.이 때 useBlocker를 잘 사용하면 더 좋은 코드를 작성할 수 있을것이다.useBlocker란?useBlocker는 React Router에서 네비게이션 차단 기능을 제공하는 훅이다.사용자가 페이지를 이동하려 할 때 특정 조건이 충족되면 네비게이션을 차단할 수 있다.즉, 페이지 이탈을 방지하는 역할을 한다. useBlocker 코드 React-Router 에서 useBlocker 코드를 찾아보자.//1. 매개변수export function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker { let { router, basename } = us..

https://stackoverflow.com/questions/75215273/git-reset-headn-results-in-error-unknown-switch-e git reset HEAD@{n} results in error "unknown switch 'e'"I issued the command: git reset HEAD@{2} and got an error: unknown switch `e'. What's happening?stackoverflow.com git stash apply stash@{0}명령어가 안먹어서 검색해보니 윈도우는 git stash apply "stash@{0}"이렇게해야한다는군요.회사에서 작성하느라 이만.

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.

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