(23년 6월)김민태의 프론트엔드 아카데미 : 제 3강 시나리오로 배우는 프론트엔드 실무
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-21T23:51:15Z/2022-05-21T23:51:15Z-472/1.--메인.webp)
프론트엔드 실무를 하면서 이런 고민을 해본적 있지 않나요?
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-24T03:51:33Z/2022-05-24T03:51:33Z-472/1.webp)
혼자 일하는 프론트엔드 개발자
혼자 일하고 있는데... 기능 구현은 할 수 있는 상태에서 그 다음에는 무엇을, 어떻게 공부 해야할까요?
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-24T03:53:01Z/2022-05-24T03:53:01Z-472/2.webp)
주니어 프론트엔드 개발자
능력을 인정받는 시니어 개발자와 함께 일하며 그들이 문제를 해결하는 방법을 알고 싶지만 주변에서 찾기 힘들어요...
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-24T03:54:37Z/2022-05-24T03:54:37Z-472/3.webp)
실무 경험이 적은 프론트엔드 개발자
다양한 실무 상황을 겪으면서 어떤 문제가 발생할 수 있고, 기술을 이용해서 어떻게 문제를 해결할 수 있는지 알고 싶어요!
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-24T03:52:54Z/2022-05-24T03:52:54Z-472/4.webp)
취업 준비생
HTML, CSS, JavScript, React는 배웠는데... 실무에서는 서비스의 규모에 따라 프론트엔드 개발자가 어떤 업무를 하는지 궁금해요!
![번들강의이미지](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202102/154311-319/layout-906-cover-sample.png)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202102/154337-319/layout-906-sub-sample.png)
프론트엔드 아카데미 강의 자세히 보러가기👉
-
Javascript & Typescript Essential
Java Script와 Type Script를 함께 배웁니다. 동작 원리를 학습하고 프로젝트 실습을 통해 웹 어플리케이션 구조까지 확실히 이해합니다. 탄탄한 기본기를 장착하게 됩니다. 학습할 4가지 예제 프로젝트는 해커뉴스 클라이언트, 회원가입 프로젝트, 로그인 프로젝트, 그리고 차트 라이브러리 입니다.dfdfdf
지금 강의 확인하러 가기🏃🏻♂️
-
만들어보며 이해하는 React & Redux
직접 React와 Redux를 구현해보면서 자주 활용하는 응용 기술의 원리를 이해합니다. 새로운 응용기술이나 트렌드가 등장해도 어렵지 않게 활용할 수 있게 됩니다.
지금 강의 확인하러 가기🏃🏻♀️
-
시나리오로 배우는 프론트엔드 실무
프론트엔드 주니어 개발자라면 꼭 알아야 하는 핵심 역량을 담았습니다. 실무 환경과 최대한 유사한 학습 공간에서 실무 적용 가능한 문제해결 능력&스킬을 배울 수 있습니다.
지금 보고 계시는 강의입니다. 👀
-
Redux & Redux-Saga 프로그래밍
웹 애플리케이션의 상태 관리를 위해 Redux와 Redux-Saga의 기능을 학습합니다. 큰 규모의 프로젝트를 개발할 때도 두려움 없이 도구를 잘 활용하여 효율적으로 개발할 수 있습니다.
본 강의는 준비 중입니다.
출시 알림 신청하기
강의 미리보기 👇
확장성 있는 엔지니어링을 위한 6가지
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T01:22:50Z/2022-05-22T01:22:50Z-472/group-4928.webp)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T01:23:06Z/2022-05-22T01:23:06Z-472/group-4929.webp)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-06-03T07:42:00Z/2022-06-03T07:42:00Z-472/group-4930.webp)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-24T01:56:23Z/2022-05-24T01:56:23Z-472/group-4932.webp)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-06-03T04:05:45Z/2022-06-03T04:05:45Z-472/group-4931.webp)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-06-10T01:40:30Z/2022-06-10T01:40:30Z-472/group-4933.webp)
8가지 실무 상황별 학습
시나리오로 배우는
프론트엔드 실무의 모든 것
초기 서비스 개발 후 대규모의 서비스로 성장하는 시나리오를 통해 실무에서 마주하는
대표적인 8가지 상황을 직접 해결해보며 프론트엔드 개발자의 업무 범위와 해결 방법을 학습합니다.
∙ 12샵은 가상의 커머스 앱입니다. 여러분이 12샵의 프론트앤드 개발자로 입사하여 실무 개발을 시작합니다.
∙ 12샵의 웹프론트앤드 개발자는 자사의 모바일 웹과 네이티브앱 내의 웹뷰 지면 몇 개를 개발하고 운영하게됩니다.
∙ 백앤드는 MSA 구조로 여러개의 REST 서버들이 클라이언트에게 API를 제공하고 있습니다.
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-06-10T01:40:42Z/2022-06-10T01:40:42Z-472/group-4915.webp)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T00:11:48Z/2022-05-22T00:11:48Z-472/frame-3894.png)
이 강의를 수강 후
여러분은 이렇게 바뀔 수 있어요!
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202110/104146-472/강사님의-한마디.png)
강사의 한 마디
이번 강의의 가장 큰 특징은 실무적 상황들을 펼처놓고 그 상황에 다양한 판단 요소들을 설명하고 전달하는 것 입니다.
개발 경험이 적은 분들도 실무 개발과 유사한 경험을 하실 수 있도록 초기 스타트업에 입사를 했다고 가정하고 강의를 진행할 예정입니다. 입사 후 서비스 개발부터 서비스의 점차 규모가 커짐에 따라 발생하는 여러가지 상황을 가정하고, 각 상황에서 발생하는 문제를 어떤 방식으로 해결할 수 있는지 알려드리겠습니다.
프론트엔드 엔지니어링
서비스 성장에 따른
프론트엔드 기술의 모든 것
서비스와 개발 팀의 규모, 범위 등 실무 환경은 계속해서 변해요.
변화하는 환경에서 문제 해결을 위해 필요한 프론트엔드 엔지니어링 기술을 하나의 강의에 담았습니다.
-
| 어떤 업무를 하나요?
단순했던 페이지를 조금 더 복잡한 기능을 제공하는 서비스로 개발합니다.
| 이런 기술들을 배웁니다!
∙ 기술스택 선택하는 법
∙ 서버 사이드 랜더링(SSR) VS 클라이언트 사이드 랜더링(CSR)
∙ 개발부터, QA, 출시에서 운영 & 모니터링까지 서비스 개발의 전체 과정
∙ React, Redux, Node.js* 위 이미지는 예시 이미지로 실제 이미지와 다를 수 있습니다. -
| 어떤 업무를 하나요?
추가된 화면을 신규 Webview로 구현합니다.
| 이런 기술들을 배웁니다!
∙ Webview 페이지를 위한 프로젝트 설계
∙ 네이티브 앱과 커뮤니케이션
∙ 단일 Webview 에서 멀티 웹뷰 그리고 딥링크 구현
∙ 웹뷰에서의 라우터
∙ 화면간 데이터 교환을 위한 아키텍처* 위 이미지는 예시 이미지로 실제 이미지와 다를 수 있습니다.
-
| 어떤 업무를 하나요?
Webview 지면에 웹 접근성 지원을 추가합니다.
| 이런 기술들을 배웁니다!
∙ 접근성 리뷰
∙ 접근성 구현
∙ 컴포넌트 저장소 분리하기 -
| 어떤 업무를 하나요?
신입 개발자가 들어오는 상황에서 원활한 협업을 위해 개발 가이드를 작성합니다.
| 이런 기술들을 배웁니다!
∙ ESLint 룰 설정
∙ 코딩 컨벤션 문서/자동화 버전
∙ 지속 가능한 코드 리뷰 전략
∙ 코드 운영 전략
-
| 어떤 업무를 하나요?
고객 행동 데이터 수집을 위한 로그 수집기를 구현해야 합니다.
| 이런 기술들을 배웁니다!
∙ SDK 만들기
∙ 사설 NPM 구축
∙ 라이브러리 설계
∙ 라이브러리 구현
∙ 라이브러리 배포 -
| 어떤 업무를 하나요?
오래된 주문 목록 레거시 웹 지면을 리팩토링 합니다.
| 이런 기술들을 배웁니다!
∙ 접레거시 아키텍처 가시화
∙ 리팩토링
∙ 독립 저장소와 모노레포
∙ 테스트
∙ 새로운 기술 도입
∙ React, Redux, Recoil, 클래스 컴포넌트, 함수형 컴포넌트, Hooks
-
| 어떤 업무를 하나요?
서비스의 규모가 갑작스럽게 커짐에 따라 여러개의 MSA 서버들과 API 연동 효율을 높이기 위한 하나의 GraphQL 서버를 구축 합니다.
| 이런 기술들을 배웁니다!
∙ MSA 클라이언트
∙ 멀티 클라이언트를 위한 단일 API 서버 구축 -
| 어떤 업무를 하나요?
정적 타입 언어를 지원해야하는 상황에서 기존 웹앱 언어를 JavaScript에서 TypeScript로 마이그레이션 합니다.
| 이런 기술들을 배웁니다!
∙ 대안 기술 검토
∙ 정적 언어 도입
∙ 정적 언어로의 전면 전환
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202110/104146-472/강사님의-한마디.png)
강사의 한 마디
기술 자체를 알려주는 곳은 많지만, 환경이 변함에 따라 각 기술을 도입해야하는 시기, 이유, 많은 대안 중 적정 기술을 선택하는 방법을 알려주는 곳은 없죠. 이번 강의에서는 단순한 기술의 사용 방법이 아닌 변화에 대응하기 위해서 실무에서 꼭 알아야 하는 프론트엔드 엔지니어링 기술을 알려드리겠습니다.
핵심 노하우 압축
27년 경력 기술이사에게 배우는
근거 있는 문제 해결 능력
엔지니어라면 문제를 해결하기 위한 여러 대안 중 최적의 방법을 내리기 위한 근거를 찾고 판단을 내릴 수 있어야 하죠.
다양한 상황에 따라 27년의 개발 경험을 가진 강사님이 최적의 판단을 찾아가는 과정을 보며.
여러분들도 좋은 시니어 개발자가 의사 결정을 하는 노하우를 배워갈 수 있습니다.
< 상황 6. 레거시 리팩토링 >
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T00:29:47Z/2022-05-22T00:29:47Z-472/group-4913.png)
| 리팩토링 전 준비
∙ 실무에서 리팩토링이 필요한 시점이 언제이며, 어떤 문제를 개선하고자 하는지 제시된 상황을 통해 살펴봅니다.
∙ 리팩토링을 진행하기 전 레거시 아키텍처를 가시화하여 리팩토링 계획을 수립합니다.
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T00:35:32Z/2022-05-22T00:35:32Z-472/01---2.png)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T00:32:07Z/2022-05-22T00:32:07Z-472/group-4912.png)
| 리팩토링 진행 과정에서의 기술적 요소
∙ 리팩토링 방법을 살펴보며 코드 구조를 개선하기 위해 기술적으로 어떤 대안이 있는지 살펴봅니다.
∙ 새로운 도구를 도입하는 방법을 배워봅니다.
∙ 안전한 QA를 위해 실무적으로 고려해야하는 테스트 전략을 알아봅니다.
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T00:35:37Z/2022-05-22T00:35:37Z-472/01---2.png)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T00:33:01Z/2022-05-22T00:33:01Z-472/group-4911.png)
| 문제 해결을 위한 한 걸음더 나아가기
∙ 리팩토링 과정에서 발생했던 이슈들을 가시화하는 방법을 알려드립니다.
∙ 코드 수준에서는 변화가 많지만, 서비스와 기능 측면에서는 변화가 거의 없는 문제를 해결할 때 비개발 부서와 어떻게 커뮤니케이션하고, 실행하는 지 방법을 살펴봅니다.
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202110/104146-472/강사님의-한마디.png)
강사의 한 마디
개발에서도 문제를 해결하는 방법은 다양하고, 주니어와 시니어 엔지니어의 구분짓는 것은 실무에서 문제 상황을 마주했을 때 다양한 판단 요소를 고려해서
적절한 판단을 할 수 있는 능력이라고 할 수 있습니다. 많은 주니어 개발자들이 그 ‘적절한’게 상황에 따라 매번 달라지고, 선택을 하더라도 그 이유를 명확하게
설명하는데 어려움을 느낍니다. 특정 기술, 개념, 지식을 알면 시니어 엔지니어가 될 수 있다고 이야기 할 수는 없지만, 좋은 시니어 엔지니어가 문제를 해결하는
과정을 여러 가상 상황의 문제를 해결하면서 강의에서 몇 가지 측면을 알려드릴 예정입니다.
현실과 가장 가까운 강의
실제 서비스와 가장 유사한
환경에서 학습
프론트엔드 개발자는 클라이언트 코드만 확인할까요?
실무에서 마주할 환경과 가장 유사하게 백엔드, 네이티브 앱 코드까지 연동된 환경을 제공해드립니다.
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T01:17:20Z/2022-05-22T01:17:20Z-472/group-4921.webp)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202110/104146-472/강사님의-한마디.png)
강사의 한 마디
실제 서비스는 프론트엔드, 백엔드, 모바일(네이티브 앱) 영역이 서로 긴밀하게 연동되어 있습니다. 따라서 프론트엔드 개발자가 문제를 해결하기 위해 프론트엔드 사이드의 코드를 수정했을 때 다른 영역에서 어떤 영향이 있는지 확인할 수 있어야 합니다.
수강생 여러분들이 실제와 유사한 환경에서 학습할 수 있도록 강의에서도 클라이언트, 백엔드, 네이티브 앱 코드는 미리 제공하고 JavaScript, TypeScript, 서버(Node.js) 코드를 중점적으로 분석하고 설명할 예정입니다.
인정받는 개발자가 일하는 법
프론트엔드 엔지니어의 핵심 역량,
협업 능력 키우기
채용 공고에도 자주 등장할 만큼 프론트엔드 엔지니어의 핵심 역량인 협업 능력.
비개발, 개발 직무와 협업에 필요한 기술까지 알려드릴게요.
-
비개발 직무와의 협업
디자이너, 기획자 등 비개발 직무와의
협업을 위한 태도와 커뮤니케이션 방법
▾▾▾
∙ 비개발 직무와 소통 시 상황에 따른 효과적인 문제 상황 표현 방법
∙ 커뮤니케이션 후 개발 프로세스 수립 시 공유 되어야 하는 정보 -
개발팀 내의 협업
[ 상황 4 ] 개발팀의 규모가 갑자기 커진 상황을
해결하는 헙업 전략
▾▾▾
∙ ESLint 룰 설정 방법
∙ 코딩 컨벤션 작성(문서 버전, 자동화 버전)
∙ 코드 리뷰
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202110/104146-472/강사님의-한마디.png)
강사의 한 마디
프론트엔드 개발자는 특히 협업이 많이 필요한 직무입니다. 그래서 프론트엔드 개발자의 핵심역량으로 협업 능력이 자주 언급되죠.
하지만 협업을 잘하기 위한 방법을 알려주는 곳은 많지 않은 것 같아요. 이번 강의에서는 각 문제 상황에서 비개발 직무와 효과적으로 커뮤니케이션 하는 방법을
나쁜 예시와 좋은 예시를 비교해서 알려드리고, 갑자기 개발 규모가 커진 상황을 해결하며 개발팀의 규모가 갑자기 커져도 안정적으로 개발을 할 수 있는 전략을
설명해드릴게요.
커리어 고민 해결
우아한형제들 기술이사의
커리어 조언으로 취업/이직 준비까지
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-05-22T00:49:35Z/2022-05-22T00:49:35Z-472/group-4910.webp)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/2022-06-10T01:46:13Z/2022-06-10T01:46:13Z-759/group-1878.png)
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202110/104146-472/강사님의-한마디.png)
강사의 한 마디
좋은 시니어 개발자로 성장하기 위해 지금까지 학습한 내용도 결국 환경이 뒷받침되지 못한다면 의미가 없습니다.
여러분이 더 좋은 환경에서 커리어를 쌓을 수 있도록 수천 건의 이력서와 경력 기술서를 읽으며 깨달은 많은 주니어 개발자들이 모르는 당신이 능력 있는
개발자라는 것을 증명할 수 있는 방법을 알려드리겠습니다.
강사님께 직접 물었습니다
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202110/162538-472/sc-10-image.png)
現 우아한형제들 / 기술이사 프론트엔드 개발 그룹장
前 피키캐스트 / 웹 프론트엔드 파트 리더
前 NCSoft / 차장
前 KTH / 웹 플랫폼팀 팀장, Ios 개발팀 팀장
교육 경험
• 우아한형제들 개발자 채용 및 사내외 교육 진행
• 패스트캠퍼스 오프라인 JavaScript 부트 캠프 과정 14기 진행
• 패스트캠퍼스 온라인 The RED : React와 Redux로 구현하는 아키텍처와 리스크 관리 강의 진행
기타 활동
• 한국 웹 20주년 국제 콘퍼런스 강연
어떤 사람이 들으면 가장 도움이 될까요?
∙ 문제 해결 능력을 키우고 싶은 주니어 개발자(5년 미만)
∙ 좋은 시니어 개발자의 노하우를 배워 빠르게 성장하고 싶은 프론트엔드 개발자
강의를 수강하는데 필요한 사전지식이 있나요?
∙ 웹 서비스 개발 경험
∙ GraphQL, Recoil 등의 대한 지식은 필수는 아닙니다.
∙ 해당 강의에서는 기술 스택 사용법을 자세하게 다루지는 않으며, 학습을 하는데에 있어 개념을 이해하기 위한 정도의 설명이 진행됩니다.
수업을 듣고 어떤 것을 배울 수 있나요?
∙ 프론트엔드 엔지니어로서 문제 해결 능력을 학습합니다. 더 나아가, 해결 방법을 선택하는 과정에서 어떤 기준과 근거로 판단을 내리는지 좋은 시니어 개발자의 관점을 배워갈 수 있습니다.
1, 2강을 수강해야 따라갈 수 있나요?
수업을 위해서는 어떤 Tool들이 필요할까요?
∙ TypeScript - 4.5 이상
∙ React - 17.0 이상
커리큘럼을 확인하세요.
아래의 모든 챕터 클립을 강의 하나로 들을 수 있습니다.
지금 결제 한 번으로 모든 강의를 평생 소장하세요!
-
상세 커리큘럼.
자세한 커리큘럼 및 내용은 여기서 확인하세요!
-
김민태에 대해 더 알아보고 싶다면
구매 안내.
![](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202009/181726-11/artboard-3.png)
결제 후, 언제 어디서나 하루 10분 공부 시작.
• 홈페이지 회원가입 및 로그인
• 원하는 강의 결제하기
• 마이페이지에서 강의 시청하기
![3년 연속 브랜드 대상 수상, 패스트캠퍼스](https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202201/141634-678/하단-배너.png)