오늘 한 일
- gdsc 회의
- gloddy 개발
GDSC core member
누군가를 이끌어간다는 것은 정말 어려운 일이다. 나는 이끌어지기만 해서 잘 몰랐는데, 이끄는 입장이 되니까 어떻게 해야할 지 고민이 된다.
일방적으로 이끄는 것이 아니라, 서포트하는 느낌으로 이끌어야할 것 같다. 내가 멤버들에게 과제를 줄 때, 최대한 멤버가 수행할 수 있도록 도와주는 것이 중요하다. 너무 내 생각을 많이 주입하게 되면 얻어가는 것이 없을 수 있다. 해결하는 방식은 여러가지가 있을 수 있으니, 그들이 하는 방식으로 최대한 해결할 수 있도록 서포트하려 한다.
멤버들이 잘 안 따라와줄 수도 있다. 그럴 때 어떻게 풀어나가는지도 다 경험이 될 것 같다. 뭐든 다 경험이니 괜찮다!! 다 해보자
gloddy
tailwindcss가 SSR에서 적용이 안되는 이슈가 아직도 해결하지 못하고 있다. 해결방법들이 몇가지 있는데 Next 13 이전 버전들이라 잘 적용이 안된다...
아이콘 깜빡거리는 문제
페이지가 렌더링될 때 아이콘이 깜빡이는 문제가 있다. 네트워크 탭을 보니 요청 시간이 꽤 걸리는 것을 확인할 수 있었다.
최적화를 하는 법은 여러가지가 있을 것 같다.
1. svg 태그를 그대로 사용하기
위의 문제를 해결할 수 있지만 코드가 너무 길어지고 어떤 svg 파일인지 분간하기가 어려워진다.
2. svg 파일을 import 하기
svg 파일을 import해서 사용하면 된다.
근데 전에 어떤 글에서 봤는데, import를 하면서 불필요한 모듈 로딩이 일어난다고 한다. 그래서 이 방법도 패스
3. sprite 파일을 만들어서 사용하기
프론트엔드 최적화 강의를 수강한 적이 있었는데, sprite 파일을 만들어서 사용하면 적은 요청으로도 여러개의 아이콘을 사용할 수 있다고 한다.
그리고 Icon이라는 컴포넌트를 만들어 아이콘의 이름(id)을 props로 넘기면 불러올 수 있도록 구현했다.
sprite 파일을 만드는 건 svgstore라는 라이브러리를 사용했다. 이 라이브러리를 사용하면 svg 파일들을 하나의 파일로 만들어준다.
// package.json
"make-sprite": "rm public/sprite/sprite.svg && svgstore -o public/sprite/sprite.svg public/sprite/icons/**/*.svg"
yarn make-sprite 명령어를 통해 sprite 파일을 만들 수 있다. icons에 들어가있는 svg 파일을 하나의 파일로 만들어준다.
그럼 이제 Icon 컴포넌트를 만들어보자.
// Icon.tsx
import type { SVGProps } from 'react'
interface IconProps extends SVGProps<SVGSVGElement> {
id: string
}
export default function Icon({ id, width = 24, height = 24, fill = 'none', ...props }: IconProps) {
return (
<svg width={width} height={height} fill={fill} {...props}>
<use href={`/sprite/sprite.svg#${id}`} />
</svg>
)
}
sprite.svg 뒤에 #을 붙이고 아이콘의 id를 붙여주면 된다. id는 svg 파일명이다.
적용한 결과는 아래와 같다.
// before
<IconButton>
<Image src="/icons/24/navigate_next.svg" width={24} height={24} />
</IconButton>
// after
<IconButton>
<Icon id="24-navigate_next" />
</IconButton>
확실히 코드가 깔끔해지고 아이콘이 깜빡거리는 문제도 해결되었다. 👍
내일 할 일
- gloddy 3차 QA