개발자의 주머니 (52) 썸네일형 리스트형 Shadow DOM 스타일링하는 방법 내부에서 shadow dom 스타일링 하기 1. :host 선택자 See the Pen Untitled by leepro (@leepro225) on CodePen. 2. :host() 를 이용해 테마 적용하기 See the Pen Untitled by leepro (@leepro225) on CodePen. 외부에서 shadow dom 스타일링 하기 1. var 이용하기 See the Pen Untitled by leepro (@leepro225) on CodePen. 스타일 상속 및 재설정하기 resetStyleInheritance (deprecated) false - 디폴트. 상속 가능한 CSS 속성들이 상속을 유지합니다. true -shadow boundary에서 상속가능한 속성들을 initial.. Shadow Dom 이란? 웹 컴포넌트란 ? - Custom Element - Shadow Dom - HTML Template - ES Module 이 네 가지 명세를 결합해서 - 스타일링이 캡슐화되고 (Shadow Dom), - 스탬프를 찍어내듯이 여러번 사용 가능한 (HTML Template), - 고유한 태그를 (Custom Element) - 일관된 방식으로 통합하여 사용 (ES module) 가능하도록 만든 컴포넌트이다. 웹 컴포넌트에 있어서 Shadow DOM의 역할은? DOM API는 자체적으로 캡슐화를 지원하지 않는다. 캡슐화를 지원하지 않는 다는 것은 스타일 정보가 다른 트리 요소로 누출될 수 있기 때문에 커스텀 요소를 개발하기 어렵고, id가 다른 요소간에 겹칠 수 있음을 의미한다. 캡슐화는 웹 컴포넌트의 중요한.. Web Component Introduction 번역 - 웹 컴포넌트 소개 이 글은 WEBCOMPONENTS.ORG 의 글을 번역한 것입니다. 소개 웹 컴포넌트란? 웹 컴포넌트는 웹 페이지에 재사용 가능하고 캡슐화된 새로운 커스텀 컴포넌트를 만들 수 있게 도와주는 웹 플랫폼 API 세트 입니다. 웹 컴포넌트 기반으로 만들어진 커스텀 컴포넌트와 위젯은 최신 브라우저에서 작동하고, HTML과 함께 작동하는 모든 Javascript 라이브러리 또는 프레임워크와 함께 사용할 수 있습니다. 웹 컴포넌트는 기존의 웹 표준을 기반으로 합니다. 웹 컴포넌트를 지원하는 기능이 현재 HTML과 DOM 스펙에 추가되고 있어, 웹 개발자는 쉽게 HTML을 커스텀 동작과 캡슐화된 디자인을 가진 새로운 엘레멘트로 확장할 수 있습니다. 명세 웹 컴포넌트는 네 개의 주요 명세에 기반합니다. Custom E.. 웹 컴포넌트란? (Web Component, custom element, shadowdom, template...) 웹 컴포넌트란? 바닐라 JS/HTML/CSS 등 웹표준 기반 언어를 사용하여 재사용 가능한 구성 요소를 만드는 APIs 무엇을 할 수 있을 까? 프레임워크에 종속되지 않는 독립적이며 재사용 가능한 컴포넌트 라이브러리 만들기 장점 - 커스텀화 - 재사용화 - 캡슐화 필수 개념 Custom element HTML을 확장하여 새롭게 커스텀 엘레멘트를 만들 수 있도록 지원하는 JS APIs. 라이프사이클도 지원. class AppDrawer extends HTMLElement { ... } window.customElements.define('app-drawer', AppDrawer); Custom Elements LifeCycle Methods - constructor() : 엘레멘트의 인스턴스가 생성되거나 .. terminal에서 code . 으로 vscode 열기 터미널에서 해당 파일을 바로 vscode로 여는 방법 1. vscode를 켜고 command + shift + p를 눌러 'shell command'를 검색하면 아래의 그림처럼 code 로 path를 설정하기가 나온다. 2. 가이드를 따라 설치를 완료하면 끗! 해당 경로에서는 .으로 , 직접 파일명을 써줘도 된다. code . code ~/.zshrc zsh: command not found: brew 에러 homebrew 설치 후 'zsh: command not found: brew'가 나온다면, path 설정이 안되어서 brew 명령어를 찾지 못하는 것이다. 터미널에서 아래 명령어로 zsh 설정 파일을 연다. vi ~/.zshrc zsh shell이 brew의 경로를 알 수 있도록 아래의 코드를 넣어준다. export PATH=/opt/homebrew/bin:$PATH 터미널을 껐다 켜준다. Netlify 배포방법 1. 설치하기 npm install netlify-cli -g netlify deploy 2. 회원가입 후 승인 3. Create & configure a new site 4. Team & Site name 설정 5. publish directory = build로 클라이언트 측 라우팅 지원 public/_redirects 파일을 생성하고 /* /index.html 200 6. draft url 로 최종 결과물을 확인하고, 프로덕션 모드로 배포 netlify deploy --prod https://create-react-app.dev/docs/deployment#netlify Deployment | Create React App npm run build creates a build directory wi.. Git hub page 배포 방법 1. package.json에 homepage를 추가 "homepage": "https://myusername.github.io/my-app", "homepage": "https://myusername.github.io", "homepage": "https://mywebsite.com", homepage 필드를 사용하여 빌드된 HTML 파일의 루트 URL을 결정 2. gh-pages 설치 및 scirpt 추가 npm install --save gh-pages yarn add gh-pages 3. package.json 에 스크립트 추가 "scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build", "start": "react-s.. 뷰 프로젝트 세팅 가이드 https://msko.tistory.com/65 Vue CLI 없이 Wepack으로 프로젝트 구성(+ ESLint) 1. Vue package 설치 npm i vue@next npm i vue 로 설치 시, Vue2 버전이 설치됨 기본적은 Vue의 문법을 사용하는 용도 2. .Vue 파일을 관리하기 위한 Package 설치 npm i -D vue-loader@next vue-style-loader @v.. msko.tistory.com { "name": "vue-setting", "version": "1.0.0", "description": "bolier settings for vue", "main": "index.js", "scripts": { "start": "SET NODE_ENV=developm.. 리액트 프로젝트 세팅 가이드 1. 프로젝트 폴더 생성 및 초기화 mkdir my-project cd ./my-project npm init 결과 : 프로젝트 루트에 package.json 파일 생성 2. 리액트 설치 npm install react react-dom yarn add react react-dom react : 리액트 라이브러리 react-dom : 리액트 엘리멘트 렌더링 라이브러리 3. 바벨 설치 npm install -D @babel/core@7 @babel/preset-env@7 @babel/preset-react@7 @babel-core : babel의 core 코드 @babel-preset-react : jsx를 javascript로 트랜스파일링 @babel-preset-env : es6+ 문법을 구브라우저에서.. 이전 1 2 3 4 5 6 다음
프론트엔드 개발자의 주머니에는 뭐가 들었을까?
