티스토리

영진 블로그
검색하기

블로그 홈

영진 블로그

yogjin.tistory.com/m

yoxxin 님의 블로그입니다.

구독자
5
방명록 방문하기

주요 글 목록

  • 웹사이트 성능 개선하기: 성능 지표 성능 지표성능이란 단순하게 웹사이트가 얼마나 빠른가?를 의미한다.그런데 웹사이트를 '빠르게' 만든다는 것은 어떤 의미일까? 사실 성능은 상대적이다.- (고성능 디바이스, 빠른 네트워크)의 유저에게는 사이트가 빠를 수 있지만, (저성능 디바이스, 느린 네트워크)의 유저에게는 사이트가 느릴 수 있다.- 똑같은 시간에 로딩이 완료되더라도, 흰 화면이었다가 한번에 로드되는 것과 각 요소가 점진적으로 로드되는 것에 따라 후자가 더 빠르게 로드된다고 느낄 수 있다.- 사이트가 빠르게 보이더라도, 사용자 상호작용에 반응하지 않을 수도 있다. 따라서 성능을 이야기할 때는 지표를 이용하는 것이 좋다.또한 그 지표가 유용한지도 함께 고려하는것이 좋다.성능 지표를 측정하는법성능 지표는 일반적으로 두 가지 방법으로 측정한다... 공감수 0 댓글수 0 2024. 12. 30.
  • dynamic import를 이용한 lazy loading, code splitting 개념 정리 들어가기웹페이지를 만들 때 랜딩 페이지의 로딩 시간은 중요하다.페이지 로드 속도가 느려지면 그만큼 사용자 이탈률도 높아진다.이때 문제를 해결하기 위해서 CDN 캐싱 등 여러 방법을 이용할 수 있지만,코드 레벨에서의 가장 대표적인 방법은 dynamic import이다.용어 정리용어부터 짚고 넘어가면 좋을 것 같다.초기 로딩 시간 줄이기에 대해 검색하면 code splitting, dynamic import, lazy loading 키워드들을 보게된다.이를 정리하면 다음과 같다:dynamic import는 lazy loading을 하기 위한 수단이고, lazy loading을 하기 위해서는 code splitting이 선행되어야 한다.즉 코드 레벨에서 dynamic import를 사용하면 번들링 때 code.. 공감수 4 댓글수 2 2024. 11. 8.
  • ErrorBoundary 필기 노트 1. 들어가기 현재 React에서 선언적으로 에러처리를 하려면 사용해야 하는 `ErrorBoundary` 컴포넌트를 정리하려고 한다. Class Component로 선언해서 사용하는 법 문서에서 알려주는 라이브러리를 이용해 Function Component로 사용하는 법 두 가지 방법을 알아보자. 근본 원리부터 차근차근 알고 싶다면 1번부터, 지금 바로 적용해야 한다면 2번부터 읽으면 된다. 2. Class Component 방식 에러바운더리를 사용할 때 가장 전통적인 방법이다. 다음은 문서에 나와있는 예시 코드이다. 주석으로 각 메서드 위에 호출 순서를 적어두었다. 간단하게 이런 과정을 거친다. `ErrorBoundary`로 감싸진 자식 컴포넌트에서 에러 발생 (`throw new Error`) `ge.. 공감수 2 댓글수 1 2024. 2. 19.
  • [컨셉비] 2. 1차 스프린트 과정 정리 1. 들어가기 컨셉비에 합류하고 총 5개의 PR을 머지하며 1차 스프린트를 마무리했다. 그 과정을 간단히 정리하고자한다. 2. 프로젝트 정리 합류했을 당시 프로젝트의 프론트엔드는 초창기 수준이었다. 마크업만 되어있고, api를 비롯한 기능이 붙여지지 않은 상태였다. 제일 먼저 도메인 분석을 하며 고칠 부분들을 정리해보았다. 2.1. 파일 코로케이션 먼저 파일의 배치를 코로케이션으로 적용하면 어떨지 제안했다. 코로케이션이란 어떤 페이지가 있을때 해당 페이지에서 쓰이는 컴포넌트나 훅, 타입 등을 그 페이지 폴더에 선언해두는 방법이다. 즉 가까운데서 쓰이는 것은 가까운데 배치한다로 정도로 받아들이면 된다. 개발자들은 파일을 분리하고 배치하는 것에 스트레스를 받는데, 이렇게 하면 일단 파일을 분리할때 가까운데 .. 공감수 1 댓글수 4 2024. 2. 13.
  • [컨셉비] 1. 프론트엔드 중간 합류와 각오 1. 합류 컨셉비 팀에 프론트엔드 개발자로서 중간 합류하게 되었다. 맨날 집에서 칼만 갈고있지 실제로 써먹을 일이 없었어서, 이번 합류는 나에게 되게 긍정적이다. 2. 도메인 분석 팀 합류 전 가장 먼저 해본 일은 레포를 받아 실행하는 일이었다. 팀 합류 결정 이후 기존 멤버에게 대충 구두로 설명을 듣고 초대받은 피그마와 코드를 보며 도메인을 분석했다.(피그마에 많은 정책들이 쓰여 있었다.) 예전 인턴할때도 느꼈지만, 기존에 있는 도메인을 분석하는 일은 꽤 힘든 일이다. 관련 지식이 없다면 더 그럴것이고.. 하지만 이 프로젝트는 전문적인 지식을 요구하는 것이 아니라서 이해하기는 편했다. 3. 어떻게 일을 해나갈까 컨셉비 팀은 생긴 지 꽤 오래되었는데, 개발 쪽에서 아직 성과를 내지 못해 아쉬운 상황인 것.. 공감수 1 댓글수 2 2024. 1. 27.
  • css 속성들을 이해하면서 Skeleton 만들기 1. 서론 서버에서 데이터를 불러오기까지 보여줘야 할 대체 UI로 Skeleton을 가끔 사용하곤 한다. 그럴 때마다 그저 다른 사람의 코드를 긁어오곤 했는데, 직접 만들어보며 Skeleton에 주로 쓰이는 css 속성을 학습하고자 한다. Skeleton을 만들 때 사용하는 핵심 css 속성은 다음과 같다. background: 배경색 linear-gradient: 색상을 그러데이션으로 만든다. background-size: 배경의 크기를 조절한다. background-position: 배경의 위치를 조절한다. animation: 애니메이션을 정의한다. keyframes: 애니매이션 시작점과 끝점의 css 속성을 정의하고, 이를 부드럽게 연결시켜 준다. background-position을 이용해 배경을.. 공감수 0 댓글수 0 2024. 1. 26.
  • vite + typescript + react 프로젝트에서 절대경로 설정하기 1. 문제상황 및 설정 미리보기 import를 할때 파일 위치가 깊어질수록 "../" 의 압박이 심해진다. 위 import 경로에서 ../를 지워보자 2. tsconfig, vite.config 설정하기 src/ 내부 1-depth의 파일들을 절대경로로 import 하는 것을 목적으로한다. 2.1 tsconfig 1. baseUrl을 "./src"로 설정 (L9) - 타입스크립트가 코드 상에서 import 경로를 해석할때 설정한 경로를 기준으로하여 찾는다 2. paths를 "src/*": ["../src/*]로 설정 (L10 ~ L12) - 타입스크립트가 코드 상에서 import 경로를 해석할때 설정한 경로로 매핑하여 이해한다. - 설정 경로는 "baseUrl" 기준이라는 것에 유의하자. 2.2 vi.. 공감수 0 댓글수 4 2024. 1. 3.
  • react-router-dom 으로 첫번째 페이지 라우팅하기 1. 문제상황 vite + react 기반의 프로젝트에서 실행 시 첫번째 페이지를 /products 로 리다이렉트 하고싶었다. App 컴포넌트는 뼈대인 Header 컴포넌트를 가지고 있고, Outlet을 이용해 나머지 페이지들을 렌더링한다. 처음에는 react router dom에서 제공하는 useNavigate 훅을 이용해서 구현했으나 useEffect가 거슬린다. 코드 자체가 명령적이고 App 내부에 숨겨져 있어 기능을 추적하기 까다롭다. 2. 해결방법 react router dom에서 제공하는 Navigate 컴포넌트가 있다. A element changes the current location when it is rendered. It's a component wrapper around useNa.. 공감수 0 댓글수 2 2024. 1. 1.
  • react-router-dom에서 404페이지 보여주기 웹서비스는 존재하지 않는 URL로 접근할때 대체 페이지를 보여줘야한다. 웹 서버가 요청된 리소스를 찾지 못했음(Not Found)을 나타내는 HTTP 상태 코드인 404를 이용해 404페이지라고 부르기도한다. react-router-dom은 Router 컴포넌트에서 페이지를 관리하는데, 각 경로에 맞는 페이지 컴포넌트를 조건부 렌더링하는 식이다. 나머지 모든 경로(*)에 404페이지를 보여주면 간단히 목적을 달성할 수 있다. 왜 404페이지에 오게 되었는지 그 원인을 알려주면 더 사용자 친화적인 서비스를 만들 수 있다. 더하여 상황에 맞게 "홈으로 이동" 같은 버튼도 추가해주면 사용자가 서비스를 편하게 이어서 즐길 수 있고 원하지 않는 사용자 이탈도 줄일 수 있을 것이다. 공감수 0 댓글수 0 2023. 12. 30.
  • toss/slash의 useOverlay 분석 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.. 공감수 0 댓글수 1 2023. 12. 19.
  • StorageEvent와 CustomEvent로 useLocalStorage 훅 만들기 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 댓글수 1 2023. 11. 29.
  • [번들 사이즈 최적화] 웹팩으로 생성한 번들 파일을 분석해보자(BundleAnalyzerPlugin) 1. 번들 사이즈 최적화를 해야하는 이유프로젝트를 빌드하면 흩어져있던 코드들을 웹팩을 이용해 하나(번들)로 묶을 수 있다.프로젝트 개발 초기에는 번들의 크기가 작아 괜찮지만,개발이 진행될수록 번들파일이 커져서 유저들이 번들파일을 다운받기위해 기다리는 시간이 늘어나게 된다.대기시간이 늘어나면 그만큼 사용자 이탈율도 증가한다.따라서 적절한 방법을 통해 번들 사이즈를 줄일 필요가 있다.2. BundleAnalyzerPlugin 적용하기BundleAnalyzerPlugin은 웹팩으로 만든 번들 파일을 분석해주는 웹팩 플러그인이다.설치yarn add -D webpack-bundle-analyzer설정웹팩 설정BundleAnalyzerPlugin은 웹 서버로 실행하거나 빌드할 때 기본적으로 함께 실행되므로, 옵션을.. 공감수 0 댓글수 0 2023. 9. 11.
  • 회원가입 폼에서 주로 쓰이는 필수입력사항에* 별표 표시하기 회원가입 폼에서 주로 볼 수 있는 필수입력사항 * 별표시를 렌더링하고 싶을 땐 가상요소(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: ${({.. 공감수 1 댓글수 0 2023. 7. 16.
  • KDC 한국십진분류표 📖 KDC 한국십진분류표 📖 kdc-table-yogjin.vercel.app KDC 한국십진분류표를 편하게 볼 수 있는 웹페이지입니다. KDC 한국십진분류표 6판 기준으로 만들었습니다. 맨 오른쪽 요목을 클릭하면 클립보드에 복사됩니다. 버그제보, 업데이트 수정 요청 모두 환영합니다. 공감수 0 댓글수 0 2023. 6. 21.
  • styled-components를 이용할 때 기존 태그의 attributes를 override하는법 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.. 공감수 0 댓글수 0 2023. 6. 20.
  • 컴포넌트를 만들 때 기존 태그의 props를 상속받는 법 프로젝트의 컴포넌트를 만들 때 기존 태그의 props를 그대로 상속받아서 사용할 수 있게 만들어야 할 때가 있다. 리액트에서 제공하는 엘리먼트의 속성 타입들은 여러가지가 있다. HTMLAttributes [Element]HTMLAttributes ComponentPropsWithRef ComponentPropsWithoutRef HTMLAttributes HTMLAttributes 는 key, ref 같은 props 타입이 정의되어있지 않기 때문에, 사용에 적합하지 않다. [Element]HTMLAttributes type MyButtonProps = { backgroundColor?: string; } & ButtonHTMLAttributes; const MyButton = (props: MyButto.. 공감수 0 댓글수 0 2023. 6. 17.
  • typescript로 상수와 타입을 선언하는 방법: as const, enum 앱을 개발하다보면 상수를 선언해야할 때가 있다. 예를 들어 카드결제와 관련한 앱을 만든다고 생각해보자. 카드 식별을 할 때 각 은행별로 할당된 코드 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)[.. 공감수 0 댓글수 0 2023. 6. 16.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.