React로 만든 웹사이트를 로컬에서 완성했더라도, 사용자가 언제 어디서나 빠르고 안정적으로 접속하려면 **배포**가 필요합니다. 배포 플랫폼은 다양하지만, 이번 글에서는 **AWS S3 + CloudFront** 조합을 사용합니다.
CSS 변수의 기본 동작부터 React 환경에서의 활용, 반응형/다크모드 적용까지
프론트엔드를 처음 배울 때부터 저는 React로 개발을 시작했습니다. HTML, CSS, JavaScript의 기초를 어느 정도 익힌 뒤 곧바로 React 컴포넌트를 만들고, 상태를 useState로 관리하며, 화면을 JSX로 선언하는 방식이 자연스러웠습니다.
이번 프로젝트는 SK 그룹 개발자 커뮤니티인 DEVOCEAN의 영(Young), 오픈랩에서 진행된 다양한 프로젝트들을 기록하고 소개하는 웹사이트를 만드는 것이 목적이었습니다. 단순한 프로젝트 리스트를 나열하는 것이 아니라, **브랜드의 철학과 생명력을 전하고자 했습니다.**
Loader와 Action이 나오기 전인 React Router DOM v6.4 이전에는 라우팅과 데이터 페칭이 완전히 분리되어 있었습니다. 라우터는 단순히 URL에 따라 어떤 컴포넌트를 렌더링할지만 결정했고, 데이터 로딩은 각 컴포넌트의 책임이었습니다.
현대 웹 애플리케이션은 대부분 서버나 외부 API로부터 데이터를 가져와 사용자에게 보여주는 구조를 가지고 있습니다.
Next.js에서는 애플리케이션의 모든 페이지가 React 컴포넌트로 이루어져 있지만, 기본적으로 HTML의 <html>, <head>, <body> 태그 같은 구조는 자동으로 생성됩니다. 하지만 때로는 이러한 구조를 커스터마이징할 필요가 있을 때가 있습니다. 바로 이때 사용하는 파일이 _document.js입니다.
인기 글을 불러오는 중...
🌀 댓글을 불러오는 중...