프론트엔드의 꽃, 리액트 1기

수강 기간
11월 09일(월) ~ 12월 13일(일)
#리액트 #프론트엔드 #초보
7차 얼리버드 할인 마감까지 5자리 남음
6차 얼리버드는 3일 만에 마감되었어요! 🙈
  • 웹개발 종합반 수료하신 분 대환영!
  • html, css, javaScript을 조금 아시는 분 대상
  • React로 재미있게 웹서비스 만들고 출시까지

초보 비개발자를 위한 리액트 교육을 재정의합니다

취업을 위한 프론트엔드 강의가 온라인에 정말 많이 있습니다. 리액트는 꼭 취업을 목표로 빡세게 배워야만 하는 것일까요?
스파르타의 생각은 다릅니다.

프론트엔드 개발에 대한 흥미와 재능을 확인하는 것이 우선입니다.

빠르고 재미있게 포트폴리오를 만들고, 배움을 바탕으로 스스로 공부해나갈 수 있는 사람이 되도록 커리큘럼을 구성했습니다.

결과적으로 이 수업 이후, 당신은 _______ 이 됩니다!

강의 소개 튜터를 소개합니다

임민영 튜터
  • 스파르타코딩클럽 튜터
  • 전) 루비큐브 스튜디오 Front-end Engineer
  • ㄴ DevSisters 산하 스튜디오
  • 전) Sleek 개발팀장
  • 전) UriClass Co-founder/CPO
안녕하세요,
프론트엔드의 꽃, 리액트 튜터 임민영 입니다

나만의 그럴싸한 웹사이트, 요즘 핫하다는 리액트를 활용해서 만들어 보고 싶지 않으셨나요? 그렇지만 시작하려니 막막하고, 막상 시작해보니 배워야 할 것이 너무 방대해서 어렵고 막막하지는 않으셨나요?

많은 리액트 강의들이 온라인에 있지만, 다소 직무교육에 치중되어 있어 입문자가 접근하기는 어려웠던 게 사실입니다.

두려움 없이! 5주만에 그럴싸한 웹사이트를

'리액트 웹개발'은 html, css, 기초 javaScript 정도만을 접해본 분들을 위한 수업입니다. 짧고 굵게, 꼭 필요한 것만 배워 5주 만에 내 손으로 리액트 웹을 만들고 출시해봅니다.

만들어보고 싶은 웹이 많은데 늘 첫 시작이 두려우셨다면, 저와 함께 시작해보세요. 처음부터 다시 시작하는 것을 두려워하지 않을 수 있게 도와드리겠습니다.

나만의 프로젝트에 내 개성을 담는 법을 알려드려, 친구들이 "이런 것을 네가 만들었어?" 하게 해 드릴게요!

스파르타가 걸어온 길

누적수강생
11816명
만족도
97.82%

이런 분들에게 추천합니다!

  • 01.

    스파르타코딩클럽의 온/오프라인 웹개발 종합반을 수료하신 분

  • 02.

    조금 더 다양하고, 능동적인 웹 프론트엔드를 만들어보고 싶으신 분

  • 03.

    자바스크립트와는 조금 다른, 리액트의 개념들이 막막하게 느껴지셨던 분

  • 04.

    취업하려면 리액트는 필수라던데... 부트캠프는 비싸고, 온라인은 어려우셨던 분

차별점 코딩, 온라인에서도 제대로 배울 수 있을까?

오프라인의 장점만을 가져온 스파르타 온라인

  • 즉문즉답 Q&A
    코딩하다가 에러나고 막히면 어떡하지?
    걱정마세요! 긴급 질문과 즉문즉답 시간을 통해
    담당 튜터가 곧바로 해결해드립니다.
    코딩 공부할 땐 막히면 안되거든요!
  • 함께가는 기수제
    온라인 강의는 나와의 싸움이다? (No!)
    스파르타에선 함께 학습하는 동료들이 있어요.
    대시보드를 통해 서로의 진도를 확인하고,
    메시지를 주고 받습니다.
  • 찐한 관리
    의지가 없을까 봐 걱정이신가요?
    걱정 마세요!
    담당 매니저가 의지를 만들어 드립니다!
    전화.. 받으실 거죠?

실제수강화면

강의 화면 입장

진도표: 누가누가 듣고 있나

먼저 간 사람들의 꿀잼/어렵지수!

강의화면

다 들었으면 보물상자 열기!

체크인: 다짐 시작하기!

체크아웃: 나 오늘도 수고했어!

숙제 제출

평생 소장 가능한 강의자료

숙제 해설영상도 함께!

수강료 수강료

수강 기간이 5주로 정해져 있지만, 내가 듣고 싶을 때, 언제 어디서든 수업을 들을 수 있는 온라인 강의입니다. 수업을 듣다가 막힐 때 슬랙을 통해 질문하실 경우, 매주 화요일 저녁과 토요일 오후에 튜터가 1분 이내로 답변을 드립니다.

수강 혜택
  • 평생 소장가능한 강의자료
  • 자유로운 수강시간
  • 슬랙을 통한 즉문즉답
7차 얼리버드 할인 마감까지
6차 얼리버드는 3일 만에 마감되었어요! 🙈 5자리 남음
정가
500,000원
7차 얼리버드 할인가
399000원
완주시 환급액
-50,000원
6개월 할부
00%월 60,000원
완주 시
5만원 환급

후기 실제 수강생들의 생생한 후기

다른 여러 코딩 강의들보다 영상 퀄리티가 훨씬 좋은 것 같아요. 다른 사이트 수업들은 대개 그냥 창 띄워놓고 코딩하면서 진행되는데 그런 강의들은 집중력이 떨어지더라고요.
자막도 있어서 집중이 잘 돼요! 다른 강의들은 5분의 짧은 강의도 하나하나 듣기 귀찮았는데 스파르타는 재밌어서 저도 모르게 그냥 쭉쭉 듣게 돼요.
그리고 슬랙에서 질문 받아주시는 것도 너무 좋습니다! 즉문즉답 시간이 아닌데도 빨리 답해주셔서 시간 많이 끌지 않고 문제를 잘 해결할 수 있었어요. 온라인 강의인데도 피드백을 해주시는 게 상당히 큰 장점이라고 생각해요!
친구추천점수는 10이지만 사실은 아무에게도 알려주고 싶지 않습니다. 이 좋은 거.. 저만 보고 싶어요....♥
양O연 님 웹개발 2기
처음에는 수업을 따라가기 바빴었는데, 학습 방식을 조금 바꿔서 일단 강의를 편한 마음으로 쭉 듣고, 숙제풀이 강의까지 들은 다음에 필요한 부분, 막히는 부분만 찾아서 다시 공부하고 연습하는 방식으로 했더니 정말 좋았어요!
항상 코딩을 배우고 싶었지만 방법을 몰라 막막 하기만 했었는데 두려움이 정말 많이 해소되었고, 구체적으로 앱을 만드는 과정을 직접 진행해보니 흥미가 뿜뿜 넘치네요!
박O효 앱개발 1기
강의가 언제나 짧고 이해하기 쉬워서 좋습니다. 한번 시작하면 시간 가는 줄 모르고 순식간에 보게 돼요!
파이썬을 이렇게 쉽게 알려주시다니!!
NoSQL과 SQL의 차이와 같이 일반 비전공자는 아무리 검색을 해도 쉽게 이해하기 어려운 부분을 이렇게 쉽게 알려주는 강의도 처음이었어요. 너무 재밌네요.
수업이 끝나면 바로 과제를 하면서 복습할 수 있게 되어있고, 따라하다보면 어느새 웹사이트를 만들게 되는 것도 정말 좋습니다. 아주 즐거운 수업이에요!
김O영 님 웹개발 2기
실습을 유도하는 수업 방식이 좋았고, Bootstrap과 같은 검증된 사이트를 알려주신 것도 좋았습니다. 지루한 이론보다는 기능을 활용할 수 있도록 알려주는 수업이어서 재미있었습니다.
그리고 숙제를 통해서 제가 어느 부분이 부족한 지 파악할 수 있었고, 데이터베이스에 데이터가 어떻게 입력되는지, 서버와 클라이언트가 어떻게 데이터를 주고 받는지 등 알게 된 것이 많아 좋았습니다. 혼자 했으면 너무 복잡하고 어려워서 중간에 포기했을 텐데, 수업을 통해 미흡하나마 나만의 웹을 직접 만들어볼 수 있는 경험을 하게 되어 뿌듯합니다.
이O주 님 웹개발 2기
제로베이스의 시작임에도 불구하고 이해하실 수 있게 쉽게 풀이해주시고 따라하면서 어느정도 익숙해져 자신감이 붙고 하고자하는 의지를 심어줍니다!!!
따라가기 버거운 내용도 종종 있지만, 그래도 하나하나 자세히 알려주셔서 차근차근 배울 수 있는점이 좋습니다. 수업을 계속 듣다 보면, 앞에서 배운 내용이 다시 활용되면서 앞뒤 맥락과 짜임이 맞춰지는 느낌이 들고, 실제 웹사이트를 실행하는 과정을 통해 큰 흐름을 이해할 수 있어 좋아요.
최O오 님 웹개발 2기
퀴즈를 혼자 풀어보는 것이 많이 도움 되었어요. 퀴즈 레벨이 적절해서 흥미를 유도하는 것 같습니다.
처음 배우는 입장에서 퀴즈를 풀 때 필요한 힌트와, 스스로도 검색할 수 있을만한 내용도 균형있게 섞여있어서 난이도가 적절하다고 느꼈어요.
혼자서 시행착오를 겪으면서 점점 비슷하게 완성을 해가니 만족감이 생기고, 이 상태에서 튜터님의 코드를 다시 한 번 보고 비교하는 식으로 수업을 들으니 집중이 더 잘 됩니다.
퀴즈를 하나 하나 풀어갈수록 익숙해지고 있어요. 느리더라도 남들 신경쓰지 않고 본인 페이스대로 충분히 해보면서 따라갈 수 있다는 것이 온라인 수업의 장점인 것 같아요.
금O 님 웹개발 2기
저는 컴퓨터공학과이지만 프로젝트 경험이 없으며 기본적인 문법들만 공부를 한 상태였습니다.
이번에 수업을 통해서 프로젝트를 직접 여러가지 만들어봄으로써 개발에 흥미가 더 많이 생겼고 앞으로 어떻게 해나가야 할 지 감이 잡히는 것 같습니다.
제가 가장 좋았던 것은, 인터넷에서 jQuery라든지 js 라든지 또 Ajax라든지 하는 용어들을 들어만 보고 실제로 접해보진 못했었는데, 이렇게 수업을 통해서 알게 되어서 자신감이 생기는 계기가 되었다는 것입니디.
데이터베이스와 서버를 연동해보고, 말로만 듣던 AWS를 활용해보고, 크롤링도 해보는 실습 과정을 통해서 응용능력도 생기는 좋은 경험이었습니다.
최O규 님 웹개발 2기
문법에 대한 이론적인 설명 보다는 실제로 어떻게 사용되는지를 예제와 함께 설명 해 주셔서 짧은 시간에 이해하는데 많은 도움이 되었습니다. 또한 강의 시간이 짧게 구성 되어있어서 복습 하기에도 용이했습니다.
한번 쯤은 들어보았던 용어들(JavaScript, Ajax, API... 등)이 어떤 역할을 하는지 알게 되어 유익한 강의였습니다.
C언어, C++, Java 뭐 이런 저런 개발 언어나 툴들이 너무 많아서 뭐부터 어떻게 시작해야 할 지 항상 고민만 많았는데 막상 이렇게나마 실천하고 있는 제 자신이 오늘 하루도 대견스럽습니다.
황O모 님 웹개발 2기
강의 영상이 짧게 짧게 나누어져 있어서 재미있게 강의를 들을 수 있었습니다. 강의가 어렵고 지루하면 괜히 얼마나 남았나 확인하고 딴짓하게 되는데, 이건 그렇지 않아요!
처음엔 용어들이 다 낯설어서 어렵기도 했지만, 수업을 따라가다 보니 점점 기억에 남고 어디에 어떻게 쓰는 건지 알겠더라구요.
그리고 같이 수업을 듣고 있는 수강생 숫자가 표시되는 게 진짜 심리적으로 수업을 들어야겠다는 좋은 압박을 주더라구요. 너무 좋은 방법인 것 같습니다. 여전히 어려운 부분도 많지만 쉽고 재미있어질 그 날을 위해 열심히 정진해보겠습니다!!
이O서 님 웹개발 2기
와아 재밌습니당. 자잘한 오류들도 종종 나오지만, 요러케 조러케 해결하며 따라갈 만 하고요. 잘 해결이 안되더라도 slack에서 문의하면 답변을 얻을 수 있어서 정말 좋아요!
강의 중간 중간 복습 차원으로 내용을 정리해 주시기도 하고, 기초적인 문법도 잘 설명해주셔서 좋아요.
과제가 여러모로 도움이 많이 됩니다! 스스로 검색을 해서 응용해볼 수 있는 기회를 많이 주셔서 제 실력에 도움이 많이 돼요. 강의 내용을 소화하기 위해 필요한 부분을 잘 고려해주신 과제라는 생각이 들어 좋았습니다.
오O원 님 앱개발 1기
커리큘럼이 체계적이어서 큰 흐름 이해가 잘 되었구요. 중간중간 코딩할 때 팁을 알려주셔서 도움이 많이 되었어요.
무엇보다도 단축키!! 단축키를 사용할 때마다 알려주시니 세뇌가 되어서 저절로 외워지더라고요. 이 점이 참 좋아요!! "Ctrl+Alt+L"이나 "드래그 후 Tab Tab" 같은거요. 더 많이 알려주시면 더 좋을 것 같아요!!
수업을 들을수록 크롤링하는 것도 재미있고 실제 웹사이트를 만들기 위한 단계에 가까워져가는 느낌이 들어 기분이 좋고 재미있습니다!
유O영 님 웹개발 2기
선생님께서 예시를 잘 준비해주셔서 좋았어요! 날씨 정보 데이터처럼 익숙한 데이터를 계속 보면서, 딕셔너리 안의 딕셔너리라든지 기본 개념에서 한 단계 들어가는 내용도 계속 알게 되고요!
수업 시작할 때마다 배울 내용에 대해 간단히 설명해주시는 것도 너무 좋아요! 구성방식이 좋네요! 개념들을 하나하나 차분히 설명해주셔서 좋았고, 프로그램 설치하는 것조차 초심자 입장에서는 어떻게 해야 하나 걱정이 많이 되는데 잘 가이드해주셔서 좋았습니다.
온라인강의실 환경이 잘 되어있어서 어떻게 화면이 바뀌는지도 바로바로 확인하면서 수업을 들을 수 있는 것도 너무 좋고 재미있네요!
한O호 앱개발 1기
단계 별로 하나씩 차근차근 배워나가는게 좋았어요! Ajax나 jQuery 같은 개념에 대한 설명도 구글에서 검색하면 너무 어렵게만 설명되어 있어서 알아듣기가 힘들었는데, 튜터님이 쉽게 풀어서 설명해주시니까 이해가 잘 돼요!
그리고 HTML부터 DB활용까지 전반적으로 이해하고 활용 능력까지 키울 수 있어 좋았어요! 수업을 들을 수록 점점 홈페이지를 제작할 수 있는 능력이 생기는 것 같아요ㅎㅎ 이 수업은 프론트엔드부터 백엔드까지 전반적인 흐름을 파악한 후에 스스로 배포 과정까지 경험해볼 수 있는 것이 가장 좋은 것 같습니다!!
한O일 님 웹개발 2기
초심자가 어려움을 느낄 만할 부분을 세심하게 고려한 강의와 커리큘럼이라고 생각합니다. 설치 같은 것도 혼자 하려면 한참 걸리고 에러도 많이 나는데, 설치 과정까지 강의로 알려주셔서 쉽게 할 수 있었어요!
그리고 계속 실습을 반복하면서 배운 내용을 확실히 복습할 수 있어서 좋았습니다. 직접 손을 움직이고 실습을 하다 보니 튜터님이 왜 굳이 다 외울 필요가 없다고 하시는지 알 것 같았어요.
수업 내용을 전부 외우는 게 중요한 게 아니라 직접 다양하게 시도해보는 것이 중요하다는 것을 느낄 수 있는 강의였습니다!
오O미 님 앱개발 1기
제가 들어본 프로그래밍 강의 중에 제일 좋았어요. 처음 듣는 개념도 이해하기 쉽게 설명해주셔서 좋았습니다! 설명 속도도 적당하고, 자료도 딱 필요한 것만 깔끔하게 있는 것 같아요. 그리고 앱개발을 할 때 간결하게 코딩을 하는 방법과 같이, 실무를 경험해본 사람만이 알려줄 수 있는 꿀팁도 많이 알려주셔서 좋았어요.
직접 수업을 따라하면서 특정 코드를 쓰기 전과 후의 화면을 바로바로 비교해볼 수 있어서 이해도 잘 되고 재미있습니다!
박O인 님 앱개발 1기
열정적으로 강의해주셔서 너무 좋아요! 그리고 실습이 정말 많아서 재미있었고, 실습하면서 에러를 종종 만나는데, slack에 질문하면 튜터님이 잘 대답해주셔서 좋았습니다! 아무래도 처음 배우는 것이고, 익숙하지 않은 부분이 많아 어려움에 부딛힐 때도 많았는데, 질문도 잘 받아주시고 수업 중간중간 응원도 해주셔서 힘이 났어요.
튜터님이 현업에서 겪은 개발자 입장에서 알아두면 좋은 기능이나 코드도 많이 알려주셔서 도움이 많이 되었습니다. 요점만 설명하는 명쾌한 수업, 친절하고 빠른 답변과 강의가 정말 좋은 수업이었습니다.
이O희 님 앱개발 1기
자세하게 설명해주셔서 좋고, 설명 속도도 딱 좋은 것 같아요! 실습이 많아서 좋네요~ 수업 내용을 더 빠르게 이해할 수 있는 것 같습니다.
데이터베이스는 어떻게 연결하고 사용하는지, 데이터는 어떻게 보내고 받는지 등등 실습을 통해 직접 확인할 수 있어 좋았습니다. 진짜 실무하는 느낌이었어요. 굿굿!! 자세히 설명해주셔서 감사합니다^^!!
설O윤 앱개발 1기

커리큘럼 커리큘럼

프론트엔드 개발 A-Z를 한 번에!

Firebase

구글의 서버리스 서비스인 파이어베이스(firebase)를 배웁니다. 데이터베이스와 서버를 따로 만들지 않아도 앱을 만들 수 있어요.

Node & nvm

리액트로 웹을 만들기 위한 라이브러리 관리 도구 nvm 에 대해 알아봅니다. 필요한 라이브러리 추가하는 방법을 익힙니다.

SCSS

SCSS로 컴포넌트 꾸미는 방법을 익혀봅니다. 기존 CSS 보다 진일보한 방식으로 코드를 관리할 수 있습니다.

Redux

Redux를 이용해 상태관리하는 법을 배웁니다. 부모-자식 관계를 떠나 정보를 한 군데서 관리하며 얻는 이점을 살펴봅니다.

AWS S3

AWS의 S3를 이용하여 정적으로 배포하는 방법에 대해 알아봅니다. 이제, 나의 서비스를 친구들도 사용할 수 있습니다.

상세 커리큘럼

1주차 React 설치, 첫 컴포넌트 만들기, css
  • nvm으로 노드 버전 관리 하는 방법을 알아보고 React 앱을 만듭니다.
  • 첫 컴포넌트를 만들고 HTML과 JSX, 가상돔을 이해합니다.
  • React로 화면을 예쁘게 꾸며주는 방법 3가지(css, scss, styled-components)중 CSS를 알아봅니다.
  • 만든 결과물을 build해봅니다.
숙제 styled-components를 사용해서 퀴즈 시작하기 화면 만들기
2주차 컴포넌트 스타일링, 컴포넌트 가지고 놀기, event listener와 React hook
  • scss, styled-components를 사용해 컴포넌트를 꾸며봅니다.
  • 컴포넌트를 블록처럼 가지고 놀며 컴포넌트의 부모-자식 관계에 대해 알아봅니다.
  • 마우스 클릭, 터치 이벤트를 등록하고 관리하는 JS스러운 방법과 React스러운 방법을 배우며 React hook을 이해합니다.
숙제 원페이지 쇼핑몰에 환율 계산기 달기
3주차 Redux, React-router
  • Redux를 사용해서 상태관리를 해봅니다.
  • 부모-자식 관계에서 값을 주고 받는 것과 Redux를 사용해서 값을 불러오는 것의 차이점을 이해합니다.
  • React-router로 주소창에 뜬 주소에 따라 페이지를 전환 시켜봅니다.
숙제 점수 화면, 랭킹 화면을 그리고 링크 연결하기
4주차 keyframe, firebase, firebase + React
  • 지금까지 만든 화면에 애니메이션 효과를 추가해봅니다.
  • firebase로 BaaS를 구축하며 서버와 서버리스에 대해 알아봅니다.
  • firebase로 만든 데이터베이스를 그간 만든 React 앱에 연결해봅니다.
숙제 로딩 컴포넌트에 애니메이션 넣기, 파이어베이스 적용하기, 도메인 미리 구매하기
5주차 Portal, AWS S3로 배포하기
  • 링크를 복사하는 버튼을 리액트 앱 바깥에 만들어봅니다.
  • 완성한 프로젝트를 배포해봅니다. S3 버킷을 통해 배포해보고 도메인도 연결해봅니다.
  • SPA의 약점을 보완하는 꼼수를 배웁니다.
숙제 완성본을 s3 버킷에 올리고 도메인 공유하기

자주 묻는 질문

정말 왕초보도 수강할 수 있나요?
스파르타 오프라인 누적 수강생 1,500분과 함께 하면서 어떻게 하면 조금 더 쉽게, 잘 가르칠 수 있을지 끊임없이 고민하고 강의 내용을 발전시켜왔습니다. 왕초보도 이해하는 강의 내용과 더불어, 즉문즉답을 통해 어려움을 겪는 지점을 튜터와 함께 바로바로 해결하실 수 있습니다.
즉문즉답 Q&A는 어떻게 이루어지나요?
화요일 저녁 7시 ~ 10시, 토요일 2시 ~ 5시에 슬랙slack을 통해 질문하실 경우, 튜터가 즉시 답변을 드립니다. 수업 진행에 필수적인 설치를 하다 막혔는데 도저히 해결이 힘들다거나, 하는 긴급한 문제는 긴급 질문으로 남겨주시면 즉시 튜터가 함께 해결해드려요.
일주일에 얼마나 시간을 써야 하나요?
매주 수강에 2시간 반, 복습하며 소화하는 시간 2시간 반씩 할당하여 5시간이면 따라오실 수 있도록 준비하였습니다.
환불 규정이 어떻게 되나요?
환불규정은 아래와 같습니다. 기간제 수업이므로 총 기간을 기준으로 산정됩니다.
- 시작일 이전 : 이미 납부한 수강료 전액
- 1/3 경과 전 : 수강료의 2/3
- 1/2 경과 전 : 수강료의 1/2
- 1/2 경과 후 : 반환하지 아니함
완주시 환급은 어떤 기준으로 받게 되나요?
수강기간 내에 마지막 숙제제출까지 완료한 경우 환급을 받으실 수 있습니다. 환급조건 달성 후 정해진 양식의 환급신청서 (입금계좌 등)를 작성해 주셔야 하며, 환급은 접수일 기준 10 영업일 이내로 이뤄집니다.
해외에서도 수강할 수 있나요?
해외에서도 인터넷 연결만 된다면 언제 어디서든 아무 문제 없이 수강하실 수 있습니다.
학습에 필요한 노트북 사양은 무엇인가요?
원활한 진행을 위해 최소 i5이상의 CPU와 8GB 이상의 RAM이 필요하며, 사용하시는 컴퓨터의 사양이 이보다 낮을 경우 렉이 걸리는 등 진행에 어려움이 다소 있을 수 있습니다.
7차 얼리버드 할인 마감까지 5자리 남음
6차 얼리버드는 3일 만에 마감되었어요! 🙈
5자리 남음, 지금 1명이 함께 보고 있어요!
먼저 등록한 동기들의 메시지 수강신청하기 지금 1명이 함께 보고 있어요!
등록후기보기 수강신청하기