세줄코딩

null, undefined, ’‘, 0 을 손쉽게 체크하는 법~ 이래 저래 코딩을 하다보면 null, undefined 에 대한 부분을 체크하는 경우가 허다하다. 특히나 api 통신을 하다보면 해당 부분은 머 거의 달고 살 정도이다. 1. !(not) 연산자 활용 대략 다음과 같은 코딩을 주로 하게 된다. 명확해 보이기도 하다. if( testObj === null ) { // 어쩌고 저쩌고 } if( testObj === undefined ) { // 어쩌고 저쩌고 } if( testObj === '' ) { // 어쩌고 저쩌고 } if( testObj !== null ) { // 어쩌고 저쩌고 } if( testObj !== undefined ) { // 어쩌고 저쩌고 } if( testObj !=..

reduce 활용 1. 합산 const sum = [0, 1, 2, 3].reduce((acc, cur) => acc + cur); console.log("sum=", sum); // sum = 6 //initVal - 이 초기값에 따라 누적값에 대한 처리가 달라진다. //initVal - 숫자대입시 숫자 누적연산이 가능하고 배열 대입시 배열 연산처리 //initVal - 초기값이 없다면 배열의 첫번째 요소 호출 //initVal - 초기값이 설정되지 않고 배열 내부에 오브젝트로 되어 있을시엔 첫번째 오브젝트를 기준으로 // 누적연산되기에 오브젝트에 관련된 메서드등은 처리가 되지만 산술연산등은 성립되지 않으니 주의. let initVal = 0; let objToSum = [{ x: 1 }, { x: 2..

command line 으로 설정하기는 크게 2가지 정도인데.... 결론은 내가 알기론 차이가 없다. 1번째 방법( npm, yarn 각자 기호에 맞게 사용하면 된다 ) # npm 으로 설치시 npm create vite@latest # yarn 으로 설치시 yarn create vite - 위 명령어를 치면 아래와 같이 선택할 수 있는 옵션이 나오는데 그 중에 Customize with create-vue 옵션을 선택하면 vue-router, pinia 등 좀 더 다양한 옵션을 선택 할 수 있다. ( 두번째 설치 방법과 똑같은 선택 옵션 사항들이 나온다. ) 2번째 방법 npm init vue@latest - 두번째 방법은 위 명령어를 치면 바로 처음부터 typescript, vue-router, pi..

지원하는 기능들 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..

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() 메서드는 요소가 ..

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..

storybook 에 @emotion/babel-preset-css-prop 설정 ( storybook + ts + emotion 환경 ) storybook 에서 컴포넌트를 추가하고 작업하는데 흠 잘 되긴 하는데 소스에 emotion 의 style컴포넌트 명이 입력이 되지를 않고 심지어 실행도 제대로 되지 않는 모양새가 펼쳐지고 있었다. styled 컴포넌트 명이 입력된 상태. styled 컴포넌트 명이 입력이 되지 않고 emotion 의 css 및 styled 가 실행되지 않은 상태. 참고로 span 태그에 입력된 영어를 해석해 보면 `css` 함수에서 반환된 개체를 문자열화하려고 했습니다. 직접 사용해서는 안되며(예: `className` prop의 값으로), emotion 에 전달되어 처리할 수 있..