강의

멘토링

커뮤니티

NEW
개발 · 프로그래밍

/

웹 개발

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

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

4명 이 수강하고 있어요.

  • 이지웹
실습 중심
리액트감잡기
react
웹퍼블리셔
프론트엔드
HTML/CSS반응형 웹json-parsingreact.js

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

  • 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

이런 분들께
추천드려요

학습 대상은
누구일까요?

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

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

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

선수 지식,
필요할까요?

  • HTML / CSS / JavaScript 기초

  • Node.js & VS Code 설치

  • GitHub 계정 (배포용)

안녕하세요
입니다.

2,632

수강생

54

수강평

3

답변

4.9

강의 평점

11

강의

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


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

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

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

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

 

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

 

 

 

커리큘럼

전체

33개 ∙ (9시간 28분)

해당 강의에서 제공:

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

수강평

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

얼리버드 할인 중

₩38,500

50%

₩77,000

이지웹님의 다른 강의

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

비슷한 강의

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