웹 퍼블/프론트엔드 이직 한다면

어느 카페에서 아래 캡처본을 보고 많은것을 느꼈다. 현재까지는 마지막 케이스만 택한 길을 갔었다.
하지만, 이직한다면 첫번째 길로 가려 한다.

LLM으로 웹 퍼블과 프론트엔드 경계가 허물어질 것이라 많이 느끼고 있고 그렇게 바뀔것 같다.
 
그래서, 내가 꿈꾸던 사이트는 딱 3개 페이지만 만드는 것이다.
 
2개 페이지는
폼, 탭, 스크롤에 따른 canvas와 three.js 등의 모션, 지도, 스와이퍼, 모달, LLM 챗봇, open ai의 임베디드 활용해서 검색시 추천 항목 결과 노출, history api 활용한 부드러운 화면 전환/CRUD 등을 넣을 것이다.
mac, ios가 없으니 윈도우, aos에서 접근성 제대로 맞추고.

굳이 next.js로 만들어야 할까? 세상에서는 다들 대세라고 하지만, 아직까지는 회의적이다. 상태 관리의 이점과 페이지 새로고침 없는 사용자 경험 때문에 프레임워크를 사용해야할까? 군더더기 없이 순수 js로 깔끔하게 구축하면 안되나?  jquey시절과 비교해서 리액트 시점에서의 더 좋은 이점이 있을까?
아래 문서를 참고해보라.
https://frontendmasters.com/guides/front-end-handbook/2024/#6.46
https://frontendmasters.com/guides/front-end-handbook/2024/#6.54
현재 내 생각은 css, js, html을 기본으로 하되 백엔드 서비스를 활용해서 REST API 방식으로 처리하는 것이다.

마지막 1개의 페이지는
공통 요소들을 컴포넌트화해서 개발 가이드를 만들것이다. 어느 누구든 쉽게 앞으로의 페이지에 바로 꺼내 쉽게 쓸 수 있도록 하자. 수백 페이지를 구축한다고 생각하며 가이드를 만들자.
 
디자인은 핀터레스트 등 참고 사이트는 안보고 내가 직접 꿈꾸던 페이지 형태를 직접 설계하고 디자인(심플하게)하고 구축할 것이다. 그 동안 만들었던 페이지들을 상기하며... 디자인이 이상해도 좋다. 가독성과 심미성만 해지지 않을 정도만 지키자.
 
개발 환경은 어떻게 구축해볼까? 이직을 결심하는 시점에 다시 생각해보자.
걸프 vs vite
github page vs aws ec2
node.js, nginx
firebase or supabase
headless csm?
 
참고로 gemini 1.5 pro에게 방대한 문서를 던저주고(2024년 5월 2일까지 무료) 추천하는 답변은 아래와 같았다.

웹 개발 추천 방향 (백엔드: Firebase/Supabase)

Firebase나 Supabase를 백엔드로 활용한다면, JAMstack 아키텍처를 기반으로 한 웹 개발 방향을 추천합니다. JAMstack은 JavaScript, APIs, Markup의 약자로, 정적 웹 페이지와 동적 기능을 결합하여 빠르고 안전하며 확장 가능한 웹 애플리케이션을 만드는 접근 방식입니다.
추천 기술 스택:

• Front-end 프레임워크/라이브러리:
  • SolidJS: 빠르고 효율적인 UI 구축을 위한 선언적 JavaScript 라이브러리. (권장)
  • React, Vue.js, Angular, Svelte: 다른 인기 있는 프레임워크도 선택 가능.
• 정적 사이트 생성기 (SSG):
  • Astro: 다양한 프레임워크와 함께 사용 가능하며, 빠른 정적 HTML 렌더링을 제공. (권장)
  • Hugo, 11ty: 다른 SSG 옵션도 고려 가능.
• UI 툴킷/라이브러리:
  • Tailwind CSS: 유틸리티 우선 CSS 프레임워크로, 빠른 프로토타이핑과 커스터마이징 가능.
  • Chakra UI, Material UI: 다른 UI 라이브러리도 선택 가능.
• 기타 도구:
  • Vite: 빠른 개발 서버 및 빌드 도구.
  • ESLint, Prettier: 코드 품질 및 스타일 관리 도구.
  • Git, GitHub: 버전 관리 및 협업 도구.

개발 과정:

1. 정적 콘텐츠 생성: Astro와 같은 SSG를 사용하여 Markdown 파일이나 템플릿에서 정적 HTML 페이지를 생성합니다.
2. 동적 기능 추가: SolidJS와 같은 프레임워크/라이브러리를 사용하여 사용자 상호 작용, 데이터 가져오기 및 업데이트와 같은 동적 기능을 추가합니다.
3. Firebase/Supabase와 통합: 백엔드 서비스 (인증, 데이터베이스, 스토리지 등)를 위해 Firebase 또는 Supabase API를 사용하여 프런트엔드와 통합합니다.
4. 배포: Netlify와 같은 플랫폼에 애플리케이션을 배포하여 전 세계 사용자에게 빠르고 안전하게 제공합니다.

이 방향의 장점:

• 빠른 성능: 정적 콘텐츠와 효율적인 프레임워크 사용으로 빠른 로딩 시간과 응답성을 제공합니다.
• 높은 확장성: Firebase/Supabase와 같은 BaaS 플랫폼은 트래픽 증가에 따라 자동으로 확장됩니다.
• 개발 효율성: SSG와 프레임워크는 코드 재사용, 구성 요소화, 쉬운 유지 보수를 가능하게 합니다.
• 보안: 정적 콘텐츠는 보안 취약점을 줄이고, BaaS 플랫폼은 안전한 인증 및 데이터 관리 기능을 제공합니다.

추가 고려 사항:

• TypeScript: JavaScript에 정적 타이핑을 추가하여 코드 안정성과 유지 보수성을 향상시킵니다.
• 테스팅: Vitest와 Playwright를 사용하여 단위 테스트 및 E2E 테스트를 수행하여 코드 품질을 보장합니다.
• 웹 접근성: WCAG 지침을 준수하여 모든 사용자가 웹 애플리케이션에 접근할 수 있도록 합니다.
• SEO: 정적 콘텐츠 생성과 적절한 메타 태그 사용으로 검색 엔진 최적화를 달성합니다.

Firebase/Supabase와 JAMstack 아키텍처를 결합하면, 현대적이고 효율적인 웹 개발 환경을 구축하고, 사용자에게 훌륭한 경험을 제공하는 웹 애플리케이션을 만들 수 있습니다.

어느 카페의 사람의 글