인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

프론트엔드

React와 Next.js로 배우는 입문용 프론트엔드 프로젝트: Tailwind CSS와 정적 배포까지 완성하기

Next.js와 Tailwind CSS를 활용한 프론트엔드 입문 강의입니다. 백엔드 없이 정적 배포까지 완료하며, 초보자도 완성의 성취감을 느낄 수 있도록 설계되었습니다

(5.0) 수강평 1개

수강생 36명

Next.jsTailwindCSSaws-s3TypeScriptReact
Thumbnail

입문자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • nextjs

  • tailwindcss

  • react

  • typescript

  • aws s3에 정적 배포

main

React와 Next.js로 배우는 입문용 프론트엔드 프로젝트: Tailwind CSS와 정적 배포까지!



  • 이 강의에서는 TypeScript를 활용해 Next.js와 React 기반 프론트엔드 프로젝트를 안정적이고 효율적으로 완성하는 과정을 배웁니다.


  • TailwindCSS를 사용해 쉽고 빠르게 디자인하고, 정적 배포를 통해 직접 만든 프로젝트를 세상에 공개하는 경험을 제공합니다.


  • 이 강의에서는 AWS S3로 정적 웹사이트를 배포하는 방법을 배웁니다. S3 설정, 파일 업로드, 배포까지 간단히 실습합니다.


  • 많은 초보 개발자들은 완벽에 대한 부담감과 방대한 학습량 때문에 프로젝트를 시작하지 못하거나 중도에 포기합니다.

    이 강의는 이런 문제를 해결하기 위해, 간단하지만 끝까지 완성할 수 있는 프론트엔드 프로젝트를 중심으로 설계되었습니다.

  • Next.js, TailWindCSS, aws-s3, TypeScript, React 를 활용해 백엔드 없이도 완성 가능한 프로젝트를 만들어보며, 완성의 성취감과 정적 배포의 경험을 제공합니다.

  • 이 과정을 통해 초보자들이 개발의 즐거움을 느끼고, 앞으로 나아갈 방향을 찾을 수 있도록 돕는 것이 이 강의의 목표입니다.

  • 이 강의는 영어로 진행되며, 모든 영상에 한글 자막이 제공됩니다. 깨끗한 발음과 명확한 전달로 초보자도 쉽게 이해할 수 있으며, 간단한 영어 학습에도 도움이 됩니다. 글로벌 개발 환경에 익숙해질 수 있는 좋은 기회를 제공합니다.


강의를 듣고 나면 이런 결과물을 만들 수 있어요

1

메인화면

간단한 UI로 설계된 로또 번호 추첨기 메인 화면입니다. 메인화면에서 Tailwind CSS로 스타일링하는 방법을 배웁니다.

2-loading

로딩화면

데이터를 로드하거나 특정 작업이 완료될 때까지 사용자가 기다리는 동안 표시할 로딩 화면을 만들어 봅니다.

3-datas

로딩 완료 후 번호 생성 및 데이터 렌더링

로딩이 끝난 후 랜덤 번호를 생성하고 이를 리스트 형태로 정규화하여 화면에 렌더링하는 방법을 배웁니다.

4-s3

S3 버킷에 정적 배포

완성된 프로젝트를 AWS S3에 정적 배포하는 과정을 배웁니다.


  • React와 Next.js의 기초 이해
    Next.js를 활용한 프론트엔드 프로젝트를 처음부터 끝까지 설계하고 구현할 수 있습니다.

  • Tailwind CSS로 빠르게 UI 스타일링
    복잡한 CSS 작업 없이 유틸리티 기반의 Tailwind CSS로 UI를 빠르고 효율적으로 디자인할 수 있습니다.

  • 정적 배포 경험
    AWS S3를 사용해 프로젝트를 배포하고, 실제로 배포된 결과물을 URL로 확인할 수 있습니다.

  • 프로젝트 완성의 성취감
    하나의 프로젝트를 끝까지 완성하고 배포하는 경험을 통해, 개발의 성취감을 느끼게 됩니다.


학습 내용

  • 강의에서 무엇을 배우게 되는지 알려주세요. 섹션마다 어떤 내용을 배우는지 설명해주면 좋습니다.

  • 섹션별로 배우는 내용에 대한 예시 이미지가 있다면, 훨씬 더 매력적인 강의 소개를 만들 수 있어요.

section1_pic

강의의 목표와 비전을 소개합니다.

1. 강의 소개와 기초 세팅

  • 강의소개

  • Node.js, VSCode, Next.js 설치 및 환경 설정 방법.

  • Git의 기초 개념과 간단한 버전 관리 방법.

2. Next.js와 프로젝트 기초

  • Next.js 초기 세팅과 실행 방법.

  • 기본 상태 관리(useState)와 페이지 라우팅 소개.

  • 프론트엔드 전용 프로젝트로 SSR을 배제한 구조 설명.


section2_pic

Next.js 첫걸음과 기본 구성

3-datas

로또 번호 추첨기 프로젝트

3. 프로젝트 구현과 UI 설계


  • 기초 UI 설계: Tailwind CSS로 반응형 UI 구성 및 컴포넌트 설계.

  • 상태 관리와 데이터 바인딩: 번호 생성 로직 구현과 상태 관리.

  • 로딩 처리: 로딩 상태 관리와 useEffect를 활용한 애니메이션 효과.

  • 동적 스타일링: 조건부 렌더링과 map 함수를 활용한 데이터 렌더링.

  • 사용자 경험 개선: 로딩 문구 랜덤화, 애니메이션 타이밍 조절 및 UX 최적화.

4. 정적 배포 준비

  • 정적 배포를 위한 설정과 SEO 기본 세팅.

  • 로고 적용 및 레이아웃 구성.

  • 번들링(정적 파일 생성)을 통한 배포 준비.

section4_pic

정적 배포를 위한 기본 설정

4-s3

S3를 활용한 정적 배포 완성

5. AWS S3 정적 배포

  • AWS S3 버킷 생성 및 정적 웹 호스팅 설정.


  • 빌드 파일 업로드와 정적 배포 재확인.

  • 배포된 프로젝트를 S3에서 확인하는 방법.

수강 전 참고 사항

  • 이 강의는 영어로 진행되며, 모든 영상에 한글 자막이 포함되어 있습니다.

    • 깨끗하고 명확한 영어 발음 덕분에 초보자도 쉽게 따라올 수 있으며, 영어 용어에 익숙해지고 간단한 영어 학습에도 도움이 될 수 있습니다

    • 깨끗하고 명확한 영어 발음 덕분에 초보자도 쉽게 따라올 수 있으며, 영어 용어에 익숙해지고 간단한 영어 학습에도 도움이 될 수 있습니다.


  • 이 강의는 초보자를 위한 입문 강의입니다.

    • 웹 개발을 처음 시작하거나, Next.js와 Tailwind CSS를 활용한 간단한 프로젝트를 완성해보고 싶은 분들에게 적합합니다.

    • 이전에 JavaScript를 다뤄본 적이 없더라도, 강의에서 기초적인 내용을 설명하니 부담 없이 시작할 수 있습니다.

  • 사전에 준비해야 할 개발 환경

    • 개인용 컴퓨터 (Windows, macOS).

    • 설치가 필요한 도구: Node.js, VSCode, Git (강의에서 설치 방법을 안내합니다).

  • 이 강의는 프론트엔드 중심으로 진행됩니다.

    • 프로젝트는 백엔드 없이 Next.js와 Tailwind CSS만을 활용하여 구현됩니다.

    • 정적 배포를 위한 기본적인 배포 과정(AWS S3)만 포함되며, 고급 서버 설정은 다루지 않습니다.

  • 인터넷 연결이 필요합니다.

    • AWS S3를 활용한 정적 배포 과정을 따라 하기 위해 인터넷 연결이 필요합니다.

  • 추가 학습 기회 제공

    • 강의에서 다루지 않은 추가 과제(도메인 설정, Route 53 및 CloudFront 연동)는 별도의 강의에서 배울 수 있습니다.

    • 이 강의에서 배운 내용을 기반으로 한 단계 더 발전할 수 있는 기회를 제공합니다.

실습 환경

1. 운영 체제 및 버전 (OS)

  • Windows: Windows 10 이상 권장 (본 강의는 주로 Windows 환경에서 진행됩니다).

  • macOS: macOS Catalina 이상 권장.

  • Linux 및 기타 OS는 지원 가능하지만, 강의 내용은 Windows 중심으로 구성되어 있습니다.

2. 사용 도구

  • Visual Studio Code (VSCode): 무료 다운로드 및 설치 가능.

  • Node.js: 최신 LTS(Long-Term Support) 버전 권장.

  • Git: 기본적인 버전 관리 도구 (강의에서 설치 방법을 안내).

  • AWS S3: 정적 배포를 위해 AWS 계정 필요 (무료 계층으로 진행 가능).

  • 과금: AWS는 무료 계정을 통해 초기 사용 가능하며, 추가 비용 발생 시 강의에서 별도 안내.

3. PC 사양 (권장 사양)

  • CPU: Intel i5 이상 또는 M1 칩 이상 (멀티코어 권장).

  • 메모리: 최소 8GB RAM (권장: 16GB RAM).

  • 디스크: 최소 20GB 여유 공간.

  • 그래픽카드: 별도의 고성능 GPU는 필요하지 않음 (통합 그래픽으로 충분).

학습 자료

  • 강의에서 사용하는 참조 소스 코드는 ZIP 파일 형식 또는 GitHub 레포지토리 링크를 통해 제공됩니다.

  • 필요에 따라 Google Drive 다운로드 링크로도 자료를 공유할 예정입니다.

선수 지식 및 유의사항

1. 필수 선수 지식

  • 이 강의는 완전 초보자를 대상으로 설계되었습니다.

  • 기본적인 HTML과 CSS, JavaScript의 기초 개념을 알고 있다면 더욱 쉽게 따라올 수 있지만, 강의에서 필요한 내용을 간단히 설명하므로 사전 지식이 없어도 학습 가능합니다.

2. 강의 영상 품질 및 권장 학습 방법

  • 영상 품질: 모든 강의는 1080p HD 화질과 깨끗한 음질로 제작됩니다.

    • 원활한 시청을 위해 안정적인 인터넷 연결을 권장합니다.

  • 권장 학습 방법:

    • 강의를 따라 하며 직접 실습해보는 것을 권장합니다.

    • 제공되는 소스 코드를 참고하여 자신의 코드와 비교하며 학습하세요.

    • 필요 시 강의 내용을 반복하여 시청하며 완벽히 이해할 때까지 실습해보세요.

3. 추후 업데이트

  • 추후 업데이트:

    • 강의 내용은 기술 업데이트나 변경 사항에 따라 지속적으로 보완될 예정입니다.

    • 업데이트된 소스 코드는 GitHub에서 확인할 수 있습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Next.js와 react, Tailwind CSS로 웹 개발을 배우고 싶은 사람

  • 코딩을 처음 접하는 사람

  • 간단한 웹 개발 프로젝트로 시작하고 싶은 사람

안녕하세요
입니다.

172

명

수강생

3

개

수강평

5.0

점

강의 평점

5

개

강의

안녕하세요, 주식회사 럿지의 대표입니다.


저는 스타트업, 금융권, 공공기관 등 다양한 분야에서 프로젝트를 진행하며,

개발뿐만 아니라 서비스를 직접 운영하는 경험을 쌓아왔습니다.

 

이 과정에서 팀원 및 프리랜서들과 협업하며 문제를 해결하고 프로젝트를 완성하는 능력을 길렀습니다.


특히, 단순히 개발자로서의 역할을 넘어서 자신의 서비스를 운영하고자 하는 꿈을 가진 분들께 더 많은 도움을 드릴 수 있다고 생각합니다.

 

완성의 즐거움과 성취감을 함께 경험하며 성장해 나가길 기대합니다. 감사합니다.

커리큘럼

전체

15개 ∙ (43분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!