분류 전체보기

해당 글은 우아한테크코스 5기 프로젝트 "동글"의 번들 사이즈를 최적화하면서 겪은 문제와 그 해결과정을 담은 글입니다. 1. highlight.js란? 프로젝트 동글은 글에 존재하는 코드블럭을 이쁘게 스타일링 해주어야 했다. highlight.js 라이브러리를 통해 그 목적을 달성할 수 있다. 2. 개선 이유 동글의 production 번들의 패키지를 bundleAnalyzerPlugin로 분석한 결과 highlight.js가 번들 사이즈의 약 25%(286KB/1180KB)를 차지하고 있었다. 동글은 개발자가 타겟 유저층이므로 코드블럭을 꾸미는 것은 필수 기능에 해당한다. 하지만 너무 큰 사이즈로 인해 로딩이 길어져 사용자 경험에 좋지 않다. 3. 문제 상황 인식 및 해결과정 문제 상황 문제는 high..

1. 번들 사이즈 최적화를 해야하는 이유프로젝트를 빌드하면 흩어져있던 코드들을 웹팩을 이용해 하나(번들)로 묶을 수 있다.프로젝트 개발 초기에는 번들의 크기가 작아 괜찮지만,개발이 진행될수록 번들파일이 커져서 유저들이 번들파일을 다운받기위해 기다리는 시간이 늘어나게 된다.대기시간이 늘어나면 그만큼 사용자 이탈율도 증가한다.따라서 적절한 방법을 통해 번들 사이즈를 줄일 필요가 있다.2. BundleAnalyzerPlugin 적용하기BundleAnalyzerPlugin은 웹팩으로 만든 번들 파일을 분석해주는 웹팩 플러그인이다.설치yarn add -D webpack-bundle-analyzer설정웹팩 설정BundleAnalyzerPlugin은 웹 서버로 실행하거나 빌드할 때 기본적으로 함께 실행되므로, 옵션을..

이 글은 동글이 서비스 타겟 환경을 PC로 정한 이유와 브라우저 지원 범위에 대한 글입니다. 1. 서비스 타겟 환경: PC 동글은 블로그에 쓸 글을 업로드(import)하고 올라온 글들을 블로그에 포스팅 하는 서비스이다. 모바일 대응도 할 수는 있겠지만 서비스 특성 상 모바일이 핵심 타겟 환경은 아니라고 생각해서 PC 버전을 우선적으로 지원하기로 결정했다. 2. 브라우저 지원 범위: Chrome, Edge, Whale, Ark 브라우저 지원 범위는 Browser Market Share Worldwide 에서의 브라우저 점유율을 참고하여 정했다. 타겟은 개발이며 주변 개발자가 타겟층이 될 확률이 높기 때문에 한국을 기준으로 잡았다. 크게 Top3인 Chrome, Edge, Whale 을 지원하기로 결정했다..

이 글은 동글이 고민한 웹 접근성과 적용 결과에 관한 글입니다. 1. 개선 할 웹 접근성 선정과 개선 과정 모든 사람들이 동글을 차별없이 동일하게 사용할 수 있도록 웹 접근성을 고려했다. 고려해볼 웹 접근성은 다양한데, 그 중 잘 안지켜지는 웹 접근성 TOP8 중에 동글 서비스에 적용하면 좋은 접근성을 우선으로 선정하여 개선하려고 했다. 동글은 글을 관리하고 발행하는 서비스이기 때문에 그 기능을 제공하는데에 중요한 명도대비, 반복영역 건너뛰기, 키보드 사용보장을 선정했다. 텍스트 컨텐츠의 명도 대비 동글은 글을 봐야하기 때문에 글자와 배경의 명도대비가 중요하다. 또한 시각장애인들이 이용하려면 키보드로만 이용할 수 있어야한다. 웹 컨텐츠 접근성 가이드 라인인 WCAG 2.1 에 따르면, 명도대비가 4.5:..

이 글은 동글 팀원들과 함께 맞춰본 Typescript 컨벤션입니다. 동글 프로젝트는 해당 컨벤션을 이용해 개발하고 있습니다😎 컨벤션으로 들어가기 전에 TypeScript는 우리 팀에 도움이 되고 있나요? 어떤 측면에서 도움이 되고, 혹은 어떤 측면에서는 어려움이나 불편을 겪고 있나요? 미리 선언되어 있는 타입을 통해서 처음 보는 코드를 이해하는 데 도움이 된다. 타입을 통해 런타임 전에 타입 오류를 잡을 수 있다. 우리 팀에서 TypeScript를 사용할 때 중요하게 생각하는 부분은? 타입 네이밍과 올바른 타입 선언(any❌) 동일한 도메인에 대해서 동일한 타입 이용(분산되지 않은 타입 선언) Component 선언 방식(함수 선언문 vs 표현식) Component는 화살표 함수를 이용하여 선언한다. ..

이 글은 아래 글에서 소개했던 직접 만든 리액트 전역상태관리 라이브러리인 @yogjin/react-global-state-hook 의 테스트 코드 작성 정리 글입니다. React18의 useSyncExternalStore 훅으로 전역상태 관리하기 이 글은 useSyncExternalStore를 이미 알고 있다는 가정 하에 작성되었습니다. 처음 들어보셨다면 공식문서를 읽고 오시는 것을 추천합니다. 1. useGlobalState 를 만들었다. 공식문서에서는 useSyncExternalStor yogjin.tistory.com @yogjin/react-global-state Simple global state management library for react18. Latest version: 0.0.3, ..

이 글은 useSyncExternalStore를 이미 알고 있다는 가정 하에 작성되었습니다. 처음 들어보셨다면 공식문서를 읽고 오시는 것을 추천합니다. 1. useGlobalState 를 만들었다. 공식문서에서는 useSyncExternalStore를 이렇게 정의한다. useSyncExternalStore is a React Hook that lets you subscribe to an external store. useSyncExternalStore 는 외부 store를 구독할 수 있는 React 훅입니다. 옵저버 패턴을 이용하는 이 훅을 이용해 외부 store에 데이터를 저장하고, 리액트 컴포넌트가 store를 구독하게하여 store가 바뀔 때 마다 컴포넌트를 리렌더링하는 기능을 만들 수 있다. 따라..

1. 동글 첫 릴리즈 드디어 동글 v1.0.0 버전을 배포했다! 두 달간 열심히 개발하여 드디어 메이저 버전을 출시했다. 배포한 뒤 첫 화면을 본 순간 알 수 없는 벅차오름이 느껴졌다. 아이를 낳는다면 이런 기분일까..? 2. 4차 스프린트 구현 내용 우리는 3차 데모데이까지 주요기능들을 개발해냈다. 4차 데모데이(론칭 페스티벌)까지는 OAuth, 회원 페이지(인증, 인가)를 만들어 사용자가 자신의 공간에서 서비스를 이용할 수 있게 했고 전반적인 디자인 개선으로 앱을 매력적이게 만들어 사용하고 싶게 만들었으며 에러처리, 버그 수정을 통해 사용성을 개선했다. 이외에도 프론트엔드 기준으로 서버 상태 관리를 위해 tanstack-query, e2e 테스트를 위한 cypress 를 도입했다. 도입으로 느낀 장점..