프론트엔드

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

웹서비스는 존재하지 않는 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..