diff --git a/content/code-together/course/clean-react/curriculum_part1.mdx b/content/code-together/course/clean-react/curriculum_part1.mdx
new file mode 100644
index 000000000..591a8edbd
--- /dev/null
+++ b/content/code-together/course/clean-react/curriculum_part1.mdx
@@ -0,0 +1,48 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_part1
+index: 1
+tabName: 전체
+subjectList:
+ - name: 컴포넌트 디자인과 Hooks
+ details:
+ - 클린코드를 위한 필수 JS 문법
+ - 렌더링 최적화를 고려한 리액트 훅 구현
+ - 커스텀 훅
+ - 컴포넌트 디자인
+
+ - name: UX를 고려한 동시성 제어
+ details:
+ - 애니메이션
+ - 비동기 처리
+ - 리액트 애니메이션 기법
+ - 데이터 통신
+ - 에러 처리
+ - 요청 취소
+ - 로딩과 캐싱처리(SWR)
+
+ - name: 직관적인 상태 제어
+ details:
+ - 데이터 구조 만들기
+ - 상태 전달
+ - 상태관리를 위한 아키텍쳐
+ - Flux 패턴과 상태머신
+ - immutable 과 함수형 상태변경
+
+ - name: 더 빠른 애플리케이션
+ details:
+ - 프로토콜지향 프로그래밍
+ - 의존성 분석하기
+
+ - name: 테스팅 가능한 코드 구현
+ details:
+ - 프론트엔드 테스팅
+ - 컴포넌트 테스팅
+
+masterInfoList:
+ - picture: crong
+ name: 크롱
+ position: Crong, 웹 프론트엔드 마스터
+ nutshell: "“리액트를 사용해서 클린코드와 최적화를 구현하는 것이 매우 중요합니다.”"
+ introduce: 본 과정을 통해서 유지보수에 유리한 코드를 만들고, UX를 향상시키는 방법을 알게 됩니다. 또한 매주 1:1 코드리뷰를 받으실 수 있고, 열정을 가진 새로운 동료와 기술공유 & 네트워킹이 가능합니다.
+---
diff --git a/content/code-together/course/clean-react/interviews.mdx b/content/code-together/course/clean-react/interviews.mdx
new file mode 100644
index 000000000..a0e830746
--- /dev/null
+++ b/content/code-together/course/clean-react/interviews.mdx
@@ -0,0 +1,22 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_reviews
+interviews:
+ - writerPhoto: ""
+ nutshell: "웹프론트엔드 생태계를 조감할 수 있는 과정"
+ content: "단순하게 리액트를 배우는 것을 넘어 웹프론트엔드 생태계를 전반적으로 조감할 수 있었습니다. 특히 리액트의 개념과 원리를 이해하고 파생되는 라이브러리들의 작동원리까지 파악할 수 있어서 좋았습니다."
+ writer: ""
+ writerInfo: ""
+
+ - writerPhoto: ""
+ nutshell: "동작 원리부터 이해하는 과정"
+ content: "리액트 동작 원리부터 알려주셔서 이해에 도움이 많이 됐습니다. 코드 리뷰와 함께 여러 조언도 해주셔서 너무 좋았어요!"
+ writer: ""
+ writerInfo: ""
+
+ - writerPhoto: ""
+ nutshell: "개발과 개발자의 성장에 대해 고민할 수 있는 과정"
+ content: "개발에 대한 접근 방법과 개발자로서의 성장 방법을 고민할 수 있었습니다. 개발을 어떻게 해야 하는지, 개발자는 어떻게 성장해야 하는지에 대해서 알게 해주셔서 좋았습니다."
+ writer: ""
+ writerInfo: ""
+---
diff --git a/content/code-together/course/clean-react/masthead.mdx b/content/code-together/course/clean-react/masthead.mdx
new file mode 100644
index 000000000..83c8e6ce7
--- /dev/null
+++ b/content/code-together/course/clean-react/masthead.mdx
@@ -0,0 +1,27 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_masthead
+title: "클린 리액트 프로그래밍"
+description: "리액트를 올바르고 간결하게 구현하는 방법을 배웁니다."
+targets:
+ - "웹프론트엔드 개발자 (1~3년차 권장)"
+ - "리액트 기본 사용법을 알고 있거나 경험한 분"
+ - "정해진 코어타임에 참석할 수 있고, 코어타임 외 학습 시간을 충분히 확보할 수 있는 분"
+
+courseInfos:
+ - title: 5주
+ content: "1주차 코어타임만 오프라인"
+ img: calendar
+
+ - title: 매주 목, 오후 7시 30분~10시 30분
+ content: ""
+ img: clock
+
+ - title: React, Next.js, JavaScript, CSS(tailwindcss 등)
+ content: ""
+ img: tool
+
+ - title: 77만원
+ content: ""
+ img: coin
+---
diff --git a/content/code-together/course/clean-react/plan.mdx b/content/code-together/course/clean-react/plan.mdx
new file mode 100644
index 000000000..9d1d57c43
--- /dev/null
+++ b/content/code-together/course/clean-react/plan.mdx
@@ -0,0 +1,73 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_plan
+tags:
+ - name: 스스로
+ color: "#FFF4B3"
+
+ - name: 그룹과
+ color: "#B4E791"
+
+ - name: 마스터와
+ color: "#C7E8EF"
+
+planList:
+ - name: 미션 수행
+ description: 주어진 학습 자료와 키워드를 바탕으로 미션을 수행합니다. 각자 학습하는 과정에서 동료들과 온라인으로 질문과 고민을 나눌 수 있습니다.
+ color: "#FFF4B3"
+
+ - name: 그룹 피어세션
+ description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
+ color: "#B4E791"
+
+ - name: 마스터 피드백
+ description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민합니다.
+ color: "#C7E8EF"
+---
+
+
+
+
+
+
금
+
월
+
화
+
수
+
목
+
+
+
+
+
+
19:00
+
미션과 학습자료 공개
+
+
+
+
+
+
+
19:30 ~ 20:30
+
미션수행
+
미션수행
+
미션수행
+
활동 리뷰
+
그룹 피어세션
+
+
+
20:30 ~ 21:30
+
마스터 피드백
+
+
+
21:30 ~ 22:30
+
+
+
~ 24:00
+
+
+
PR 제출
+
+
+
+
+
\ No newline at end of file
diff --git a/content/code-together/course/clean-react/registrations.mdx b/content/code-together/course/clean-react/registrations.mdx
new file mode 100644
index 000000000..2c4d1b851
--- /dev/null
+++ b/content/code-together/course/clean-react/registrations.mdx
@@ -0,0 +1,9 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_registrations
+registrations:
+ - title: "클린 리액트 프로그래밍 과정 대기자 신청하기"
+ description: ""
+ caption: "교육 기간 : 2023년 11월 2일 ~ 12월 7일"
+ path: "https://docs.google.com/forms/d/e/1FAIpQLScPPQgJReCfr-71qAPmmfBQCZXNhq-m7DNGMBdp-0ber7ZcCQ/viewform?usp=sf_link"
+---
diff --git a/content/code-together/courseList.mdx b/content/code-together/courseList.mdx
index aa2102bc0..a31521234 100644
--- a/content/code-together/courseList.mdx
+++ b/content/code-together/courseList.mdx
@@ -1,15 +1,15 @@
---
templateKey: codeTogether_courses_list
courses:
- - title: "자바스크립트 파트1•2"
- description: "프로그래밍 기초부터 간단한 웹 애플리케이션 개발까지 경험해보는"
- path: "/code-together/course/javascript"
-
- - title: "클린 프론트엔드"
- description: "프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 익혀보는"
- path: "/code-together/course/clean-frontend"
-
- title: "만들면서 배우는 iOS 아키텍처"
description: "스위프트 언어와 iOS 플랫폼에서 유지보수하기 좋은 구조를 만들어 보는"
path: "/code-together/course/ios-architecture"
+
+ - title: "클린 리액트 프로그래밍"
+ description: "리액트를 올바르고 간결하게 구현하는 방법을 배우는"
+ path: "/code-together/course/clean-react"
+
+ - title: "자바스크립트 파트1•2"
+ description: "프로그래밍 기초부터 간단한 웹 애플리케이션 개발까지 경험해보는"
+ path: "/code-together/course/javascript"
---
diff --git a/content/code-together/courses.mdx b/content/code-together/courses.mdx
index fec7f9bd3..a36ddffae 100644
--- a/content/code-together/courses.mdx
+++ b/content/code-together/courses.mdx
@@ -9,14 +9,6 @@ courses:
tags:
- 대기자 모집 중
- - category: 프론트엔드
- title: 클린 프론트엔드
- cost: 440,000원
- img: mediumCleanFE
- path: /code-together/course/clean-frontend
- tags:
- - 대기자 모집 중
-
- category: iOS
title: 만들면서 배우는 iOS 아키텍처
cost: 880,000원
@@ -24,4 +16,20 @@ courses:
path: /code-together/course/ios-architecture
tags:
- 대기자 모집 중
+
+ - category: 프론트엔드
+ title: 클린 리액트 프로그래밍
+ cost: 770,000원
+ img: mediumCleanReact
+ path: /code-together/course/clean-react
+ tags:
+ - 대기자 모집 중
+
+ - category: 프론트엔드
+ title: 클린 프론트엔드
+ cost: 440,000원
+ img: mediumCleanFE
+ path: /code-together/course/clean-frontend
+ tags:
+ - 준비 중
---
diff --git a/content/faq/lists.mdx b/content/faq/lists.mdx
index 3219f461a..24c94596f 100644
--- a/content/faq/lists.mdx
+++ b/content/faq/lists.mdx
@@ -422,4 +422,75 @@ https://github.com/code-squad/test-item-pool/blob/master/level2-common/level2.md
title: 고용노동부에서 지원하는 재직자 교육 과정(내일배움카드교육 등)에 해당되나요?
content: 아니요, 해당되지 않습니다.
editDate: "2022-12-23"
+
+ - course: clean-react
+ category: 교육 과정
+ title: 과정은 온라인으로 진행되나요?
+ content: "네, 온라인 과정이며 줌과 슬랙을 활용합니다. \n
+다만 1주차 코어타임은 오프라인(@코드스쿼드)에 모여 활동할 수 있습니다."
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 수강신청
+ title: 현재 재직 중이 아니라면 참여할 수 없나요?
+ content: "아니요, 교육 과정 대상자에 해당된다면 재직여부와 상관없이 참여할 수 있습니다. \n
+ 다만 현재 재직 중은 아니더라도 리액트의 개발 경험이 필요합니다."
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 수강신청
+ title: 과정 수강을 위해 어느 정도의 리액트 개발 경험이 필요한가요?
+ content: "본 과정은 리액트로 최소한 추가, 삭제 가능한 todo 애플리케이션은 만들어 봤어야 참여할 수 있는 난이도입니다."
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 수강신청
+ title: 코어타임에 함께할 수 없다면 신청할 수 없나요?
+ content: 코드투게더 과정은 동료, 마스터와 함께 학습하는 과정입니다. 모두의 학습과 성장을 위해 정해진 코어타임은 반드시 출석해야 합니다.
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 교육 과정
+ title: 정해진 코어타임에만 출석하면 되나요?
+ content: "목요일 코어타임은 이번 주에 본인이 학습하고 도전한 것을 동료 및 마스터와 공유하는 시간입니다.\n
+ 따라서 코어타임 이외에도 스스로 학습할 수 있는 시간을 충분히 확보하시는 것을 적극적으로 권장합니다."
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 수강신청
+ title: 과정을 어떻게 신청할 수 있나요?
+ content: "모집 시기가 되면 대기자 분들에게 메일로 수강신청 방법을 안내드리고 있습니다.\n
+그때 자세한 방법을 확인하실 수 있습니다."
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 수강신청
+ title: 별도의 선발 과정은 없나요?
+ content: 네, 없습니다. 다만 과정의 난이도가 중급이기 때문에 초보자는 신청이 어렵습니다.
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 교육 과정
+ title: 수강생은 총 몇 명인가요?
+ content: 약 15명의 수강생이 함께 학습합니다.
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 수강신청
+ title: 과정 중간에 빈자리가 생긴다면 등록할 수 있나요?
+ content: 아니요, 과정 특성상 중간에 합류하시는 것은 어렵습니다.
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 결제
+ title: 수강료 결제는 어떻게 하나요?
+ content: "수강료는 과정 시작 전에 결제합니다. 결제 방법은 과정에 신청하시면 자세히 안내받으실 수 있습니다.\n
+만약 재직 중인 회사에서 교육 비용을 지원해 주는 경우, 법인 카드로 결제 또는 비용 입금 후 세금계산서 발행이 가능합니다."
+ editDate: "2023-09-11"
+
+ - course: clean-react
+ category: 결제
+ title: 고용노동부에서 지원하는 재직자 교육 과정(내일배움카드교육 등)에 해당되나요?
+ content: 아니요, 해당되지 않습니다.
+ editDate: "2023-09-11"
---
diff --git a/src/assets/img/icons/index.ts b/src/assets/img/icons/index.ts
index 5ece4c55f..3e24abf32 100644
--- a/src/assets/img/icons/index.ts
+++ b/src/assets/img/icons/index.ts
@@ -18,6 +18,7 @@ import facebook from "./facebook.svg";
import kakaotalk from "./kakaotalk.svg";
import medium from "./medium.svg";
import youtube from "./youtube.svg";
+import tool from "./tool.svg";
export default {
book,
@@ -40,4 +41,5 @@ export default {
kakaotalk,
medium,
youtube,
+ tool,
};
diff --git a/src/assets/img/icons/tool.svg b/src/assets/img/icons/tool.svg
new file mode 100644
index 000000000..cadd6ef9d
--- /dev/null
+++ b/src/assets/img/icons/tool.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/img/illusts/thumbnail/index.ts b/src/assets/img/illusts/thumbnail/index.ts
index bb26c627b..04dd311df 100644
--- a/src/assets/img/illusts/thumbnail/index.ts
+++ b/src/assets/img/illusts/thumbnail/index.ts
@@ -10,6 +10,7 @@ import mediumReact from "./medium-rct.svg";
import mediumReactPart1 from "./medium-rct-part1.svg";
import mediumReactPart2 from "./medium-rct-part2.svg";
import mediumCleanFE from "./medium-cf.svg";
+import mediumCleanReact from "./medium-cr.svg";
import smallCodeTogether from "./small-ct.svg";
import smallMastersCourse from "./small-mc.svg";
import smallJavascript from "./small-js.svg";
@@ -31,6 +32,7 @@ export default {
mediumReactPart1,
mediumReactPart2,
mediumCleanFE,
+ mediumCleanReact,
smallCodeTogether,
smallMastersCourse,
smallJavascript,
diff --git a/src/assets/img/illusts/thumbnail/medium-cr.svg b/src/assets/img/illusts/thumbnail/medium-cr.svg
new file mode 100644
index 000000000..baa44e417
--- /dev/null
+++ b/src/assets/img/illusts/thumbnail/medium-cr.svg
@@ -0,0 +1,70 @@
+
diff --git a/src/assets/static/phrases.ts b/src/assets/static/phrases.ts
index 4bd25625c..d5df1c195 100644
--- a/src/assets/static/phrases.ts
+++ b/src/assets/static/phrases.ts
@@ -139,6 +139,7 @@ const CATEGORTY_TPL: { [key: string]: string } = {
etc: "기타",
"clean-frontend": "클린 프론트엔드",
"ios-architecture": "만들면서 배우는 iOS 아키텍처",
+ "clean-react": "클린 리액트 프로그래밍",
};
export { DESCRIPTION, LINK_DESCRIPTION, LINK, MESSAGE, SUBTITLE, TITLE, CATEGORTY_TPL };