프론트엔드

웹서비스는 존재하지 않는 URL로 접근할때 대체 페이지를 보여줘야한다. 웹 서버가 요청된 리소스를 찾지 못했음(Not Found)을 나타내는 HTTP 상태 코드인 404를 이용해 404페이지라고 부르기도한다. react-router-dom은 Router 컴포넌트에서 페이지를 관리하는데, 각 경로에 맞는 페이지 컴포넌트를 조건부 렌더링하는 식이다. 나머지 모든 경로(*)에 404페이지를 보여주면 간단히 목적을 달성할 수 있다. 왜 404페이지에 오게 되었는지 그 원인을 알려주면 더 사용자 친화적인 서비스를 만들 수 있다. 더하여 상황에 맞게 "홈으로 이동" 같은 버튼도 추가해주면 사용자가 서비스를 편하게 이어서 즐길 수 있고 원하지 않는 사용자 이탈도 줄일 수 있을 것이다.

1. 분석 이유 Modal이나 BottomSheet같은 Overlay는 브라우저에서 굉장히 자주쓰이는 컴포넌트이다. 나는 Overlay를 잘 사용하고 싶어 더 나은 사용 방법을 분석하고 앞으로 프로그래밍에 사용하고자한다. 2. 이전 Modal 로직 작성 방식 이전 프로젝트를 진행할때 사용했던 모달 열고 닫기 로직이다. 모달을 사용하는 App에서 isModalOpen 상태를 선언해서 Modal 을 조건부 렌더링한다. function App() { const [isModalOpen, setIsModalOpen] = useState(false); ... const handleRestaurantClick = (e: React.MouseEvent) => { ... setIsModalOpen(true); }; co..

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