개발일지

비주얼이 주가 되는 프로젝트를 맡게 되었다. 별도의 프론트엔드 담당자 없이 혼자서 일단은 진행해 볼 예정이라 스벨트를 써보기로 마음 먹었다. 3년 전부터 알고는 있었지만 실제 프로젝트에 써본 적은 없었기 때문에 기대가 됐다. 스벨트(Svelte)란? Svelte는 2016년 출시한 오픈 소스 프론트엔드 웹 프레임워크이다. 기존의 React나 Vue.js 등의 널리 알려진 웹 프레임워크와 달리, 가상 DOM을 사용하지 않으며 빌드 단계에서 구성 요소를 컴파일하여 성능이 향상되었다. Svelte - 나무위키 이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외) 기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의..

노드 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 이렇게 하고 나니 해-결!

Spline 3D Design Tool 스플라인 첫 작품! https://my.spline.design/qoozingee-65f610b68ea082651659dccd31e403d1/ qoozingee my.spline.design https://linktr.ee/splinetool @splinetool | Linktree Spline - Online 3D Design Editor linktr.ee

정말 정말 오랜만에 그려보는 CSS 드로잉! 귀염뽀짝한 춘식이를 그려봤습니다 :) See the Pen [CSS Drawing] Choonsik of Kakao Friends by zinee (@zineeworld) on CodePen. 영상 풀버전

Design for Safari 15 - WWDC21 - Videos - Apple Developer Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for... developer.apple.com Theme Color Safe area 확장 https://developer.mozilla.org/en-US/docs/Web/CSS/env() env() - CSS: Cascading Style Sheets | MDN The env() CSS function can be used to insert the value of a user ..

시작 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; 속성을 적용해서 버튼의 클릭 이벤트를 ..

문제상황 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 ..

문제상황 비디오 영역의 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를 잡아주는 경우가 있는데 이와 같은 맥락이었고, 그것을 쌓임 맥락이라고 부른다는 것을 알게 ..

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

핵심 웹 요소 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..