세줄코딩

지원하는 기능들 Hot Module Replacement vite는 기본적으로 ESM를 통해 HMR API를 제공합니다. HMR 기능이 있는 프레임워크는 API를 활용하여 페이지를 다시 로드하거나 애플리케이션 상태를 날려버리지 않고 즉각적이고 정확한 업데이트를 제공할 수 있습니다. vite는 Vue Single File Components, React Fast Refresh 또는 @prefresh/vite과 같은 First-party HMR* 모듈을 제공하고 있습니다. (* Vite에서 직접 제공하는 HMR 모듈) 물론, create-vite에서 제공하는 템플릿 안에는 HMR 모듈이 포함되어 있기 때문에 굳이 위와 같은 방법을 따르지 않아도 됩니다. TypeScript vite는 .ts 파일에 대한 컴파..

Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 아래와 같은 환경 변수에 접근이 가능하다. import.meta.env.MODE: {string} 현재 앱이 동작하고 있는 모드 import.meta.env.BASE_URL: {string} 앱이 제공되는 베이스 URL이며, 이 값은 base 설정에 의해 결정. import.meta.env.PROD: {boolean} 앱이 프로덕션에서 실행 중인지 여부. import.meta.env.DEV: {boolean} 앱이 개발 환경에서 실행 중인지 여부이며, 항상 import.meta.env.PROD와 반대되는 값 import.meta.env.SSR: {boolean} 앱이 서버에서 실행 중인지 여부. 혹은 .en..

자바스크립트 함수 성능 비교 간단하게 함수 성능 비교시 테스트 해 볼 수 있는 사이트이다. 물론 window.performance.now() 등을 이용해서 살펴 볼 수도 있겠지만 아무래도 코드를 또 짜야하기에 그냥 이것저것 생각할 필요없이 아래 링크로 들어가 살펴보는게 걍 편하다. 복잡하지 않고 심플하다. https://jsbench.me/ JSBench.me - JavaScript performance benchmarking playground jsbench.me

fatal: 정방향이 불가능하므로, 중지합니다. 원인은 리모트 저장소가 로컬보다 앞에 있고 merge 시에 충돌이 일어나서 안된다는 것 git config pull option을 설정이 필요. 아래 처럼 리베이스해서 history 를 해도 되지만 아예 에러 났던 터미널에 나온 가이드 코드를 쳐도 된다. git pull --rebase 터미널에서 아래와 같이 안내가 나온다 git config pull.rebase false # merge (the default strategy) git config pull.rebase true # rebase git config pull.ff only # fast-forward only 자동 머지와 병합 충돌에 대한 기존에 conflict 를 발생해 주는 방식은 아래와 같..

clip-path maker 오호 잘 쓸 듯 https://bennettfeely.com/clippy/ Clippy — CSS clip-path maker About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape bennettfeely.com linearGradient https://developer.mozi..

Element.matches() 프론트엔드를 하다보면 이벤트 클릭을 많이 할 수 밖에 없다. 그럴때 여러 엘리먼트가 중첩되어 있는 경우 타겟을 골라내는 역활을 해주는게 바로 이 Element.matches() 이다. https://developer.mozilla.org/en-US/docs/Web/API/Element/matches Element.matches() - Web APIs | MDN The matches() method of the Element interface tests whether the element would be selected by the specified CSS selector. developer.mozilla.org Element 인터페이스의 matches() 메서드는 요소가 ..

[책리뷰] 인문학도 개발자되다. 2018년 11월 30일에 출간 되었으니 음 4년 정도 된 것 같다. 이제 와서 산 거는 그냥?? 좀 정신 좀 차릴려고 or 더 내용을 보고 싶어서 정도....사실 그전에 카카오에서 브런치라는 앱으로 해당 책에 내용을 먼저 접했었다. 읽을 당시에도 와 이 양반 대단한데! 라는 감탄사가 나오면서 질투도 느꼈었다. 그러면서 매번 머리 속을 스치는 짧막한 문장 '역시 영어가 중요해!!' 그렇게 매번 생각이 들어도 도통 영어에 집중하지 못했던 나를 되돌아 보며 한탄했지만... 머 어쩌겠나 ~ 내 삶이 이런 걸...올해는 후회없는 삶을 살아보겠노라고 퇴사하고 벌써 2달을 훌쩍 넘겨 버렸다. 이 책을 읽고 좀 정신 좀 차릴라고 했는데....정신이 확 드는 것도 있지만 왜 이렇게 살아..

React 에서 emotion 사용시 Unknown property 'css' found 라는 에러가 발생할 때가 있다. 결론은 아래 코드를 .eslintrc.json 에 추가해 두면 된다. { "rules": { "react/no-unknown-property": ["error", { "ignore": ["css"] }] } } 아래 링크에서 해당 내용을 확인 할 수 있다. https://emotion.sh/docs/eslint-plugin-react Emotion – eslint-plugin-react The react/no-unknown-property rule from eslint-plugin-react will produce an error if the css prop is passed to a..