프레임워크 없이 MY PORTFOLIO를 만들면서 배운 것

Source: Dev.to

내가 만든 모든 프로젝트는 npx create-react-app으로 시작했다. 이번 프로젝트는 그렇지 않았다.

일반적인 시작 명령어

• npx create-react-app
• npm create vite@latest
• npx create-next-app

프로젝트를 띄우고 바로 개발을 시작한다. UI도 동작하고 기능도 작동했지만, 브라우저가 마치 검은 상자처럼 느껴졌다.

다른 접근 방식

프레임워크부터 시작하는 대신, 모든 것을 다음과 같이 최소화했다:

• ✅ index.html
• ❌ 빌드 도구 없음
• ❌ npm 설치 없음
• ❌ 추상화 레이어 없음

HTML, CSS, 그리고 순수 JavaScript만 사용했다.

다시 만들어야 했던 것들

프레임워크 없이 작업한다는 것은 보통 숨겨져 있던 작업들을 직접 처리해야 함을 의미한다:

• 여러 브레이크포인트에 대응하는 반응형 레이아웃
• 부드러운 페이지 전환
• CSS 변수로 구현한 다크/라이트 테마
• 오로라 스타일 애니메이션 (키프레임 실험을 생각보다 많이 해야 했다)

느리긴 했지만, 기본에 직접 관여하게 만들었다.

결과물 포트폴리오

최종 제품은 의도적으로 단순하게 구성했다:

• 깔끔한 벤토 스타일 레이아웃
• 작은 실시간 시계 위젯
• 내가 진심으로 즐겨 만든 여섯 개 프로젝트

화려한 요소는 없고, 기본이 여전히 중요하다는 것을 상기시켜준다.

위 레이어 없이 웹이 어떻게 보이는지 궁금하다면 아래를 확인해 보세요 👇
(댓글에 링크 있음)

Tags: #webdevelopment #frontend #javascript #webdev #learninginpublic