티스토리

IT일상

검색하기

블로그 홈

IT일상

solo5star.tistory.com/m

solo5star 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

React에서 터치 스와이프 구현하기 2 (유한 상태 머신으로 리팩토링) 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/58/ https://solo5star.tistory.com/57 React에서 터치 스와이프 구현하기 배경 우테코에서 개발하고 있는 요즘카페 서비스에선 메인 화면의 카페들을 스와이프 형식으로 보여주고 있습니다. 따라서 터치 스와이프 구현이 필요합니다. 이 글에서 JavaScript로 구현한 scroll solo5star.tistory.com 위 글에서 이어지는 내용입니다. 배경 지난 글에서 요즘카페 서비스의 터치 스와이프를 고도화하는 구현을 진행했었습니다. 요구사항 1, 2까지 구현했었는데요, 터치하였을 때 터치에 반응하여 요소가 따라오게 하는 구현이랑, 판정을 통해 이전 혹은 다음 요소로 snap이 일어나게 하게끔 구현해보았.. 공감수 1 댓글수 5 2023. 9. 30.
React에서 터치 스와이프 구현하기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/57/ 배경 우테코에서 개발하고 있는 요즘카페 서비스에선 메인 화면의 카페들을 스와이프 형식으로 보여주고 있습니다. 따라서 터치 스와이프 구현이 필요합니다. 이 글에서 JavaScript로 구현한 scroll snap의 소스 코드는 https://gist.github.com/solo5star/ca5788e3c2b75c3c8ab017a4fb97c438 에서 확인할 수 있습니다 정말 간단하게 구현하기 (CSS) .container { height: 500px; overflow-y: scroll; scroll-snap-type: y mandatory; } .container > .item { scroll-snap-align: star.. 공감수 1 댓글수 0 2023. 9. 24.
프론트엔드에서 트러블 슈팅하기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/56/ 트러블 슈팅(Trouble Shooting) 트러블 슈팅이란, 어떠한 문제가 발생했을 때 각종 수법을 활용하여 원인을 찾아내는 것을 뜻합니다. 즉 문제 해결의 일종이라 할 수 있는데요, 우아한테크코스 프론트엔드 과정을 진행하며 있었던 기억에 남는 트러블 슈팅 사례 중 하나를 소개해보고자 합니다. 이 사례는 다른 사람의 문제를 해결해주는 입장이었기 때문에, 문제의 상황에 대한 이해도가 전혀 없는 상태에서 문제를 파악하고 해결해나가는 좀 더 순수한 트러블 슈팅 과정을 보실 수 있을 겁니다! 문제 상황 즐겁게 우테코 미션을 하던 중... 크루 한 분이 저를 찾아와서 도움을 요청했습니다. "인풋 박스에 값을 입력하고 버튼을 누르.. 공감수 4 댓글수 2 2023. 9. 15.
8시간 만에 서비스 만들고 운영까지 (fastify, react) 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/55/ 제목이 좀 자극적이긴 한데... ㅎㅎ 이번에 빠르게 서비스를 만들면서 어떤 고민을 했는지 정리해보고자 쓴 글입니다. 8시간이 정말로 8시간이냐고 물으면, 아닌거 같기도 해요. 지금까지 쌓은 경험이 많은 것을 단축시켜주었으니까요. 지하철을 타고 집에 가면서 서비스와 기술 스택을 구상하였고, 집에 도착한 후 IDE를 켜고 약 6시간동안 구현을 진행하였습니다. 나머지 2시간은 다음 날 배포 직전에 자잘한 오류 및 디테일을 잡는 데 사용하였네요. 배경 저는 우아한테크코스 5기 프론트엔드 과정(이하 우테코)을 진행하고 있습니다. 우테코 교육 과정에는 다양한 미션이 있는데요, 이번에 진행했던 미션이 웹 사이트의 성능을 개선해보는 미.. 공감수 5 댓글수 14 2023. 9. 9.
우아한테크코스 팀 프로젝트 3차 스프린트 회고 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/54/ 우아한테크코스의 팀 프로젝트는 총 5개의 스프린트로 이루어져 있습니다. 각 차수마다 2주간의 스프린트 기간을 가지고, 구현한 내용을 데모데이 때 발표합니다. GitHub 이슈 라벨링 개선 GitHub 이슈를 분류하여 보기 위해 라벨을 만들고 라벨링을 한다. 크게 프론트, 백엔드 두 개로 분류하고 필터를 걸어 분야 별 이슈를 작업한다. 원래는 위와 같이 라벨을 만들고 관리하였으나 다음과 같은 문제가 있었다. 1. 특정 라벨은 색깔이 눈에 띄지 않는다. 채도가 낮아 흐릿한 것이 원인이라 생각했다. 2. 색깔만으로 어떤 라벨인지 구분이 쉽지 않다. 위의 문제와 비슷한 문제이다. 3. 양 옆에 넣은 이모지때문에 라벨이 길어져 칸.. 공감수 1 댓글수 0 2023. 8. 31.
React와 Reactive는 어떻게 다를까요? 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/53/ React와 Reactive? 뭔가 말장난 같습니다. 결론부터 말하자면, React는 Reactive 하지 않습니다. Reactive란 무엇이며 React는 그럼 어떻게 다른 걸까요? 한번 알아봅시다. Reactive Programming Reactive Programming은 무엇일까요? 설명하기 전에, 약간의 배경을 같이 알아봅시다. 바닐라 JS로 웹 사이트를 만들어보신 적이 있을까요? 위의 그림처럼 userCount 값을 1 더했을 때, 그 값이 UI에 반영되지 않을 것입니다. 변경된 값을 UI에 반영해주기 위해 직접 document.getElementById로 DOM 객체를 얻어 UI를 업데이트 해줬을 거에요. 이.. 공감수 0 댓글수 0 2023. 8. 28.
TeamCity 빌드 알림을 Slack Webhook으로 보내기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/52/ TeamCity에는 빌드를 시작하거나 완료하는 등 이벤트가 발생하였을 때 webhook으로 받아볼 수 있는 기능이 있습니다. 이를 Slack 메세지로 보내야 하는데, TeamCity에서 송신하는 JSON 형식이랑, Slack 에서 수신받는 JSON 형식이랑 달라서 중간에서 가공을 할 필요가 있습니다. 즉 중간에서 JSON 포맷을 변환해주는 브로커 역할이 필요한거죠. 브로커란? 다양한 컴퓨터나 서비스 간의 통신을 중개하거나 조정하는 역할을 합니다 간단한 입, 출력 정도 다루면 되기 때문에 코드 자체는 ... 파일 한 개를 넘지 않을 것입니다. TeamCity에서 보내는 Webhook JSON 포맷 확인하기 webhook.s.. 공감수 0 댓글수 0 2023. 8. 26.
크로스 브라우저 지원을 위한 browserslist + eslint + stylelint 셋업 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/51/ Chrome, Safari, FireFox 등 브라우저의 종류는 굉장히 다양하다. 요즘은 Chrome의 시장 점유율이 높기 때문에 Chrome만 잘 지원해줘도 대부분의 사람들이 사용할 수 있다. 뿐만 아니라 Naver Whale, Microsoft Edge, Samsung Internet 등 다소 큰 파이를 차지하는 브라우저들도 Chromium을 기반으로 하기 때문에, Chrome이 사실상 표준이라고도 할 수 있다. 실제로 주변의 개발자들도 거의 다 Chrome을 기준으로 개발하고 있다. (물론 최근에는 애플 사용자도 많아지면서 Safari의 사용도 늘고 있다) 예전에는 Internet Explorer도 있었고 Chrom.. 공감수 1 댓글수 2 2023. 8. 23.
사용자 수 모니터링 빠르게 시작하기 (Grafana + Prometheus) 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/50/ 고객으로부터 빠르게 피드백을 받기 위해 MVP(Minimal Viable Product) 상태로 배포하였습니다. 오픈채팅방 몇 군데에 소개 글과 링크를 뿌렸고 다행히도 많은 사람들이 관심을 가지고 사용해주셨습니다. 가입자 수는 DB에 직접 쿼리를 쳐보면서 카운팅하고 있었는데요,,, 매번 이런 과정을 통해 조회하는 것은 불편하기도 하고 가입자 수 상승이 어떤 시점에 상승하는지 추이를 확인하는 것도 어려웠습니다. 여튼, 이런 문제를 해결하기 위해 데이터 시각화 플랫폼이 필요하다고 느꼈고 이를 구축하기 위해 Grafana + Prometheus를 사용하였습니다. AWS의 CloudWatch, ELK 등 다른 조합도 많이 있었을.. 공감수 0 댓글수 0 2023. 8. 15.
우아한테크코스 팀 프로젝트 2차 스프린트 회고 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/49/ 우아한테크코스의 팀 프로젝트는 총 5개의 스프린트로 이루어져 있습니다. 각 차수마다 2주간의 스프린트 기간을 가지고, 구현한 내용을 데모데이 때 발표합니다. MVP를 만들기 위한 여정 MVP란, 최소 기능 제품(Minimum Viable Product)을 말하는 것이며, 최소한의 기능을 구현한 제품이다. 최소한의 기능이라는 것이 중요한 포인트인데, 완성도가 낮더라도 프로젝트의 핵심 컨셉을 빠르게 구현하고 고객으로부터 검증을 받아야 하기 때문이다. 숏폼 형식으로 앱을 완성하였는데 막상 시장의 반응이 좋지 않다면? 이미 많은 노력을 쏟은 시점에 방향을 바꾸는 것은 많은 것들을 물거품으로 바꿀 것이다. 요즘카페의 핵심 컨셉이란.. 공감수 0 댓글수 2 2023. 8. 8.
우아한테크코스 팀 프로젝트 1차 스프린트 회고 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/48/ 우아한테크코스의 팀 프로젝트는 총 5개의 스프린트로 이루어져 있습니다. 각 차수마다 2주간의 스프린트 기간을 가지고, 구현한 내용을 데모데이 때 발표합니다. 팀원들과의 만남 지금까지의 우아한테크코스 과정(레벨1~2)은 모두 개인 혹은 페어 프로그래밍으로 진행되었다. 약 5개월이라는 긴 기간이 지나고 이제서야 본격적인 팀 프로젝트가 진행된다. 프론트 3명, 백엔드 4명 구성인데 지금까지 1~2명으로만 하다가 대규모로 팀 프로젝트를 하게 되니 기대도 했지만 긴장도 되었다. 개인으로서의 퍼포먼스만 발휘하다가 팀에서 팀 구성원으로서 역할을 잘 수행할 수 있을까. 우테코에서 팀원들을 정해주자마자 바로 슬랙 채팅방을 만들었다. 기획.. 공감수 0 댓글수 0 2023. 8. 6.
Terraform으로 AWS EC2와 S3 생성해보기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/47/ AWS를 이번에 처음 사용해보는데요, AWS에서 제공하는 컴퓨팅 자원의 종류가 많고 어려워서 Terraform으로 설정해두고 쓰려고 합니다. Terraform과 AWS 둘 다 처음이기 때문에 글에서 부족한 부분이 많이 보일수도 있는 점 양해부탁드립니다. Terraform이란? 선언적으로 인프라를 코드로 정의(Infrastructure as Code, IaC)할 수 있는, HashiCorp사에서 만든 오픈 소스 도구입니다. IaC 등장 배경 가상화 기술이 발전하면서 여러 대의 서버를 만드는 것이 굉장히 쉬워졌습니다. 하지만 요즈음 서버 자원의 종류가 많아지고 규모가 커지면서 관리(provisioning) 및 운영(opera.. 공감수 0 댓글수 0 2023. 6. 6.
ASUS Vivobook Pro m7600re 무선랜 Intel AX210으로 교체하기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/46/ https://solo5star.tistory.com/34 레노버 Slim5 Pro (14ARH7 6600HS) 무선랜 Intel AX210으로 교체하기 안녕하세요. 레노버 Slim5 Pro 14ARH 6600HS 노트북을 구매해서 약 3개월동안 잘 쓰고 있었는데, 와이파이, 블루투스가 간헐적으로 끊기는 불편함이 있었습니다. 구체적으로 들면 이렇습니다. * 전원 solo5star.tistory.com 지난 번에도 리얼텍 칩에서 인텔 칩으로 교체했었습니다. 이번에 사용하는 노트북에도 교체를 하게 되었는데, 사내 Wi-Fi 인증이 자꾸 풀리는 문제가 있었습니다. 기본으로 장착된 게 Mediatek MT7922A22M인데, W.. 공감수 0 댓글수 2 2023. 6. 6.
무엇을 하려는 건지 생각해보기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/45/ 우리는 종종 코드를 작성하며 중간 결과물을 확인하곤 한다. 이 과정에서 조금씩 욕심이 생기곤 한다. 버튼이 부드럽게 눌려지는 애니메이션을 넣어볼까? 기능을 좀 더 범용적으로 만들어보자! 라이브러리와 비슷한 수준으로 고도화를 해보자! 이렇게 완성된 페이지는 결국 처음에 그렸던 그림과 똑같을까? 나의 경험 상 아니었다. 처음에 피그마로 만들어진 시안을 보고 2~3일이면 충분할 것 같았지만 앞서 말한 것처럼 중간중간에 다른 길로 새는 낭비가 발생하게 된다. 이들은 모두 처음에 그렸던 그림에 있었던 것들일까? 아니었다. 딴 길로 새는게 즐거웠죠 만들고 싶은 것을 만들며 그저 코드를 타이핑하는 것이 재미있었다. 갑자기 해보고 싶은.. 공감수 4 댓글수 2 2023. 5. 18.
React SSR (서버 사이드 렌더링) 얕게 시작해보기 (React.hydrateRoot) 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/44/ CSR(Client-Side Rendering) 위는 전통적으로 사용하던 방식인 CSR(Client-Side Rendering) 방식이 동작하는 그림입니다. 1. 껍데기 뿐인 html 파일을 다운로드 2. bundle.js 다운로드 및 실행 (모든 기능이 여기에 있습니다) 3. 추가 데이터(users.json)를 다운로드하여 렌더링 JavaScript가 동적으로 컨텐츠를 그리는 방식이기 때문에, 화면 전체를 새로고침하지 않고 일부만 변경하여 빠르고 끊기지 않는 웹 사이트를 만들 수 있어 사용자에게 좋은 경험을 제공합니다. 하지만 이러한 CSR 방식엔 단점이 있습니다. 1. 로딩 시간이 깁니다. bundle.js 를 다운받.. 공감수 11 댓글수 4 2023. 5. 5.
webpack config 자동완성 되도록 설정하기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/43/ 아무래도 webpack config를 작성하면서 자동완성이 안되다 보니 오타 없이 제대로 작성한 것인지 의문이 들 때가 많습니다. 그래서 검색해봤는데 webpack config에도 타입을 지정하여 자동완성을 가능케 할 수 있었습니다. /** @type {import('webpack').Configuration} */ module.exports = { mode: "development", resolve: { extensions: [".ts", ".js", ".tsx", ".jsx"], }, module: { rules: [ { test: /\.(ts|tsx|js|jsx)$/, use: "ts-loader", exclude:.. 공감수 1 댓글수 4 2023. 5. 5.
React Context를 쓰면 전체가 리렌더링된다고? 리뉴얼 된 블로그로 보기: 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.. 공감수 3 댓글수 6 2023. 4. 30.
javascript에서 RGB ↔ HSL 변환하기 리뉴얼 된 블로그로 보기: 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.. 공감수 0 댓글수 2 2023. 4. 30.
CSS로 카드 뒤집는 3D 애니메이션 만들기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/40/ 웹에서 이런 애니메이션을 본 적 있을까요? 3D로 카드가 뒤집어지는 효과인데, CSS를 사용하면 간단하게 만들 수 있습니다. 핵심 키워드 빠르게 알아보기 카드를 뒤집는 데에 필요한 CSS 속성은 backface-visibility, transform: perspective, transform: rotateY 입니다. * backface-visibility는 rotateY로 인해 180도 뒤집혔을 때 표시할 지 여부를 정하는 옵션입니다. * transform: perspective는 3D 입체 효과를 주기 위한 원근감 옵션입니다. * transform: rotateY는 Y축을 기준으로 회전하는 속성입니다. 기본 모양 만들기.. 공감수 5 댓글수 6 2023. 4. 29.
javascript에서 한글에서 종성(받침)이 있는지 체크하는 방법 리뉴얼 된 블로그로 보기: 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) => .. 공감수 0 댓글수 0 2023. 4. 25.
React FC vs SFC vs VFC 리뉴얼 된 블로그로 보기: 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.. 공감수 0 댓글수 0 2023. 4. 23.
GitHub Actions: storybook 배포하기 리뉴얼 된 블로그로 보기: 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 # 이러한 과정을 매 커밋마다 반복 커밋할 때 마다 빌드를 하고, 배포를 하시나요? 더 이상 그.. 공감수 2 댓글수 4 2023. 4. 23.
GitHub Actions: CRA(Create React App) 빌드 + GitHub Pages 배포 자동화하기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/36/ GitHub Actions GitHub에서 제공하는 CI/CD 도구입니다. CI/CD는 간단하게 말하자면 빌드, 테스트, 배포를 자동화하는 것을 뜻합니다. 이 글을 통해 하고자 하는 것은 다음과 같습니다. * 커밋을 GitHub에 push할 때 마다 자동으로 빌드 * 빌드된 결과를 GitHub Pages로 자동 배포 이걸 한 번 쯤은 보신 적 있지 않습니까? 어떤 레포지토리에서는 커밋 아래에 보면 ✔체크 표시(혹은 ❌실패 표시)가 나타납니다. GitHub Actions 실행 결과를 표시하는 것인데요, 이 글에서 GitHub Actions 설정을 마치면 동일한 표시를 확인할 수 있을 것입니다. GitHub Actions w.. 공감수 3 댓글수 0 2023. 4. 23.
SSH로 페어 프로그래밍하기 (VSCode과 WebStorm이 만날 수 있습니다) 리뉴얼 된 블로그로 보기: 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로 접속하여 서버에서 코딩할 수 있는 기능도 있습니.. 공감수 0 댓글수 1 2023. 4. 17.
레노버 Slim5 Pro (14ARH7 6600HS) 무선랜 Intel AX210으로 교체하기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/34/ 안녕하세요. 레노버 Slim5 Pro 14ARH 6600HS 노트북을 구매해서 약 3개월동안 잘 쓰고 있었는데, 와이파이, 블루투스가 간헐적으로 끊기는 불편함이 있었습니다. 구체적으로 들면 이렇습니다. * 전원 어댑터 없이 배터리로 사용할 때 가끔씩 와이파이가 먹통이 됨 (와이파이 버튼이 맛이 감) * ZOOM 화상 회의 중 와이파이가 먹통이 됨 (ping자체가 나가질 않음) * 가끔씩 블루투스 자체가 동작하지 않음 (기기 찾기, 연결 X) 기본으로 장착되어 있는 무선랜 카드는 리얼텍 RTL8852BE 입니다. 조금 검색해보니 리얼텍이란 브랜드 자체부터 평이 그렇게 좋진 않은 듯 합니다. 그리고 이전에 사용했던 노트북이 .. 공감수 7 댓글수 5 2023. 4. 6.
CSS로 별점 기능 만들기 리뉴얼 된 블로그로 보기: 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: '★'; } 마우스를 올릴 .. 공감수 0 댓글수 2 2023. 3. 27.
타입스크립트 Discriminated Unions 리뉴얼 된 블로그로 보기: 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.. 공감수 0 댓글수 0 2023. 3. 27.
타입스크립트 템플릿 리터럴 타입 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/31/ type Category = '한식' | '중식' | '일식' | '기타'; function printCategory(category: Category) { // '한식', '중식', '일식', '기타' 중 하나 } printCategory('한식'); // OK printCategory('한...식'); // ERROR 위와 같이 문자열을 강제하는 String Literal Type을 사용하는 것은 자주 보셨을 겁니다. 타입스크립트의 기능 중 하나인 Template Literal Type을 사용하면 더 다양한 String Literal Type을 만들 수 있습니다. 기본적인 사용법 type HttpMethods = 'G.. 공감수 0 댓글수 0 2023. 3. 27.
www.naver.com에 접속했을 때 일어나는 일 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/30/ www.naver.com에 접속하기 위해, 먼저 인터넷에 연결해야 합니다. LAN 케이블을 연결하게 되는데 이 때 컴퓨터는 로컬 네트워크에 참여하기 위해 DHCP 라는 과정을 거칩니다. DHCP (Dynamic Host Configuration Protocol) 1. 로컬 네트워크(LAN)에 연결된 기기는 네트워크에 참여하기 위해 가장 먼저 DHCP 서버를 찾습니다. 2. DHCP Discover를 Broadcast하여 DHCP 서버를 찾습니다. 3. DHCP 서버는 이에 응답하여 할당해줄 수 있는 IP 정보를 담은 DHCP Offer를 보냅니다. 4. 기기는 DHCP Request를 보내어 IP 할당을 요청합니다. 5... 공감수 2 댓글수 0 2023. 3. 13.
[Web Component] 커스텀 폼 컨트롤, form associated 컴포넌트 만들기 리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/29/ 🏆 로또를 구매하세요~ 구매하기 로또를 구매하는 폼을 만들고자 합니다. 엘리먼트는 1) 1~45의 숫자 6개를 받아야 하며 2) 서로 중복되지 않는 번호인지 검증해야 합니다. customElements.define('my-lotto-input', class MyLottoInput extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` `; } }); 커스텀 폼 컨트롤은 위와 같이 만들 수 있습니다. 하지만 이렇게 만들더라도 form은 이 input이 올바른지, 어떠한 값을 가.. 공감수 0 댓글수 2 2023. 3. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.