프론트엔드 썸네일형 리스트형 chrome extension New Tab customizing을 위한 개발 환경 만들기 프로젝트: chrome extension 학습 키워드: Chrome Extension, new tab, Content Security Policy, YouTube Data API, Google Cloud Platform 상황 chrome extension을 통해 New Tab을 커스터마이징하는 방법이 궁금하여 학습해보고자 한다. 아래 3가지 기능에 대해 feasibility check를 하는 것이 목표이다. '교체' 버튼을 눌렀을 때 배경 이미지가 바뀌도록 한다. '새탭' 버튼을 눌렀을 때 원래의 chrome new tab으로 이동한다. Youtube Data API를 이용하여 loplat 채널의 최신 영상 목록을 가져온다. 해결 과정 새로운 폴더를 만들고 manifest.json 파일을 생성한다. 확장.. 더보기 선언형 Portal, Modal 컴포넌트 구현하기 프로젝트: loplat UI 키워드: portal, createPortal, modal, createElement 상황 여러 프로젝트에서 Modal을 사용할 일이 많아 loplat UI에서 컴포넌트를 제공해주고자 한다. 렌더링부에서 container DOM과 children content만 선언하여 쉽게 react portal 기능을 사용할 수 있도록 하고자 한다. // 원하는 형태 children children 해결 과정 먼저 container와 chlidren을 prop으로 받아 createPortal을 실행하는 Portal 컴포넌트를 만든다. import React from 'react'; import ReactDOM from 'react-dom'; export interface PortalPro.. 더보기 Next.js를 통해 prefetch 최적화 기법 이해하기(feat.next/link) 프로젝트: 공우 홈페이지 키워드: prefetch, Link, SSR, SSG, CSR, Next.js, Chrome DevTools Network 상황 Next.js가 최초 진입한 페이지의 html파일만 가져온다는 사실은 알고 있었지만, 다른 페이지로 이동할 때 어떤 데이터가 언제 불러와지는지 정확히 알진 못했다. Next.js로 구현한 공우 홈페이지에서 Chrome Devtools Network 탭을 통해 궁금증을 해소하고자한다. 해결과정 먼저 공우 홈페이지에 들어가 network 탭에서 Doc 파일을 확인한다. 역시 최초 진입한 페이지의 html만 가져오고, 다른 페이지로 이동하여도 추가적인 html 요청은 없다. 다른 페이지에 대한 정보를 언제 가져오는지 알기위해 Fetch/XHR과 JS 탭을 확.. 더보기 storybook에서 웹접근성 검사하기(feat. storybook-addon-a11y) 프로젝트: loplat UI키워드: storybook-addon-a11y, accessibility상황loplat ui의 컴포넌트들이 웹접근성을 잘 고려하고 있는지 확인하고 싶었다.팀원의 도움으로 storybook a11y 관련 addon을 알게되었다.(https://storybook.js.org/addons/@storybook/addon-a11y)각 컴포넌트의 웹접근성을 파악하고 개선하고자 한다.해결방법먼저 addon을 설치하고 addon 관련 global config를 설정한다. yarn add -D @storybook/addon-a11y이 때, color-contrast(명암비)는 디자이너의 판단 하에 rule을 무시하기로 한다.또한 a11y 속성과 관련된 'aria-*'과 'role' attri.. 더보기 웹접근성(web accessibility), SEO 개선하기 프로젝트: loplat homepage 키워드: web accessibility, SEO, lighthouse, semantic tag, screen reader, aria 상황 로플랫 홈페이지를 chrome lighthouse로 검사한 결과, a11y과 SEO에서 만족스럽지 못한 점수가 나왔다. 패스트캠퍼스에서 'TheRED: 견고한 UI 설계를 위한 마크업 가이드 by정찬명' 이라는 강의를 수강한 뒤, 홈페이지 웹접근성 개선을 위한 작업을 수행하였다. 해결과정 'HeadingsMap'이라는 크롬 확장 프로그램을 이용하여 페이지의 heading 구조를 확인해보았다. heading tag는 (구글 등의) 웹 크롤러가 페이지의 목차를 파악하는데 중요한 태그이며, 스크린 리더 사용자가 페이지를 빠르게 탐색할.. 더보기 Toast 컴포넌트 구현하기 프로젝트: loplat UI키워드: Toast, class, setTimeout상황기존 loplat UI의 Toast 컴포넌트는 react-hot-toast 라는 라이브러리를 fork 한 후, 사내 디자인에 맞게 변형하여 사용하고 있었다.Toast 컴포넌트의 변경사항이나 버그가 있을 때 코드의 흐름을 이해하기 어려웠고, 필요한 기능에 비해 용량이 매우 컸다.(20Kb)직접 Toast를 구현하는 것이 유지보수, 용량, 성능 모든 면에서 더 좋을 것이다.해결 방법아래의 예시 코드와 같이 Toast 를 App에서 렌더링하고, toast 인스턴스를 통해 함수를 트리거하는 것으로 설계했다.'Toast' 컴포넌트와 'toast' 인스턴스를 연결하는 것이 구현의 핵심이다. ... toast.success('성공').. 더보기 리액트에서 달팽이 모양으로 움직이는 애니메이션 만들기 프로젝트: 채식 지도(가명) 키워드: snail array, transform translate, algorithm 상황 리액트에서 무한 영역 UI 만들기(feat. requestAnimationFrame, useRef) 에서 만들었던 피드백 페이지가 있다. 새로운 피드백을 작성했을 때, 포스트잇 하나가 추가되어야한다. 기존 포스트잇들이 달팽이 모양으로 움직여서 새로운 포스트잇을 위한 공간을 만든다면 재미있는 UI가 될 것이다. 해결 과정 먼저 한 변의 길이가 n인 달팽이 배열을 만드는 함수를 작성한다. 달팽이 배열 문제는 여러 가지 방법으로 풀 수 있을 것인데, 짧지만 어려운 방법 대신 길지만 직관적인 알고리즘으로 작성했다. '-1'로 초기화된 배열의 (0, 0)에서 시작하여, for문을 통해 dire.. 더보기 js try/catch문으로 함수 리팩토링하기 키워드: try...catch, throw, Error object, refactoring 상황 GET 요청할 데이터를 전처리하고, 요청하고, 후처리하는 중요한 함수의 흐름을 파악하기 힘들어 함수 리팩토링을 진행해야한다. const searchData = () => { const ids = Array.from(new Set(idsString.split(',').map(Number))); if (ids.some(Number.isNaN) || ids.length < MINIMUM_COUNT) { toastErrorMessage(`'${MINIMUM_COUNT}개' 이상의 '숫자'를 입력해주세요.`); } else { setIsLoading(true); Api.getData({ ids: ids.join(','.. 더보기 이전 1 2 3 4 5 6 7 8 다음
