[코딩 왕초보] 나만의 웹 애플리케이션 제작 입문 :
리액트 (React)

: 비전공자도 시작 할 수 있는 나만의 웹 애플리케이션 제작 실전 프로젝트

강의 난이도

 1.5/5

6주만에 끝내는 웹 어플리케이션 제작 입문!
비전공자 출신 개발자 강사님의 도움으로 차근 차근 하나씩 배울 수 있습니다.

누구나 한 번쯤은 자신의 아이디어를 웹 어플리케이션으로 선보이고 싶습니다.
창업이든 사이드잡의 형태로 말이죠.

그럴 때 가장 고민이 되는 부분은 바로 개발입니다.
프론트엔드의 꽃 React로 배우는 프론트엔드 입문!
코딩 왕초보를 대상으로 구성되어 있습니다.

– 웹 기초 개발에 대한 전반적인 과정과 로드맵 제시를 통한 프론트엔드 개발 생태계 이해
– 비전공자 출신 개발자 강사님의 비전공자 눈높이 맞춤 학습과 1:1 코칭
– React를 활용한 개발 환경 구축부터 전화번호부 앱 제작, 날씨 정보 제공 웹 어플리케이션 구축 및 배포까지

어렵다고 생각하는 코딩과 웹 구축, 전혀 어렵지 않아요. 이제 시작하세요!

일정

20.11.23 ~ 20.12.28 | 총 6회

매주 월요일 19:30 ~ 22:30, 총 18시간

정원 및 준비물

총 15명

노트북

장소

러닝스푼즈 강의장

강남대로 94길 15, S2빌딩 3층

강남역 11번 출구 3분 거리 (지도 확인)

슈퍼얼리버드 여석

내 아이디어를 웹 애플리케이션으로!

비전공자를 고려하여
커리큘럼을 쉽고 재미있게 준비하였습니다.

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

프로그래밍 강의나 학습 교재는 세상에 정말 많습니다. 하지만, 코딩을 배우는 것에 열정과 재미를 가지지 못한다면 절대 실력이 늘지 않습니다. 반대로 말하면, 아무리 비전공자라도 비개발자라도 코딩과 개발에 관심을 가지고 학습한다면 충분히 실력이 향상할 것입니다.
이제 다음 단계로 React를 쉽고 재미있게 배워보세요. 여러분이 느끼는 열정과 재미를 통해 프론트엔드 개발자로서의 커리어를 가지고 가실 수 있게끔 도와드리겠습니다.

코딩을 모르는 사람도 만들 수 있는

(아래 이미지를 클릭해 여러분이 실제로 제작할 프로젝트 결과물을 확인해보세요.)

전화번호부 웹 애플리케이션 제작 (링크)

날씨 정보 제공 애플리케이션 제작 (준비중)

웹 프로그래밍 기초

React에 대해 실습하기 전, 프로그래밍을 위한 기초 용어를 일반인도 쉽게 이해하도록 정리해드립니다.

강사님의 강의 스크립트 中 일부

React 기초 및 개발 환경 구축

기초 내용에 대해 이해가 되었다면 React에 대해 본격적으로 배우며 개발 환경을 구축합니다.

React 개발 환경 구축 실습

실전 포트폴리오 제작

실전 프로젝트를 통해 React 웹 프론트엔드 개발 및 리덕스를 이용한 배포로 포트폴리오를 제작합니다.

미니 프로젝트 中 일부

웹 개발 기초

React 기초

컴포넌트

이벤트 핸들링

입력 전용 HTML Tag

State 공유

1차 프로젝트

2차 프로젝트

React는 단 6주만에 끝낼 수 있도록
불필요한 개념 설명은 쏙 뺀 커리큘럼으로 진행되며,

Git 활용, 협업 툴, 네이밍 및 코딩 컨벤션, 디자인 커뮤니케이션 등
강사님만의 개발 실무 노하우가 포함됩니다.

어려울 것만 같은 이 모든 내용,
여러분도 이해하기 쉽게 알려드립니다.

| 강의특징

완전 초보자도 완벽히 배우는 React 입문 과정입니다.

웹 개발에 입문하기 위해서는 기본적으로 프로그래밍의 생태계에 친숙해지셔야 합니다. 타사에서는 무작정 HTML, CSS, JavaScript만 배우고 React에 대한 내용만 배웁니다. 하지만 본 강의는 웹 개발 커리어 입문을 고민하시는 일반인을 대상으로, 프론트엔드 프레임워크의 꽃 React로 배워보는 프론트엔드 개발 입문 과정입니다. React를 통해 프론트엔드 개발 커리어의 방향을 상세히 가이드해드립니다.

낯선 용어를 낯설지 않게, 어려운 설명을 쉽게 진행합니다.

본 강의에서 React의 기본 개념과 MVVM 디자인 패턴을 지향하는 프론트엔드 프레임워크의 특징, 그리고 Webpack, Babel, Polyfill, ESlint, Prettier 등에 대해 학습합니다. 사실 이 모든 단어들이 입문자, 일반인의 입장에서는 낯설 수 있습니다. 그렇기에 비전공자 출신 개발자가 ‘개발자의 입장’이 아닌 ‘일반인의 입장’에서 개념 설명을 합니다. 외계어 같은 용어를 쉽게 이해하고 응용할 수 있게 도와드립니다.

진짜 실무에서 진행하는 개발 환경을 구축합니다.

사실 단순히 React만 배워서는 실제 웹사이트를 제작하듯, 기획부터 실제 배포까지 진행하기는 어렵습니다. 본 강의에서는 React에 대한 설명은 물론 네이밍・코딩 컨벤션, Git, 협업 툴, 디자이너와의 커뮤니케이션 등 실무에서 개발자들이 업무에 활용하는 규칙과 툴은 무엇이고 어떻게 사용하는지 익힐 수 있어, 완벽한 프론트엔드 개발 환경을 구축할 수 있습니다.

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

학습 언어와 기능, 필수 능력 등 웹 개발자가 되기 위한 생태계 이해, 그에 맞는 로드맵 제시

React를 포함한 프론트엔드 개발을 위한 전반적인 핵심 능력(JSON, Axios, Git 등) 향상

기본 하이브리드 웹 애플리케이션과 크롤링 및 파싱을 활용한 데이터 활용 웹 애플리케이션 동시 획득

잠깐!
왜 전화번호부와 날씨 정보 웹 애플리케이션을 만드나요?

웹의 구성을 파악할 수 있고
To Do List / 미리알림 / 가계부로 확장 가능합니다.

크롤링 및 파싱으로 외부 데이터 활용이 가능하며
검색엔진 / 즐겨찾는 장소 / 추천영화로 확장 가능합니다.

초보자라도 웹 애플리케이션 제작이 가능합니다.

| 수강효과

프로그래밍 및 개발에 대한 전반적인 생태계 이해

React를 설명하기 전, 응용 프로그램 전반에 대한 플로우를 먼저 설명해 드립니다. 한 언어, 한 프레임워크 만 배우는 것이 아닌 프로그램이 실행되는 전체적인 흐름 (프론트엔드 – 백엔드 – DB – 시스템) 과 언어 및 프레임워크의 발전 과정 등 개발 전반에 대한 이해도를 높일 수 있도록 도와줍니다.

확장성, 활용도 높은 나만의 웹 애플리케이션 결과물 획득

본 강의에서 제작하는 전화번호부는 웹 애플리케이션의 구성과 컴포넌트를 파악할 수 있으며, To Do List/미리 알림/가계부 등으로 활용 가능합니다. 또한 다음으로 제작하는 날씨 정보는 크롤링 및 파싱을 통한 외부 데이터 가져오기가 가능하며, 검색엔진/즐겨찾는 장소/추천 영화 등으로 활용 가능합니다.

비전공자/초보자도 웹 개발 관련 커리어 도전 가능

비전공자가 처음부터 코딩을 그렇게 공부하기에는 사막에서 바늘찾기와 같은 어려움과 막막함이 있을 수 있습니다. 이 강의를 수강하고 나면 React를 활용한 토이 프로젝트를 구현해봄으로써 웹 개발에 대한 전체적인 개념을 잡을 수 있으며 어떤 언어, 프레임워크를 배워서 어디에 활용하면 되겠다는 그림이 그려지실 것입니다.

| 수강대상

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

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

| 커리큘럼

1회차. 웹 기초 및 개발 환경 구축

웹의 발전 과정에 대해 살펴보고 모던 웹의 기초를 다집니다.
현재의 모습만 보면 복잡하고 막막하고 어려워 보이지만 발전 과정을 살펴보면 왜 현재의 모습이 되었는지, 각 프레임워크는 왜 탄생하게 되었는지 이해할 수 있습니다.
본격적인 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) 실습

2회차. React 기초(1) : 컴포넌트와 데이터

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 실습

3회차. React 기초(2) : 이벤트와 핸들링

이벤트는 모던 웹 프레임워크 (Vue.js, React.js, Angular.js) 마다 다른 것이 아닙니다.
Javascript 와 HTML 의 고유 이벤트에 어떤 것이 있는지에 대해 알아보고, 이벤트를 React.js 에서 어떻게 핸들링하는지에 대해 실습해 봅니다.
조건문과 반복문을 이용하면 UI 컴포넌트를 어떻게 만들 수 있는지 알아봅니다.

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

실습
– Javascript ES6 특징 및 자주 사용하는 Methods, HTML Tag 와 고유 이벤트 실습
– 조건부 렌더링 실습
– Javascript 배열과 UI 컴포넌트의 관계 실습

4회차. 입력 전용 HTML Tag와 State 공유, 프로젝트 소개

입력 전용 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 실습 안내 및 무료 라이브러리 소스 제공

5회차. 1차 프로젝트 : 기초 웹 애플리케이션 제작

React.js 로 전화번호부 웹 애플리케이션을 만들어 봅니다.
개발에서 필수적으로 쓰이는 CRUD 의 개념에 대해 배우고 직접 구현해 보면서 컴포넌트 및 상태 관리에 대해 복습합니다.
무료 Javascript & UI 라이브러리의 종류와 활용 방법에 대해 배우고 실습해 봅니다.

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

실습
– 리액트 프로젝트 실습 : 전화번호부 웹 애플리케이션 제작
– 무료 Color, Icon, Logo, Image, Font, UI kit 라이브러리 소개 및 프로젝트 적용 실습

6회차. 2차 프로젝트 : 날씨 정보 제공 웹 애플리케이션 제작

React.js 로 기상청 날씨 데이터를 Parsing 해 날씨 정보 제공 웹 애플리케이션을 만들어 봅니다.
React.js 에서 API 를 호출하며 서버와 통신하는 방법에 대해 배우고, 전체 프로젝트 그림을 그릴 수 있도록 합니다.
다양한 분야의 공공 데이터를 활용한 웹 애플리케이션을 스스로 기획하고 만들어 볼 수 있도록 합니다.
또한 개발 프로젝트의 마지막인 테스트와 빌드, 배포에 대해서 배워봅니다.

이론
– API 란?
– 파싱(Parsing) 과 크롤링(Crawling)에 대해서
– Node.js 에 대하여
– 자바스크립트 테스트 라이브러리와 프로젝트 빌드 및 배포

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

| 강사소개 및 인터뷰

남지현

(현) 여행 스타트업 언캐니(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만 원~~ → 50만 원

수강신청은 결제 순으로 선착순 마감될 수 있습니다.
개강 후 환불은 학원법 시행령 수강료 반환기준에 의거합니다.
# 환불 세부규정 확인하기 (클릭)

30만 원 할인, 놓치지 마세요!

[코딩 왕초보] 나만의 웹 애플리케이션 제작 입문 : 리액트 (React)