svelte 프레임워크 적용 순서

1. npm i svelte npm svelte
2. import Router from 'svelte-spa-router'
3. npm run build

vite 서버

• 프론트엔드 개발을 위한 툴이다
• 개발 환경에서 Dev Server를 제공한다
• ESM(EcmaScript Modules)를 ES6에서 도입하여 import/export를 사용하여 모듈을 동적으로 로드할 수 있는 모듈 시스템
• 번들링이 필요가 없고 브라우저에서 필요한 모듈의 소스코드를 import만 해주면 되는 방식

svelte 프레임워크

• 순수 자바스크립트를 사용하는 가벼운 프레임워크
• 가상 돔 없이 보다 적은 코드로 서비스를 구현할 수 있다

문제상황

• footer의 icon-desc가 브라우저 하단에 가려져 텍스트가 반만 보이는 문제

문제 원인

• footer의 height가 좁은 상황에서 icon-image와 icon-desc 사이의 margin이 커서 icon-desc 텍스트가 브라우저 하단에 가려지게 되었다

문제 해결 방법

• footer의 height를 늘려줬다
• icon-image와 icon-desc 사이의 margin을 줄여줬다
  footer { width: 50%; height: 60px; position: fixed; bottom:0; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #eaeaea; background-color: white; }
footer-icons__desc{ font-size: 0.8rem; margin-top: 0.6rem; }

문제상황

• title div에 글자가 많아지면 div가 이미지 div 영역을 침범하는 문제가 있었다

문제원인

• title div에 width가 적용되어 있지 않아 글자가 많아진만큼 width가 자동으로 늘어나 img div 영역을 침범했다

문제 해결 방법

• title div에 width를 적용해줬다

• %단위를 사용하여 width를 적용했다

• px를 적용하면 반응형에 대응하지 못하고 px가 차지할 수 있는 범위보다 텍스트가 많아지는 상황을 대응하기 위해 부모 width를 기준으로 텍스트양에 따라 width가 적용되도록 %f단위를 사용하였다
  .item-list__info { width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-left: 20px; }

• 텍스트가 많아지면 div영역에서 벗어나지 않고 다음줄로 넘어가도록 하기 위해 flex-wrap: wrap 속성을 적용하였다
  .item-list__info-title { flex-wrap: wrap; font-size: 1.5rem; }