임베디드부터 웹코딩까지

SvelteKit은 기본적으로 서버 사이드 렌더링(SSR)을 지원합니다. 그런데 writable()로 만든 store 값이 페이지를 새로고침하거나 이동할 때 초기화되는 문제가 발생할 수 있습니다.

문제 원인

• SvelteKit은 SSR 시 매 요청마다 store 인스턴스를 새로 생성합니다.
• 이로 인해 클라이언트에서 저장한 store 값이 서버에는 전달되지 않고 초기값으로 리셋됩니다.

간단한 해결 방법: sessionStorage 동기화

클라이언트 환경에서만 store 값을 sessionStorage에 저장하고, 컴포넌트가 로드될 때 다시 불러오도록 설정하면 값이 유지됩니다.

1. store 정의

src/lib/stores/locationStore.ts

import { writable } from 'svelte/store';
import { browser } from '$app/environment';

const initial = browser && sessionStorage.getItem('location')
  ? JSON.parse(sessionStorage.getItem('location'))
  : {
      x: null,
      y: null,
      address: '',
      name: ''
    };

export const locationStore = writable(initial);

locationStore.subscribe(value => {
  if (browser) {
    sessionStorage.setItem('location', JSON.stringify(value));
  }
});
  

2. 사용 예 (store 값 설정)

import { locationStore } from '$lib/stores/locationStore';

function selectStoreData(data) {
  locationStore.set({
    x: data.x,
    y: data.y,
    address: data.address,
    name: data.name
  });
}
  

3. 다른 페이지에서 가져오기

<code class="language-svelte">
<script>
  import { locationStore } from '$lib/stores/locationStore';
  $: location = $locationStore;
</script>

<p>선택된 주소: {location.address}</p>
<p>좌표: {location.x}, {location.y}</p>
</code>

보완 팁

• sessionStorage는 탭 간 공유되지 않지만, 새로고침이나 뒤로가기엔 적합
• localStorage를 사용하면 브라우저 간에도 값 유지 가능
• 민감한 정보는 절대 저장하지 마세요 (브라우저 저장소는 안전하지 않음)

결론

SvelteKit에서 클라이언트 상태를 SSR 환경에서도 유지하고 싶다면,

가장 간단한 해결책은 스토어 값을 sessionStorage에 저장하고, 페이지 로드시 다시 복원하는 방식입니다.

Podman 이미지 크기를 줄이는 방법

Podman에서 이미지 크기를 줄이는 방법은 Docker에서 이미지를 최적화하는 방법과 매우 유사합니다. Dockerfile을 최적화하여 더 작은 이미지를 만들 수 있는 주요 방법은 다음과 같습니다.

1. 멀티스테이지 빌드 사용

멀티스테이지 빌드는 빌드 과정에서 필요한 종속성만 포함된 작은 이미지를 생성할 수 있게 도와줍니다. 빌드 단계에서 필요하지 않은 파일이나 패키지는 최종 이미지에 포함되지 않기 때문에 크기를 크게 줄일 수 있습니다.

 
# 빌드 단계
FROM node:16 AS build
WORKDIR /app
COPY . .
RUN npm install

# 최종 이미지 단계
FROM node:16-slim
WORKDIR /app
COPY --from=build /app /app
RUN npm install --production
CMD ["node", "index.js"]
        

2. 불필요한 파일을 .dockerignore로 제외

.dockerignore 파일을 사용하여 빌드에 불필요한 파일을 제외하면 이미지 크기를 줄일 수 있습니다. 예를 들어, node_modules, 로그 파일, 테스트 코드 등을 .dockerignore에 추가하세요.

# .dockerignore 예시
node_modules/
*.log
*.md
test/
        

3. 최소화된 베이스 이미지 사용

가능한 경우 최소화된 이미지를 사용하세요. 예를 들어, alpine 이미지는 다른 배포판보다 훨씬 작은 이미지입니다. alpine을 사용할 때 필요한 라이브러리나 패키지들만 추가하면 이미지 크기를 크게 줄일 수 있습니다.

FROM python:3.9-alpine
WORKDIR /app
COPY . .
RUN pip install -r requirements.txt
CMD ["python", "app.py"]
        

4. 이미지 레이어 최소화

RUN 명령어를 여러 번 사용하면 각 명령어가 새로운 레이어를 생성하므로 이미지 크기가 커질 수 있습니다. 여러 명령어를 하나로 합쳐서 레이어 수를 줄여보세요.

# 비효율적인 예
RUN apt-get update
RUN apt-get install -y build-essential

# 최적화된 예
RUN apt-get update && apt-get install -y build-essential
        

5. 캐시를 사용한 최적화

캐시를 사용하여 이미지 빌드를 빠르게 만들 수 있지만, 때때로 캐시가 너무 많이 쌓여 이미지 크기가 커질 수 있습니다. 불필요한 캐시를 지우는 것도 중요합니다.

RUN apt-get update && \
    apt-get install -y build-essential && \
    apt-get clean
        

6. 작은 라이브러리 또는 프레임워크 사용

이미지에서 사용하는 라이브러리나 프레임워크가 불필요하게 크다면, 더 작은 대체품을 고려해보세요. 예를 들어, nginx는 nginx:alpine을 사용하는 것처럼, 가능한 경량화된 버전의 소프트웨어를 선택하는 것이 좋습니다.

결론

위의 방법들을 적용하면 Podman으로 생성되는 이미지의 크기를 줄이는 데 도움이 될 것입니다. Docker와 Podman은 이미지 빌드 방식에서 큰 차이가 없기 때문에, 이러한 최적화는 Podman에서도 동일하게 적용됩니다. 이미지를 최적화하여 더 빠르고 효율적인 컨테이너 환경을 구축해 보세요!