home
📢 공지사항
//
home
//
📰

FE 트랙 1학기 커리큘럼 안내

Created
2024/03/25 00:10
Period
2024
필독 여부
필독

메인 강의 자료 링크

[지금 무료] 처음 만난 리액트(React) 강의 - 인프런
자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫 [사진] 리액트는 메타에서 만든 오픈소스 자바스크립트 UI 라이브러리입니...
https://www.inflearn.com/course/처음-만난-리액트

학습 방법

매주 하단 커리큘럼에 명시된 강의 등을 활용하여 학습을 진행하고, 자신의 velog에 정리해주세요. 학습 중 모르는 게 있다면 디스코드 질문 게시판을 활용해주세요~
velog 업로드 시에는 #UDR #언더독레볼루션 태그를 달아주세요 !
velog에 정리된 내용을 기반으로 세션 진행을 위해 가볍게 PPT나 PDF로 변환하여 주세요.
프로젝트 진행 시에는 진행된 내용, 어려움을 겪었던 내용, 해결한 방법, 꿀팁 등을 위주로 작성하시면 됩니다.
매주 일요일 세션 시간에 공부한 내용 / 프로젝트를 진행한 내용을 발표해주시면 됩니다.
학습 커리큘럼은 학습형 / 야생형으로 나뉩니다. 아래 글을 참조해주세요!

야생형 커리큘럼의 의도는?

학습형과 야생형 커리큘럼의 차이점은 뭔가요?

Table
Search
JS + REACT 학습형 커리큘럼
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 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 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
리액트는 무엇인가
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
리액트의 장점과 단점
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
직접 리액트 연동하기
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
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 01
화살표 함수
Open
추가 학습
https://youtu.be/mfaQOlc73pU?si=3FEC2KMnkPW31lgm
Week 01
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 01
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 01
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 01
나머지 매개변수와 spread 연산자
Open
추가 학습
https://youtu.be/lekNM8ldxno?si=PWvKgCPeqOGHMx-f
Week 01
2주차 알고리즘 문제
Open
숙제
Week 02
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 02
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 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
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 02
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 02
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 02
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 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
Virtual DOM
Open
추가 학습
https://youtu.be/gc-kXt0tjTM?si=VpkQC2z2feWK71e5
Week 02
React.Fragment
Open
추가 학습
https://youtu.be/XuF6Qem0cTE?si=q4Ti0kVGBEUacwqf
Week 02
3주차 알고리즘 문제
Open
숙제
Week 02
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 02
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 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
Load more