본문 바로가기

728x90

원티드 프리온보딩

(3)

[원티드 프리온보딩] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 - 4회차 오늘의 Agenda는 성능과 최적화를 하는 구체적인 방법 이미지 최적화, 코드 스플리팅, 지난 강의때, 성능을 어떻게 측정하는지 배웠다면, 이번 강의에는 성능을 어떻게 개선할 수 있을지를 배웠습니다! 이미지 최적화, 이미지 용량이 너무 크다면, 로딩도 오래 걸리고 브라우저에 과부하가 걸리기도 합니다. 그래서 스토리지에 화면에 필요한 사이즈별로 이미지를 저장하고, 해당 영역에 크기의 맞는 URL를 넘겨주는 것이 좋다고 합니다. 이미지 파일확장자는 [svg, png, webp] 가 있습니다. 저희 프로젝트에선 svg 파일은 따로 프론트엔드 프로젝트에 코드로 저장(local)하여 사용하고, 대다수의 이미지 파일은 서버에서 받은 png 파일이었습니다. 그리고 해당 수업이후 이미지 파일들을 webp로 수정했는데요..

[원티드 프리온보딩] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 - 3회차 오늘의 Agenda는 성능과 최적화! Lighthouse : 웹 성능을 분석하는 오픈 소스 성능 분석, 접근성 검사, SEO 평가, PWQ 기준 평가를 제공합니다. Lighthouse는 개발자 도구(F12)에서 찾을 수 있습니다 Ligthhouse 페이지 로드를 분석하기 위해, [ 중복 모듈 제거 → 빌드 → 시크릿 모드 실행 → Lighthouse 실행 ] 순서로 실행합니다. $ npm dedupe : npm 패키지 매니저에서 중복된 의존성을 줄이는 명령어 node_modules 디렉토리에서 중복된 모듈을 제거해 프로젝트 크기를 줄입니다. ( yarn을 사용하시면, 자체적으로 의존성 해결 및 트리구조를 효율적으로 관리해 중복된 모듈을 최소화한다고 합니다) $ yarn build production bu..

[원티드 프리온보딩] 포트폴리오 작성을 위한 리액트 프로젝트 고도화 - 1회차 오늘의 Agenda는 1. 지역변수와 전역변수 2. Context API, Redux, Recoil, Zustand 3. React Query 1. 지역변수 vs 전역변수 제 프로젝트에서는 [ Container, Presenter 방식+ redux ] 를 사용해왔습니다. 그래서 데이터를 props로 넘겨주어야할지, redux로 저장해야할지 고민이 많이 되었는데, 오늘 강의를 들으면서 그 고민을 해결할 수 있었어요.🤩 2depts이상 데이터를 전달해야할땐 redux를 사용해봐야겠습니다~ Container, Presenter 패턴 Flux && Redux 2. Context API, Redux, Recoil, Zustand 프로젝트에서 redux만 사용해서 Context API 내용을 오랜만에 들으니 생소하..

이전 1 다음

728x90

티스토리툴바