React

문제 : 배포하는 과정에 빌드가 너무 오래걸려요. 원인: PDF를 렌더링하기 위해 pdfjs-dist 라이브러리를 사용하고 있습니다. 이미지를 보면 node_modules/canvas/build 의 용량을 보면 상당히 많은 용량을 가지고 있으며, 많은 용량을 차지하는 canvas를 여러페이지에서 dependency를 가지고 생긴 이슈입니다. pdf를 렌더링하는 곳만 동적으로 모듈을 불러와 사용할수 있도록 dynamic import를 이용하여 성능최적화를 하였습니다. 11분에서 2분!!! dynamic import(동적 임포트)란 dynamic import란 자바스크립트에서 모듈을 피요한 시점에 동적으로 로드하는 기능을 말합니다. dynamic import(동적 임포트) 동작원리 동적 임포트 함수 호출 모..

Before Tooltip으로 감싸준 컴포넌트를 마우스 오버시 자식노드가 생성되어 툴팁이 나타나는 구조. CSS로 제어를 하고 있었음. hover interface TooltipProps { children: React.ReactNode text: string direction?: 'top' | 'bottom' | 'left' | 'right' } const Tooltip = ({ children, text, direction = 'top' }: TooltipProps) => { return ( {children} {text} ) } export default Tooltip export const Tooltip = styled.div` postion: relative; ` export const Cont..

SSG(정적 생성): 빌드하는 과정에서 페이지를 생성, 페이지 요청 경우 이미지 생성된 정적 페이지 제공. SSG는 페이지들을 서버에 모두 만들어둔 뒤, 요청 시 해당 페이지를 응답하는 것이기 때문에 바뀔 일이 거의 없어 캐싱해두면 좋은 페이지에 적합하다. 정적 페이지 업데이트가 필요하여 Next.js에서 제공하는 ISR을 적용하였습니다. ISR이란? 정적페이지를 새롭게 추가하거나 업데이트 할 수 있도록 하는 Next.js 기능. ISR은 페이지의 정적인 부분만 미리 렌더링한 후, 사용자가 필요로하는 동적 데이터를 렌더링할 수 있습니다. ISR은 빌드시간 더 빠르게하고 특정 주기마다 재생성하는 페이지와 캐시를 자동으로 무효화할 수 있게합니다. 전체 사이트를 다시 빌드하지 않아도된다. function Bl..

이슈 : 개발이 지속됨에 따라 다양한 디자인 형태의 부가족인 요소가 계속 추가되어 props가 지속적으로 늘어있음. 1. 기존 컴포넌트 interface FieldProps { name: string title?: string description?: string inputType?: string fieldType?: 'default' | 'leftImg' buttonText?: string isButtonDisabled?: boolean placeholder?: string defaultValue?: string isRequiredField?: boolean isReadOnly?: boolean isLoading?: boolean pointerEvents?: string autoComplete?: st..

&& 연산자 사용 리액트를 깔끔하게 작성하는 방법을 적은 저자 타일러 호킨스는 조건이true 면 렌더링하고 false 아무것도 렌더링 하지 않아야 하는 경우 삼항 연산자를 사용하지마세요. &&대신 연산자를 사용하세요 라고 주장하며, 저자 켄트 C. 도즈는 반대로 **JSX에서 && 대신 삼항 연산자 사용**하는 것이 좋다고 주장하고 있습니다. && 보다 삼항 연산자 사용 // BAD... function ContactList({contacts}) { return ( {contacts.length && contacts.map(contact => ( {contact.firstName} {contact.lastName} ))} ) } function Error({error}) { return error && ..

Atomic Design Pattern 💡 효과적인 디자인 시스템을 만드는 것은 모든 것은 진정으로 서로 협력하고 의사 소통하는 사람들에게 달려 있습니다. !!!! 디자인 시스템은 하루를 절약합니다. vue, react 모두 컴포넌트 단위로 개발을 진행하여 컴포넌트 중심 설계 패턴이 주목 받게 되었다. 아토믹 패턴은 2013년 6월에 Brad Frost에 의해 처음으로 제시된 디자인 패턴이며, 패턴을 소개할 때 디자인 시스템을 위한 것이라는 점을 소개한다. 아토믹 패턴은 프론트엔드 시스템을 구성하는 컴포넌트들을 논리 구조 단위로 나누어 효율적으로 재사용하고 불필요한 코드 중복을 제거하여 클린한 아키텍처를 유지할 수 있도록 한다. 한마디로 컴포넌트를 재사용성이 강하고, 단단하게 잘 설계함으로서 점진적으로 ..

필자는 재사용하고 싶을 때 사용한다는 말, 성능 최적화 등등의 말만 보고 대부분 함수에다가 useCallback을 남용하였습니다. 이로 인하여 코드가 복잡해지거나, 유지보수에 어려운 점을 겪는 경험을 하여 ..useCallback을 이렇게 남용해도 되는 건가냐는 생각 하게 되어, 여러 문서를 보고 정리해 보았습니다 ! 제대로 알고 사용하자 ! 모르고 사용하면 중범죄다! 반성 후 열심히 코드 고쳤습니다. useCallback 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. 메모제이션 콜백을 반환합니다. 즉 리 렌더링 최소화하기 위해 사용합니다. 한번 만든 함수는 필요할 때만 만들어지고 재사용 ! Component에서 props 가 바뀌지 않으면 렌더링 하지 않습니다. 1. 함수 동등성 이해 ..

웹 성능 결정 요소 로딩 성능 - 리소스를 로드 렌더링 성능 - 화면에 보여주는 Lighthouse는 웹 앱의 성능, 품질 및 정확성을 개선하기 위한 오픈 소스 자동화 도구입니다. 측정 결과는 로컬PC에서 검사를 진행하기 떄문에 PC에 환경에 영향을 받아 네트워크 및 CPU (또는 GPU) 등의 환경에 따라 검사 결과가 다를 수가 있습니다. 예시) CPU의 작업량에 여유가 있는 상태 vs CPU가 바쁘게 돌고 있는 상태(여러 프로그램을 띄워둔 상태) 미국에 있는 서버 홈페이지를 한국의 사용자가 검사할 때 vs 미국의 사용자가 검사할 때 웹서버에 트래픽이 많은 상황에서 검사를 했을 때 vs 트래픽이 없는 상황에서 검사를 했을 때 분석결과 First Contexntful Paint (FCP) 최초 콘텐츠풀 ..