분류 전체보기340 [HTML/CSS] 쉐도우 돔(Shadow DOM)으로 스타일 충돌 해결하기 코드로 알아보는 CSS 충돌 다음과 같이 header 컴포넌트(header.vue)와 header 컴포넌트를 사용하는 content(index.vue)영역이 있다. index.vue content의 tittle ... index.css body { width: 100%; height: 100%; } header.vue header tittle header에 글자 색상을 회색으로 바꾸고 싶어서 아래와 같이 header.css를 코드를 수정하면 어떻게 될까? header.css h3 { margin: 0 10px; color: gray; } #header { margin: 0; width: 1000px; height: 50px; background-color: black; display: flex; flex.. 2023. 5. 6. [CI/CD] github actions를 사용해서 npm 배포 자동화하기 git petch ... npm install npm build npm login ... npm publish 번거로운 npm 배포 작업을 자동화하는 방법은 없을까? github actions을 사용해서 npm publish 과정을 자동화해보자 npm package 정보 등록 package.json 정보(v9.6.5 기준) npm 배포를 위해서는 패키지에 대한 기본 정보를 제공하는 package.json가 존재해야 한다. 그 중에서도 패키지명(name)과 버전(version)은 배포를 위한 필수 정보이다. 패키지명(name) 패키지 배포를 위해서는 필수적으로 입력해야하는 정보로 아래와 같은 몇 가지 규칙이 존재한다. 214자 이하여야 한다. (scoped package의 경우 scope 포함) scope.. 2023. 5. 2. [우아한테크][3월] "개발자 원칙" : 제어할 수 없는 것에 의존하지 않기 신청 배경 평소에는 잘 확인하지 않는 개인 메일에 [신청 시작] 3월 세미나 | 테크 리더 3인이 전하는 "개발자 원칙" 이라는 제목이 눈에 띄어 들어가게 됐다. '3월 29일이면 오늘이구먼' 하고 넘어가려다가 눈에 띄인 주요 내용과 추천 대상이 요새 내가 하고 있는 고민과 비슷한 것 같아서 바로 신청해버렸다. 강연 내용 그 중 첫 번째 세션인 인프랩의 이동욱님의 제어할 수 없는 것에 의존하지 않기 라는 강연을 정리해보려 한다. 프로덕트 엔지니어란? 일정은 지키지만 버그가 많은 개발자 VS 일정은 못 지키지만 버그가 없는 개발자 두 가지 중 어떤 개발자가 되는 것이 좋을까? 나카지마 사토시의 '오늘, 또 일을 미루고 말았다.' 라는 책에서는 아래와 같은 말이 나온다. 프로그래머에게 요구되는 것은 100점.. 2023. 4. 16. [Cross Browsing] 모바일 iOS 크롬에서는 WebM을 지원하지 않는다? WebM이란? [Cross Browsing] webm 영상의 투명도를 지원하지 않는 Safari 브라우저WebM 이란? 먼저 WebP를 알아보자. WebP 포맷은 2010년 구글에서 개발한 이미지 포맷으로 웹 환경에서 JPEG 및 PNG 포맷을 대체할 목적으로 개발되었다. 손실 압축과 비손실 압축을 둘 다 지원하며, 흔히doqtqu.tistory.com이전 글 참고이슈 WebM은 크롬에서 구글이 2008년에 VP8을 만들었던 On2 테크놀로지스를 인수하여 비디오 코덱의 컨테이너로 발표한 포맷이며, 컨테이너에 사용되는 영상 코덱과 음성 코덱이 완전히 무료이기 때문에 유튜브에서는 이미 이 포맷을 일부 사용하고 있다. 그렇다면 크롬에서는 WebM이 잘 동작하겠구나! 라고 안일한 생각을 했다. 하지만, 모바일 .. 2023. 3. 29. [Cross Browsing] webm 영상의 투명도를 지원하지 않는 Safari 브라우저 WebM 이란? 먼저 WebP를 알아보자. WebP 포맷은 2010년 구글에서 개발한 이미지 포맷으로 웹 환경에서 JPEG 및 PNG 포맷을 대체할 목적으로 개발되었다. 손실 압축과 비손실 압축을 둘 다 지원하며, 흔히 사용되는 JPEG 및 PNG 포맷보다 압축 효율이 좋다. 또한 애니메이션 GIF 파일을 대체하기 위해, WebP 포맷은 애니메이션 기능도 제공한다. 이미지의 속성에 따라 다르기는 하나, 애니메이션 WebP 파일은 같은 내용의 GIF 파일보다 파일 크기가 1/5 ~ 1/10 정도로 작다. 과거에는 WebP 포맷을 지원하는 브라우저가 많지 않았지만, 최근에는 Chrome, Firefox, Edge 등 주요 브라우저라면 대부분 WebP 포맷을 지원한다. 아이폰의 경우 2020년 9월 출시된 i.. 2023. 3. 14. [버스도착정보] 정적 웹사이트 호스팅하기 (GitHub Pages 사용) [React.js] 버스도착정보 조회 웹 페이지 개발 웹 페이지 설명 버스도착정보 국토교통부 Open API를 사용하여 제작한 버스 정보 안내 웹 사이트, 현재 위치 기준으로 가까운 정류소 정보를 반환, 정류소 별 도착 예정 버스 정보를 조회할 수 있 doqtqu.tistory.com 약 2년 전에 '버스도착정보' 조회 웹 페이지를 개발해서 블로그에 포스팅 했었다. 국가지점번호 사이트와 같이 GitHub Pages로 배포했더니 Mixed Content 에러가 발생해서, 간단한 Node 서버를 만들어 헤로쿠를 사용해 배포했다. 하지만, 2022년 11월 28일 이후로 헤로쿠 서비스가 유료로 전환되었는데.. 여기저기 Node.js를 무료로 호스팅할 수 있는 다른 서비스를 찾아보다가, 코드를 다시 살펴보니 굳.. 2023. 2. 17. 이전 1 2 3 4 5 ··· 57 다음 반응형
