home
📢 공지사항
///
home
///
🏉

JS + REACT 커리큘럼

Tags
커리큘럼

메인 강의 자료 링크

[지금 무료] 처음 만난 리액트(React) 강의 - 인프런
자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 [사진] 리액트는 메타에서 만든 오픈소스 자바스크립트 UI 라이브러리입니...
https://www.inflearn.com/course/처음-만난-리액트
Table
Search
JS + EACT 학습형 커리큘럼
Week
Name
type
link
Week 01
(실습) 개발 환경 설정하기 !! 먼저 학습
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 01
HTML&CSS 복습
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 01
JS 소개 및 자료형
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 01
JS의 연산자
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 01
font awesome 실습
Open
추가 학습
https://youtu.be/GCknEAuBHPs?si=N7mhb9Z8T8JC-BwX
Week 01
1주차 알고리즘 문제
Open
숙제
Week 02
JS의 함수
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
리액트는 무엇인가
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
리액트의 장점과 단점
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
직접 리액트 연동하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
create-react-app
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
화살표 함수
Open
추가 학습
https://youtu.be/mfaQOlc73pU?si=3FEC2KMnkPW31lgm
Week 02
JSX의 정의와 역할
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
JSX의 장점 및 사용법
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
JSX 코드 작성해보기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
나머지 매개변수와 spread 연산자
Open
추가 학습
https://youtu.be/lekNM8ldxno?si=PWvKgCPeqOGHMx-f
Week 02
2주차 알고리즘 문제
Open
숙제
Week 03
Elements의 정의와 생김새
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Elements의 특징 및 렌더링 하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
시계 만들기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Components와 Props의 정의
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Props의 특징 및 사용법
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Component 만들기 및 렌더링
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Component 합성과 추출
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
댓글 컴포넌트 만들기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Virtual DOM
Open
추가 학습
https://youtu.be/gc-kXt0tjTM?si=VpkQC2z2feWK71e5
Week 03
React.Fragment
Open
추가 학습
https://youtu.be/XuF6Qem0cTE?si=q4Ti0kVGBEUacwqf
Week 03
3주차 알고리즘 문제
Open
숙제
Week 04
State와 LifeCycle의 정의
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
State 사용하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
Hooks의 개념과 useState, useEffect
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
useMemo, useCallback, useRef
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
Hook의 규칙과 Custom Hook 만들기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
Hooks 사용해보기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
Event의 정의 및 Event 다루기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
클릭 이벤트 처리하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
useState 마스터하기
Open
추가 학습
https://youtu.be/G3qglTF-fFI?si=wj1a6qok60TXEbGg
Week 04
useEffect 마스터하기
Open
추가 학습
https://youtu.be/kyodvzc5GHU?si=Pjqs_aSbp53bXENl
Week 04
useRef 마스터하기 1
Open
추가 학습
https://www.youtube.com/watch?v=VxqZrL4FLz8
Week 04
useRef 마스터하기 2
Open
추가 학습
https://www.youtube.com/watch?v=EMK8oUUwP5Q
Week 04
4주차 알고리즘 문제
Open
숙제
Week 05
Conditional Rendering의 정의와 Inline Conditions
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 05
List와 Key
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 05
여러 개의 Component 렌더링하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 05
List의 Key
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 05
출석부 출력하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 05
Form과 Controlled Component
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 05
다양한 Forms
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 05
사용자 정보 입력 받기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 05
Shared State
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Load more
Table
Search
JS + REACT 야생형 커리큘럼
Week
Name
type
link
Week 02
Hooks의 개념과 useState, useEffect
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
useMemo, useCallback, useRef
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
Hook의 규칙과 Custom Hook 만들기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
Hooks 사용해보기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
Event의 정의 및 Event 다루기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
클릭 이벤트 처리하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 02
useState 마스터하기
Open
추가 학습
https://youtu.be/G3qglTF-fFI?si=wj1a6qok60TXEbGg
Week 02
useEffect 마스터하기
Open
추가 학습
https://youtu.be/kyodvzc5GHU?si=Pjqs_aSbp53bXENl
Week 02
useRef 마스터하기 1
Open
추가 학습
https://www.youtube.com/watch?v=VxqZrL4FLz8
Week 02
useRef 마스터하기 2
Open
추가 학습
https://www.youtube.com/watch?v=EMK8oUUwP5Q
Week 02
4주차 알고리즘 문제
Open
숙제
Week 03
Conditional Rendering의 정의와 Inline Conditions
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
List와 Key
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
여러 개의 Component 렌더링하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
List의 Key
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
출석부 출력하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Form과 Controlled Component
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
다양한 Forms
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
사용자 정보 입력 받기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Shared State
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
하위 컴포넌트에서 State 공유하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
섭씨 온도와 화씨 온도 표시하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Composition 방법과 Inheritance
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Card 컴포넌트 만들기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
5주차 알고리즘 문제
Open
숙제
Week 03
Context란?
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Context API
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Context를 사용하여 테마 변경 기능 만들기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
CSS와 Selector
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
레이아웃과 관련된 CSS 속성
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
styled-components
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
styled-components를 사용하여 스타일링 해보기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 03
styled-component 가변 스타일링
Open
추가 학습
https://www.youtube.com/watch?v=tkwcxlkS1uA
Week 03
6주차 알고리즘 문제
Open
숙제
Week 04
미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
주요 컴포넌트 및 폴더 구성하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
UI 컴포넌트 및 List 컴포넌트 구현하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
가짜 데이터 만들기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
Page 컴포넌트 구현 및 각 페이지별 경로 구성하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
App.js 파일 수정, 애플리케이션 실행하기, Production 빌드하기
Open
강의
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8#curriculum
Week 04
Github에 프로젝트 올리기
Open
추가 학습
https://www.youtube.com/watch?v=Fley6IFhlC8
Week 04
리액트 프로젝트 간편 배포하기
Open
추가 학습
https://velog.io/@somda/FE-Netlify%EB%A1%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B9%A0%EB%A5%B4%EA%B2%8C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0
Week 04
7주차 알고리즘 문제
Open
숙제
Week 04
프로젝트 기획 진행 ( 클론 프로젝트 선택 )
Open
프로젝트
Week 05
프로젝트 세부 기획 및 디자인 탐구
Open
프로젝트
Week 06
프로젝트 개발 진행
Open
프로젝트
Week 07
프로젝트 개발 진행
Open
프로젝트