강의가 끝난후 당신은

  • 리액트를 이용한 프로젝트를 스스로 만들 수 있음.

  • 리액트 뿐만 아니라 실제 개발에서 쓰이는 Redux, React Query 까지 사용가능.

  • 5개의 프로젝트 적립

이런분들에게 가장 추천합니다.

  • 지루한 코딩강의 싫으신분

    개발자만 알아들을 수 있는 어려운 설명말고 아무것도 모르는 나도 알아들을 수 있는 강의 찾으시는 분들.

  • 프론트엔드 개발자가 되고싶으신 분들

    HTML/CSS 자바스크립트는 알지만 프론트엔드 개발자가 되기위해 무엇이 필요한지 모르겠는 분들.

  • 만들면서 배우고 싶으신 분들.

    일방적으로 듣기만 듣는 강의가 아닌 실제 해 볼 수 있는 다양한 문제와 과제를 통해 직접 만들면서 배우는 걸 즐기시는 분들.

코스 설명 한번에 해드림

무엇을 배우나요?

리액트

리액트 개발자가 되기위한 필수 리액트 컨셉들을
다양한 예제와 함께 배웁니다.

5개의 프로젝트

넷플릭스, 쇼핑몰, 가위바위보 게임등 리액트의 핵심 컨셉을 담은
5개의 프로젝트를 진행합니다.

Redux

리액트뿐만 아니라 리액트와 함께 배워야 하는 핵심 컨셉인 리덕스를 배웁니다.

Axios

API를 호출하는 가장 유명한 방법인 Axios 를 통해
API를 호출하는 법을 배웁니다.

리액트 라이브러리

리액트 개발할때 많이 쓰이는 다양한 리액트 라이브러리들을 배우고
스스로 사용하는 법을 배웁니다.

스스로 해결하는 능력

다앙한 과제들을 통해 스스로 개발해나가는 능력을 키웁니다.

Course curriculum

총 716분(12시간)의 강의를 4주 만에 끝내보세요!

  • 1

    이 코스를 들은 후 당신에게 벌어질 일

  • 2

    1. 리액트 기초

  • 3

    2. 첫번째 프로젝트: 가위바위보 게임

    • 1. 게임 소개

    • 2. 박스 만들기

    • 3. 아이템 선택하기

    • 4. 유저가 선택한 아이템 보여주기

    • 5. 컴퓨터는 아이템을 랜덤하게 선택하기

    • 6. 게임의 승자를 가리자
  • 4

    3.클래스 컴포넌트

    • 클래스 컴포넌트: 옛날 방식이지만 중요한 것

  • 5

    4. 리액트 Lifecycle

    • 1. 클래스 컴포넌트 lifecycle

    • 2. 함수형 컴포넌트 lifecycle
  • 6

    5. 두번째 프로젝트: 날씨앱 만들기

    • 1. 프로젝트 소개

    • 2. 프로젝트에서 해야할 일

    • 3. 현재 위치 가져오기

    • 4. 현재위치 기반 날씨 가져오기

    • 5. UI 만들기

    • 6. 날씨데이터 보여주기

    • 7. 버튼 보여주기

    • 8. 도시별 날씨 가져오기

    • 9. 로딩 스피너
  • 7

    6. 라우터: 멀티 웹페이지를 만드는 법

    • 1. 라우터란? : 여러 웹페이지를 만드는 지름길

    • 2. Link, Navigate : 페이지 사이를 이동하는 법

    • 3. Restful Route

    • 4. useParams: URL의 파라미터값을 읽어오자

    • 5. useSearchParams :url 쿼리값을 읽어보자

    • 6. Redirect : 페이지를 보호하는 법

  • 8

    7. 세번째 프로젝트: 쇼핑몰 웹사이트 만들기

    • 1. 프로젝트 소개

    • 2. 라우터 세팅

    • 3. 상단 메뉴 만들기

    • 4. Json Server 소개

    • 5. API 부르기

    • 6. 리액트 부트스트랩

    • 7. Form 과 Submit

    • 8. useNavigate로 홈페이지로 돌아가자

    • 9. Private Route

    • 10. 상품 디테일 페이지 만들기

    • 11. 상품 검색하기

    • 12. 상품 검색하기 2탄

    • 13. 배포하기
  • 9

    8. Redux: 게임 체인져

    • 1. redux는 왜 필요한가?

    • 2. redux 개념 소개

    • 3. redux를 셋업하자

    • 4. redux 적용하기

    • 5. useSelector : 리덕스의 진정한 묘미

    • 6. Payload : 함수의 매개변수와 같은 것

  • 10

    9. 네번째 프로젝트: 연락처 페이지 만들기 (Redux ver.)

    • 1. 프로젝트 소개

    • 2. 프로젝트 분석

    • 3. 왼쪽 UI 디자인

    • 4. 오른쪽 UI 디자인

    • 5. 리덕스 기본 세팅

    • 6. Form에서 값 읽어오기

    • 7. 연락처 추가

    • 8. 연락처 보여주기
  • 11

    10. 리덕스 미들웨어

    • 1. redux middleware 소개

    • 2. 리덕스 세팅

    • 3. 리덕스 미들웨어 적용하기

    • 4. combineReducer : reducer 여러개를 합치자!

    • 5. 리덕스 유용한 툴 소개 : Devtool

    • 6. 총 정리

    • 보너스 트랙 : 최신 리덕스를 사용하자 - redux toolkit

    • 보너스 트랙2 : createAsyncThunk
  • 12

    11. (✨2024년 최신 업데이트)리액트 쿼리

    • 1. 왜 리액트 쿼리를 써야하는가?

    • 2. 프로젝트 세팅

    • 3. 리액트 쿼리를 사용해보자!

    • 4. 캐시: 유저경험의 신세계

    • 5. api의 상태 : 리액트 쿼리만의 특별한 점

    • 6. staleTime : api 호출 통제

    • 7. 기타 옵션들

    • 8. 디테일 데이터 불러오는 법

    • 9. 커스텀 훅 만들기

    • 10. 쿼리를 여러개 부르는 법 : useQueries

  • 13

    마지막 프로젝트 들어가시기 전에

    • 마지막 프로젝트 들어가시기 전에

  • 14

    12. (✨2024최신 업데이트) Netflix 만들기

    • 1. 프로젝트 소개

    • 2. Api 문서 소개

    • 3. Route 구성하기: nested route와 Outlet

    • 4. AppLayout 만들기

    • 5. axios 세팅

    • 6. Banner 만들기: hook hook hook..!

    • 7. 배너 디자인하기

    • 8. 영화 슬라이드 만들기

    • 9. 영화 카드 만들기

    • 10. 코드 구조 리팩토링 : 실제 회사에선 어떻게 구성을 할까?

    • 11. 장르 가져오기

    • 12. 장르 보여주기

    • 13. 키워드로 영화 찾기

    • 14. 페이지네이션

    • 15. 마지막 프로젝트

  • 15

    12.(구 버전) 넷플릭스 만들기

    • 1. 프로젝트 소개

    • 2. API문서

    • 3. 프로젝트 시작

    • 4. 라우터 세팅

    • 5. 리덕스 세팅

    • 6.상단메뉴 만들기

    • 7. url 들고오기

    • 8. axios

    • 9. 환경변수

    • 10. Promise : API 여러개를 동시에 부르는 법

    • 11. reducer 만들기

    • 12. 배너 조건부 렌더링

    • 13. 배너 만들기

    • 14. 슬라이드 만들기

    • 15. 로딩

    • 16. 영화 카드 만들기

    • 17. 카드 디테일

    • 18. 장르 보여주기

    • 19. 마지막 과제

    • 20. 네번째 포트폴리오 프로젝트

  • 16

    다음 여정

    • 우리의 다음 여정

    • 코스 후기 작성하기

수강후기

해당 강의를 완강한 학생분들이 작성해주신 후기입니다

5 별 평점

내가 리액트 강의만 5개 듣고 총 100만원 넘게 썼는데

kkkkk kkk

이번 강의가 최고였어요!! 물론 제 기준에서 ㅎㅎ 저는 참고로 문돌이 출신 개발자에요. 다른 강의 들어봤는데 처음엔 쉽다가 중간에 난이도 대폭 상승해서 의지 꺾이는 경험을 많이 했거든요 아무리 쉽고 재밌게 가르친다고 소문난 강사(?)여도 결국은 그렇더라구요. 아마도 컴공 ...

많이 읽기

이번 강의가 최고였어요!! 물론 제 기준에서 ㅎㅎ 저는 참고로 문돌이 출신 개발자에요. 다른 강의 들어봤는데 처음엔 쉽다가 중간에 난이도 대폭 상승해서 의지 꺾이는 경험을 많이 했거든요 아무리 쉽고 재밌게 가르친다고 소문난 강사(?)여도 결국은 그렇더라구요. 아마도 컴공 베이스에서 개발자가 된 케이스라 그런 것 같아요. 이 누나는 아마 문돌이 출신 아닌가요? 그래서 그런지 그런 공백을 잘 채워주신 것 같아요 무엇보다도 재밌게 강의하셔서 좋았고~ 또 칭찬 해주고 싶은 점이 얼굴을 계속 영상에 넣어주신다는거 이거 생각보다 촬영하고 편집하기 귀찮은 일이거든요. 다른 강의들 다 봐도 얼굴 없이 진행한 강의밖에 없었는데 확실히 학습자 입장에서는 선생의 얼굴과 표정 입모양등을 보는게 더 집중도 잘되고 그런것 같더라구요 암튼 강추추추추추 백엔드 강의도 기대되요!!!

조금 읽기
5 별 평점

명강의 중의 명강의다 👍

승연 백

선생님 말씀 너무 잘하시고 잘가르쳐주시는데 심지어 재미도 잡음!!! 제가 만난 선생님중에 가장 유쾌하시고 가장 실력있으세요. 지루할 틈없이 핵심만 쏙쏙 알려주시고 강의가 너무 재밌어요. 프로젝트도 구성도 재밌어요. 코딩에 재미를 붙였습니다. 선생님 최고!

선생님 말씀 너무 잘하시고 잘가르쳐주시는데 심지어 재미도 잡음!!! 제가 만난 선생님중에 가장 유쾌하시고 가장 실력있으세요. 지루할 틈없이 핵심만 쏙쏙 알려주시고 강의가 너무 재밌어요. 프로젝트도 구성도 재밌어요. 코딩에 재미를 붙였습니다. 선생님 최고!

조금 읽기
5 별 평점

최고의 리액트 강의!!!

달원 김

들었던 강의 중에 머리에 가장 쏙쏙 잘 들어왔습니다.

들었던 강의 중에 머리에 가장 쏙쏙 잘 들어왔습니다.

조금 읽기
5 별 평점

초보자도 프로젝트 완성하게 해주는 강의!!

효섭 이

리액트라는 기술이 많이 어렵다는 것을 알고 있어서 쉽게 도전하지 못했습니다. 하지만 어렵다고 느낄 수 있는 부분을 쉽게 잘 설명해 주시고 프로젝트에 필요한 것만 잘 알려주셔서 덕분에 리액트에 재미도 생기고 프로젝트를 완성 시키고 싶은 마음이 크게 생겼습니다. slack으로 질...

많이 읽기

리액트라는 기술이 많이 어렵다는 것을 알고 있어서 쉽게 도전하지 못했습니다. 하지만 어렵다고 느낄 수 있는 부분을 쉽게 잘 설명해 주시고 프로젝트에 필요한 것만 잘 알려주셔서 덕분에 리액트에 재미도 생기고 프로젝트를 완성 시키고 싶은 마음이 크게 생겼습니다. slack으로 질문하면 답변도 너무 잘해주셔서 프로젝트 만드는데 많은 도움이 됐습니다. 게다가 바뀐 기술이 있으면 바로바로 업로드도 해주셔서 너무 좋았습니다!! 이번 강의를 통해 제가 프런트 앤드 개발자로 나아가는데 도와주셔서 감사합니다! 다음 강의도 많이 기대하고 있겠습니다!

조금 읽기
5 별 평점

강의 덕분에 정말 쉽게 재밌게 react에 입문하였습니다

JINBOK LEE

html 강좌부터 시작하여 javascript 그리고 이번 react 강의까지 모두 누나쌤과 함께 하였습니다! 약 5달 전까지만 해도 코딩에 ㅋ자도 모르던 비전공자였는데 어느새 그럴싸한 react 프로젝트까지 만들게 되다니.. 무한 감동입니다ㅠ 뭐든 처음이 가장 어렵고 막연한...

많이 읽기

html 강좌부터 시작하여 javascript 그리고 이번 react 강의까지 모두 누나쌤과 함께 하였습니다! 약 5달 전까지만 해도 코딩에 ㅋ자도 모르던 비전공자였는데 어느새 그럴싸한 react 프로젝트까지 만들게 되다니.. 무한 감동입니다ㅠ 뭐든 처음이 가장 어렵고 막연한데, 그럴때마다 '일단 선생님 강좌 듣고 나면 뭐라도 할 수 있게 되겠지' 라는 생각으로 시작했고 실제로 그렇게 되었네요ㅎㅎ 이렇게 만족스런 후기까지 남길 수 있게 되어 스스로도 기쁩니다! 제 후기를 읽으시는 저와 같은 비전공자 분들 혹은 react 입문을 원하시는 분들께 강력히 추천합니다! 저는 이미 코딩에 관심있어 하거나, 백엔드에서 프론트엔드쪽 지식을 쌓아보겠다는 주변 지인들에게도 무한 추천중이에요! 앞으로 또 다른 좋은 강의로 쌤과 다시 만나고 싶습니다 덕분에 많이 성장하였습니다 감사합니다! :)

조금 읽기
5 별 평점

실무에 바로 적용 가능했던 강의

은영 최

퍼블리셔로 재직중입니다. 공교롭게 리액트 스터디로 강의를 듣기 시작한지 1주 후에 실무에서 리액트 환경에서 작업을 해야할 일이 생겼습니다. 협업하는 개발자분께 폴더구조와 모듈화에 대한 피드백 요청을 받았고, 그때 마침 올라온 누나의 유투브와 강의에서 알려주신 실제 프로젝트에서 ...

많이 읽기

퍼블리셔로 재직중입니다. 공교롭게 리액트 스터디로 강의를 듣기 시작한지 1주 후에 실무에서 리액트 환경에서 작업을 해야할 일이 생겼습니다. 협업하는 개발자분께 폴더구조와 모듈화에 대한 피드백 요청을 받았고, 그때 마침 올라온 누나의 유투브와 강의에서 알려주신 실제 프로젝트에서 컴포넌트를 관리하는 폴더구조 대로 반영하여 패스했습니다. 리액트 강의는 여러번 들었지만 저한테는 당장 실무에 쓸 수 있었던 가장 효율적인 강의였어요. 지금 프로젝트만 끝나면 NodeJS 강의도 수강할 예정입니다.

조금 읽기
5 별 평점

강강강추! 강의

병권 최

설마 저 미모?에 실력까지??? 의심하는 분 일단 들어와 보시라. 정말 꽉꽉꽉 채운 알찬강의와 플러스 그룹프로젝트까지 형아 믿고 그냥 드루와. 정말 미친강의내용 미친 요약 강의전달력 중소기업 대기업 실무경험까지 녹아든 멋진강의입니다.

설마 저 미모?에 실력까지??? 의심하는 분 일단 들어와 보시라. 정말 꽉꽉꽉 채운 알찬강의와 플러스 그룹프로젝트까지 형아 믿고 그냥 드루와. 정말 미친강의내용 미친 요약 강의전달력 중소기업 대기업 실무경험까지 녹아든 멋진강의입니다.

조금 읽기
5 별 평점

강의 후기를 작성해봅니다.

하나 일

너튜버에서 다양한 강좌를 접하고 그것을 공부한 사람으로서 우연히 "코딩알려주는누나" 강좌를 접하게 되었습니다. 딱딱한 강좌만 접하다가 재미있고 즐겁게 강좌하는 이 무료영상을 보고 "아 이런강좌라면 좀더 빠르게 내가 원하는 코딩을 배울수 있겠구나, 라는 생각을 가지게 되었답니다." ...

많이 읽기

너튜버에서 다양한 강좌를 접하고 그것을 공부한 사람으로서 우연히 "코딩알려주는누나" 강좌를 접하게 되었습니다. 딱딱한 강좌만 접하다가 재미있고 즐겁게 강좌하는 이 무료영상을 보고 "아 이런강좌라면 좀더 빠르게 내가 원하는 코딩을 배울수 있겠구나, 라는 생각을 가지게 되었답니다." 항상 즐겁게 강의하는 님의 강좌를 보고 돈주고 배워도 아깝지 안겠구나라는 생각을 가집니다. 사실 저는 동영상 강좌를 돈을 주고 배운다는 것은 낭비라고 생각하는 사람중에 하나였습니다. 하지만, 노력하는 당신의 모습에 이렇게 투자를 하고 한수 배우려 합니다. 항상 즐거운 맘으로 강좌를 만들어 주시길 당부드립니다. 화이팅하세요 ^^

조금 읽기
5 별 평점

와 드디어 끝났습니다!!

지민 유

프론트엔드 준비과정에 리액트를 빼먹을수 없어서 코알누님꺼 리액트 강의 엄청엄청 기다렸는데, 이제서야 다 들었습니다. 물론 마지막 프로젝트는 아직 완성시키진 못했지만 꼭 완성시켜서 프론트엔드 개발자가 되도록 하겠습니다. 리액트 강의 만들어주셔서 감사하구요! 정말 도움 많이 됐습니다....

많이 읽기

프론트엔드 준비과정에 리액트를 빼먹을수 없어서 코알누님꺼 리액트 강의 엄청엄청 기다렸는데, 이제서야 다 들었습니다. 물론 마지막 프로젝트는 아직 완성시키진 못했지만 꼭 완성시켜서 프론트엔드 개발자가 되도록 하겠습니다. 리액트 강의 만들어주셔서 감사하구요! 정말 도움 많이 됐습니다. 어디서부터 어떻게 시작해야 될지 모르는 분들께 강추 드리고 싶어요 정말 알아듣기 쉽고 쉽게 가르쳐 주시기 때문에 누구나 들어도 후회하지 않는 강의인것 같습니다. 수고하셨습니다 감사합니다.

조금 읽기
5 별 평점

실습 프로젝트로 진행하는 실전도움되는 강의

준영 김

선생님이 잘 가르쳐주셔서 어려운 내용임에도 무사히 잘 마치게되었습니다. 다른 수업도 그렇듯 높은 텐션으로 지루하지 않고 프로젝트로 직접 만들면서 보여주며 수업이 진행되니 이해가 잘 됩니다. 그리고 그저 배우는게 아니라 자신의 머리로 직접 생각해야 하는 숙제들이 있어 더더욱 머리속...

많이 읽기

선생님이 잘 가르쳐주셔서 어려운 내용임에도 무사히 잘 마치게되었습니다. 다른 수업도 그렇듯 높은 텐션으로 지루하지 않고 프로젝트로 직접 만들면서 보여주며 수업이 진행되니 이해가 잘 됩니다. 그리고 그저 배우는게 아니라 자신의 머리로 직접 생각해야 하는 숙제들이 있어 더더욱 머리속에 남아있게끔 마무리가 잘 되네요. 마지막 프로젝트를 완성하고 난 뒤에는 '내가 이런걸 만들게 되었다니!'라는 쾌감이 드는게 정말 좋은 수업이었습니다.

조금 읽기

누나만 믿고 따라와

리액트: 프론트엔드 개발자로가는 마지막 단계

카카오 페이로 결제하기

Paypal 결제가 안될경우

 페이팔 결제가 안될경우 카카오페이로 결제해 주세요! 좌측 바코드를 스캔하시면 됩니다. 
결제 후 웹사이트 가입시 입력한  성함과 메일주소를 이메일로 알려주세요!

또는 계좌이체도 가능합니다

 1002-346-071878 우리은행 김빛나  
 이체후 이메일로 
입금자명, 성함, 가입 이메일 을 알려주세요!  (수작업으로 등록을 해야되서 약간의 시간이 걸립니당😀-최대하루!  )
메일주소 :     [email protected]   

강사는 누구?

Full-stack Web Developer | Instructor

코딩알려주는 누나

해외에서 부트캠프 강사로 2년간 근무하면서 100명이 넘는 문과 학생들을 가르쳐본 경험을 토대로 연구해서 나온 최고의 티칭 방법으로 여러분들을 가르칩니다. 🧐웹 개발자로 4년간 근무했으며 단국대학교 컴퓨터 공학과 수석졸업을 했습니다. ✨현재 '코딩알려주는 누나' 유투브 채널을 운영하고 있으며 코딩을 배우고싶은 여러분들을 위한 무료 클래스와 정보들을 나누고 있습니다.🚀🚀

FAQ

  • 수강 기간은 어떻게 되나요?

    강의 등록후 제한없이 보실 수 있습니다. 😊

  • 환불규정은 어떻게 되나요?

    강의구매 후 3일 이내에 3개 이하(미리보기 강의 제외)의 강의를 보셨을 경우 환불이 가능합니다. 하나의 영상을 끝까지 보지 않더라도, 영상을 클릭해서 보시면 보신걸로 간주됩니다. 자세한 환불 절차는 문의 메뉴에서 확인해주세요!

  • 결제가 안됩니다

    카드가 해외결제가 안되시거나 paypal결제가 안되시면 1002-346-071878 우리은행 김빛나로 입금해주시고 메일로 입금자명, 가입 이메일 알려주시면 제가 가입 도와드리겠습니다! 또 기타 결제방법 및 문제는 이메일로 문의해주세요! [email protected]

  • 결제는 왜 달러인가요?

    안타깝게도 아직 원화로 결제가 되지 않습니다 ㅠㅠ 혹시 카드가 해외결제가 안되신다면 주저하지 마시고 이메일 보내주세요 [email protected]

  • 1:1 개인코칭도 수강료에 포함되어있나요?

    해당 수강료에는 개인 코칭의 가격이 포함되어있지 않습니다. 😣 하지만 수강중 질문이 있으시다면 언제든지 슬랙 커뮤니티를 이용해주세요! 여러분의 동료분들 또는이 누나가 답변을 달아드립니다!👨🏿‍🤝‍👨🏿