1. 고민의 시작 코드 스플리팅으로 성능 개선을 이뤄냈지만 아직 더 개선해야하는 부분들이 보였다. 첫 번째로 Largest Contentful Paint에서 빨간불이 켜져 이 부분을 먼저 해결해보기로하였다. 2. 고민 해결의 과정 LCP(Largest Contentful Paint)는 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타낸다. 이와 관련하여 개선점을 말해준다. 확인해보니 이미지에 대한 이슈였다. 구글 공식 문서를 통해 확인해보면 3가지 방법을 제시한다. 페이로드 크기를 줄이려면 1. 필요할 때 부르는 Lazy 방식을 쓴다. 2. 이미지 같은 소스들을 압축한다. 혹은 최적화한다. 3. 자주는 것은 캐싱해둔다. 아무래도 고화질 이미지가 업로드 ..

1. 고민의 시작 나는 이 프로젝트를 시작 전 성능 최적화가 목표였다. 이 전까지는 그냥 리액트 문법에 익숙해지자는 목표가 있었다면 한 단계 더 나아가 리액트를 잘 사용해보자라는 의미였다. 잘 사용하는 데에는 많은 방법이 존재하겠지만 그 중 성능 최적화가 눈에 들어와 이 것을 목표로 하였다. 이 전 프로젝트에서 Vite을 알게된 점이 가장 큰 이유였다. 프로젝트 시작 전에 Vite을 사용을 할 것을 제안했고 vite이 왜 cra보다 빠른지 팀원들에게 소개했다. 단순 vite 사용만으로도 성능 개선이 이루어지지만 이 외 방법들도 많기에 어떤 방법들이 존재하는지 알아보고 적용하고 싶었다. 2. 고민 해결의 과정 2-1 먼저 성능 최적화란 > 일단 웹 성능을 결정하는 요소로로는 크게 로딩 성능과 렌더링 성능으..

1. 고민의 시작 Plantopia 프로젝트는 불가피하게 backend가 없이 진행 되었다. 우리에겐 2가지 선택권이 있었는데 node.js에서 express로 하느냐 아니면 파이어 베이스를 하느냐였다. 나를 비롯해 다른 팀원 한 명이 1차 프로젝트에서 백엔드를 하였지만 사실 쉽지 않은 결정이었다. 프론트 코스에서 와서 프론트 프로젝트에서 프론트 코드를 하나도 안 친다는 것은 조금 어려웠고 만약 시간이라도 넉넉했다면 둘 다 치는 것이 가능했지만 우리에게 주어진 시간은 얼마 남지 않았다. 일련의 소동으로 이미 3일을 소모한 상태에서 백엔드 코드가 스키마 이 외에는 아무 것도 작성되지 않았기 때문이다. 그렇게 부랴부랴 파이어 베이스를 학습해 프로젝트에 도입하였고 작성하고 나니 데이터를 처리하는 코드를 분리하..

1. 고민의 시작 Plantopia라는 식물 관리 어플리케이션을 만들면서 식물 등록을 위한 form을 다루게 되었다. 처음 코드를 작성할 때는 여러 개 state를 두고 각각에 onChange 함수를 두는 방식으로 작성했다. 또한, 에러 역시 하나하나 조건을 걸며 작성해야하는 것 또한 반복되었다. 프로젝트 당시 작성을 하면서도 여러번 반복을 하는 코드를 적는 것에 심적으로 불편했다. 하지만, 프로젝트를 할 때는 3주 밖에 안되는 시간에 기획부터 시작하려니 이런 고민을 더 이어나가지 못했는데 프로젝트가 끝난 후 form을 다루는 좋은 방법을 찾아나서게 되었다. 2. 고민 해결의 과정 처음 코드는 아래와 같았다. 고민 - 1 . 중복된 코드로 코드 길이가 길어지고 가독성이 떨어지는 문제 const [sear..