IT일상

리뉴얼 된 블로그로 보기: 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/33/ JavaScript를 최대한 적게 사용하여 별점 기능을 만들어보려고 합니다. body { background: rgb(32, 32, 40); } .vote { display: flex; } .star { padding: 1px; } .star::after { content: '☆'; color: hsl(60, 80%, 50%); font-size: 20px; } 별 모양을 표현하는 CSS를 만들어줍니다. 그리고 위의 HTML과 같이 마크업을 합니다. 별 다섯개가 표시될 것입니다. 간단하게 하기 위해 ☆ 특수기호를 사용하였습니다. :hover .star:hover::after { content: '★'; } 마우스를 올릴 ..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/32/ type Dog = { name: string; age: number; }; type PendingState = { dogName: string; }; type FulfilledState = { dog: Dog; }; type RejectedState = { dogName: string; }; type State = PendingState | FulfilledState | RejectedState; 네트워크로 부터의 응답에 대한 상태를 타입으로 표현해보았습니다. 그럼 State 타입의 값이 주어질 때 이것이 Pending인지, Fulfilled인지, Rejected인지는 어떻게 구분할 수 있을까요? function pro..