inflearn logo
inflearn logo

From JavaScript to React [PART 2/4] The Road to Unyielding React

Have you ever felt frustrated while studying React? We provide a path to React that you won't give up on, by first solidifying the fundamentals of JavaScript, which is the foundation of React, and then learning step-by-step.

6 learners are taking this course

Level Beginner

Course period Unlimited

JavaScript
JavaScript
vanilla-js
vanilla-js
ES6
ES6
TypeScript
TypeScript
jquery-css
jquery-css
JavaScript
JavaScript
vanilla-js
vanilla-js
ES6
ES6
TypeScript
TypeScript
jquery-css
jquery-css
날개 달린 동전

Recommend Course to grow and earn commission!

날개 달린 동전

Marketing Partners

Recommend Course to grow and earn commission!

What you will gain after the course

  • JavaScript

  • Vanilla JavaScript

  • jQuery

  • ES6

  • Modern JavaScript

  • React

비전공자를 위한 [자바스크립트부터 리액트까지]

포기하지 않고 React로 가는길 🚵[PART2] 부트캠프

혹시, 리액트를 공부하다가 좌절하신 적이 있나요? 킴쌤 클래스에서는 리액트의 기초가 되는 자바스크립트를 단계적으로 학습하기 위해 바닐라 스크립트부터 자바스크립트 es6문법, 제이쿼리 등의 기본문법부터 다양한 실습예제를 통해 스크립트의 기본을 탄탄히 다진 후에 React의 다양한 문법의 이해와 실습을 통해 컴포넌트, state, 메모이제이션을 활용한 게시판과 회원기능을 구현하고 타입스크립트 문법을 익혀 ToDoList 실습예제를 제작하는 등, 포기하지 않고 리액트로 가는 길을 열어드립니다.

👩🏻‍💻 진짜 기초부터 시작하는

비전공자를 위한 프론트엔드, 백엔드, 풀스택 취업코스

[자바스크립트부터 리액트까지] 강의 특징

15년 강의 노하우를 꾸욱 눌러담은 강의🎯


초등학교 코딩교육, IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 그동안의 노하우를 꾹꾹 눌러담은 쉽고 재미있는 CSS3 코딩강의입니다.

CSS의 기초 걸음마부터 시작하여 고급 애니메이션과 인터렉티브한 웹 제작 스킬까지 한꺼번에 모두 담았습니다.


쉽고 재미있는 설명에 목숨거는 편 👨‍🏫


영코디 킴쌤의 쉽고 재미있는 설명과 특유의 암기법을 통해 왕 초보자도 단계별로 쉽게 이해하며 성장할 수 있도록 부단히 노력하는 킴쌤입니다.

또한, 다양한 클론코딩을 통해 실무 웹개발을 점진적으로 익힐 수 있습니다. 진짜 기초부터 시작하는 비전공자를 위한 웹디자인, 프론트엔드, 백엔드, 풀스택 취업코스를 통해 개발자로의 꿈에 도전해보세요.


챕터마다 SELF_EX를 풀며 실력점검하기


챕터마다 제공되는 SELF_EX문제를 통해 학습한 내용을 스스로 점검하며 실력을 쌓을 수 있습니다. 각 단원의 핵심 개념과 실습 내용을 기반으로 구성된 문제들은 CSS 학습의 이해도를 확인하고 부족한 부분을 보완하는 데 큰 도움을 줍니다.

반복 학습과 문제 풀이를 병행하면서 자연스럽게 실력이 향상되어 꾸준한 성장을 이어가도록 돕는 중요한 체크포인트 역할을 합니다.

📚 비전공자를 위한 [자바스크립트부터 리액트까지] 부트캠프에서는 이런 것들을 배워요! 

스크롤시 스크롤 방향으로 이동하는 캐릭터 웹사이트 제작

플러그인을 이용한 캐로셀 제작

스크립트로 완성한 모달창 제작

버튼 클릭시 동영상 제어스킬

버튼 클릭시 파일 다운받기

ToDoList제작

🎬자바스크립트부터 리액트까지 PART2 학습내용

  1. 최신 웹 트렌드 캐로셀 직접 제작하기

  2. 데이터를 효율적으로 관리하는 배열 사용법

  3. 인기 컴포넌트 탭 컨텐츠 구현하여 동적으로 보이고 숨기기

  4. 자바스크립트로 요소의 크기를 자유롭게 변경하기


  5. 스크립트를 이용해 디바이스 사이즈에 따라 컨텐츠 크기가 바뀌는 반응형 구현

  6. 마우스 휠의 마법! 스크롤 따라 바뀌는 컨텐츠 제작

  7. 실시간 위치 추적 비법을 다양한 컨텐츠에 활용하기

  8. 클릭에서 마우스 움직임과 스크롤까지, 다양한 이벤트 구현하기

영코디 킴쌤은 현재 국비지원 부트캠프에서 frontend 디자이너, backend 개발자, 웹디자이너, fullstack 개발자 등을 500여명 넘게 계속적으로 배출해오고 있으며 '수강생들이 뽑은 지인들에게 추천하고 싶은 수업 1위' 에 지속적으로 랭크업 되고 있습니다.

실제 수강평 확인 바로가기 | https://greenart.co.kr/community/student_review

풀스택 로드맵4

Spring Boot, JPA, TDD, JSP, Java, 스프링, 스프링부트, 리액트, 프론트엔드, 백엔드, 풀스택, 자바

비전공자를 위한 풀스택 과정에서는 각 코스 과정별 무엇을 배우나요?

STEP01 | 비전공자를 위한 [HTML 스타터] 부트캠프[해당과정 이동 클릭]

html의 의미와 기본코드 작성방법 및 레이아웃 짜기

웹개발을 한다는 것은 누구나 올 수 있는 상점을 온라인 상에 만드는 것과 같습니다. HTML은 Hyper Text Markup Language 의 약자로 웹페이지의 주요 핵심내용이 되는 정보들을 가지고 기본뼈대를 만드는 작업을 배웁니다.


STEP02 | 비전공자를 위한 [CSS스타일부터 애니메이션까지] 부트캠프 [해당과정 이동 클릭]

CSS의 의미와 기본코드 작성방법부터 원하는 스타일을 html에 적용하여 웹디자인하기

CSS는 Cascading Style Sheet 의 약자로 Cascading은 계층적인, 폭포수 같은 의미를 가지고 있는 단어입니다. css는 말 그대로 html 구조의 부모, 자식 관계를 계층적으로 선택하여 원하는 요소에 원하는 스타일의 색이나 모양, 애니메이션을 입혀 사용자가 보기에 지루하지 않고 흥미롭고 아름다운 웹을 디자인 할 수 있는 시트를 만들어 적용합니다. 또한, css에 자신이 생길 때까지 다양한 실무 사이트의 클론 디자인, 모바일 디자인, 웹 디자인을 HTML/CSS를 반복적으로 코딩하며 웹디자인을 다양하게 제작하는 경험을 쌓습니다.


STEP03 | 비전공자를 위한 [JS부터 React까지] 부트캠프[해당과정 이동 클릭]

바닐라 스크립트와 자바 스크립트 es6문법 익히고 React 활용하기

혹시, 리액트를 공부하다가 좌절하신 적이 있나요? 킴쌤 클래스에서는 리액트의 기초가 되는 자바스크립트를 단계적으로 학습하기 위해 바닐라 스크립트부터 자바스크립트 es6문법, 제이쿼리 등의 기본문법부터 다양한 실습예제를 통해 스크립트의 기본을 탄탄히 다진 후에 React의 다양한 문법의 이해와 실습을 통해 컴포넌트, state, 메모이제이션을 활용한 게시판과 회원기능을 구현하고 타입스크립트 문법을 익혀 ToDoList 실습예제를 제작하는 등, 포기하지 않고 리액트로 가는 길을 열어드립니다.


STEP04 | 비전공자를 위한 [반응형 웹 제작] 부트캠프[해당과정 이동 클릭]

반응형 웹을 만들기 위한 @미디어쿼리의 이해와 사용법을 익히고 쉽게 반응형을 제작할 수 있는 프레임워크인 부트스트랩 습득하고 활용하기

디바이스 장치에 따라 레이아웃이 바뀌는 반응형 웹페이지 개발을 위해 부트스트랩(BOOTSTRAP)을 활용하는 방법에 대한 이론과 실습을 적절하게 분배하여 부트스트랩의 구성요소들을 이해하며 실습을 통하여 바로바로 확인해보고 실제 반응형 웹사이트를 구현해 완성해봅니다.

또한, 부트스트랩의 정해진 스타일대신 나만의 개성있는 스타일의 반응형 웹을 제작하고 싶은 분들을 위해 부트스트랩을 활용하지 않고 순수하게 html/css/jQuery 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 실습을 한솥 도시락 반응형 웹제작을 통해 마스터해 봅니다.


STEP05-1 | 비전공자를 위한 [JAVA기초] 부트캠프 [해당과정 이동 클릭]

가장 기본적인 문법의 이해와 실습부터 시작하여 자바 기초와 중급문법 익히기

웹개발 백엔드의 가장 기본언어인 자바를 가장 기본적인 문법부터 시작하여 점진적으로 중급까지 익히고 다양한 예제실습을 통하여 스스로 원하는 프로그램을 코딩할 수 있는 능력을 자연스럽게 습득하게 됩니다.


STEP05-2 | 비전공자를 위한 [JAVA기초부터 심화까지] 부트캠프[해당과정 이동 클릭]

자바 기초부터 고급문법의 이해와 실습

자바의 컬렉션 프레임워크는 collection 말 그대로 수집, 즉 저장하는 클래스를 자체적으로 내장하고 있는 내부 라이브러리로 데이터의 다양한 타입들을 한군데 묶어서 관리하고 저장할 수 있는 다양한 문법들을 익히고 , 자바의 기초부터 심화까지 다양한 예제들을 실습함으로써 웹개발 백엔드의 초석을 튼튼히 하는 밑바탕을 만듭니다.


STEP05-3 | 비전공자를 위한 [Oracle SQL] 부트캠프[해당과정 이동 클릭]

Database의 이해와 실습

데이터베이스(DB) 테이블을 만들고 db에 읽고 쓰고 수정, 삭제하는 CRUD 실습을 통해 SQL문법을 배우고 실습함으로써 회원가입, 로그인이나 게시판 작성시 db를 활용할 수 있도록 준비합니다.


STEP06 | 비전공자를 위한 [JSP부터 SpringBoot까지] 부트캠프 [해당과정 이동 클릭]

JSP부터 스프링 부트까지

혹시 최근 실무에서 가장 많이 사용되고 있는 스프링 부트부터 공부하다가 좌절한 경험이 있으신가요?

킴쌤 클래스에서는 스프링 부트를 완벽하게 이해하기 위해 가장 기초문법인 JSP부터 학습하여 이전세대에서 현재세대로의 백엔드 문법의 진화를 직접 체감하며 자연스럽게 개념과 사용법을 체득하고 웹개발 백엔드를 자동으로 알아서 구현해주는 스프링부트가 동작하는 원리를 이해합니다.

ORM, JPA, 엔티티의 기본개념과 활용, 스프링 시큐리티의 이해와 시큐리티를 활용한 회원기능 구현, junit test 의 실습과 h2콘솔의 사용법 등의 실습을 토대로 스프링 부트를 활용하여 회원과 게시판 기능이 있는 실무 웹사이트를 구현하고 비동기 방식과 공공데이터인 openAPI를 활용하여 포트폴리오 제작을 위한 기본기를 완벽하게 숙지합니다.


STEP07 | 실전 배포를 위한 [호스팅부터 AWS까지] 웹서비스 구축

[해당과정 이동 클릭]

호스팅과 AWS 배포로 완성하는 웹서비스

혹시 개발한 프로젝트가 내 컴퓨터 안에서만 실행되고, 실제 서비스로 배포하지 못해 답답했던 경험이 있으신가요?

킴쌤 클래스에서는 단순히 코드를 작성하는 데 그치지 않고, 닷홈을 활용한 웹 호스팅부터 GIT, AWS EC2에 프로젝트 배포까지 전 과정을 단계별로 따라 하며 학습합니다.

도메인 연결, FTP 업로드, GitHub를 통한 배포, jar 패키징, 서버 설정, 이미지 업로드 경로 지정, nohup을 활용한 무중단 실행까지 실무에서 꼭 필요한 배포 과정을 체득할 수 있습니다.

이 과정을 통해 내가 만든 웹사이트를 실제로 세상에 공개할 수 있는 경험을 쌓으며, 개발자로서의 자신감실제 서비스 운영 역량을 동시에 갖추게 됩니다.

Java, 객체지향, 국비지원 부트캠프, Spring Boot, SJava, 객체지향, 국비지원 부트캠프, 프론트엔드, 풀스택, 백엔드,Java, Spring Boot, Spring, 객체지향, JSP, 자바,스프링,스프링부트,리액트,spring Boot, Spring,스프링,스프링부트,리액트,백엔드,프론트엔드, Spring,스프링,스프링부트,리액트,백엔드,프론트엔드

수강 전 참고 사항

학습 자료

  • 수업에 사용되는 이미지나 완성된 파일, PDF교재를 다운받아 실습에 활용하실 수 있습니다.
    (해당 파일은 교육용 파일로 개인 실습용으로만 사용가능하며 무단으로 배포하실 수 없습니다.)

Recommended for
these people

Who is this course right for?

  • Absolute beginner with no prior coding experience.

  • Non-major

  • Anyone who has ever given up on studying JavaScript and React?

Hello
This is youngcodikimssam

429

Learners

30

Reviews

23

Answers

5.0

Rating

19

Courses

👩 The person who created this course

A current vocational training instructor who is sincere about nurturing developers, having taught full-stack (back-end, front-end), video, coding, design, big data, and machine learning for over 15 years with the goal of [Coding that even non-majors can learn easily and enjoyably!]


🎖 Career History

[The First Step for Someone Who Knows Nothing About Computers to Earn 1 Million Won a Month as a Side Hustle] Author of

Selected as a Grade A instructor in the Ministry of Employment and Labor evaluation for NCS (National Competency Standards) lectures

Selected as an Outstanding Instructor at Green Computer Academy Suwon (Awarded 1st Place Grand Prize for 3 consecutive years in 2017, 2018, and 2019)

Former) Samsung ODD Planning and Development Team Member

Catholic University of Korea Department of Computer Science and Engineering Special Lecture

Special lecture at Yongin Songdam College, Department of Multimedia and others


🚵 Qualifications

Vocational Education and Training Instructor [Information Technology Development] Ministry of Employment and Labor

Vocational Education and Training Instructor [Information Technology Operations] Ministry of Employment and Labor

Vocational Education and Training Instructor [IT Strategy & Planning] Ministry of Employment and Labor

Vocational Training Instructor [Artificial Intelligence] Ministry of Employment and Labor

Vocational Training Instructor [Immersive Content Production] Ministry of Employment and Labor

Vocational Education and Training Instructor [Cultural Content Production] Ministry of Employment and Labor

Vocational Training Instructor [Multimedia] Ministry of Employment and Labor

Vocational Training Instructor [General Office] Ministry of Employment and Labor

Vocational Education and Training Instructor [General Affairs] Ministry of Employment and Labor

Vocational Education and Training Instructor [Design] Ministry of Employment and Labor

Vocational Education and Training Instructor [Video Production] Ministry of Employment and Labor

Vocational Education and Training Instructor [Printing] Ministry of Employment and Labor

Vocational Education and Training Instructor [Publishing] Ministry of Employment and Labor

Big Data Specialist Level 1 Korea Institute for Vocational Education and Promotion

Engineer Information Processing Human Resources Development Service of Korea

Office Automation Industrial Engineer Human Resources Development Service of Korea

Computer Literacy Level 2 Korea Chamber of Commerce and Industry

ITQ OA Master Korea Productivity Center

Word Processor Level 1 Korea Chamber of Commerce and Industry

Multimedia Content Planning & Design Professional Korea Creative Content Agency

Industrial Engineer Visual Design Human Resources Development Service of Korea

Computer Graphics Operation Technician Human Resources Development Service of Korea

Web Design Technician Human Resources Development Service of Korea

GTQ Photoshop Level 1 Global Certified Qualification Testing Agency

GTQ Illustrator Level 1 Global IT Certification Authority


👩‍🏫 Currently serving as a Vocational Competency Training Instructor at Green Computer Academy

Assigned Courses) Information Technology Development / Frontend / Backend / Full Stack / Java Web Development / UIUX Engineering / Big Data Platform Construction / Big Data System Development / Programming Languages / Python / Java / Big Data Analysis / Big Data Expert / Programming Languages / Content Planning


  To celebrate reaching approximately 100,000 subscribers for the Inflearn course "Creating Responsive Web Pages Using Bootstrap 3," and in response to numerous DMs requesting additional lectures, I am currently planning, producing, and uploading a full-stack course in its latest version. Your interest and warm comments are a great driving force for YoungCody Kim's lecture production.

 

Though slow, I will walk with you step by step with high-quality lectures.

 

More

Curriculum

All

26 lectures ∙ (9hr 57min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

youngcodikimssam's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

$42.90