Next.js를 사용한 정적 웹 페이지 작성

웹응용프로그래밍 (CB2001105-063) 강의(부산대학교) 교안 및 노트

typescript
javascript
Published

December 8, 2025

웹 개발에 첫걸음을 내딛는 것을 환영합니다. 정적 웹 페이지를 직접 만들며 HTML, CSS의 기본을 다지고 배포까지 경험하는 것은 좋은 시작입니다. 이제 Next.js와 컴포넌트 설계를 연습하며 한 단계 더 나아가야 하는 이유를 간략하게 소개합니다.

강의 슬라이드

TypeScript

Next.js

실습

프로젝트

튼튼한 기초 위에 세우는 전문성

기본 정적 웹 페이지 연습은 웹이 어떻게 구성되는지 그 ’뼈대’를 이해하는 과정입니다. 텍스트, 이미지, 링크 등을 배치하고 CSS로 꾸미면서 “웹페이지는 이런 원리로 보이는구나” 하고 실습을 통해 확인할 수 있습니다. 하지만 실제 서비스를 만드는 상황을 생각해보면, 예를 들어 블로그나 포트폴리오 사이트를 만들 때 페이지마다 반복되는 상단 메뉴(헤더)나 하단 정보(푸터)를 HTML 파일에 복사해서 붙여넣는다면, 수정할 일이 생겼을 때 번거로워집니다.

Next.js: 정적 페이지의 ‘업그레이드’

이런 불편함을 해결하고 웹을 더 효율적으로 만들기 위해 라이브러리와 프레임워크를 사용합니다. 수업에서 Next.js를 사용하는 이유는 명확합니다. Next.js는 React를 기반으로 하며, 정적 사이트 생성(Static Site Generation, SSG) 기능이 강력합니다. 개발할 때 편리한 기능(뒤에 설명할 ‘컴포넌트’ 등)을 사용하면서, 완성된 결과물은 사용자가 빠르게 볼 수 있는 최적화된 정적 HTML 파일로 만들어줍니다. 즉, 연습한 정적 페이지의 장점(빠른 속도, 안정성)을 그대로 누리면서, 개발도 더 편하고 효율적으로 할 수 있게 도와줍니다.

컴포넌트 설계: 효율적인 ‘레고 블록’ 조립

도구 사용법만 익힌다고 충분하지 않습니다. 실제 수업에서 주의 깊게 다루어야 하는 것은 컴포넌트 설계입니다. Next.js는 React 기반이며, React의 핵심 철학이 바로 이 ‘컴포넌트’입니다. 컴포넌트는 재사용 가능한 UI 조각을 의미합니다. 헤더, 푸터, 블로그 목록에 들어가는 ’게시글 미리보기 카드’ 하나하나를 별도의 ‘부품(컴포넌트)’으로 만드는 것입니다. 이렇게 잘게 쪼개서 설계하면, 나중에 이 부품을 필요한 곳에 가져다 쓰기만 하면 됩니다. 유지보수가 쉬워지고, 코드도 더 깔끔해집니다. 정적 페이지 연습이 ’집 전체’를 한 번에 그리는 연습이었다면, 컴포넌트 설계는 ’문’, ‘창문’, ’벽돌’을 따로따로 만드는 연습이라고 할 수 있습니다.

두 연습의 시너지 효과

Next.js로 정적 페이지를 만드는 연습과 컴포넌트 설계를 익히는 것은 좋은 조합입니다. 컴포넌트 단위로 효율적으로 설계한 코드를 Next.js가 조립해, 검색 엔진에도 친화적이고(SEO) 로딩 속도도 빠른 정적 웹사이트로 완성해줍니다. 이 과정을 통해 개발자는 ’단순히 페이지를 만드는 사람’에서 ’효율적이고 확장 가능하게 웹을 설계하는 엔지니어’로 성장하게 됩니다.

더 넓은 세상으로: 프론트엔드 전문가

여기서 더 나아가면, 사용자의 경험(UX)을 고민하고 인터페이스(UI)를 구현하는 프론트엔드 전문가로 성장할 수 있습니다. CSS 프레임워크(TailwindCSS, Bootstrap 등)를 다루고, 복잡한 데이터도 사용자가 보기 편하게 시각화(D3.js 등)하는 역할을 맡게 됩니다. 사용자가 웹에서 만나는 모든 시각적인 부분과 상호작용을 책임지는 역할입니다.

더 전문적인 개발자로 발돋움할 수 있는 기회

서버나 데이터베이스의 원리를 이해하는 개발자로 영역을 넓힐 수도 있습니다. Next.js는 서버 기능도 지원하기 때문에, 사용자가 보는 화면(프론트엔드)부터 데이터를 처리하는 뒷단(백엔드)까지 이해하는 개발자가 될 수도 있습니다.

JavaScript와 TypeScript: 현대 웹 개발의 핵심 언어

JavaScript와 TypeScript는 현대 웹 개발에서 널리 사용되는 핵심 프로그래밍 언어입니다. JavaScript는 1995년 Brendan Eich에 의해 개발되었으며, 웹 페이지의 상호작용성을 위해 등장했습니다. 이후 프론트엔드와 백엔드 개발 모두에 활용되는 범용 언어로 자리잡았습니다. TypeScript는 2012년 Microsoft에서 만든 JavaScript의 상위집합 언어로, 정적 타입 시스템을 도입해 대규모 애플리케이션의 생산성과 안정성을 높이기 위해 설계되었습니다.

JavaScript의 역사와 특징

JavaScript는 Netscape Navigator 1.0에서 등장해 ECMAScript 표준을 통해 발전해왔습니다. 초기에는 웹 페이지의 간단한 상호작용에 쓰였으나, 현재는 서버, 모바일 앱, 데스크톱 앱 등 다양한 영역에 활용되고 있습니다. JetBrains의 2024년 개발자 생태계 설문에 따르면, JavaScript는 7년 연속 가장 많이 사용되는 프로그래밍 언어로 꼽혔습니다.

JavaScript의 주요 특징은 동적 타이핑, 인터프리터 방식의 실행, 이벤트 기반 프로그래밍입니다. 이를 통해 유연하고 빠른 프로토타이핑이 가능하지만, 대규모 프로젝트에서는 런타임 에러가 늘고 코드 유지보수가 어려울 수 있습니다. 실제로 JavaScript 애플리케이션은 TypeScript에 비해 런타임 에러 발생률이 30% 더 높다는 연구도 있습니다.

최신 ECMAScript 기능

ES2024(ECMAScript 2024)에서는 Object.groupBy(),Map.groupBy() 등 데이터 그룹화 메서드와, 유니코드 처리를 위한 toWellFormed(), 동기 데이터 액세스를 위한 Atomic waitSync 기능 등이 추가되었습니다. 옵셔널 체이닝(?.)과 널 병합 연산자(??) 등 현대적인 문법으로 코드 가독성과 안정성이 향상되고 있습니다.

TypeScript의 등장 배경과 장점

TypeScript는 JavaScript의 한계를 보완하기 위해 개발되었습니다. Anders Hejlsberg가 이끈 개발팀은 정적 타입 시스템을 도입해, 코드 품질과 개발 생산성을 높이고자 했습니다. TypeScript는 기존 JavaScript 코드와 완전히 호환되며, 필요에 따라 점진적으로 적용하는 것도 가능합니다.

TypeScript의 중심에는 정적 타입 시스템이 있습니다. 컴파일 시점에 타입 오류를 미리 감지해 런타임 에러를 줄일 수 있습니다. 인터페이스, 제네릭, 유니온 타입, 타입 가드 등 고급 타입 기능도 활용할 수 있습니다.
IDE 자동완성, 리팩토링, 코드 네비게이션 등 개발 도구 지원이 뛰어나 작업 효율도 높아집니다.

TypeScript 채택률 추이

2017년 12%였던 TypeScript 채택률은 2024년 35%로 성장했습니다. JetBrains의 “Language Promise Index”에서 1위를 차지하며 향후 성장 가능성을 보여주고 있습니다. Google, Meta, Netflix 등 여러 대기업과 Angular, Deno 등 주요 프레임워크가 TypeScript를 채택하고 있습니다.

JavaScript와 TypeScript의 차이점

가장 큰 차이점은 타입 시스템입니다. JavaScript는 동적 타이핑을 사용해 런타임에 변수 타입이 결정됩니다. 반면, TypeScript는 정적 타이핑으로 컴파일 시점에 타입을 검사합니다. 이러한 차이는 에러 감지 시점과 코드의 예측성, 유지보수 편리성 등에 영향을 줍니다.

개발 경험 및 도구 지원

TypeScript는 강력한 IDE 지원으로 생산성을 높여줍니다. 자동 완성, 타입 정보 표시, 리팩토링 도구 등이 작동하고, 대규모 팀 협업에서도 유리합니다. JavaScript는 설정이 간단하고 학습 곡선이 낮으며, 빠른 프로토타이핑과 소규모 프로젝트에 적합합니다.

주요 프레임워크와 라이브러리

React, Vue, Angular는 대표적인 프론트엔드 프레임워크입니다. React가 40% 이상의 점유율로 가장 인기 있고, Vue(20%), Angular(15%)가 그 뒤를 잇고 있습니다. 2024년에는 htmx가 새로운 패러다임의 도구로 부상하고 있습니다.

빌드 도구의 발전

Vite는 빠른 개발 서버를 제공합니다. Webpack은 복잡한 프로젝트에서 높은 확장성을 제공합니다. esbuild는 빌드 속도가 빠르고, Parcel은 제로 설정으로 접근성을 높이고 있습니다. Turbopack은 Next.js 15에서 기본 번들러로 도입된 Rust 기반의 고성능 웹 애플리케이션 번들러로, 기존 Webpack보다 훨씬 빠른 빌드 속도와 효율적인 증분 빌드 방식을 제공합니다. 특히 대규모 프로젝트에서 빠른 개발 서버 반응성과 빌드 시간을 제공하며, Next.js와의 긴밀한 통합으로 설정이 간단하고 개발 생산성을 크게 향상시킵니다. Turbopack은 여러 코어를 활용한 병렬 처리와 함수 수준의 결과 캐싱을 통해 변경된 부분만 재번들링하여 빠른 피드백이 가능하도록 설계되었습니다.

성능 및 테스트 환경

벤치마킹은 JIT 컴파일러와 다양한 자바스크립트 엔진(V8, JavaScriptCore, SpiderMonkey)의 영향으로 복잡합니다. TypeScript 컴파일러가 항상 최적화된 결과를 내는 것은 아니지만, Next.js 16에서는 빌드 시점에 TypeScript를 효율적으로 JavaScript로 변환하여 성능 저하를 최소화하고 있습니다. 실제 운영 환경에서는 변환된 JavaScript가 실행되므로 성능 차이는 거의 없습니다. 테스트 환경에서는 Jest와 Vitest가 주로 사용되며, Jest는 병렬 테스트 실행과 내장 모킹 기능을 제공하고, Vitest는 Next.js 16과 연동된 빠른 개발 환경과 Vite 기반의 속도를 제공합니다. 이번 버전에서는 Turbopack의 도입으로 빌드 및 개발 서버 속도가 크게 개선되어 전체 개발 경험이 한층 향상되었습니다.

최근 트렌드 및 생태계 변화

2024년 JavaScript 생태계에서는 TypeScript 채택률 증가, 새로운 ECMAScript 기능 도입, React Server Components의 성장이 중요한 흐름입니다. TypeScript는 패턴 매칭, WeakRefs 개선, 파이프라인 연산자 등으로 기능이 확장되고 있습니다.

Microsoft, Google 등 대기업들이 TypeScript 도입을 주도하고 있고, Angular와 Deno는 TypeScript를 기본 적용하고 있습니다. React 역시 TypeScript-first 템플릿을 제공합니다. 이런 변화는 TypeScript가 핵심 언어로 자리잡았음을 보여주고 있습니다.

결론: 선택과 상호보완

JavaScript와 TypeScript는 각각 고유의 강점과 활용 분야가 있습니다. JavaScript는 빠른 프로토타이핑과 소규모 프로젝트에 적합하고, TypeScript는 대규모 애플리케이션과 팀 프로젝트에 더 적합합니다. 개발자는 프로젝트의 규모, 팀의 경험, 유지보수 계획을 고려해 적절한 언어를 선택하는 것이 좋습니다. 두 언어의 지속적인 발전과 생태계 변화는 웹 개발의 미래를 밝게 하고 있습니다.