프론트엔드 첫걸음

갑자기 복붙도 안되고 되돌리기도 안되고..갑자기 웹스톰이 이상해졌을때 해결방법! https://rider-support.jetbrains.com/hc/en-us/community/posts/8858939260178-How-do-I-reset-all-settings-of-the-IDE-  기본설정으로 되돌리면 된다.

import 를 해 올 때 대문자, 소문자가 정확한지 확인해보자 !!! 나의 경우에는 파일을 소문자에서 대문자로 바꾼뒤에 import경로를 그대로 두었었다. 그랬더니 빌드는 제대로 되었는데 hot reload가 안되었다. reload가 안되는 파일을 불러오는 위치에서 Import 주소가 정확한지 확인해보자

svg 파일은 비율이 있어서 화면에 가득차게 연출하면 화면의 일부가 잘린다. 이때 aspectRatio를 어떻게 할 것인지 설정을 바꾸어 어떤부분을 잘리게 해서 화면에 보여줄지 설정할 수 있다. preserveAspectRatio: 'xMidYMin slice', 이 경우 x축 중앙에 맞추고, Y축은 위쪽이 보이도록 ( Y축의 0값 부분이 잘리도록) 하는 설정이다 현재 lottie file을 사용해서 개발하고 있는데 rendererSetting에서 아래와 같이 설정해 줄 수 있다. rendererSettings: { preserveAspectRatio: 'xMidYMin slice', }, xMaxYMin slice 해주면 우측 위 방향의 프레임을 보존하는 형태로 잘린다.

리액트 프로젝트를 할때 이렇게 @ 로 절대경로를 표시해주고 있다. (복잡한 프로젝트에서 상대경로 ../../../ 로 import 해오는것은 .... ) import React from 'react' import { Routes, Route, Navigate } from 'react-router-dom' import Splash from '@/page/Splash.jsx' 현재 vite 사용하여 빌드하는 프로젝트에서 아래와 같이 alias 사용해서 절대경로로 설정해주고있다. import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path' import { ViteEjsPlugin } from..

react-webcam 라이브러리 사용할 때 비디오가 화면비율에 맞지 않게 출력되는 현상!! 비디오에 object-fit:cover 효과를 준 것처럼 하고 싶어요! >> react webcam without object-fit cover 검색 https://stackoverflow.com/questions/55920961/react-webcam-npm-package-video-sizing 친절하게 hook 사용예시까지 제공해줌..프로젝트에 반영하니까 바로 됨 !!! const isLandscape = size.height { // Handler to call on window resize function handleResize() { // Set window width/height to state set..

네트워크의 속도를 조절할 수 있는 개발자 도구 속성이 있다. 네트워크 > 느린 3G react-query 에서 isLoading 이 적용되었는지 확인하는 과정에서 사용할 수 있다. https://unit-15.tistory.com/85 throttle의 사전적 의미는 '목을 조르다, 목을 졸라 죽이다'로써, throttling은 '대역폭 제한, 대역폭 조절'을, No throttling은 '트래픽 조절 금지'를 뜻한다. 대역폭 제한(throttling)이란 인터넷 서비스 공급자가 의도적으로 인터넷 서비스를 느리게 하는 것을 의미한다. 대역폭을 제한함으로써 네트워크의 과부하를 막으며, 네트워크 트래픽을 규제할 수 있다.