저는 언젠가 나만의 라이브러리를 제작해서 배포해보고 싶다는 생각을 쭉 가지고 있었습니다. 그래서 일단 간단한 라이브러리를 제작한 뒤 배포하는 과정을 맛만 보자! 라는 느낌으로 정보를 찾아보고 직접 실습해보았습니다. npm 가입 먼저 npm 사이트에 가서 계정을 만들어야 합니다. 터미널을 켜서 npm login, npm whoami로 로컬에 로그인이 되어 있는지 확인 가능합니다. package.json 설정 // npm init -y { "name": "hero_utils", "version": "0.0.1", "type": "module", "description": "library_test", "main": "index.js", "author": "highero", "license": "MIT" } n..
요약 브라우저에서 서버에 필요한 자원을 요청합니다. 브라우저의 렌더링 엔진이 DOM 트리와 CSSOM를 생성합니다. 생성된 DOM 트리와 CSSOM를 합쳐서 렌더 트리를 생성합니다. JS 코드가 있다면 자바스크립트 엔진으로 파싱하여 AST를 생성한 뒤 인터프리터에 전달하여 DOM 또는 CSSOM을 변경합니다. 변경된 트리를 렌더 트리에 반영하여 변경시킵니다. → Reflow, Repaint 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하여 페인팅합니다. 탐색 (Navgation) 웹페이지를 로딩하는 첫 단계입니다. 주소창에 URL을 입력하거나 링크를 클릭하거나 Form을 제출하는 것처럼 사용자가 요청을 보낼 때마다 발생합니다. 탐색 과정의 시간을 최소화하는 것이 웹 최적화의 목표 중 하나 DNS ..
Intro 이번 글은 프로젝트 리팩토링 중 리렌더링 이슈에 대한 고민을 적은 글입니다. 해결하기 위한 가설과 시도만 있고 정확히 왜 발생했는지에 대한 결론은 없습니다. 추측만 존재합니다... 내용과 작성자가 다소 애송이처럼 보이시더라도 너그럽게 봐주시면 감사하겠습니다. 혹시나 내용에 대한 피드백이 있다면 댓글을 부탁드리겠습니다! 무슨 문제였나요? 장소 컴포넌트의 버튼을 눌러서 장소를 추가시키는 상황입니다. 상단의 일정 목록 컴포넌트는 데이터가 추가되니까 배열에 변화가 있어 리렌더링이 되는 것이라고 생각했습니다. 그에 반해 하단의 장소 목록 컴포넌트는 데이터가 동일합니다. 그래서 리렌더링이 왜 발생하는지 궁금했습니다. 사실 저 상태에서는 리렌더링이 되는 것이 맞습니다. 장소를 추가할 때마다 새롭게 추가된 ..
수정 전에는 반경 태그와 카테고리 태그를 클릭했을 때 렌더링이 될 필요없는 검색된 장소 목록에 계속 리렌더링이 발생했습니다. // 장소 목록 컴포넌트 const PlaceList = ({ searchPlace, radius, }: { searchPlace: string | undefined; radius?: number; }) => { ... return ( ... ); }; export default React.memo(PlaceList); 리렌더링이 발생하는 컴포넌트를 찾아서 React.memo로 감싸주어 해결했습니다.
저장이라고 적혀있는 것을 수정으로 변경 기존 일정 수정 모달에는 수정이라고 쓰여 있어야 하는 부분을 저장이라고 되어 있었습니다. {ismodify ? '일정 수정하기' : '일정 저장하기'} 그래서 위와 같은 조건부 렌더링으로 모두 변경해주었습니다. 모달에 일정 데이터를 불러오기 기존 수정 기능에는 아래 사진과 같이 썸네일과 제목 및 내용을 불러오지 않았습니다. 사용자가 수정을 눌렀으니 처음부터 수정하는게 좋지 않을까? 라는 생각으로 이렇게 구현한 것인데, 추후 다시 생각해보니 조금만 변경하고 싶을수도 있다는 생각이 들었습니다. 그래서 기존 데이터를 다시 넣어야겠다는 생각이 들어 변경하게 되었습니다. 장소와 일정 데이터 함께 불러오기 const dispatchDestinationList = async (..
서론 프로젝트를 시작하고 개발을 진행하며 어떻게 초기 로딩 속도를 줄일 수 있을까... 계속 고민했었습니다. 가장 먼저 적용해본 것은 React에서 제공해주는 Suspense 컴포넌트와 lazy 메서드를 활용한 코드 분할입니다. 사실 프로젝트에 적용하고 결과를 낸 것은 좀 됐지만... 정확하게 정량적인 숫자가 궁금해서 측정을 한 뒤 지금 기록을 남기게 되었습니다. 성능 측정 결과 (개발 환경) 빠른 3G 환경에서는 26.47초에서 13.84초 정도로 약 50% 가까이 로딩 속도를 줄일 수 있었습니다. 제한없음 환경에서는 약 783밀리초에서 약 632밀리초로 약 20% 가까이 로딩 속도를 줄일 수 있었습니다.
😃 meta 태그 description 넣기 😆 robots.txt 생성하기 User-agent: * Disallow: / Allow: /$ Allow: /favicon.ico Allow: /community Allow: /register Allow: /*.ts$ Allow: /*.tsx$ User-agent: * 모든 검색 엔진의 로봇에 대하여 수집을 허용합니다. Disallow: / Allow: /$ Allow: /favicon.ico Allow: /community Allow: /register Allow: /*.ts$ Allow: /*.tsx$ 루트 페이지, 파비콘, community, register, ts, tsx 파일을 제외한 모두를 수집 비허용합니다.
🥯 애피타이저 처음 리액트 공식문서에서 useId라는 훅을 보았을 때 리액트에서 uuid를 대체하는 훅이 만들어진건가! 라는 생각으로 공부해보게 되었습니다. 하지만 공부해보니 uuid랑은 상관 없는 훅이었습니다. 이제 useId에 대해서 알아보겠습니다. 🍖 메인 const id = useId(); useId 훅은 매개변수는 사용하지 않습니다. 고유 ID 문자열을 반환합니다. useId는 컴포넌트 최상단 혹은 훅에서만 호출이 가능합니다. 리스트의 Key로 사용하면 안됩니다. useId 사용해보기 import { useId } from 'react'; const Input = ({labelText}) => { return ( {labelText} ) } export default function Form()..
