프론트엔드

성능 지표성능이란 단순하게 웹사이트가 얼마나 빠른가?를 의미한다.그런데 웹사이트를 '빠르게' 만든다는 것은 어떤 의미일까? 사실 성능은 상대적이다.- (고성능 디바이스, 빠른 네트워크)의 유저에게는 사이트가 빠를 수 있지만, (저성능 디바이스, 느린 네트워크)의 유저에게는 사이트가 느릴 수 있다.- 똑같은 시간에 로딩이 완료되더라도, 흰 화면이었다가 한번에 로드되는 것과 각 요소가 점진적으로 로드되는 것에 따라 후자가 더 빠르게 로드된다고 느낄 수 있다.- 사이트가 빠르게 보이더라도, 사용자 상호작용에 반응하지 않을 수도 있다. 따라서 성능을 이야기할 때는 지표를 이용하는 것이 좋다.또한 그 지표가 유용한지도 함께 고려하는것이 좋다.성능 지표를 측정하는법성능 지표는 일반적으로 두 가지 방법으로 측정한다...

들어가기웹페이지를 만들 때 랜딩 페이지의 로딩 시간은 중요하다.페이지 로드 속도가 느려지면 그만큼 사용자 이탈률도 높아진다.이때 문제를 해결하기 위해서 CDN 캐싱 등 여러 방법을 이용할 수 있지만,코드 레벨에서의 가장 대표적인 방법은 dynamic import이다.용어 정리용어부터 짚고 넘어가면 좋을 것 같다.초기 로딩 시간 줄이기에 대해 검색하면 code splitting, dynamic import, lazy loading 키워드들을 보게된다.이를 정리하면 다음과 같다:dynamic import는 lazy loading을 하기 위한 수단이고, lazy loading을 하기 위해서는 code splitting이 선행되어야 한다.즉 코드 레벨에서 dynamic import를 사용하면 번들링 때 code..

1. 들어가기 현재 React에서 선언적으로 에러처리를 하려면 사용해야 하는 `ErrorBoundary` 컴포넌트를 정리하려고 한다. Class Component로 선언해서 사용하는 법 문서에서 알려주는 라이브러리를 이용해 Function Component로 사용하는 법 두 가지 방법을 알아보자. 근본 원리부터 차근차근 알고 싶다면 1번부터, 지금 바로 적용해야 한다면 2번부터 읽으면 된다. 2. Class Component 방식 에러바운더리를 사용할 때 가장 전통적인 방법이다. 다음은 문서에 나와있는 예시 코드이다. 주석으로 각 메서드 위에 호출 순서를 적어두었다. 간단하게 이런 과정을 거친다. `ErrorBoundary`로 감싸진 자식 컴포넌트에서 에러 발생 (`throw new Error`) `ge..

1. 들어가기 컨셉비에 합류하고 총 5개의 PR을 머지하며 1차 스프린트를 마무리했다. 그 과정을 간단히 정리하고자한다. 2. 프로젝트 정리 합류했을 당시 프로젝트의 프론트엔드는 초창기 수준이었다. 마크업만 되어있고, api를 비롯한 기능이 붙여지지 않은 상태였다. 제일 먼저 도메인 분석을 하며 고칠 부분들을 정리해보았다. 2.1. 파일 코로케이션 먼저 파일의 배치를 코로케이션으로 적용하면 어떨지 제안했다. 코로케이션이란 어떤 페이지가 있을때 해당 페이지에서 쓰이는 컴포넌트나 훅, 타입 등을 그 페이지 폴더에 선언해두는 방법이다. 즉 가까운데서 쓰이는 것은 가까운데 배치한다로 정도로 받아들이면 된다. 개발자들은 파일을 분리하고 배치하는 것에 스트레스를 받는데, 이렇게 하면 일단 파일을 분리할때 가까운데 ..

1. 합류 컨셉비 팀에 프론트엔드 개발자로서 중간 합류하게 되었다. 맨날 집에서 칼만 갈고있지 실제로 써먹을 일이 없었어서, 이번 합류는 나에게 되게 긍정적이다. 2. 도메인 분석 팀 합류 전 가장 먼저 해본 일은 레포를 받아 실행하는 일이었다. 팀 합류 결정 이후 기존 멤버에게 대충 구두로 설명을 듣고 초대받은 피그마와 코드를 보며 도메인을 분석했다.(피그마에 많은 정책들이 쓰여 있었다.) 예전 인턴할때도 느꼈지만, 기존에 있는 도메인을 분석하는 일은 꽤 힘든 일이다. 관련 지식이 없다면 더 그럴것이고.. 하지만 이 프로젝트는 전문적인 지식을 요구하는 것이 아니라서 이해하기는 편했다. 3. 어떻게 일을 해나갈까 컨셉비 팀은 생긴 지 꽤 오래되었는데, 개발 쪽에서 아직 성과를 내지 못해 아쉬운 상황인 것..

1. 서론 서버에서 데이터를 불러오기까지 보여줘야 할 대체 UI로 Skeleton을 가끔 사용하곤 한다. 그럴 때마다 그저 다른 사람의 코드를 긁어오곤 했는데, 직접 만들어보며 Skeleton에 주로 쓰이는 css 속성을 학습하고자 한다. Skeleton을 만들 때 사용하는 핵심 css 속성은 다음과 같다. background: 배경색 linear-gradient: 색상을 그러데이션으로 만든다. background-size: 배경의 크기를 조절한다. background-position: 배경의 위치를 조절한다. animation: 애니메이션을 정의한다. keyframes: 애니매이션 시작점과 끝점의 css 속성을 정의하고, 이를 부드럽게 연결시켜 준다. background-position을 이용해 배경을..

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

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