본문 바로가기

Project29

LCP 개선하기 / 아워홈 사전과제 1. Why? 아워홈 과제는 상품 리스트 + 장바구니 페이지 만들기. 도메인 특성을 고려했을 때, 클라이언트 단에서 어떤 부분을 고려해서 개발해야할까 고민했다. 쇼핑몰 사이트니까 이미지가 미친듯이 쏟아진다는 특성이 있다는 것을 떠올리고 Lighthouse로 랜더링 시간을 측정해보았다. 측정해보니까 LCP(Largest Contentful Paint)시간이 지나치게 길어서 점수가 낮게 나왔다. 점수를 올려보자. 2. How? Font 바꾸기 font 형식을 ttf에서 woff2로 변경. 호환성이 낮은 woff2보다는 용량이 30%정도 크더라도 호환성이 높은(물론 ttf만큼은 아니지만)woff로 하고 싶었으나, suit가 woff가 없어서 woff2로 설정. 폰트 파일 사이즈가 570, 578kb에서 166.. 2024. 1. 15.
비슷한 컴포넌트 재사용하기 / 아워홈 사전과제 1. Why? 아워홈 사전 과제를 진행하며, 어떻게 하면 컴포넌트의 재사용성을 높일 수 있을까 고민을 많이 했다. 다른 프로젝트를 진행하면서도 비슷한 요소의 컴포넌트를 어떻게 재사용/분리여부를 결정할지 고민했었기에, 이 기회에 정리를 해보고자 한다. 2. 도전 아래의 태그 2가지를 랜더링시켜줘야할때, 여러 방법으로 나눠보고 어떤 방법이 적절한 방법인지 생각해보자 1. 하위 컴포넌트에서 부담 ListCardTag type CardTag = 'best' | 'new'; interface ListCardTagProps { tag: CardTag; } export default function ListCardTag({ tag }: ListCardTagProps) { if (tag === 'best') { ret.. 2024. 1. 14.
Context Api + Reducer로 전역상태 관리하기 / 아워홈 사전과제 1. Why? 아워홈 사전과제에서 상품 리스트의 물건을 장바구니에 담는 부분이 있었다. 이를 위해서는 전역 상태에 장바구니에 담겨있는 상품과 수량 이 필요해 보였다. 이를 사용하는 기능으로는 상품 리스트에서 버튼을 누를경우 장바구니에 담김 이미 담겨 있을 경우 수량 + 1 장바구니에서 수량을 조절할 경우 상품의 수량이 변경 정도가 있을텐데, 겨우 이 정도의 상태 관리를 위해서 전역 상태관리 라이브러리를 사용하는 것은 낭비라는 생각이 들었다. 그래서 React의 네이티브 기능인 Context Api를 통해서 장바구니 상태를 구현했다. 2. How? Context Api란? 일단 Context Api에 대해서 공식문서로 먼저 알아보자. Context Context lets a parent—even a dis.. 2024. 1. 12.
유저 인증 상태 관리하기 1. Why? 프로젝트 에서 회원 관리 및 프론트엔드에서의 보안을 담당하게 되었는데, 그 과정에서 JWT와 OAuth를 사용해서 유저의 인증 상태를 관리했다. 이번 글에서는 어떻게 백엔드와 데이터를 주고받았는지, 그리고 왜 이런 방식으로 구현했는지에 대해서 설명하고자 한다. 만약 네트워크에 대한 배경지식이 없으시다면 아래 링크의 글부터 읽는 것을 추천드립니다. 쿠키와 세션 / 네트워크 HTTP W3 상에서 정보를 주고받을 수 있도록 정의된 프로토콜 Connectionless(비연결성) : 요청에 따른 응답을 받고나면 연결을 끊음 Stateless(무상태성) : 클라이언트-서버 관계에서 서버가 클라이언트의 cksxkr5193.tistory.com 2. How? 어떤 선택지가 있는지 1) 세션 기반 인증 인.. 2024. 1. 8.

티스토리툴바