모던한 웹 개발자를 위한
실전 프로젝트형 React 입문

: 비전공자/비개발자 맞춤형 Modern Web Application 개발

강의 난이도
1.5/5
프론트엔드(Front-end) 프레임워크 중의 왕 ‘React’!
코딩이 버거운 비전공자/비개발자라도 6번 만에 완벽 입문이 가능합니다.
웹 개발자가 되고 싶은 사람들의 첫 단계 ‘프론트엔드’,
HTML, CSS, JavaScript를 배운 다음 뭘 시작해야 할지 모른다면?
많은 개발자가 사랑하는 Modern Web Framework! 답은 ‘React’입니다.

딱 한줄 코딩조차 버거운 비전공자/비개발자를 위한 맞춤형 React 입문 강의를 준비했습니다.

– 비전공자 출신 CTO 겸 CEO의 눈높이 맞춤 학습과 1:1 지도
– 간단한 React 기초부터 To Do List 제작, 날씨 정보 제공 웹 어플리케이션 구축까지
– React 학습을 넘어 개발에 대한 전반적인 과정과 로드맵 제시를 통한 웹 개발 생태계 이해

현대적인 웹 개발자로서 완벽하게 시작하실 수 있습니다.

일정

20.10.31 ~ 20.12.05 | 총 6회
매주 토 10:00 ~ 13:00, 총 18시간

정원 및 준비물

총 15명
노트북

장소

러닝스푼즈 강의장
강남대로 94길 15, S2빌딩 3층
슈퍼얼리버드 여석

"비전공자도, 기초지식 없이 시작하셔도 개발하실 수 있습니다. 충분히요."

프로그래밍 강의나 학습 교재는 세상에 정말 많습니다. 하지만, 코딩을 배우는 것에 열정과 재미를 가지지 못한다면 절대 실력이 늘지 않습니다. 반대로 말하면, 아무리 비전공자라도 비개발자라도 코딩과 개발에 관심을 가지고 학습한다면 충분히 실력이 향상할 것입니다.
HTML, CSS, JavaScript까지만이라도 공부해보신 여러분, 이제 다음 단계로 React를 쉽고 재미있게 배워보세요. 여러분이 열정과 재미를 가지고 배우실 수 있게끔 도와드리겠습니다.
안녕하세요, 비전공자/비개발자 여러분.
웹 개발자의 세계에 오신 것을 환영합니다.
react
웹 개발자로의 첫 번째 길 프론트엔드(Front-end)를 위해
여러분은 HTML, CSS, JavaScript을 먼저 학습하셨을 겁니다.

그럼, 그 다음은 어떤 기술을 배워야 할까요?
정답은 프론트엔드 프레임워크의 왕 “React” 입니다.
코드가 훨씬 간결해집니다.
그저 HTML, CSS, JavaScript로만 구성된 코드는 당연히 길 수 밖에 없습니다. 한 페이지에도 많은 내용이 들어가니까요. 하지만 React는 JavaScript를 확장한 JSX가 기반이 되어, 많은 내용을 짧은 몇 줄로 바꿀 수 있게 됩니다. 보기 불편한 코딩, React로 간결하게 정리하실 수 있습니다.
react
블럭 쌓기처럼 쉽게 만들 수 있습니다.
React에는 component(컴포넌트)라는 것이 존재합니다. 컴포넌트는 마치 한 조각의 블럭처럼, 한 번 지정해두면 재사용이 가능한 최소 단위를 말합니다. 어떤 웹 사이트를 만들어도 모든 것을 새롭게 만드는 것은 너무나 어려운 작업입니다. 그렇기에 컴포넌트를 활용한다면, 원하는 기능을 더 쉽게 만들 수 있습니다.
react
웹페이지를 읽는 것이 빠르고 부드러워집니다.
컴퓨터는 코드가 바뀔때마다 우리가 작성한 코드를 인식하고 변환하는 연산 과정을 거치는데, 그 과정이 많아질수록 웹페이지는 느려집니다. 하지만 React의 virtual DOM이라는 개념을 사용하면 마치 우리가 이미지트레이닝하듯 가상으로 수정사항을 체크하기 때문에 연산 과정이 현저하게 줄어들고, 덕분에 웹페이지가 훨씬 빨라집니다.
위 장점 덕분에,
이미 많은 기업에서 사용하는 React!
react
단 6번만에 완벽히 다루실 수 있도록 도와드립니다.
잠깐만요 !
React 강의, 검색해보니 값싼 강의도 많던데요? 다른 점이 있나요?
react
react

강사님의 으로 더 쉽고 빠르게 배우는 시스템

react
수강생의 눈높이에 맞춘 React 실습 진행
웹 애플리케이션을 직접 제작하며 배우는 React

러닝스푼즈만의 React 학습 커리큘럼

웹 기초
React 기초
컴포넌트
이벤트 핸들링
입력전용 HTML Tag
State 공유
1차 프로젝트
2차 프로젝트
커리큘럼만 보면 외계어 같아 낯설고 어려우신가요?

러닝스푼즈는 설명합니다.

| 강의특징

01
React를 배우기 위해 꼭 필요한 것만 모았습니다.
국어를 배울 때 사전에서 ㄱ부터 ㅎ까지의 모든 내용을 공부할 필요가 없는 것처럼, 개발도 마찬가지 입니다. HTML을 예로 들면 모든 HTML tag를 공부할 필요가 없습니다. 실무에서 자주 사용하는 HTML tag, CSS 속성, Javascript Methods 등을 선별해 꼭 필요한 내용만 익혀봅니다. 그 외에는 필요할 때에 찾아보며 공부해도 충분합니다.
02
웹 개발을 위한 로드맵을 프로젝트로 직접 체험합니다.
비전공자가 처음부터 코딩을 그렇게 공부하기에는 사막에서 바늘찾기와 같은 어려움과 막막함이 있을 수 있습니다. 이 강의에서 React.js를 활용한 토이 프로젝트를 구현해봄으로써 웹 개발에 대한 전체적인 개념을 잡을 수 있으며 어떤 언어, 프레임워크를 배워서 어디에 활용하면 되겠다는 그림, 나아가 웹 개발자로서의 로드맵이 자연스레 그려질 것입니다.
03
낯선 용어를 낯설지 않게,
어려운 설명을 쉽게 진행합니다.
본 강의에서 React.js의 기본 개념과 MVVM 디자인 패턴을 지향하는 프론트엔드 프레임워크의 특징, 그리고 Webpack, Babel, Polyfill, ESlint, Prettier 등에 대해 학습합니다. 사실 이 모든 내용이 여러분께 낯설 수 있습니다. 비전공자 출신 개발자가 개발자의 입장이 아닌 초보자의 입장에서 개념 설명을 합니다. 외계어 같은 용어를 쉽게 이해하고 응용할 수 있게 도와줍니다.

6주 뒤, 여러분은 아래 를 가져가십니다.

학습 언어와 기능, 필수 능력 등 웹 개발자가 되기 위한 생태계 이해, 그에 맞는 로드맵 제시
React를 포함한 프론트엔드 개발을 위한 전반적인 핵심 능력(JSON, Axios, Git 등) 향상
기본 하이브리드 웹 애플리케이션과 크롤링 및 파싱을 활용한 데이터 활용 웹 애플리케이션 동시 획득
특히 포트폴리오는
여러분만의 디자인으로 만드실 수 있도록

를 무료로 제공해드립니다.

react
react
경영학도 비전공자 출신 개발자 겸 CEO
남지현 강사님
(현) 여행 스타트업 언캐니(Uncanny) 창업 CEO
(현) 분당・판교 지역 젊은 창업가 네트워크, 소셜살롱 Organizer

(전) B사 Software Engineer
(전) D사 Software Engineer
(전) 크롬 익스텐션 개발 회사 창업 COO
(전) 카메라 액세서리 제조 회사 창업 CEO

– 지도 기반 카페 검색 서비스
– 회사 근처 점심 메뉴 실시간 제공 서비스
– 홈마 아이돌 사진 공유 서비스

– 국민일보 설문조사 자연어 통계, 분석 및 데이터 시각화
– QR코드 출석 인증 안드로이드 어플리케이션
– 리조트 예약/관리 시스템 제공
– 20년 치 KOSPI/KOSDAQ 일자별 주가데이터 ETL 및 분석
더이상 고민하지도 말고
더이상 어려워하지도 마세요.

웹 프론트엔드 입문, React로 시작하세요.

| 수강효과

01
프로그래밍 및 개발에 대한 전반적인 이해도 향상
React.js를 설명하기 전, 응용 프로그램 전반에 대한 플로우를 먼저 설명해 드립니다. 한 언어, 한 프레임워크 만 배우는 것이 아닌 프로그램이 실행되는 전체적인 흐름 (프론트엔드 – 백엔드 – DB – 시스템) 과 언어 및 프레임워크의 발전 과정 등 개발 전반에 대한 이해도를 높일 수 있도록 도와줍니다.
02
본인만의 UI/UX 디자인으로 제작된 나만의 애플리케이션
타 강의에서는 모두가 똑같은 디자인으로 결과물이 제작됩니다. 본 강의는 그렇지 않습니다. 강사님이 직접 선별하신 디자인 시안 수십 종을 제공해드리며, 본인이 원한다면 디자인 커스터마이징이 가능하도록 방법을 안내드립니다. 이로써 나만의 현대적인 웹 어플리케이션 2개를 수강 기간동안 가져가실 수 있습니다.
03
웹 페이지 제작 시 기획자&개발자로서의 역량 구축
본 강의에서는 React.js 에 대한 설명은 물론 네이밍・코딩 컨벤션, Git, 협업 툴, 디자이너와의 커뮤니케이션 등 실무에서 개발자들이 업무에 활용하는 규칙과 툴은 무엇이고 어떻게 사용하는지 추가적으로 익힐 수 있습니다. 개발자로서가 아닌 웹 페이지 기획자로서의 역량도 구축하실 수 있습니다.

| 수강대상

선수지식으로 HTML, CSS, JavaScript를 알고 있으신 분들이 수강하시길 권장드립니다.

선수지식이 없으실 경우, 아래 링크를 클릭해주세요!
생활코딩 HTML(youtube)
생활코딩 CSS(youtube)
생활코딩 JavaScript(youtube)

javascript, css, html을 기본적으로 학습해본 경험이 있으신 분

비전공자인데 웹 개발자가 되기 위한 로드맵의 첫 단계로 React.js 를 배워보려고 하시는 분

React.js 를 온라인으로 혼자서 공부해보려 했는데 어려워서 포기했던 분

개발을 처음 해봐서 개발 환경을 셋팅하다 막히면 어디에서부터 손을 대야할 지 막막하신 분

모던한 웹 프레임워크를 쉽게 이해하고 싶으신 분

하루 3시간 넘게 코딩에 푹 빠질 각오가 되어있는 열정 넘치는 분

실전 프로젝트를 통한 React 6주 완성!
비전공자 / 비개발자도 시작하실 수 있습니다.
차세대 프론트엔드 개발자로 거듭나세요.

| 커리큘럼

웹의 발전 과정에 대해 살펴보고 모던 웹의 기초를 다집니다.
현재의 모습만 보면 복잡하고 막막하고 어려워 보이지만 발전 과정을 살펴보면 왜 현재의 모습이 되었는지, 각 프레임워크는 왜 탄생하게 되었는지 이해할 수 있습니다.
본격적인 React.js 개발을 위한 환경을 설정합니다.
개발에 필요한 다양한 툴(VS code, Git, Node, Webpack, Babel 등)과 사용법에 대해 배워봅니다.

이론
– 모던 웹의 기초
– React Project File Structure
– ES6 vs ECMA2015
– Package Manager
– Naming Convention Rules
– CLI, 까만 화면과 친해지기
– Hello, React.js

실습
– 개발 환경 세팅(VScode, Node, CRA)
– IDE: VScode 설치 및 사용법 설명
– Node 설치 및 버전 확인
– CRA 프로젝트 생성 및 파일 구조 이해
– Git 개념 및 사용법 실습
– JSX (HTML + Javascript) 실습
React.js 개발의 기본이 되는 컴포넌트에 대해 배웁니다.
이 컴포넌트는 React.js 가 정의한 순간에 만들어지고 업데이트되고 사라집니다.
이러한 컴포넌트의 라이프 사이클과 데이터 관리 및 상태 관리의 필요성에 대해 배우고 실습합니다.
그리고 모던 웹 프레임워크에서 많이 사용하는 Axios, Javascript Promise 문법 및 개념 그리고 JSON에 대해 설명합니다.

이론
– Component 의 데이터 관리
– Component’s Life Cycle
– Axios와 Javascript Promise

실습
– component 생성 및 Props, State 선언과 관리
– component Life Cycle 마다 호출하는 메소드로 라이프사이클 실습
– React.js 와 Node Express.js API 연결을 통한 Javascript Promise 실습
이벤트는 모던 웹 프레임워크 (Vue.js, React.js, Angular.js) 마다 다른 것이 아닙니다.
Javascript 와 HTML 의 고유 이벤트에 어떤 것이 있는지에 대해 알아보고, 이벤트를 React.js 에서 어떻게 핸들링하는지에 대해 실습해 봅니다.
조건문과 반복문을 이용하면 UI 컴포넌트를 어떻게 만들 수 있는지 알아봅니다.

이론
– 이벤트 처리
– 렌더링과 if-else
– 리스트와 key

실습
– Javascript ES6 특징 및 자주 사용하는 Methods, HTML Tag 와 고유 이벤트 실습
– 조건부 렌더링 실습
– Javascript 배열과 UI 컴포넌트의 관계 실습
입력 전용 HTML Tag 의 종류와 특징 대해 배웁니다.
그리고 입력 전용 HTML Tag 만 갖는 다양한 상태에 대해 실습합니다.
React.js 에서는 각 상태에 따른 핸들링을 어떻게 할 수 있는지에 대해 알아봅니다.
React.js 의 컴포넌트는 겹쳐질 수 있습니다. 컴포넌트 안에 컴포넌트, 컴포넌트 안에 또 컴포넌트가 만들어질 수 있습니다.
이런 경우 State는 어떻게 공유할 수 있는지에 대해 실습합니다.

이론
– 입력 전용 HTML Tag 의 다양한 상태
– State 공유하기
– Adobe XD 와 UI/UX

실습
– 다양한 입력전용 HTML Tag 생성 및 각 Tag 의 상태 실습
– React.js 컴포넌트 생성 및 상위 컴포넌트로 State 공유하는 방법 실습
– Git 사용법 복습 및 프로젝트 소스 제공
– 프로젝트 제작을 위한 Adobe XD 실습 안내 및 무료 라이브러리 소스 제공
React.js 로 할 일 관리 웹 애플리케이션을 만들어 봅니다.
개발에서 필수적으로 쓰이는 CRUD 의 개념에 대해 배우고 직접 구현해 보면서 컴포넌트 및 상태 관리에 대해 복습합니다.
무료 Javascript & UI 라이브러리의 종류와 활용 방법에 대해 배우고 실습해 봅니다.

이론
– Component 상태 관리
– React.js 프로젝트에 외부 라이브러리 추가하기
– 하이브리드 웹앱 이란?
– PWA 와 ServiceWorker 에 대하여

실습
– 리액트 프로젝트 실습 : 할 일 관리 웹 애플리케이션
– 무료 Color, Icon, Logo, Image, Font, UI kit 라이브러리 소개 및 프로젝트 적용 실습
React.js 로 기상청 날씨 데이터를 Parsing 해 날씨 정보 제공 웹 애플리케이션을 만들어 봅니다.
React.js 에서 API 를 호출하며 서버와 통신하는 방법에 대해 배우고, 전체 프로젝트 그림을 그릴 수 있도록 합니다.
다양한 분야의 공공 데이터를 활용한 웹 애플리케이션을 스스로 기획하고 만들어 볼 수 있도록 합니다.

이론
– API 란?
– 파싱(Parsing) 과 크롤링(Crawling)에 대해서
– Node.js 에 대하여

실습
– 리액트 프로젝트 실습 : 날씨 정보 제공 웹 애플리케이션
– 기상청 데이터 시각화 (시간대, 풍향, 강수량에 맞는 Icon 출력)

| 강사소개 및 인터뷰

react
남지현

(현) 여행 스타트업 언캐니(Uncanny) 창업 CEO
(현) 분당・판교 지역 젊은 창업가 네트워크, 소셜살롱 Organizer
(전) B사 Software Engineer
(전) D사 Software Engineer
(전) 크롬 익스텐션 개발 회사 창업 COO
(전) 카메라 액세서리 제조 회사 창업 CEO

학력
– 연세대학교 미래캠퍼스 경영학부 졸업
– 한국폴리텍융합기술교육원 데이터융합소프트웨어

프로젝트 이력
– 지도 기반 카페 검색 서비스
– 회사 근처 점심 메뉴 실시간 제공 서비스
– 홈마 아이돌 사진 공유 서비스
– 국민일보 설문조사 자연어 통계, 분석 및 데이터 시각화
– QR코드 출석 인증 안드로이드 어플리케이션
– 리조트 예약/관리 시스템 제공
– 20년 치 KOSPI/KOSDAQ 일자별 주가데이터 ETL 및 분석

1. 자기소개 부탁드립니다.
안녕하세요. 저는 경영학을 전공하고 개발자가 된, 비전공자 개발자 남지현이라고 합니다. 실무 및 다수 사이드 프로젝트에서 아주 오래된 환경에서부터 모던한 환경까지 다양한 개발 환경을 접해보았습니다(Vue.js, React.js, Angular.js v2 above 등 총 100여 개 이상). 다양한 개발 환경을 접하다 보니 각기 다른 언어 또는 프레임워크라 하더라도 공통된 기반이 있다는 것을 깨달았고 이후 새로운 프레임워크를 익히는 데에 훨씬 적은 시간이 들게 되었습니다. 이러한 관점을 다른 분들과도 공유해서 조금 더 쉽게 새로운 기술, 언어를 배울 수 있게 도와드리고 싶습니다.
2. 강의에서는 주로 어떤 내용을 다룰 예정이시고, 어떤 형태로 진행되나요?
개발을 처음 접하시는 분들도 React.js 를 쉽게 익힐 수 있는 데에 중점을 둔 강의입니다. 또한 헷갈릴 수 있고 조금 어려울 수 있는 개념들도 같이 설명드려서 웹 개발에 대한 전체적인 흐름을 파악하고 이해하실 수 있도록 준비했습니다. React.js 나 Vue.js 같은 모던 프레임워크는 갑자기 생긴 게 아닙니다. 웹 개발의 발전이 어떻게 되었는지, 그래서 현재 어떤 툴이 필요한지 알고 배우는 것과 모르고 배우는 것에 큰 차이가 있다고 생각합니다. 자연스럽게 이해하실 수 있도록 설명드리는 게 목표입니다. 수업 자료는 필요 시 Git, Notion 으로 제공 될 예정입니다.
3. 본 강의에서 배운 내용을 수강생 분들이 어떻게 활용할 수 있을까요?
제가 개발을 배운 이유는 ‘원하는 서비스를 직접 만들어보고 싶어서’ 였습니다. 이 강의를 통해서 수강생 분들도 개발이 어렵지만은 않다는 것, 그리고 Javascript, 단 하나의 언어로도 애플리케이션 전체를 구현할 수 있단 걸 배우시고 스스로 원하는 서비스를 구현할 수 있게 된다면 좋을 것 같습니다. 웹 개발에 관심이 있고 개발에 입문하고자 하는 분들은 본 강의를 수강 후 본인이 어떤 부분을 중점적으로 더 공부하면 좋을지에 대한 로드맵도 그려지실 거라고 생각합니다.
4. 다른 강의와 어떤 차별 점이 있나요?
코딩에 대한 지식이 전혀 없었던 비전공자가 삽질을 하면서 개발자가 되기까지 험난했던 과정을 몸소 겪어 알고 있기 때문에 누구보다 쉽고 명료하게 설명할 수 있다는 점이 차별점입니다. 개발자의 언어가 아닌 일반인의 언어로 개념 설명을 들으실 수 있는게 본 강의의 장점입니다. 또한 비전공자인데 개발을 배우고 싶어하는 분들에게 어떻게 하면 개발자가 될 수 있는지, 로드맵은 어떻게 그려야 하는지 등에 대해서도 도움을 드릴 수 있습니다. React.js 하나만 배워서는 활용할 수 있는 폭이 좁습니다. 서버와의 통신은 어떻게 할 수 있는지, 서버는 어떻게 돌아가는지 실습을 통해 익혀봄으로써 전체적인 개발의 흐름을 파악할 수 있도록 하고 다음 스텝으로 공부해야할 것이 무엇인지 수강생 스스로 알 수 있도록 도와드리는 것 또한 본 강의의 큰 차별점이라고 생각합니다.
5. 마지막으로 수강생들에게 하고 싶으신 말
문과생에 비전공자였던 저도 여러 서비스와 애플리케이션을 만들다 보니 자연스럽게 기획 및 UI/UX 디자인부터 시스템 인프라 구축까지 할 수 있는 풀스택 개발자가 되었어요. 아빠가 ‘아빠 회사 홈페이지 좀 만들어줘’ 하면 도메인에 A 레코드 추가하고 5시간만에 홈페이지 하나 뚝딱 뚝딱 만들어 드리는 자랑스러운 딸이 되었는데요. 저처럼 비전공자도, 기초지식 없이 시작하셔도 개발하실 수 있습니다. 충분히요.
저도 처음 개발을 배우던 그 때의 마음으로 돌아가서 수강생 분들이 개발을 쉽게 배울 수 있도록 도와드리고 제가 쌓아온 노하우를 아낌없이 공유하도록 하겠습니다. 함께 쉽고 재밌게 코딩을 배워보면 좋겠습니다 : )
수강료 80만 원55만 원
수강신청은 결제 순으로 선착순 마감될 수 있습니다.
개강 후 환불은 학원법 시행령 수강료 반환기준에 의거합니다.
# 환불 세부규정 확인하기 (클릭)
25만 원 할인, 놓치지 마세요!