열심히 안하나요?

죄송합니다...

오늘 한 걸 읊어보시오

오늘은~

• 지금 만들고 있는 걸 갈아엎고 Astro로 새로 시작할까 고민함
  • Astro 공식문서 읽기
  • Astro 관련 블로깅 찾아보기
  • Astro 활용 예제 찾아보기
• Grid 학습
  • grid를 활용해 미디어 쿼리 없이 반응형 레이아웃 구현하기
• Framer-motion
  • Framer-motion으로 포트폴리오에 애니메이션 효과 추가하기
    • Nav와 Nav 아이템에 initial, exit 애니메이션 추가
    • 열리면 x자로 변하는 햄버거 버튼 만들기
    • 새로 만든 컴포넌트에 다크모드 적용하기
    • 트러블슈팅...

한 게 별로 없군요!!!

Astro

Astro를 써보는 게 어떻냐는 의견을 받았습니다. Astro가 뭔데요?

Astro란?

Astro는 아일랜드 아키텍처를 활용한 멀티 프레임워크 정적 사이트 빌더(SSG)입니다. 대체 어떻게 띄어쓰기를 한 번 할 때마다 모르는 말이 나올 수가 있죠?

아일랜드 아키텍처

쉽게 설명하자면 웹 페이지가 하나의 거대한 사이트가 아닌, '대체 가능하며 독립적인 덩어리(component)로 분리된 하나의 거대한 바다'로, 동적인 컴포넌트들은 '바다 위에 떠 있는 섬들' 바꾸어 생각하는 패러다임이다.

라고 합니다...
이러한 아이디어를 적용하면 동적인 부분을 제외한 나머지 부분(바다 영역)은 순수 HTML로 대체할 수 있고, 각각의 섬(컴포넌트)들은 느리게(lazy), 또는 다양하게(polyglot) 불러올 수 있습니다. 음...

서버가 전달해주는 HTML은 SPA처럼 동적이지는 않아도 페이지의 핵심 데이터만은 가진 상태로 전달됩니다. 제가 흔히 쓰던 SPA 프레임워크는 우선 라이브러리와 js 전체를 로딩한 후 컨텐츠를 비동기로 불러오는 식이었다면, 아일랜드 아키텍처는 이미 컨텐츠가 HTML에 정적으로 포함된 채로 전달되며, 여기에 추가적으로 브라우저가 컴포넌트들을 개별적으로 불러옵니다.

SPA => js가 데이터를 불러와 html을 렌더링해 끼워넣음
아일랜드 아키텍처 => 필요한 데이터가 html에 들어있고, 여기서 필요에 따라 컴포넌트를 불러옴

(아닐 수도 있습니다! 왜냐면 도저히 이해가 안가서 나무위키를 보고 있거든요! 세상에!)

멀티 프레임워크

아스트로의 파격적인 특징! React, Vue, Svelte, Preact, Lit등 수많은 웹 프레임워크의 컴포넌트를 모두 지원! 심지어 한 페이지에 이것들을 섞어서 사용하는 것도 가능! 세상에!
=> 이 역시 아일랜드 아키텍처를 사용함으로써 얻는 장점! 각 컴포넌트가 서로 독립적이다

SSG (정적 사이트 생성자)

웹 페이지를 미리 모두 만들어놓고, 요청이 들어오면 만들어놓은 웹페이지를 그대로 응답만 해준다! 서버와 클라이언트 측 모두 렌더링을 위해 할 일이 별로 없기 때문에, SSG로 생성된 웹사이트는 속도가 엄청 빠릅니다. 누가 접속하든 항상 동일한 내용을 보여주는 소규모 웹사이트 (예 : 포트폴리오, 제품 카탈로그, 개인 블로그 등)를 만드는데 최적화된 방법입니다!
SPA로 생성된 웹사이트는 동적으로 페이지를 만들어내지만, SSG는 미리 만들어놓은 여러 웹페이지로 이루어져 있기 때문에 (MPA) 검색엔진이 크롤링하기 매우 좋아서 SEO에 유리합니다!
잘 알려진 SSG로는 Gatsby, Hugo, Jekyll, Hexo +Astro 등이 있다고 하네요

왜 추천받았죠?

그것은 제가 포트폴리오 만드는 데 너무 시간을 많이 쓰고 있기 때문이지요...
스승님의 의견으로는,

포트폴리오는 필요하긴 하지만, 포트폴리오 자체에 프로젝트로써의 가치는 별로 없다. 내 프로젝트에 넣으려면 '문제를 해결한 경험'이 많아야 하는데, 해결해야 하는 문제라는 건 현실적인 비즈니스가 있을 때 비로소 생긴다. (=포트폴리오는 내가 뭘 했고 어떤사람이고를 단순히 '보여주는' 취지이기 때문에 별 다른 기능이 없고, 이렇다 할 문제가 발생하지 않는다. 따라서 포트폴리오는 빠르게 만들어버리고, 실질적인 비즈니스와 그에 따른 여러 기능 요구사항을 가진 프로젝트를 시작하는 게 좋다. 근데 왜 인프런 강의 요즘 안보는거같냐? 코어자바스크립트 어디까지 읽었냐?

라고 하십니다. 아스트로는 빌트 인 테마도 제공하기 때문에, 제가 만들고 있는 포트폴리오 같은 것들을 빠르게 만들어내기에는 최적이라고 할 수 있습니다. 자체적으로 View Transitions API라는 애니메이션 기능도 제공하기 때문에, 혼자서 애니메이션 공부하고 낑낑대면서 만드는 것 보다 훨씬 빠르기도 하구요.

그러나... 뭔가 내키지가 않습니다. 내키지 않는 이유를 좀 정리해보려고 합니다.

왜 내키지 않죠?

• 생태계 미성숙 : 나온지 얼마 안됐고, 지금도 활발하게 업데이트가 이루어지고 있는 프레임워크라 공식 문서도 아직 채 번역이 안되었을 정도. 써본 사람도 많지 않아서 레퍼런스 삼을 만한 소재가 별로 없음... 개척자가 되는 건 좋지만 시간&노력이 필요 이상으로 많이 든다
• 마음에 드는 템플릿이 없다 : 내 마음에 드는 포트폴리오를 만들려면 어차피 기존에 만들어뒀던 리액트 컴포넌트를 사용하거나, 새로 만들어야 한다
• 아스트로를 적용하면 1. SPA에서 MPA가 되고 2. 아키텍처가 바뀌고 3. CSR에서 SSR이 된다 (이 부분은 더 알아볼 필요 있음) => 완전히 갈아엎어야 한다!
• View Transitions API든 Framer Motion이든 새로 배워야 하는 건 똑같다 => 그런데 View Transitions API는 Astro에서밖에 못쓴다! Framer Motion은 배워두면 리액트로 뭐 만들 때 꺼내 쓸 수 있는데...
• Redux 못씀! => Astro 공식 문서에서는 전역 상태 관리에 있어 Nano Stores라는 라이브러리를 추천한다. (=또 새로 배워야됨 & 리덕스 익히려고 했는데 못함)
• 종합하자면, 내가 느끼는 필요성에 비해 배워야 하는 것 + 들어가는 시간(기존에 들인 시간 + 새로 배우는 시간)이 너무 많다

그럼에도 불구하고?

그럼에도 불구하고... 포트폴리오 구현이 끝나면 Astro로 마이그레이션을 해보려고 합니다. 이유는 다음과 같습니다.

• 새 프레임워크 경험이 없음 (Vue나 Next.js는 손도 안대봤음) => 새로운 프레임워크를 접해보고, 배우면서 시야를 넓히고 경험을 쌓을 필요가 있음 (=썰풀 거리 늘리기, 지평 넓히기)
• 성능 차이 경험 필요 => 프론트엔드에서 고민을 많이 해봐야 하는 부분이 성능 최적화라는데 관련 경험이 없음. 얼마나 빠른지, 왜 빠른지 겪어봐야 함
• 마이그레이션 경험 필요 => 하나 쓰기로 하면 그냥 죽을 때까지 그것만 쓰는 나쁜 습관... 기존의 앱에 새 기술을 적용하거나, 아예 뜯어고쳐보는 경험 필요

아무튼 Astro는 보류하기로 했습니다

Framer-motion

애니메이션 라이브러리 프레이머-모션을 배우고 있습니다.

이걸로 뭐했는데요?

별 건 아니고... Nav에 애니메이션 적용하고, docs에서 제공하는 코드를 활용해서 메뉴 버튼을 움직이는 햄버거 버튼으로 만들어보았습니다.

Nav 바꾸기

기존의 Nav는 메인 페이지에 상시 띄워두는 형태로 뼈대만 만들어져 있었는데요, 이걸 수정해서 아래와 같은 조건으로 만들어 보았습니다.

• 헤더에 Nav 버튼이 위치하고, 클릭하면 Nav를 표시한다.
• Nav의 상태(isOpen)를 redux 전역 상태로 관리한다.
• Nav는 App 단에서 표시하고, z-index를 줘서 다른 페이지 컴포넌트 (Projects, About 등...) 위에 표시되도록 한다.
• Nav의 하위 요소인 각각의 메뉴 아이템들을 NavItem이라는 별도 컴포넌트로 분리 (기존에는 Nav에 하드코딩으로 5개 다 때려박아놨음...)
• Nav와 NavItem에 멋진 애니메이션을 넣는다.

그리고 진행 중에 겪은 문제는 다음과 같습니다.

• Nav를 닫을 때 exit 애니메이션이 재생되지 않는다.
  Nav에 exit 애니메이션을 달아서, Nav를 닫을 때 자연스럽게 사라지게끔 하려고 했는데, 그 대신 아무 애니메이션 없이 뚝 끊기듯이 사라지는 증상이 있었습니다. 확인해보니, exit 애니메이션을 활용하려면 해당 컴포넌트가 AnimationPresence라는 컴포넌트로 감싸진 상태여야 한다더군요!

  AnimatePresence allows components to animate out when they're removed from the React tree. (Framer-motion 공식문서)

그래서 App에 Nav를 적용한 부분을 아래와 같이 바꿔주었습니다.

      <AnimatePresence>
        {isOpen && <Nav key="nav" />}
      </AnimatePresence>