HOME
[React] 리액트 Render Props 패턴 2가지 사용 방법
[React] 리액트 Render Props 패턴 2가지 사용 방법
2024.05.11children Prop을 이용해 컴포넌트 합성(component composition) 형태로 작성하면 부모 컴포넌트를 수정하지 않고도 자식 컴포넌트를 자유롭게 추가해서 사용할 수 있다. 일반적으로 데이터(상태) 공유는 상태 끌어올리기 방법이 가장 간단하지만 최상위 컴포넌트가 데이터(상태)와 모든 하위 컴포넌트를 갖고 있으면 해당 상태와 관련 없는 모든 하위 컴포넌트도 렌더링에 영향을 주는 단점이 있다(상태 끌어올리기로 부모 컴포넌트 상태가 변경돼서 업데이트하면 하위 컴포넌트도 다시 렌더링 하므로). 이땐 Render Props 패턴을 활용할 수 있다. 어떤 컴포넌트를 렌더링할지에 대한 로직을 상위 컴포넌트가 결정하고, 하위 컴포넌트는 자신이 관리하는 상태를 인자로 받은 render(혹은 childre..
[TS] 타입스크립트 타입 가드 is / asserts 키워드 차이점
[TS] 타입스크립트 타입 가드 is / asserts 키워드 차이점
2024.05.10TL;DRparameterName is Type : 조건문에서 사용 (if문으로 타입을 분기 처리할 때 사용)asserts parameterName is Type : 예외를 발생시킴 (스코프 내에서 유효한 타입인지 판단할 때 사용) is 키워드타입스크립트에서 타입 범위를 좁혀나가는 작업(기능)을 타입가드라고 부른다. 간단한 타입은 in, typeof 키워드 등을 사용할 수 있지만 ➊타입이 복잡하거나 ➋타입 체크 로직을 재사용하고 싶을 땐 사용자 정의 타입 가드 함수를 만들어서 사용한다. 타입 가드 함수는 리턴문에 is 키워드를 이용해서 “어떤 인자는 어떤 타입이다” 라는 값(타입 명제/술부; Predicate)을 리턴하는 함수라고 볼 수 있다. 💡 술부(Predicate; 谓词)란? 주어의 상태, 성질..
[DevTools] 개발자 친화적인 터미널 LS — PLS
[DevTools] 개발자 친화적인 터미널 LS — PLS
2024.05.10pls는 개발자 친화적인 기능을 가진 이쁘고 강력한 터미널 ls 툴이다. pls에서 p는 아래 의미를 포함한다.Pretty (the output from pls surely looks better)Powerful (pls has lots of features and endless customisation)Programmer (pls is geared towards developers)Professional (pls can be extensively tweaked by the pros)Python (pls is written in Python!) 쉬운 사용법, 폴더/파일 아이콘 표시, 프로그래밍 언어별 파일명 색상 구분(*.js 파일 노락색으로 표시 등), 중요 파일은 굵게 혹은 밑줄로 표시, 중요하지 않..
[HTML/CSS] 펼침/접힘 Transition 효과와 요소 숨김 방식 차이점
[HTML/CSS] 펼침/접힘 Transition 효과와 요소 숨김 방식 차이점
2024.05.10상황 설명 및 해결 방법CSS의 transition 속성은 요소의 상태 변화에 따른 시각적인 변화를 점진적으로 보여주기 위해 사용한다. 그러나 display 속성이 none에서 block 으로 변경될 때는 transition 속성을 사용해서 이 변화를 표현할 수 없다.display: none 속성은 렌더 트리에서 요소를 완전히 제거하여 화면에서 사라지게 만들고, 이로 인해 어떠한 CSS 속성도 적용되지 않는다. 렌더 트리에서 사라지면 요소의 상태 변화를 추적할 수 없기 때문에 transition 변화가 시작되는 지점 역시 찾을 수 없다.이 문제는 2가지 방법으로 해결할 수 있다.animation + display 사용 : animation 속성은 요소의 상태 변화와 상관없이 애니메이션 실행transiti..
[HTML/CSS] 구글 폰트 사용 방법 / CSS에서 웹폰트 사용하기
[HTML/CSS] 구글 폰트 사용 방법 / CSS에서 웹폰트 사용하기
2024.05.10CSS 파일 최상단에 @import 구문을 사용해서 폰트를 불러오면 CSS 파일이 완전히 로드되고 파싱될 때까지 리소스 로드가 지연돼서 성능 저하를 초래할 수 있다. 반면, HTML 안에서 태그를 통해 폰트를 불러오면 여러 리소스를 병렬로 로드할 수 있어 더 효과적이다. 실제로 방식이 @import 보다 1.3~1.6초 정도 더 빠르게 폰트를 로드한다고 한다. 구글 폰트 CSS 파일 가져오기 팁사용하고 싶은 구글 폰트 이름을 주소의 family 값에 입력하면 Font Family CSS 파일을 가져올 수 있다. 참고로 display=swap 파라미터는 폰트 파일 로드를 기다리는 동안 텍스트가 보이지 않는 현상을 방지 하기 위해 대체 폰트를 보여주는 옵션이다. 그 외에 wght, italic 등 여..
[DevTools] 구글 크롬 디자인 모드 (Design Mode)
[DevTools] 구글 크롬 디자인 모드 (Design Mode)
2024.05.10파이어폭스, 사파리, 엣지 등 대부분 브라우저에서 디자인 모드를 지원한다. 크롬 콘솔에서 디자인 모드를 활성화하면 코드를 직접 수정하지 않고도 위지윅 에디터처럼 요소 콘텐츠를 수정할 수 있다. 이미지 잘라내기 / 붙여 넣기 등의 작업도 가능하다. 물론 수정했던 내용은 새로고침하면 원상복귀 된다. 크롬 개발자 도구(F12)를 열고 document.designMode 값을 'on'으로 바꿔주면 디자인 모드가 활성화 된다. document.designMode = 'on'; // 디자인 모드 켜키document.designMode = 'off'; // 디자인 모드 끄기 글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요
[JS] Lodash Import 용량 줄이기 팁
[JS] Lodash Import 용량 줄이기 팁
2024.05.10Lodash 모듈을 import할 때 import { cloneDeep } from 'lodash' 이렇게 작성 하면 풀버전 모듈을 가져온다. 몇몇 함수를 사용하기 위해 불필요한 import를 하는 셈이 된다. 참고로 Lodash는 웹팩의 프로덕션 빌드로 번들링하면 25kb 정도 차지한다고 한다. 30kb 정도의 React DOM, Vue.js와 비교해도 꽤 무거운편이다.import { cloneDeep } from 'lodash' // 73.15 kB (gzip: 25.42 kB) import 구문을 아래처럼 작성하면 필요한 함수만 불러올 수 있다. 하지만 여러 Lodash 함수를 연속적으로 사용하는 chaining 할 수 없는 단점이 있다. 따라서 아래 방법은 단일 함수를 사용할 때 적합하다.impo..
[React] background-image에 svg 사용하기 (inline SVG)
[React] background-image에 svg 사용하기 (inline SVG)
2024.05.10위치별 파일 경로 기준JSX 엘리먼트 속성의 루트 폴더 기준 : publicCSS 파일 루트 폴더 기준 : src파일 최상단 import 구문 : src 폴더만 처리 가능(public 폴더에 있는 파일은 불가) 태그 src 속성(JSX 태그 속성)에 src 폴더에 있는 이미지 파일을 지정하려면…파일 최상단에서 불러온 이미지 파일을 src 속성에 할당하거나,src 속성 안에서 require() 사용 e.g. 문제 상황 JSX 엘리먼트 속성의 루트 폴더 기준은 public 폴더므로 이미지 파일이 src 폴더에 있다면 파일 최상단에서 이미지 파일을 import 한 후 인라인 스타일 url() 함수에 사용할 수 있다. *.png, *.webp 같은 이미지 파일은 아래 방법으로 잘 작동한다.// src/asse..
[JS] toISOString() 메서드 오프셋 교정하기 (UTC 시간대 변경)
[JS] toISOString() 메서드 오프셋 교정하기 (UTC 시간대 변경)
2024.05.09Date.toISOString() 메서드는 Date 객체를 ISO 8601 형식의 UTC 시간으로 변환한다. 즉, 어떤 값이 들어오든 항상 UTC+0 시간으로 변환한 값을 반환한다는 의미다. 한국은 UTC 기준시보다 9시간(540분) 빠르기 때문에(+9시간) toISOString() 메서드가 반환하는 시간과 "표면적인" 차이가 발생한다. 예를들어 현재 한국 시간이 2022년 7월 8일 01시 56분이라면 toISOString 메서드는 이보다 9시간 늦은 2022-07-07T16:56... 를 반환한다.// +09:00은 UTC 기준시 보다 9시간 빠르다는 것을 명시한 것const localDate = new Date('2022-07-08T01:56:00+09:00');// 출력값: 2022-07-07T1..
[Git] PR / Commit 메시지 키워드로 이슈 연동 및 종료하기
[Git] PR / Commit 메시지 키워드로 이슈 연동 및 종료하기
2024.05.09키워드 기능 소개💡 Special Keyword 기능 작동 조건PR 타겟이 레포지토리의 default branch 일 때PR의 base가 default branch 일 때 PR Description 혹은 Commit 메시지(Subject 혹은 Description)에 키워드 #이슈번호를 추가하면 입력한 이슈가 자동으로 링크되며, 해당 Commit 혹은 PR을 기본 브랜치(default branch)에 Merge 했을 때 링크한 이슈도 자동으로 닫힌다.git commit -m "Feat: order filter close #15" 참고로 브랜치 이름에 이슈 번호를 기재하면(#889-feat-…) 자동으로 입력한 이슈를 참조한다. 커밋을 추가하면 해당 이슈에 아래 같은 레퍼런스 히스토리가 남는다.userA..
[JS] 로케일 통화로 숫자 포매팅 / 천 단위마다 콤마 추가하기
[JS] 로케일 통화로 숫자 포매팅 / 천 단위마다 콤마 추가하기
2024.05.09toCurrency숫자 타입 n 을 인자로 받아 지정한 통화 포맷을 반환하는 toCurrency 함수. Intl.NumberFormat 메서드를 사용하면 국가/통화에 대한 sensitive formatting을 활성화할 수 있다. const toCurrency = (n, currency, LanguageFormat = undefined) => Intl.NumberFormat(LanguageFormat, { style: 'currency', currency, }).format(n);// €123,456.79 | currency: Euro | currencyLangFormat: LocaltoCurrency(123456.789, 'EUR'); // $123,456.79 | currency: ..
[HTML/CSS] 스크롤 기능은 유지하면서 스크롤바 숨기기
[HTML/CSS] 스크롤 기능은 유지하면서 스크롤바 숨기기
2024.05.09overflow: hidden 속성으로 스크롤바를 숨길 수 있지만 스크롤 기능이 작동하지 않는다. 스크롤 기능은 작동하면서 스크롤바만 시각적으로 숨기려면 아래 스타일을 적용하면 된다(더 자세한 내용은 W3Schools 참고)./* Chrome, Safari, Edge, ... */.no-scrollbar::-webkit-scrollbar { display: none; }.no-scrollbar { -ms-overflow-style: none; /* IE */ scrollbar-width: none; /* Firefox */}::-webkit-scrollbar : Blink, WebKit 렌더링 엔진 기반의 브라우저에서만 사용할 수 있다.⚠️ 아직 표준이 아니므로 Production에서 사용할..