프론트엔드

1. 작성 계기 LocalStroage 값을 get, set 할 수 있는 훅을 만들었다. 만들면서 고려한 부분은 다음과 같다. LocalStroage 값을 변경했을 때 같은 LocalStroage를 바라보는 컴포넌트들도 동기화되어야 한다. 같은 탭이 아닌 다른 탭에서도 1번이 적용되어야 한다. 2. 로직 작성 기본적으로 LocalStorage는 Web API이기 때문에 useEffect에서 호출하여야 한다. 눈여겨볼 부분은 다음과 같다. window 환경에서만 동작하도록 가드: L16~18, L36~38 WindowEventMap 타입에 "local-storage" 커스텀 이벤트 타입 추가: L4~8 storage, local-storage 이벤트 발생 시 동기화를 위해 updateStorageChang..

1. 번들 사이즈 최적화를 해야하는 이유 프로젝트를 빌드하면 흩어져있던 코드들을 웹팩을 이용해 하나(번들)로 묶을 수 있다. 프로젝트 개발 초기에는 번들의 크기가 작아 괜찮지만, 개발이 진행될수록 번들파일이 커져서 유저들이 번들파일을 다운받기위해 기다리는 시간이 늘어나게 된다. 대기시간이 늘어나면 그만큼 사용자 이탈율도 증가한다. 따라서 적절한 방법을 통해 번들 사이즈를 줄일 필요가 있다. 2. BundleAnalyzerPlugin 적용하기 BundleAnalyzerPlugin은 웹팩으로 만든 번들 파일을 분석해주는 웹팩 플러그인이다. 설치 yarn add -D webpack-bundle-analyzer 설정 웹팩 설정 BundleAnalyzerPlugin은 웹 서버로 실행하거나 빌드할 때 기본적으로 함..

회원가입 폼에서 주로 볼 수 있는 필수입력사항 * 별표시를 렌더링하고 싶을 땐 가상요소(pseudo-Element)를 이용할 수 있다. &::after { content: '*'; color: '#ff0000'; } styled-components를 이용한다면 믹스인을 만들어서 사용하면 편하다. import { css } from 'styled-components'; export const RequiredStar = (position: 'before' | 'after') => css` ${position === 'before' ? css` &::before { content: '*'; color: ${({..

📖 KDC 한국십진분류표 📖 kdc-table-yogjin.vercel.app KDC 한국십진분류표를 편하게 볼 수 있는 웹페이지입니다. KDC 한국십진분류표 6판 기준으로 만들었습니다. 맨 오른쪽 요목을 클릭하면 클립보드에 복사됩니다. 버그제보, 업데이트 수정 요청 모두 환영합니다.

1. 문제 상황 React에서 기존 태그를 감싼 Custom Component를 만들때, 기존 태그의 속성을 override하고 싶은 경우가 있다. 그때 styled-components 를 이용하는 경우 어떻게 타입 선언을 해야할까? 2. 방법 적당한 예시와 함께 보자. input 태그의 size 속성은 input의 width를 결정한다. 우리가 만들 Custom Component인 Input은 size 속성에 따라 다른 padding 을 설정하는 것으로 바꾸고 싶다. 거두절미하고 결과코드부터 보자. 결과코드 // Input import { ComponentPropsWithoutRef } from "react"; import styled, { css } from "styled-components"; ex..

프로젝트의 컴포넌트를 만들 때 기존 태그의 props를 그대로 상속받아서 사용할 수 있게 만들어야 할 때가 있다. 리액트에서 제공하는 엘리먼트의 속성 타입들은 여러가지가 있다. HTMLAttributes [Element]HTMLAttributes ComponentPropsWithRef ComponentPropsWithoutRef HTMLAttributes HTMLAttributes 는 key, ref 같은 props 타입이 정의되어있지 않기 때문에, 사용에 적합하지 않다. [Element]HTMLAttributes type MyButtonProps = { backgroundColor?: string; } & ButtonHTMLAttributes; const MyButton = (props: MyButto..

앱을 개발하다보면 상수를 선언해야할 때가 있다. 예를 들어 카드결제와 관련한 앱을 만든다고 생각해보자. 카드 식별을 할 때 각 은행별로 할당된 코드 code로 식별한다고 생각하자. 1. as const로 상수와 타입 선언하기 as const 키워드를 이용해 은행 코드를 상수로 선언할 수 있다 export const BankCodeList = { BCCard: '361', ShinHanCard: '366', KakaoBank: '090', HyunDaiCard: '367', } as const; 그러면 BankCodeList의 value들에 해당하는 은행 코드 타입은 typeof, keyof 키워드를 이용해 선언할 수 있다. export type BankCode = (typeof BankCodeList)[..