리액트 스토리북 실행시 scss 에러 해결하는 방법jsReact Storybook scss import error 리액트 개발 환경에서 스토리북 사용시 scss 파일을 불러올때 아래처럼 `Module parse` 에러가 날때가 있다. scss 로더 관련 애드온 설치가 필요하며 `.stroybook…April 27, 2022
HTML Head meta 태그 종류jsHTML 작성시 메타태그 종류와 의미에 대해 알아봅시다. meta charset : 웹 사이트의 인코딩을 정의합니다. utf-8이 표준입니다. meta name = “viewport” : 모바일 반응과 관련된 뷰포트 설정 width = device…June 05, 2021
Design System & ComponentitCollection of design systems & creating reusable design systems 재사용 가능한 디자인 시스템 만들기 디자인 시스템 Design System A Design System is a set of…September 11, 2020
Javascript Some, EveryjsHow to properly use Javascript Some 자바스크립트 Some, Every 사용하기 Some some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다. js Some example…September 10, 2020
Javascript Find, indexOf, includesjsHow to properly use Javascript Find 자바스크립트 find 로 배열에서 요소 찾기 Find find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. js Find example…September 10, 2020
Detect Dark mode in CSS & JavascriptjsDark Mode How do I detect dark mode using JavaScript & CSS…September 09, 2020
Lazy Loading & Code SplittingjsreactHow to set up lazy loading components in React 리액트 자바스크립트 코드 분할 & 레이지 로딩 적용 성능 최적화하기 레이지 로딩(lazy loading…September 08, 2020
Refactoring javascript 2jsClean coding in JavaScript 2 리팩토링 자바스크립트, 클린 코드 작성하기 2 Refactoring js example code destructuring, spread operator, async-await, template…September 08, 2020
Refactoring javascript 1jsClean coding in JavaScript 리팩토링 자바스크립트, 클린 코드 작성하기 Using the map function before after Avoid callback hell with async/await before after…September 08, 2020
Javascript Map, Filter, ReducejsHow to properly use Javascript Map, Filter, and Reduce 자바스크립트 고차함수 map, filter, reduce 사용하기 Sample Player list Array Map map…September 08, 2020
CSS variablesitHow to use Custom properties CSS variables var() Custom properties (—*): CSS variables 사용자 지정 속성, 또는 “CSS…September 08, 2020
Target vs currentTarget 차이jsDifference between Target and currentTarget currentTarget Target 차이 Difference Property Click the inner square Click outside of the inner…September 08, 2020
Git Commit messagesitPatterns for writing better git commit messages 더 나은 git 커밋 메시지를 작성하기 위한 패턴 Types asdasdasd : A new feature 새로운 기능 개발 : A bug fix…September 07, 2020
React useMemo 값 재사용하기reactuseMemo 된 값을 재사용 의존성 값 a, b 가 변경 되었을때 재계산하여 렌더링 시 고비용 계산을 방지 배열이 없을 경우 렌더링 때마다 새 값 계산 메모이제이션(memoization…September 06, 2020
React useCallback 함수 재사용하기reactuseCallback 된 함수를 재사용 useCallback example 메모이제이션(memoization…September 06, 2020
Useful Javascript ExpressionjsIIFE: Immediately Invoked Function Expression Self-Executing Anonymous Function 으로 알려진 디자인 패턴 즉시 실행 함수 표현: 정의되자마자 즉시 실행되는 Javascript…September 05, 2020
How to detect iPhone X device with JavaScriptjs자바스크립트로 아이폰X 디바이스 감지하는 방법 IPhoneX Resolution 아이폰X 해상도 IPhone X : 1125 X 2436 IPhone XS : 828 X 1792 IPhone XMAX : 1242 X 2688September 04, 2020
Amount Thousands Add comma unitsjs금액 천 단위 콤마 추가하는 방법 toLocaleString type이 number인 값에서 메소드를 인자 없이 호출하면 자동으로 String으로 형 변환된 뒤 콤마 생성 기본적으로 소수점 3자리까지만 표현 더 많이 소수점을 표현하고 싶을시…September 03, 2020
React Custom Hook useStickyreactReact useful custom hooks useSticky getBoundingClientRect The method returns the size of an element and its position relative to the…September 03, 2020
How to use replace like replaceAllitjsreplace를 replaceAll 처럼 사용하여 문자열 치환하는 방법 정규식 이용해서 gi 로 감싸기 슬래시 / 바꾸기 여러 문자 바꾸기 정규식의 gi 의미 g : 발생할 모든 pattern에 대한 전역 검색 i : 대/소문자 구분 안함 m…September 03, 2020
Resolving TypeScript syntax errorsitjs타입스크립트 사용시 문법에러 해결하기 userRef Object is possibly ‘null’. window.property Error [] as any Argument of type ‘any’ is not assignable to…September 01, 2020
Difference between slice and splice and how to usejsslice 와 splice 차이 및 사용방법 slice begin 부터 end까지 (end 미포함) end 생략시 : 배열의 끝까지 ( length) 음수 : ex) slice(2, -1) 세번째부터 끝에서 두번째 요소까지 splice…September 01, 2020
재택근무 잘하는 8가지 방법life코로나로 인해 재택근무를 하고 있는 기업이 늘고 있다. 재택 근무시 시간을 효율적으로 활용하는 방법에 대해 알아보자.…September 01, 2020
일리캡슐 싸게 구매하는 방법life코로나로 인해 일리캡슐도 수급이 어려운지 자주 품절이 되고 있는 것 같다. 지마켓에 롯데백화점 혹은 신세계백화점이서 판매하는 일리캡슐 상품 상세를 자주 들어가보면 재고가 가끔 업데이트 된다. 오늘은 재고가 있어서 두캔 (1캔당 21 *…August 25, 2020
뽀모도로 기법 활용하기life뽀모도로 기법이란 무엇일까 25분 동안 한가지 일에 전적으로 집중하고 5분 휴식하는 것이다. 해야 할 일을 정하고, 25분 내외의 시간에 타이머를 맞추고 그 일에 집중한다. 알람 타이머가 울리면 5 ~ 1…August 02, 2020
부동산 용어 LTV, DTI, DSR 정리lifeLTV( Loan To Value) 주택가치 대비 대출 비율 주택담보인정비율(LTV) = 주택담보대출 취급한도 / 주택 가격 (주택담보대출 취급한도 = 주택 가격 * 주택담보인정비율(LTV)) 가령 2억짜리 집의 LTV가 70% 라면 최대…July 18, 2020
보금자리론 life신규주택구입용도, 전세자금반환 및 기존 주택담보 대출 상환 용도로 신청 대출 받은 날부터 만기까지 안정적인 고정금리가 적용되어 향후 금리 변동의 위험을 피하고자 하는 고객에게 적합한 상품 1. u…July 17, 2020
코로나바이러스 예방 수칙 health주요 예방 수칙 1.비누를 이용하여 물에 30초 이상 꼼꼼히 자주 손 씻기! 평소 손 씻기를 생활화하세요. 외출 후나 사람이 많이 모이는 장소를 다녀오신 후에는 반드시 손을 씻으세요. 기침이나 재채기 후에는 꼭 손을 씻으세요.…April 21, 2020
코로나바이러스 증상health현재 발견된 코로나 바이러스 증상은 다음과 같다. 주요 증상 발열 (37.5도 이상의 미열) 호흡기 증상 (기침, 인후통) 폐렴증상 기타 증상 마른기침 기침가래 호흡곤란 근육통 중국에서 정리한 코로나 확진자 주요증상 발열 (87.…April 20, 2020
연차수당과 계산법life연차수당이란? 연차수당은 ‘연차유급휴가 근로수당’ 라고도 한다. 근로기준법 제60조 내지 제62조에 규정되어 있는 연차유급휴가제도로서 1년간의 근무실적에 따라 발생하고 그로부터…March 29, 2020
효과적인 시간관리 방법life성공한 관리자들은 시간관리를 효과적으로 하기 위해서 실제로 시간을 어디에 사용하고 있는지 확실히 파악해야 한다는 걸 안다. - 피터 드러커 (Peter F. Druker…March 27, 2020
웹 크롤링이란?it가공되지 않은 웹상의 수많은 정보들 중 필요하고 의미가 있도록 만든 정보를 찾는 데는 많은 시간이 필요하다. 복잡한 검색과정 없이 관련 정보를 쉽고 편리하고 찾을 수 있는 기술 크롤링에 대해 알아보자. 웹 크롤러(Web crawler…March 24, 2020
npm & yarn 명령어itNpm (Node Package Manager) 노드 패키지 매니저 자바스크립트 프로그래밍을 위한 패키지 관리자 자바스크립트 런타임 환경 node.js의 기본 패키지 관리자 Yarn…March 10, 2020