목록프론트엔드 (23)

IT일상

타입스크립트 템플릿 리터럴 타입

리뉴얼 된 블로그로 보기: 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..
프론트엔드 2023. 3. 27. 15:23
[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이 올바른지, 어떠한 값을 가..
프론트엔드 2023. 3. 7. 00:05
[Web Component] Custom Element에서 slot 사용하기

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/28/ 안녕하세요. 오늘도 좋은 날씨네요! my-modal이라는 Custom Element를 만들었습니다. 모달의 모양만 가지고 있는 엘리먼트인데, 그럼 모달안의 내용은 어떻게 전달할까요? Light DOM 안녕하세요. 오늘도 좋은 날씨네요! 오늘 날씨는 15도입니다. 기온이 많이 올라갔지만 따뜻하게 입는 것 잊지 마세요! customElements.define('my-modal', class MyModal extends HTMLElement { constructor() { super(); this.childrenHTML = this.innerHTML; this.innerHTML = ` ${this.childrenHTML} 확인..
프론트엔드 2023. 3. 6. 15:45
[Web Component] 컴포넌트 내부 요소를 격리하기. HTML Custom Elements + Shadow DOM

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/27/ customElements.define('my-alert', class MyAlert extends HTMLElement { constructor() { super(); this.innerHTML = ` 문제가 발생하였습니다. `; } }); customElements.define('my-article', class MyArticle extends HTMLElement { constructor() { super(); this.innerHTML = ` ${this.getAttribute('title')} ${this.getAttribute('content')} `; } }); Custom Element 두 개를 만들었습니다..
프론트엔드 2023. 2. 27. 15:13
GitHub Actions: Webpack 빌드 + GitHub Pages 배포 자동화하기

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/26/ $ webpack --mode production $ git commit -m "build: 웹 페이지 Webpack 빌드" $ git push origin main # 이러한 과정을 매 커밋마다 반복 커밋할 때 마다 빌드를 하고, 배포를 하시나요? 더 이상 그러지 않아도 됩니다. GitHub Actions GitHub에서 제공하는 CI/CD 도구입니다. CI/CD는 간단하게 말하자면 빌드, 테스트, 배포를 자동화하는 것을 뜻합니다. 지금 이 글에서 하고자 하는 것입니다. GitHub 에서 커밋 오른쪽에 ✔ 체크 아이콘을 본 적 있나요? GitHub에 커밋이 push될 때 마다 자동으로 GitHub Actions가 수행되..
프론트엔드 2023. 2. 24. 16:02
[Web Component] VanillaJS에서 React처럼 개발하기. HTML Custom Elements 소개

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/25/ 본 글에서는 Custom Element를 적용해보는 위주로 다룹니다. 상세한 내용을 확인하려면 아래의 링크를 참고해주세요. WHATWG Spec: https://html.spec.whatwg.org/multipage/custom-elements.html MDN - Using custom elemtns: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements More capable form controls: https://web.dev/more-capable-form-controls/ Custom Elements best practi..
프론트엔드 2023. 2. 23. 17:55
CSS로 3D 회전하는 효과 만들기

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/24/ 웹 페이지: https://solo5star.github.io/web-introduction 소스코드: https://github.com/solo5star/web-introduction 우아한테크코스에서 미션이 도착하였습니다! 프론트엔드, 백엔드, 안드로이드 과정들은 웹 기초 강의를 듣고 아래와 같은 형식으로 페이지를 제작해야 합니다. 프론트 과정만 미션을 하는 것이 아니라 백엔드, 안드로이드 과정도 이 미션을 한다고? 프론트엔드의 자존심을 걸고 백엔드, 안드로이드보다 화려하게 만들겠다 다짐했습니다. 3D 효과를 넣으면 화려하지 않을까? 하는 생각에 3D 효과를 찾아보았고, 아래와 같은 예제를 발견할 수 있었습니다. 이걸..
프론트엔드 2023. 2. 18. 22:44
이전 Prev 1 2 3 Next 다음