채널톡 아이콘

처음 만나는 React: 퍼블리셔를 위한 실전 가이드

퍼블리셔를 위한 React 첫걸음! 기초 문법부터 반응형 쇼핑몰 웹사이트 제작·배포까지 한 번에 학습합니다. 단편적인 리엑트 예제의 종합이 아니라 실제 웹페이지 제작에 필요한 핵심 문법을 학습하고 적용합니다.

13명 이 수강하고 있어요.

난이도 초급

수강기한 무제한

실습 중심
실습 중심
리액트감잡기
리액트감잡기
react
react
웹퍼블리셔
웹퍼블리셔
프론트엔드
프론트엔드
실습 중심
실습 중심
리액트감잡기
리액트감잡기
react
react
웹퍼블리셔
웹퍼블리셔
프론트엔드
프론트엔드
날개 달린 동전

강의 추천하고 성장과 수익을 만들어 보세요!

날개 달린 동전

마케팅 파트너스

강의 추천하고 성장과 수익을 만들어 보세요!

수강 후 이런걸 얻을 수 있어요

  • React 핵심 개념(컴포넌트, Props, State, 이벤트)의 확실한 이해

  • 카드 리스트 중심의 쇼핑몰 웹사이트 완성

  • JSON API 데이터 연동 경험 및 Context API 기초 습득

  • 완성 프로젝트를 Vercel에 배포하여 실제 서비스 URL 확보

  • 카테고리, 브랜드, 가격대 필터링

  • 페이지네이션

강의 특징 ✨

  • 퍼블리셔 친화적 설명: 기존 HTML·CSS 사고방식에서 자연스럽게 React 개념 연결

  • 실전 프로젝트 위주: 쇼핑몰 UI를 직접 만들며 React를 체득

  • 포트폴리오 완성: 취업용으로 바로 활용할 수 있는 결과물 제공

쇼핑몰 디자인 예시

커리큘럼 요약 📝

1부. 오리엔테이션

React를 배우는 이유와 학습 준비 환경을 이해한다.
퍼블리셔 관점에서 React가 필요한 이유를 명확히 짚는다.

핵심 내용
React 학습 목적, 개발 도구 준비, 퍼블리셔 → 프론트엔드 전환 관점


2부. React 기본기

React 개발을 위한 핵심 문법과 개념을 학습한다.
컴포넌트 기반 사고방식에 익숙해지는 것을 목표로 한다.

핵심 내용
Vite + React 환경 설정, JSX 문법, 컴포넌트 구조, Props, State, 이벤트 처리


3부. 퍼블리셔 친화 문법

퍼블리셔가 실무에서 자주 사용하는 렌더링 패턴을 중심으로 학습한다.
HTML/CSS 경험을 React에 자연스럽게 연결한다.

핵심 내용
조건부 렌더링, 리스트 렌더링(map), key 개념, CSS 적용 방식(CSS Module 등)


4부. 쇼핑몰 미니 프로젝트

React 기본기를 실제 UI 구현에 적용한다.
쇼핑몰 구조를 통해 실무 흐름을 경험한다.

핵심 내용
Header/GNB 구성, 상품 카드 리스트, 장바구니 버튼, 카테고리 필터링, 반응형 UI
Vercel을 이용한 배포 경험


5부. 마무리

완성된 프로젝트를 기준으로 학습 내용을 정리한다.
이후 프론트엔드 학습 방향을 제시한다.

핵심 내용
프로젝트 리뷰, 코드 정리 포인트, 프론트엔드 확장 로드맵 안내

최종 결과물 🛒

  • 카드 리스트 중심 쇼핑몰 웹사이트

  • 반응형 대응 (PC / Mobile)

  • 장바구니 버튼, 카테고리 필터 기능 구현

  • API 연동으로 실제 데이터 불러오기

  • 배포 완료된 포트폴리오 프로젝트



  • 최종 배포폰 미리보기 : https://ez-shop-three.vercel.app/

수강 전 준비 사항 🛠

  • HTML / CSS / JavaScript 기초

  • Node.js & VS Code 설치

  • GitHub 계정 (배포용)

주요 학습 내용 및 특징📚

실무 스타일 강의 진행 📘

단순히 react 문법만 학습하는 것이 아니라, 실제 프로젝트 처럼 웹사이트의 메인 페이지를 모두 구현합니다. 프로젝트를 구현하면서, 디자인을 참조하여 프로젝트 구현에 필요한 HTML 구조를 작성하는 노하우, 디자인과 일치하도록 CSS를 작성하는 스타일 노하우, 기능에 따라 script를 작성하는 노하우를 학습하는 순서로 진행합니다.


디자인 참조하여 프로젝트를 구현합니다.

React 프로젝트 생성 및 구현 📘

react를 활용하여 프로젝트를 생성하고, html, css, react(javascript)를 활용하여 프로젝트를 구현합니다.

vs-code 개발

Filtering, sorting 구현📘

React 기초파트에서 학습한 내용을 바탕으로 상품 정보를 조회하고, 리스트 렌더링(map)을 통해 상품을 출력합니다. 출력된 상품 목록에서 조건에 따라 filtering, sorting을 구현합니다.

filtering, sorting

페이지네이션 구현 📘

출력된 상품 목록에서 조건에 따라 지정된 상품을 출력하고 버튼을 클릭하면 해당 페이지의 상품을 출력합니다.

pagination

반응형 구현 📘

미디어쿼리를 활용하여 다양한 디바이스 기기에 맞춰 상품의 출력 개수를 조절합니다.

responsive

자주 묻는 질문

Q1. JavaScript를 잘 몰라도 수강할 수 있나요?

A. 기본적인 문법(if, for, 함수, 배열, 객체)에 대한 이해는 필요합니다.

다만 고급 문법이나 알고리즘 수준은 요구되지 않으며, React 학습에 꼭 필요한 JavaScript 개념 위주로 설명드릴 예정입니다.

아래의 강의에서 기초를 학습해주세요.

https://inf.run/NC35Q

Q2. 퍼블리셔인데 React를 배워도 도움이 될까요?

네, 충분히 도움이 됩니다.

본 강의는 HTML/CSS 중심의 퍼블리셔 관점에서 React를 이해하도록 설계되어 있어, 프론트엔드 개발자로 확장하시기에 좋은 출발점이 됩니다.

Q3. 함수형 컴포넌트와 Hook이 처음인데 수강해도 괜찮을까요?

아무 문제없습니다.

Class 컴포넌트는 다루지 않으며, 함수형 컴포넌트와 useState, useEffect 등 필수 Hook을 단계적으로 설명드릴 예정입니다.

Q4. 디자인이나 기획이 미리 준비되어 있어야 하나요?

디자인을 제공하기 때문에 준비할 소스는 없습니다.

강의에서 제공되는 예제와 구조를 바탕으로 진행되며, UI 구현과 React 문법 이해에 집중하실 수 있도록 구성되어 있습니다.

Q5. 프로젝트를 포트폴리오로 활용할 수 있을까요?

네, 활용 가능합니다.

쇼핑몰 미니 프로젝트는 컴포넌트 분리, 상태 관리, 배포 과정까지 포함되어 있어 포트폴리오용 예제로 사용하시기에 적합합니다.

Q6. 실제 배포 과정도 다루나요?

네, 다룹니다.

Vercel을 활용하여 React 프로젝트를 배포하는 과정까지 안내드리며, 실제 서비스 배포 흐름을 경험하실 수 있습니다.

Q7. 이 강의를 수강한 이후에는 무엇을 공부하면 좋을까요?

Next.js, TypeScript, 상태 관리 라이브러리(Zustand, Redux), API 연동 순으로 학습하시는 것을 권장드립니다.

강의 마지막 파트에서 프론트엔드 학습 로드맵도 함께 안내드릴 예정입니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • HTML/CSS/JS까지는 배웠지만 React가 낯선 퍼블리셔

  • 포트폴리오에 React 기반 프로젝트를 추가하고 싶은 분

  • 프론트엔드로 커리어 확장을 준비하는 웹 디자이너/웹 퍼블리셔

선수 지식,
필요할까요?

  • HTML / CSS / JavaScript 기초

  • Node.js & VS Code 설치

  • GitHub 계정 (배포용)

안녕하세요
이지웹입니다.

2,711

수강생

58

수강평

4

답변

4.9

강의 평점

11

강의

■ [현재] ESTSOFT KDT 프론트엔드 강의
■ 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의


[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭

2022.08.25 출간  / 코딩을 처음이라 with 웹 퍼블리싱  / 영진출판사

2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

2025.11 재판 /2026 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획

 

[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사 

 

 

 

더보기

커리큘럼

전체

33개 ∙ (9시간 28분)

해당 강의에서 제공:

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

수강평

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

이지웹님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

월 ₩15,400

5개월 할부 시

₩77,000