sample-project

주요 키워드

디자인
퍼블리싱
스타일드 코드
검색 디바운싱
무한스크롤
최적화 - 캐시업데이트
최적화 - 프리페치
최적화 - 옵티미스틱 UI
XXS 공격에 대한 보안 처리
이미지 업로드 미리보기(드래그 앤 드랍)
폼 밸리데이션
JWT 인증, 인가 보안 처리
라우터 가드
서버사이드 렌더링
이후 추가사항
관심사 및 스터디

Figma 프로토타입 디자인

웹 접근성(색약, 색맹) - 명도 비율 확인

반응형 웹 퍼블리싱

글로벌 스타일 코드

퍼블리싱 코드 타입

1. 전체 스타일드 컴포넌트 스타일링

2. 스타일드 컴포넌트와 선택자 조합 스타일링

공통 스타일드 컴포넌트 및 재 사용

검색 디바운싱

마지막 입력 기준으로 일정 시간이 지나면 해당 키워드로 한 번만 검색

무한 스크롤

최적화

캐시 업데이트 (global state 조작) - 트래픽이 많은 경우의 최적화

리페치 쿼리 - API 요청 트래픽 증가

댓글 등록 시 Create API 요청 후 Fetch API 요청을 함

캐시 업데이트 - API 요청 트래픽 감소

댓글 등록 시 Create API 요청. 업데이트 결과 UI 갱신은 캐시에 있는 값만 수정했기 때문에 Fetch API는 추가로 요청하지 않음

프리페치 (데이터 미리 받아오기) - 빠른 응답으로 UI,UX 개선

프리페치 적용 전

페이지로 이동 시 해당 페이지에서 데이터를 받아오기 때문에 네트워크가 느린 환경에선 다소 느려보임

프리페치 적용 후

마우스 오버 시 해당 페이지의 데이터 미리 받아오기 때문에 빠른 UI 렌더링 ( cache-first 정책 )

옵티미스틱 UI (낙관적 UI) - 빠른 응답으로 UX 개선

API요청에 대한 결과가 긍정적(성공)일 것이라 기대 하고 결과에 대한 캐시를 미리 업데이트
문제가 생겨도 크리티컬하지 않은 서비스에 적용 ( 구독 또는 좋아요 )

옵티미스틱 UI 적용 전

요청 후 업데이트 된 값을 반영하기 때문에 네트워크가 좋지 못한 환경에선 다소 느리게 느껴질 수 있음

옵티미스틱 UI 적용 후

요청과 동시에 캐시 값을 직접 수정하면서 요청하기 때문에 반응이 빠르게 보이는 효과

XSS(Cross Site Scripting) 공격 방지 (dompurify) - 스크립트 문자 처리

임의로 스크립트로 작성 된 게시글을 등록
실제 백 엔드 URL 노출 및 XSS관련 처리 로직이 제대로 동작하지 않았을 모든 상황을 가정

XSS 공격 방지 처리 전

해당 페이지 접근 시 스크립트 실행

XSS 공격 방지 처리 후

해당 페이지 접근 시 스크립트 실행하지 않음

이미지 미리보기

드래그 앤 드랍 또는 클릭

폼 밸리데이션 (react-hook-form, yup)

jwt 토큰 보안이슈

accessToken 보안상 메모리로 관리 (완) - 새로고침 시에도 메모리 로그인 유지 처리 및 로그인에 대한 상태만 로컬스토리지에 저장
브라우저 렌더링과 프리 렌더링관련 이슈 처리 (완) - 로그인, 로그아웃 시 헤더에 대한 DOM구조가 다름에 따른 처리
refreshToken은 백 엔드에서 쿠키로 받아 옴 (httpOnly, secure 옵션)

라우터가드

인증 및 인가가 필요한 페이지는 링크 또는 직접 url 접근 시 블락

서버사이드 렌더링

소셜네트워크 서비스 링크 공유 또는 스크랩, 크롤링, 검색엔진 최적화 시 필요한 페이지에 맞게 서버사이드 렌더링 작업

이후 추가사항

- 헤더 퍼블리싱 추가 (스크롤 다운 시 fixed)
- 스크롤 다운시 페이지 최상단으로 이동하는 아이콘
- 메인페이지 퍼블리싱 (이미지 레이지로드 추가)
- 메모이제이션 미비한 곳 추가로 최적화
- 오버엔지니어링이 될 수도 있기 때문에 컴포넌트 트리가 무거운 경우나 상태 또는 props가 변경이 잦은 곳, 다른 상태 변경에 따른 불필요한 리렌더링하는 곳이 아니면 최적화(메모이제이션) 하지 않음
- 구글 애널리틱스 활용
- 정적, 동적파일 CDN 분기 및 로드밸런서 트래픽 분산 Docker 배포 (백그라운드)
- 백엔드 변경 - 현재 localhost:3000에서만 요청 가능 (firebase base 이관 또는 직접 백엔드 구축)

관심사 및 스터디

웹 표준, 웹 접근성 및 크로스브라우징 (스크린 리더 테스트, 또는 퍼블리싱 리팩토링)
프로젝트 전반에 대한 좀 더 효율적인 방향에 대한 고민
PWA 또는 React-Native 스터디
배포 및 자동화