본문 바로가기
반응형

Category348

패스트캠퍼스 챌린지 43일차 (react hook form) 22.3.7 (월) +43days react-hook-form 은 복잡한 폼을 다룰 때 도움을 주는 라이브러리 입니다. 특징 비제어 컴포넌트(Uncontrolled component) 를 사용해 불필요한 렌더링을 줄여 퍼포먼스를 향상시킵니다. (Uncontrolled Component vs Controlled Component) 타입스크립트를 지원합니다. React hook API 를 지원합니다. Uncontrolled Component vs Controlled Component react-hook-form 을 다루다보면 제어 컴포넌트(Controlled Component) 와 비제어 컴포넌트(Uncontrolled Component)에 관한 내용이 빈번하게 소개됩니다. react 공식 문서에서도 이를 .. 2022. 3. 7.
패스트캠퍼스 챌린지 42일차 (react-query) 22.3.6 (일) +42days React Query 란 ? react-query 는 React Application에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트 하는 작업을 합니다. Motivation 기본적으로 React Application 에서는 서버로부터 데이터를 가져오거나 업데이트하는 방법을 제공하지 않습니다. 개발자는 자체적으로 이 방법을 구축해야 하는데 일반적으로는 react hooks 를 사용하여 컴포넌트 state 및 effect 를 조합하거나 글로벌 상태 머신을 사용하여 React Application 전체의 비동기 처리를 다룹니다. 대부분의 전통적인 상태 관리 라이브러리는 비동기처리나 서버 상태 작업 보다는 클라이언트 상태 관리에 적합한데 여기서 서버 상태란 아래의 .. 2022. 3. 6.
패스트캠퍼스 챌린지 41일차 (Recoil 2) 22.3.5 (토) +41days https://recoil-todo-list.netlify.app/ 실습예제 Use-Cases 좌, 우 아이콘 버튼을 클릭하여 이전 달, 다음 달로 이동 가능하다. 오늘 날짜는 #313133 색으로 표시 날짜를 선택하면 해당 날짜#7047EB 색으로 표시 선택한 날짜의 숫자를 더블 클릭하면 해당 날짜의 할 일 목록의 통계 모달을 노출시킨다. 할 일 목록이 있을 시에 리스트로 노출되고 제 아이콘을 눌러 제 가능하다. 선택한 날짜의 빈 곳을 더블 클릭하면 해당 날짜의 할 일 등록 모달을 노출시킨다. 할 일을 입력하고 엔터 키를 누르면 해당 날짜의 할 일 목록에 추가된다. 해당 날짜의 할 일 목록이 3개가 넘게되면 그 외 n 개 로 표시된다. 그 외 n 개를 클릭하면 해당 .. 2022. 3. 5.
패스트캠퍼스 챌린지 40일차 (Recoil 1) Recoil 이란 ? ecoil 은 페이스북에서 만든 상태 관리 라이브러리이고 2020년 5월에 진행된 React Europe 2020 에서 처음으로 소개되었습니다. 현재 (2021년 8월 2일) 기준으로 최신 버전이 0.4.0 이고 아직까진 프로덕션에 사용되기는 이를 수도 있지만, Redux, MobX 등 기존의 상태 관리 라이브러리들을 대체할 다양한 장점이 존재하므로 점차 발전할 것으로 기대됩니다. 1. Recoil vs Redux 액션, 리듀서, 미들웨어 등 boilerplate 코드가 많이 발생하는 Redux 와는 대조적으로 Recoil 은 boilerplate-free API 제공한다. React 의 useState 처럼 간단한 게터(get) / 세터(set) 인터페이스로 사용 가능합니다. Re.. 2022. 3. 4.
코시국 베이비, 쓸데 없이 아기 마스크 귀엽고 난리 태어났더니 엄마가 전지현 태어났더니 아빠가 장동건 뭐 이런 얘기들은 예전부터 우스갯소리로 해왔지만 태어났더니 코로나, 이건 좀.. 2020년 1월쯤부터 였으니 그때부터 태어난 아이들은 어느 정도 크고 나면 마스크를 그냥 옷처럼 입어야 하니 어른들의 눈에는 그 모습이 참 안타깝기 그지 없다. 우리 아기도 예외는 아니다. 와이프가 아기 마스크 적응시켜야 한다면 제일 작은 사이즈로 몇 개를 샀다. 처음에 씌워보려고 했더니 자지러지게 울면서 극구 거부했다. 마음이 아팠다. 누군들 이 아이에게 마스크를 씌우고 싶을까. 지난주에 부모님 모시고 외출할 일이 있어서 다시 한번 마스크를 씌워봤는데 처음에는 거부를 하는가 싶더니 곧 잘 쓰고 있다. 그런데 가만히 보다 보니 마스크 디자인 때문인지 크기 때문인지 아이라서 그.. 2022. 3. 3.
패스트캠퍼스 챌린지 39일차 (Infinite scroll by Intersection Observer) Intersection Observer Intersection Observer API - Web APIs | MDN Intersection Observer API - Web APIs | MDN The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. developer.mozilla.org Intersection Observer 는 브라우저 뷰포트(Viewport) 와 설정한 엘리먼트 (Element) 의 교차 영역을 관찰하며, 요소가 .. 2022. 3. 3.
패스트캠퍼스 챌린지 38일차 (Infinite Scoll - 스크롤 방식) 22.3.2 (수) +38days 무한 스크롤(Infinite Scroll)이란? API 를 통해서 많은 양의 데이터를 가져와 화면에 렌더링해야 할 때 성능을 최적화 하기 위한 방법중 페이지네이션을 구현해 봤다. 모바일에서 페이지네이션 방식을 사용하려면 원하는 페이지로 이동하기 위해 숫자 버튼을 일일이 손으로 눌러야 하기 때문에 매우 불편하다. 이 떄, 사용할 수 있는게 무한 스크롤이다. 사용자가 스크롤링 하다가 미리 로드된 컨텐츠를 다 확인하면 다음 목록을 또 로드해서 별도의 인터랙션 없이 목록을 계속 불러오는 방식이다. 스크롤이 최하단에 왔는지 판단하기 Element.scrollHeight : 엘리먼트의 총 높이를 나타내며 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함 Element.clientHeigh.. 2022. 3. 2.
패스트캠퍼스 챌린지 37일차 (Modal) 22.3.1 (화) +37days 모달(Modal) 이란 ? 모달은 기본 창(window) 위에 컴포넌트를 띄우는 방식이다. 모달 아래의 창은 비활성 상태(dimmed) 이기 때문에 사용자가 활성된 모달 창 외부의 콘텐츠와 인터페이스 할 수 없다. 이 때문에 사용자 주의 또는 이목을 끌기 위하여 주로 많이 사용되는 기법이라고 할 수 있다. 포탈 (Portal) 포탈은 외부 DOM 에 엘리먼트를 렌더링하는 방법을 제공한다. ReactDOM.createPortal(child, container) 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment 와 같은 어떤 종류든 렌더링할 수 있는 React 자식이다. 두 번째 인자(container)는 DOM 엘리먼트다. 사용 예시 아래의 예시에서 P.. 2022. 3. 1.
패스트캠퍼스 챌린지 36일차 (Pagination) 22.2.28 (월) +36days 페이지네이션(Pagination) 이란? API 를 통해서 많은 양의 데이터를 가져와 화면에 렌더링해야 하는 경우 자칫하면 성능 문제를 야기할 수 있다. 이 때 성능을 최적화하기 위한 다양한 방법 중 전통적인 방법으로 페이지네이션이 있다.. 페이지네이션은 데이터의 갯수를 미리 알고 있고 데이터의 추가나 삭제가 자주 일어나지 않을 때 유용하다. 더 나은 경험을 위한 페이지네이션 클릭 가능한 요소의 크기를 크게 제공한다. 현재 페이지를 표시한다. 이전, 다음 페이지 링크를 제공한다. 페이지 링크 간 간격을 넓힌다. Preview 리액트 프로젝트 생성 npx create-react-app pagination-playground --template typescript 패키지 .. 2022. 2. 28.
패스트캠퍼스 챌린지 35일차 (Carousel) 22.2.27 (일) +35days 캐러셀(Carousel)이란? 캐러셀은 사전적 의미로 회전 목마를 뜻함. 슬라이드 형태로 순환하며 이미지, 영상 등의 콘텐츠를 노출하는 UI를 의미한다. 더 나은 경험을 위한 캐러셀 autoplay를 사용하지 않는다. 사용자가 직접 캐러셀을 컨트롤 하게끔 한다. 대부분의 사용자들에게 캐러셀은 일반적인 UI이고 이를 인터페이스 하는데 이미 익숙해져 있다. 간결하고 명확한 카피를 작성한다. 슬라이더 내부에 h1 태그를 사용하지 않는다. 검색엔진이 h1 태그를 제목처럼 취급하기 때문에 슬라이드가 여럿일 경우 한 페이지에 여러 개의 제목을 부여하는 것과 같다. 캐러셀이 터치 친화적인지 확인한다. 모바일에서 캐러셀을 보고 좌우의 화살표가 아닌 스와이프하여 콘텐츠를 넘기는 것은 .. 2022. 2. 27.
패스트캠퍼스 챌린지 34일차 (Skeleton) 22.2.26 (토) +34days 스켈레톤(Skeleton) 이란 ? 데이터가 로드되기 전에 콘텐츠의 자리비움(placeholder)를 표시해서 사용자가 기다리는 시간을 좀 덜 지루하게 느끼게끔 하는 UI 스켈레톤 컴포넌트의 장단점 장점 (Pros) 아래의 표는 80명의 참가자를 대상으로 스켈레톤, 스피너, 블랭크 화면을 보여주며 테스트 했을 때 인지되는 로딩 시간을 보여줌. 결과적으로 블랭크 페이지 < 스피터 < 스켈레톤 순서대로 더 빠르다고 느끼게 됨. 단점 (Cons) 아무래도 스켈레톤을 화면마다 표시해야 되기 때문에 상대적으로 시간이나 비용이 많이 든다. 스켈레톤 컴포넌트 사용 예시 페이스북 링크드인 구글 드라이브 유튜브 더 나은 경험을 위한 스켈레톤 규칙 스켈레톤은 콘텐츠의 로드를 방해하면 안.. 2022. 2. 26.
패스트캠퍼스 챌린지 33일차 (Next.js 실제6) 22.2.25 (금) +33days Upgrade Guide https://nextjs.org/docs/upgrading 12 버전까지... 12버전 오픈과 함께 Upgrade Guide를 제공한다. Migrating to Next.js Incrementally Adopting Next.js https://nextjs.org/docs/migrating/incremental-adoption Migrating from Gatsby https://nextjs.org/docs/migrating/from-gatsby Migrating from Create React App https://nextjs.org/docs/migrating/from-create-react-app Migrating from React Ro.. 2022. 2. 25.
반응형

티스토리툴바