Skip to content

Develing1991/my-portfolio

Repository files navigation

sample-project

주요 키워드



Figma 프로토타입 디자인

image

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



반응형 웹 퍼블리싱

검색 디바운싱



글로벌 스타일 코드

image



퍼블리싱 코드 타입

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

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

image



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

image



검색 디바운싱

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



무한 스크롤

무한 스크롤



최적화

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

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

  • 댓글 등록 시 Create API 요청 후 Fetch API 요청을 함 리페치 쿼리

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

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



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

프리페치 적용 전

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

프리페치 적용 후

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



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

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

옵티미스틱 UI 적용 전

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

옵티미스틱 UI 적용 후

  • 요청과 동시에 캐시 값을 직접 수정하면서 요청하기 때문에 반응이 빠르게 보이는 효과 XSS 공격 방지 처리 전



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

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

XSS 공격 방지 처리 전

  • 해당 페이지 접근 시 스크립트 실행 XSS 공격 방지 처리 전

XSS 공격 방지 처리 후

  • 해당 페이지 접근 시 스크립트 실행하지 않음 XSS 공격 방지 처리 후



이미지 미리보기

  • 드래그 앤 드랍 또는 클릭 XSS 공격 방지 처리 후



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

밸리데이션



jwt 토큰 보안이슈

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



라우터가드

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



서버사이드 렌더링

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



이후 추가사항

    • UI

    • 헤더 퍼블리싱 추가 (스크롤 다운 시 fixed)
    • 스크롤 다운시 페이지 최상단으로 이동하는 아이콘
    • 메인페이지 퍼블리싱 (이미지 레이지로드 추가)
    • 최적화

    • 메모이제이션 미비한 곳 추가로 최적화
    • 오버엔지니어링이 될 수도 있기 때문에 컴포넌트 트리가 무거운 경우나 상태 또는 props가 변경이 잦은 곳, 다른 상태 변경에 따른 불필요한 리렌더링하는 곳이 아니면 최적화(메모이제이션) 하지 않음
    • 구글 애널리틱스 활용
    • 빌드 및 배포

    • 정적, 동적파일 CDN 분기 및 로드밸런서 트래픽 분산 Docker 배포 (백그라운드)
    • 백엔드 변경 - 현재 localhost:3000에서만 요청 가능 (firebase base 이관 또는 직접 백엔드 구축)



관심사 및 스터디

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

About

Next, Emotion, recoil, graphql

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published