React

리액트 EventBus 활용

pub/sub 방식의 통신 패턴window의 eventListener 작동과 거의 유사하다.이벤트 발생시 해당 이벤트를 구독하는 곳에서 콜백을 실행한다.구현출처: https://github.com/DawChihLiou/eventbus-demo/blob/main/eventbus/eventbus.tstype EventKey = string | symboltype EventHandler = (payload: T) => voidtype EventMap = Recordtype Bus = Recordinterface EventBus { on(key: Key, handler: T[Key]): () => void off(key: Key, handler: T[Key]): void once(key: Key, hand..

웹 접근성

웹 접근성 웹 접근성은 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것 - 시각장애인이 보조기구(스크린 리더)로 웹 사용 출처: React 공식 문서 Semantic 태그 div만 쓰지 말고, 적절한 semantic 태그를 사용하자 ex) main, aside, header 등등 aria-role, onclick aria-role WAI-ARIA: https://www.w3.org/TR/wai-aria/#roles_categorization 보조기구가 각 요소의 역할을 알 수 있게 해줌 유효한 role (ex: button)만 줘야 함 aria-unsupported-elements: meta, html, script, style 태그들은 aria-role 미지원 onclick 태그에 onClic..

API 플랫폼 개발 회고

개요 api 호출(Postman) + api 테스트(Jmeter) 할 수 있는 웹 앱 배포 주소: https://api-test-project.vercel.app/ 기간: 2023.3 ~ 2024.2 1년 내내 집중해서 한 것은 아니고 실제 개발 기간은 퇴근 후, 주말에 조금씩 해서 1~2달 정도 소요 인원: 프론트엔드 1명(나), 백엔드 1명 내 역할: 프론트엔드 전체 내가 사용한 기술: React 18, Framer-motion, emotion, Recoil, React Query, Chart.js 개발 실시간 대용량 데이터 처리 최적화 API 테스트(Jmeter)의 경우 자체 서버와 websocket으로 연결한 후에 최초 메시지로 테스트할 정보(사용자(쓰레드) 수, 호출 횟수 등)을 보내고 서버에서..

4. 성능 측정, 최적화

성능 측정 크롬의 lighthouse를 활용해서 성능 측정을 했다. 매우 성능이 안 좋게 나왔다. Opportuity 탭을 살펴보니 js파일이 너무 커서 로딩이 오래 걸리는 것을 알 수 있었다. webpack-bundle-analyzer를 통해 번들 크기를 보니 번들이 1개이고 용량이 매우 컸다. 1. 로딩 성능 최적화 - 코드 스플릿 엑셀 에디터는 페이지가 1개이기 때문에 페이지 별로는 코드 스플릿을 할 수 없다. 따라서 컴포넌트별로 코드 스플릿을 했다. // 기존 import { Header } from '@/layout' // 변경 const Header = lazy(() => import('@/layout').then(({ Header }) => ({ default: Header, })) ) dy..

3. 테스트 자동화

Github Actions와 RTL, Jest로 만든 테스트코드를 이용해서 테스트 자동화를 해봤다. 테스트 코드 각 컴포넌트, 기능(features 디렉토리) 별로 테스트 코드를 작성했다. RTL의 user-event를 활용해서 사용자 행동기반 테스트코드를 만들었다. /// Functionbar.test.tsx describe('', () => { test('선택셀 좌표 input 렌더링한다.', () => { render() const coordInput = screen.getByTestId('coordInput') expect(coordInput).toBeInTheDocument() }) test('선택셀 좌표 input default값인 "A1"이 담겨있다', () => { render() cons..

2. 개발 시 어려웠던 점들

시트별 상태관리 어려웠던 점 처음에는 여러 개의 시트를 고려하지 않고 시트가 1개인 엑셀 에디터를 제작했다. 초기 상태는 다음과 같다. cells(표 각 cell의 정보), historyInfo(작업 내역 스택), selectedArea(드래그한 cell영역), selectedCell(클릭하여 선택한 cell), copiedArea(복사한 영역) 해당 상태들을 context에 담아서 하위 컴포넌트에서 사용했다. 엑셀 에디터를 시트가 여러 개인 형태로 변경하면서 최대한 기존 구조를 유지하면서 시트 여러개 활용(ms excel처럼)하도록 변경하는 것이 어려웠다. 해결 각 시트별로 해당 상태를 저장해야 했는데, 최대한 기본 구조 수정을 하지 않으면서 변경하기 위해서 context위에 recoil을 뒀다. re..

1. 개요, 기본 구조

1. 개요 이전 통계 자동화 페이지에서 통계 엑셀 파일 미리보기 기능을 개발했었다. 토이 프로젝트로 해당 기능을 좀 더 발전시켜서 엑셀 파일을 웹에서 편집할 수 있는 에디터를 제작해봤다. 2. 구조 type 관리 공통적으로 사용하는 type들은 루트 디렉토리의 types 디렉토리의 editor.d.ts에서 관리했다. // editor.d.ts declare module 'editor' { export interface IFile {/* 생략.. */} export interface ISheet {/* 생략.. */} /// 생략.. } 각 컴포넌트의 prop, return등의 타입 정보는 해당 컴포넌트 소스코드에서 관리했다. // ToggleButton.tsx interface ToggleButtonPr..

리액트 프로젝트 폴더 구조

https://www.youtube.com/watch?v=UUga4-z7b6s&list=LL&index=2 Junior vs Senior React Folder Structure - How To Organize React Projects - Web Dev Simplified 강의를 듣고 정리해봤다. 구조 assets : 공통으로 사용하는 .css , 이미지 등 components : 공통으로 사용하는 컴포넌트 ui, form 디렉토리를 따로 둬서 관심사 별로 분리 context : 공통으로 사용하는 컨텍스트 data : 공통으로 사용하는 데이터 ex) 리덕스, 리코일 등의 상태 저장소, json 파일, 상수 등 features : 특정 주제(ex) auth, user, stats)에 관한 componen..