솔로프리너의 웹 개발 로드맵 (Solo-preneur's Web Development Roadmap)

웹의 얼굴 만들기 (HTML & CSS)

• 웹 페이지의 뼈대를 구성하는 다양한 HTML 태그 사용법을 익힙니다.

• 텍스트, 이미지, 링크, 표, 입력 폼 등 웹 페이지의 기본 요소를 만드는 방법을 배웁니다.

• CSS 선택자, 속성을 활용하여 웹 페이지의 디자인(색상, 폰트, 간격 등)을 꾸미는 방법을 학습합니다.

• 웹 표준과 시맨틱 마크업의 중요성을 이해하고 적용합니다.

• Flexbox, Grid 등 모던 CSS 레이아웃 기법의 기초를 다져 반응형 웹의 기반을 마련합니다.

웹 페이지에 생동감 불어넣기 (JavaScript)

• 웹 개발의 핵심 언어인 JavaScript의 기본 문법(변수, 자료형, 조건문, 반복문, 함수, 객체)을 탄탄하게 다집니다.

• 웹 페이지의 요소를 스크립트로 선택하고 조작하는 DOM(Document Object Model) 개념을 이해하고 활용합니다.

• 사용자의 클릭, 입력 등에 반응하는 이벤트 처리 방법을 배웁니다.

• 서버와 데이터를 주고받기 위한 필수 개념인 비동기 프로그래밍(Promise, async/await)의 기초를 학습합니다.

웹 세상의 약속 배우기 (HTTP)

• 웹 브라우저와 서버가 서로 통신하는 기본 규칙인 HTTP 프로토콜의 동작 원리를 배웁니다.

• 요청(Request)과 응답(Response) 메시지의 구조를 이해합니다.

• GET, POST, PUT, DELETE 등 주요 HTTP 메서드의 역할과 사용법을 학습합니다.

• 200 OK, 404 Not Found, 500 Internal Server Error 등 중요한 HTTP 상태 코드의 의미를 파악합니다.

• API 통신의 기본 개념을 이해하고 프론트엔드-백엔드 연동의 기초를 다집니다.

강력한 웹앱 만들기 (Next.js)

• React 기반의 풀스택 프레임워크인 Next.js(v15)의 특징과 장점을 이해합니다.

• 페이지 기반 및 앱 기반 라우팅 설정 방법을 익힙니다.

• 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 점진적 정적 재생성(ISR) 등 다양한 렌더링 전략을 배우고 적용합니다.

• 최신 기능인 React 서버 컴포넌트(RSC)와 서버 액션(Server Actions)을 활용하여 효율적인 데이터 처리 및 UI 업데이트 방법을 학습합니다.

• Next.js 프로젝트 구조를 이해하고 실제 웹 애플리케이션을 구축하는 경험을 쌓습니다.

나만의 서비스 만들기 (풀스택 맛보기 with Supabase)

• 백엔드 개발을 간소화해주는 BaaS(Backend as a Service) 플랫폼인 Supabase의 주요 기능을 학습합니다.

• PostgreSQL 기반 데이터베이스를 생성하고 관리하는 방법을 배웁니다.

• 이메일/비밀번호, 소셜 로그인(카카오 등) 등 사용자 인증 기능을 구현합니다.

• 파일 업로드 및 관리를 위한 스토리지 사용법을 익힙니다.

• 실시간 데이터 동기화 기능을 활용하여 채팅 등 인터랙티브 기능을 구현합니다.

• Next.js와 Supabase를 연동하여 3개의 실전적인 웹사이트(투두리스트, 드롭박스, 넷플릭스, 인스타그램 클론) 를 직접 만들면서 풀스택 개발 경험을 쌓고, 결과물을 포트폴리오로 활용합니다.