IT일상

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/42/ const App = () => { const [mousePosition, setMousePosition] = useState([0, 0]); // 마우스 움직임을 감지하여 mousePosition 상태 계속 업데이트 useEffect(() => { document.addEventListener('mousemove', (event) => { setMousePosition([event.clientX, event.clientY]); }); }, []); return ( ); }; 이런 구조의 앱이 있다고 가정해봅시다. MouseMovementContext라는게 있고 마우스가 움직이면 상태를 계속 업데이트합니다. MouseMo..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/41/ 먼저, "#ffffff" 16진수 표현을 RGB로 변환하기 /** * @param {string} hexColor #ffffff 와 같이 16진수 형태로 작성된 색상 문자열 * @returns {[number, number, number]} R, G, B 배열 (0 ~ 255) */ function hexColorToRGB(hexColor) { const rgb = hexColor.startsWith('#') ? hexColor.slice(1) : hexColor; const [r, g, b] = [rgb.slice(0, 2), rgb.slice(2, 4), rgb.slice(4, 6)].map((hex) => Numbe..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/40/ 웹에서 이런 애니메이션을 본 적 있을까요? 3D로 카드가 뒤집어지는 효과인데, CSS를 사용하면 간단하게 만들 수 있습니다. 핵심 키워드 빠르게 알아보기 카드를 뒤집는 데에 필요한 CSS 속성은 backface-visibility, transform: perspective, transform: rotateY 입니다. * backface-visibility는 rotateY로 인해 180도 뒤집혔을 때 표시할 지 여부를 정하는 옵션입니다. * transform: perspective는 3D 입체 효과를 주기 위한 원근감 옵션입니다. * transform: rotateY는 Y축을 기준으로 회전하는 속성입니다. 기본 모양 만들기..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/39/ 한글을 처리할 때 "은/는" 은 어떻게 대응할 수 있을까? 예를 들면, * 만두일 땐 만두는 * 짜장일 땐 짜장은 즉 단어의 종성 유무를 체크해야 한다. 방법은 간단하다. 한글 유니코드 특성 상 0, 28, 56 ... 번째 글짜가 종성이 없다. 따라서 28로 MOD 연산을 했을 때 0이면 종성이 없다는 뜻이다. function hasLastConsonantLetter(text) { return (text.charCodeAt(text.length - 1) - "가".charCodeAt(0)) % 28 !== 0; } ["만두", "카레", "짜장", "짜장면", "불닭볶음면", "과자"].forEach((word) => ..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/38/ TL;DR * React.SFC, React.VFC는 deprecated되었다. React.FC를 사용하자. * 만약 children이 있는 타입을 사용해야 한다면 PropsWithChildren 타입을 사용하자. const Example: React.FC = (props) => { const { message, children } = props; // return jsx } 본문 FC, SFC, VFC는 모두 약어(alias)이다. React.FC: React.FunctionComponent React.SFC: React.StatelessFunctionComponent React.VFC: React.VoidFunctio..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/37/ ⚠ 이 글은 기존에 GitHub Actions를 이용하여 GitHub Pages에 자동 배포 설정이 되어있는 프로젝트를 기준으로 설명을 진행합니다. * GitHub Actions로 Webpack 자동 빌드 및 배포: https://solo5star.tistory.com/26 GitHub Actions: Webpack 빌드 + GitHub Pages 배포 자동화하기 $ webpack --mode production $ git commit -m "build: 웹 페이지 Webpack 빌드" $ git push origin main # 이러한 과정을 매 커밋마다 반복 커밋할 때 마다 빌드를 하고, 배포를 하시나요? 더 이상 그..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/36/ GitHub Actions GitHub에서 제공하는 CI/CD 도구입니다. CI/CD는 간단하게 말하자면 빌드, 테스트, 배포를 자동화하는 것을 뜻합니다. 이 글을 통해 하고자 하는 것은 다음과 같습니다. * 커밋을 GitHub에 push할 때 마다 자동으로 빌드 * 빌드된 결과를 GitHub Pages로 자동 배포 이걸 한 번 쯤은 보신 적 있지 않습니까? 어떤 레포지토리에서는 커밋 아래에 보면 ✔체크 표시(혹은 ❌실패 표시)가 나타납니다. GitHub Actions 실행 결과를 표시하는 것인데요, 이 글에서 GitHub Actions 설정을 마치면 동일한 표시를 확인할 수 있을 것입니다. GitHub Actions w..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/35/ https://code.visualstudio.com/learn/collaboration/live-share Use Microsoft Live Share to collaborate with Visual Studio Code Use Microsoft Live Share to collaborate with Visual Studio Code code.visualstudio.com VSCode에는 Live Share라는 기능이 있습니다. 한 대의 컴퓨터에서 Live Share를 호스트하면 다른 사람들이 접속하여 실시간으로 코드를 편집할 수 있는 기능입니다. VSCode에는 SSH로 접속하여 서버에서 코딩할 수 있는 기능도 있습니..