17. 이미지 제작 및 스프라이트 기법 적용

1. 아이콘 이미지 제작

• Photoshop으로 웹페이지 내에 쓰일 아이콘과 로고 등을 제작했다.
  • (로딩 img는 웹페이지 기능이 어느정도 완료된 후 추가작업할 예정 (gif))

2. 이미지 스프라이트 기법 (+ Styled-Components)

• 이미지 스프라이트 기법 : 브라우저 이미지 최적화할 때 사용하는 기법.
  페이지 로딩시 이미지를 개별적으로 로딩하면 서버 요청 수가 많아져서 로딩시간이 늘어난다.
  이를 개선하기 위해 하나의 이미지 파일을 제작 후 background, background-position, width, height
  속성을 사용해 필요한 부분에 필요 아이콘만 보이게 한다.
  사용자경험 개선 뿐만 아니라 수많은 이미지를 하나로 관리해 관리적 측면에서도 유용하다.

//App.tsx
import styled from 'styled-components';
import iconPath from './assets/icons.png';

function App() {
	return (
		<>
			<div className='App'>
			.
			.
			.
				<Test /> <-테스트할 이미지
			</div>
		</>
               
           );
}

const Test = styled.div`
background: url(${iconPath});
width: 150px;
height: 80px;
background-position: -10px 20px;
`

-> "img"태그에서 적용하면 태두리가 가는 선으로 같이 나타나서,
"div" 태그에 일단 테스트해보았다.

3. 레이아웃 및 Template 제작

• App.tsx에 이미지 파일, 컴포넌트 등을 모두 넣고, 전체적인 디자인을 테스트해봤는데
  전체적인 색감이나 컴포넌트 크기 등 더이상 크게 수정하거나 픽스할 것이 없다고 판단해
  페이지를 정리한 후 레이아웃을 생성했다.

* 필요한 페이지
- 랜딩페이지
- 메뉴 페이지
- 컨텐츠 페이지
- 회원가입, 로그인
- 검색결과 페이지
- 관리자 페이지

4.Lazy, Suspense 적용

• Lazy, Suspense 등을 적용해 로딩바 미리 도입