배달프렌드의 기억 조각들

✅ 에러메세지 alert말고 직접 alarm으로 커스텀하는것이 훨씬 예쁘고 좋음

✅ global style로 색도 변수로 사용

✅ box-sizing: border-box;

✅ font-display: swap;

✅ document queryselector

✅ env, gitignore 확인 필수

✅ figma에서 요소 클릭하고 option 누른상태에서 배경에 마우스 오버하면 margin 값 표시됨

✅ 아이폰 화면으로 기준 잡음, 간격 양옆 16px씩 (margin 4배수로 지정)

✅ gnb는 아래서부터 24px

✅ gap과 margin의 차이 : gap은 인접한 요소들의 사이에만 공간을 만듦

✅ 캐러셀에 overflow:hidden 넣기

✅ 로딩스피너 (yarn add react-loading)

✅ 프사 컴포넌트 꽉채우기 object-fit / object-position

✅ Card는 764 직전까지 늘어남, 764 되는 순간 358로 고정
display:flex + flex-flow: row wrap (열 정렬로 하는거 추가)

✅ QueryDSL 같이 고민해서 프로필부분 해결

✅ 조건부렌더링

✅ 최근검색 최대 다섯개

✅ 주소 첫번째 단어만 잘라오기 (fullAddress || '').split(' ', 1);
그냥 주소에서 자르면 오류나서 || ‘’ 추가해줘야함

✅ 검색결과와 지역 적용여부 사이의 경우의 수
<메인검색>
기존검색 + 지역없음 /v1/posts/search
기존검색 + 지역있음 /v1/posts/region/search

<카테고리검색>
전체조회 + 지역있음 /v1/posts/regionEntireCategory/search
전체조회 + 지역없음 /v1/posts/entireCategory/search

카테고리 + 지역있음 /v1/posts/regionCategory/search
카테고리 + 지역없음 /v1/posts/category/search

✅ fullAddress === null || fullAddress === undefined
로그인 x 주소 x / 로그인 o 주소 x -> region 없는 Url
로그인 o 주소 o -> region 있는 Url

✅ 검색결과 정렬 쿼리
마감임박순 query = sortBy=limit_time&isAsc=true&keyword=${Term};
등록일순 query = sortBy=created_at&isAsc=false&keyword=${Term};
참여자 많은 순 query = sortBy=participant_number&isAsc=false&keyword=${Term};
참여자 적은 순 query = sortBy=participant_number&isAsc=true&keyword=${Term};

✅ 검색어에 공백 없애기, 공백 시 결과 없게

✅ pwa

해보고싶었던 것 🥲

📌 로그인 안한 사용자의 최근검색어

📌 intersection observer 사용해서 인피니티 스크롤

📌 더미데이터로 검색 성능 테스트해보기 (검색결과로 다 받아올 수 있을까?)

📌 관리자페이지 글쓸때 role 지정해서

📌 똑같은 드롭다운 선택했을때는 useEffect 안먹히니까 실행안되는 현상해결

📌 useState 바뀔때 그 찰나의 로딩 부분

📌 push 알림

📌 email 인증

📌 코드 리팩토링(if문 중첩 부분)

📌 다크테마
1. useContext 사용
2. style

<style>
@media(prefers-color-scheme:light){
	body{
		background-color:white;
		color:black;
	}
}
@media(prefers-color-scheme:dark){
	body{
		background-color:black;
		color:white;
	}
}
</style>