DEV 272

[노드17] error:03000086:digital envelope routines::initialization error 노드 버전 다운그레이드로 해결하기

노드 17 에러 갑자기 잘 작동하던 프로젝트 실행이 안되고 에러가 떴다. error:03000086:digital envelope routines::initialization error 찾아보니 노드17 에서 발생하는 문제인 것 같았다. 노드 버전 다운그레이드 하는 방법 https://www.educative.io/edpresso/how-to-downgrade-node-version How to downgrade node version Creator: Nouman Abbasi www.educative.io LTS 버전으로 다운그레이드 sudo npm install -g n sudo n 16.13.2 이렇게 하고 나니 해-결!

DEV/Tips 2022.01.26

[CSS] :not(:placeholder-shown) input에 값이 있을 경우를 나타내는 선택자

시작 input에 값이 있는 경우에만 submit button이 활성화 되도록 요구되는 시나리오는 매우 흔합니다. 그럴때 input에 값이 있는지 없는지를 자바스크립트가 아닌 css만으로 알 수 있는 방법이 있을까 찾아보게 되었습니다. 그렇게 :placeholder-shown 이라는 선택자를 알게 되었습니다. 플레이스 홀더가 보여지는 상태를 나타내므로, 값이 있는 상태라면 플레이스 홀더가 가려질테니 :not(:placeholder-shown)으로 사용해보았습니다. 예제 See the Pen [CSS] :placeholder-shown by zinee (@zineeworld) on CodePen. input 값이 없는 경우 버튼에 pointer-event: none; 속성을 적용해서 버튼의 클릭 이벤트를 ..

DEV/CSS 2021.09.28

[CSS] iOS 사파리, 크롬 height: 100vh 버그 해결 방법

문제상황 iOS 기기 브라우저에서 100vh 를 브라우저의 도구바 영역까지 잡고 있어서 하단에 무언가 배치하면 (이를테면 아래로 버튼이라던가) 가려서 안보이는 현상이 있다. 정확한 영역을 못잡고 있다는 건데 예전에 해결하던 CSS 핵 방법이 지금은 먹히지 않아서 다른 방법을 찾아보았다. 해결방법 https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ The trick to viewport units on mobile | CSS-Tricks Viewport units have always been controversial and some of that is because of how mobile browsers have made things more ..

DEV/CSS 2021.06.16

[CSS] iOS 사파리, 크롬 border-raidus / overflow: hidden 버그

문제상황 비디오 영역의 radius가 iOS 사파리, 크롬에서는 적용되지 않는 현상 iOS 사파리, 크롬 border-raidus / overflow: hidden 버그 https://www.sungikchoi.com/blog/safari-overflow-border-radius/ .vid-box { position: relative; // 또는 isolation: isolate; border-raidus: 8px; overflow: hidden; } 해결방법 본질은 쌓임 맥락 (stacking context) 에 있었다. 가끔 스타일 작업을 하다보면 z-index 위계가 꼬여서 position: relative를 잡아주는 경우가 있는데 이와 같은 맥락이었고, 그것을 쌓임 맥락이라고 부른다는 것을 알게 ..

DEV/CSS 2021.06.15

[Git] Git 권한 5단계 - 비개발자에게 어떤 권한을 줘야할까?

배경 : QA 테스트가 필요한건 물론 지라에 이슈를 생성하지만, 디자이너-마크업개발자 혹은 디자이너-프론트개발자 사이의 간단한 작업들은 깃헙 이슈에 쌓아놓고 일괄처리하고 있다. 회사에서 디자이너 분께서 디자인필터링 후 나오는 피드백(=디자인QA)을 깃헙에 이슈로 남겨달라고 요청을 드렸다. 이 때 처음에 Read 권한만 주셔서 이슈 생성이 불가해서 찾아보니 Triage 권한이 필요하다는 것을 알게 됐다. 결론 : 디자이너분들이 이슈 생성해서 Assign, Lable, Project 설정하려면 최소 Triage 권한은 있어야 함! https://docs.github.com/en/github/setting-up-and-managing-organizations-and-teams/repository-permiss..

DEV/Git 2021.06.15

[HTML] 핵심 웹 요소 <img> 어디까지 알고 있나?

핵심 웹 요소 https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/ 위 문서에서 찾은 키워드와 연관된 링크들입니다. - 이미지와 동영상 요소에 항상 너비 및 높이 크기 속성을 포함하는 것이 좋다. https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ - window.devicePixelRatio https://developer.mozilla.org/ko/docs/Web/API/Window/devicePixelRatio - 트위터도 2x 이미지 제한을 검 https://blog.twitter.com/engineering/en..

DEV/Web 2021.06.15
반응형