링크

Cloud Sanghun Blog With Vanila JS

설명

• Vanilla JS, HTML5, CSS3만을 사용하여 state기반 rerendering, routing을 통한 SPA 개념을 적용하여 개인 블로그를 만들고 있습니다.

• 언젠가는 웹표준인 web components를 적극적으로 활용해 볼 예정입니다.

CSR with Vercel 작동 방식

• CSR과 Vercel의 serverless api funtion으로 제공되는 api를 조합한 것입니다.
• 개발서버는 npm run dev를 통해 실행할 수 있습니다.
• vercel에서는 other framework로서 제공하기에 별도의 실행코드가 필요 없는 상태입니다.
• CSR라우팅에서 404인경우 index.html로 리다이렉트를 하기 위한 설정은 vercel.json에 있습니다.

UI/UX

Main page

Burger Navigation

Categorized Post

Infinite Scroll

Resume with printing

개념적 목표

2022

• SPA Routing 기능
  • Routing with params
  • Routing without Refresh
• 유기적인 Event Handler 등록
• Component 추상화
• Webpack
  • Build Setting
  • Dev Setting
• Nginx Web server
  • 포트포워딩을 통해 하나의 폴더에 서버와 프론트 띄우기
    • 443 -> api.xxx.com -> 4000
    • 443 -> blog.xxx.com -> dist/index.html
• https setting with AWS load balance, Route 53

2023

• Hash Routing -> History Routing for google adsense 👀 and ready for server side
  • apply custom event for a tag and popstate
  • do nginx 404 redirect setting in blog subpath
• client side -> server side with state manange and component structure
• state manage -> apply web standards components with shadow dom and use Proxy for managing global state

UI

2022

• 레이아웃
  • [x]GNB
• 포트폴리오 페이지
• 메인 페이지
• 이력서 페이지
• 게시글 페이지

2023

• 이력서 페이지 개선
• 게시글 타입 선택박스 UI 개선

UX

2022

• MD파일을 활용한 블로그
  • MD파일 읽어오기
  • CSS해주기
• Pagination
• 카테고리별 글 보기
• 외부 플랫폼을 이용한 댓글
  • Disqus

2023

• FE스러운 재미있는 이벤트가 필요하다.

Build

2022

• FE: Webpack build

2023

• FE: Vite build