프론트엔드 첫걸음

https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex color Added License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Permission to use, copy, modify, and/or distribute... codepen.io 여기 들어가서 내가 바꾸려는 색을 filter로 바꿔줍니다. 그 filter styled을 svg 아이콘의 class명으로 주면 됩니다.

길이가 다른 list item을 중앙정렬 하려면 ! 길이가 다른 list들을 list들의 위치를 지정해주는 div를 설정해서 위치를 잡아주어야한다....!! See the Pen list 가장 긴 item을 기준으로 중앙정렬하기 by JEONG (@cona) on CodePen.

clip-path 생성기 https://bennettfeely.com/clippy/ 클립패스 트랜지션 예시 See the Pen Untitled by JEONG (@cona) on CodePen. 클립패스 애니메이션 예시 See the Pen clip-path animation by JEONG (@cona) on CodePen.

https://stackoverflow.com/questions/13450039/how-to-undo-git-flow-feature-finish [How to undo git flow feature finish? I am learning git-flow and I just did git flow feature finish , which merged my feature branch to develop and removed it. Instead of this, I want to push the feature branch to ... stackoverflow.com](https://stackoverflow.com/questions/13450039/how-to-undo-git-flow-feature-finish..

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

overflow-x: hidden; overflow-y: scroll;

import { useLocation } from "react-router-dom"; const location = useLocation(); console.log(location); hash : 주소의 # 문자열 뒤의 값 (주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용) key : location 객체의 고유 값, 초기에는 default 이고, 페이지가 변경될 때마다 고유의 값이 생성됨. pathname : 현재 주소의 경로 (쿼리스트링 제외) search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값 //http://경로?id=10&count=2022 인경우 'id=10&count=2022' URLSearchParam..

https://codepen.io/cona/pen/wvQvPmy?editors=0110 {children} {children} .loop-slider { .inner { display: flex; width: fit-content; animation-name: loop; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: var(--direction); animation-duration: var(--duration); } }

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

requestAnimationFrame 효율적으로 사용하기 requestAnimationFrame 함수를 animate함수 안에서 실행시키면 현재 모니터의 주사율 기반으로 모니터마다 animate 실행수 다르다. 60Hz 주사율 ->requestAnimationFrame는 1초에 60번 실행 => 주사율에 따라 1초에 움직이는 횟수가 다를 수 있다 내 코드가 컴퓨터의 주사율에 상관없이 동일한 속도로 이동하는 결과를 보여주려면? FPS(Frame Per Second) : 1초에 requestAnimationFrame 몇번 실행시킬까 ? 모니터마다 동일한 시각에 동일한 동작 실행되게 하려면? 전제 내 모니터 주사율이 60Hz라면 1초에 60번 실행한다 => 약 0.0016초에 1번 실행된다 (1request..