HOME
[HTML/CSS] 스크롤바 표시로 인한 레이아웃 변형 방지하기 - Scrollbar Gutter
[HTML/CSS] 스크롤바 표시로 인한 레이아웃 변형 방지하기 - Scrollbar Gutter
2024.05.11화면에 다 표시할 수 없을 정도로 콘텐츠가 길다면 세로 스크롤바가 생긴다. 그럼 세로 스크롤바의 폭 때문에 콘텐츠를 표시할 영역이 줄어들어 위 이미지처럼 레이아웃이 변형된다. 스크롤바가 생겨서 레이아웃이 변형되는 것을 방지하고 싶다면 scrollbar-gutter 속성을 사용하면 된다. scrollbar-gutter는 브라우저가 스크롤바 영역을 미리 확보하도록 하는 속성이다. 스크롤바 영역을 미리 확보했으므로 스크롤이 생겨도 레이아웃 변형이 없다. scrollbar-gutter: auto | stable && both-edges?.box { padding: 1rem; max-height: 220px; overflow-y: auto; scrollbar-gutter: stable; /* sc..
[TS] 타입스크립트에서 CSS Module 사용하기
[TS] 타입스크립트에서 CSS Module 사용하기
2024.05.11타입스크립트 CSS Module 오류 해결타입스크립트에서 CSS Module을 사용하면 모듈/선언을 찾을 수 없다는 타입 에러가 나온다. src 혹은 컴포넌트 폴더에 아래 내용이 담긴 typings.d.ts 파일을 추가하면 해결할 수 있다. via StackOverFlow// Toggle/typings.d.tsdeclare module '*.module.css' { const classes: { [key: string]: string }; export default classes;} CSS Module 사용법❶ [name].module.css 형태로 CSS 모듈 파일을 작성하고/* Toggle/Toggle.module.css */.toggle-bg:after { /* ... */} ❷ 컴포넌트에서 ..
[React] falsy 값을 사용한 리액트 조건부 렌더링시 주의할 점
[React] falsy 값을 사용한 리액트 조건부 렌더링시 주의할 점
2024.05.11리액트에선 null, undefined, boolean 이렇게 3가지 타입만 렌더링을 건너뛰는 점 기억 자바스크립트에서 0(혹은 -0, 0n)은 6가지 falsy 값 중 하나다. && AND 논리 연산자는 첫번째 falsy 값을 찾아서 반환하고, falsy 값이 없으면(피연산자가 모두 true이면) 마지막 피연산자를 반환한다(반대로 || OR 연산자는 첫 번째 truthy 값을 찾아 반환하고, truthy 값이 없으면 && 연산자처럼 마지막 피연산자를 반환한다).0 && 'bit'; // 0-0 && 'bit'; // -00n && 'bit'; // 0n React에서 조건부 렌더링 코드를 작성할 때 && 연산자를 자주 사용한다. 아래 예시에서 count 변수에 담긴 0은 falsy 값이므로 화면에 아무..
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
[JS] 특정 요소 위치로 스크롤 이동하기 - scrollIntoView
2024.05.11문법특정 요소가 위치한 곳까지 스크롤을 이동하고 싶을 때 element.scrollIntoView 메서드를 이용하면 간편하게 구현할 수 있다. scrollIntoView 메서드는 총 3가지 방법으로 사용할 수 있다. (MDN)element.scrollIntoView(align) ❶ 파라미터 없음 — element가 브라우저 화면 가장 위로 오도록 스크롤(정렬)element.scrollIntoView(); // element.scrollIntoView(true)와 동일 ❷ boolean 파라미터// { block: "start", inline: "nearest" } 옵션과 동일element.scrollIntoView(true); // { block: "end", inline: "nearest" } 옵션과 ..
[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..