코스 프로모션 배너 전용입니다.

0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.

프론트엔드 실무를 하면서 이런 고민을 해본적 있지 않나요?

혼자 일하는 프론트엔드 개발자
혼자 일하고 있는데... 기능 구현은 할 수 있는 상태에서 그 다음에는 무엇을, 어떻게 공부 해야할까요?

주니어 프론트엔드 개발자
능력을 인정받는 시니어 개발자와 함께 일하며 그들이 문제를 해결하는 방법을 알고 싶지만 주변에서 찾기 힘들어요...

실무 경험이 적은 프론트엔드 개발자
다양한 실무 상황을 겪으면서 어떤 문제가 발생할 수 있고, 기술을 이용해서 어떻게 문제를 해결할 수 있는지 알고 싶어요!

취업 준비생
HTML, CSS, JavScript, React는 배웠는데... 실무에서는 서비스의 규모에 따라 프론트엔드 개발자가 어떤 업무를 하는지 궁금해요!

총 10과목

정가 0원

할인 판매가 0% 할인 0원

12개월 할부 월 0원

프론트엔드 아카데미 강의 자세히 보러가기👉

강의 미리보기 👇

확장성 있는 엔지니어링을 위한 6가지

8가지 실무 상황별 학습

시나리오로 배우는
프론트엔드 실무의 모든 것

초기 서비스 개발 후 대규모의 서비스로 성장하는 시나리오를 통해 실무에서 마주하는
대표적인 8가지 상황을 직접 해결해보며 프론트엔드 개발자의 업무 범위와 해결 방법을 학습합니다.

<상황 설명>
∙ 12샵은 가상의 커머스 앱입니다. 여러분이 12샵의 프론트앤드 개발자로 입사하여 실무 개발을 시작합니다.
∙ 12샵의 웹프론트앤드 개발자는 자사의 모바일 웹과 네이티브앱 내의 웹뷰 지면 몇 개를 개발하고 운영하게됩니다.
∙ 백앤드는 MSA 구조로 여러개의 REST 서버들이 클라이언트에게 API를 제공하고 있습니다.

이 강의를 수강 후
여러분은 이렇게 바뀔 수 있어요!

개발 경험, 서비스의 규모에 따른 프론트엔드 엔지니어의 업무를 이해합니다.

문제를 해결하기 위해 고려해야하는 요소과 대안이 무엇인지 알고 적절한 판단을 내릴 수 있습니다.

각 상황에서 개발, 비개발 직무와 효과적으로 협업하는 방법을 익힙니다

강사의 한 마디
이번 강의의 가장 큰 특징은 실무적 상황들을 펼처놓고 그 상황에 다양한 판단 요소들을 설명하고 전달하는 것 입니다.
개발 경험이 적은 분들도 실무 개발과 유사한 경험을 하실 수 있도록 초기 스타트업에 입사를 했다고 가정하고 강의를 진행할 예정입니다. 입사 후 서비스 개발부터 서비스의 점차 규모가 커짐에 따라 발생하는 여러가지 상황을 가정하고, 각 상황에서 발생하는 문제를 어떤 방식으로 해결할 수 있는지 알려드리겠습니다.

프론트엔드 엔지니어링

서비스 성장에 따른
프론트엔드 기술의 모든 것

서비스와 개발 팀의 규모, 범위 등 실무 환경은 계속해서 변해요.
변화하는 환경에서 문제 해결을 위해 필요한 프론트엔드 엔지니어링 기술을 하나의 강의에 담았습니다.

| 어떤 업무를 하나요?
단순했던 페이지를 조금 더 복잡한 기능을 제공하는 서비스로 개발합니다.

| 이런 기술들을 배웁니다!
∙ 기술스택 선택하는 법
∙ 서버 사이드 랜더링(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로 마이그레이션 합니다.

| 이런 기술들을 배웁니다!
∙ 대안 기술 검토
∙ 정적 언어 도입
∙ 정적 언어로의 전면 전환

강사의 한 마디
기술 자체를 알려주는 곳은 많지만, 환경이 변함에 따라 각 기술을 도입해야하는 시기, 이유, 많은 대안 중 적정 기술을 선택하는 방법을 알려주는 곳은 없죠. 이번 강의에서는 단순한 기술의 사용 방법이 아닌 변화에 대응하기 위해서 실무에서 꼭 알아야 하는 프론트엔드 엔지니어링 기술을 알려드리겠습니다.

핵심 노하우 압축

27년 경력 기술이사에게 배우는
근거 있는 문제 해결 능력

엔지니어라면 문제를 해결하기 위한 여러 대안 중 최적의 방법을 내리기 위한 근거를 찾고 판단을 내릴 수 있어야 하죠.
다양한 상황에 따라 27년의 개발 경험을 가진 강사님이 최적의 판단을 찾아가는 과정을 보며.
여러분들도 좋은 시니어 개발자가 의사 결정을 하는 노하우를 배워갈 수 있습니다.

👀 김민태 강사님이 알려주는 프론트엔드 실무 미리보기 👀
< 상황 6. 레거시 리팩토링 >

| 리팩토링 전 준비
∙ 실무에서 리팩토링이 필요한 시점이 언제이며, 어떤 문제를 개선하고자 하는지 제시된 상황을 통해 살펴봅니다.
∙ 리팩토링을 진행하기 전 레거시 아키텍처를 가시화하여 리팩토링 계획을 수립합니다.

| 리팩토링 진행 과정에서의 기술적 요소
∙ 리팩토링 방법을 살펴보며 코드 구조를 개선하기 위해 기술적으로 어떤 대안이 있는지 살펴봅니다.
 ∙ 새로운 도구를 도입하는 방법을 배워봅니다.
∙ 안전한 QA를 위해 실무적으로 고려해야하는 테스트 전략을 알아봅니다.

| 문제 해결을 위한 한 걸음더 나아가기
∙ 리팩토링 과정에서 발생했던 이슈들을 가시화하는 방법을 알려드립니다.
∙ 코드 수준에서는 변화가 많지만, 서비스와 기능 측면에서는 변화가 거의 없는 문제를 해결할 때 비개발 부서와 어떻게 커뮤니케이션하고, 실행하는 지 방법을 살펴봅니다.

강사의 한 마디
개발에서도 문제를 해결하는 방법은 다양하고, 주니어와 시니어 엔지니어의 구분짓는 것은 실무에서 문제 상황을 마주했을 때 다양한 판단 요소를 고려해서 적절한 판단을 할 수 있는 능력이라고 할 수 있습니다. 많은 주니어 개발자들이 그 ‘적절한’게 상황에 따라 매번 달라지고, 선택을 하더라도 그 이유를 명확하게 설명하는데 어려움을 느낍니다. 특정 기술, 개념, 지식을 알면 시니어 엔지니어가 될 수 있다고 이야기 할 수는 없지만, 좋은 시니어 엔지니어가 문제를 해결하는 과정을 여러 가상 상황의 문제를 해결하면서 강의에서 몇 가지 측면을 알려드릴 예정입니다.

현실과 가장 가까운 강의

실제 서비스와 가장 유사한
환경에서 학습

프론트엔드 개발자는 클라이언트 코드만 확인할까요?
실무에서 마주할 환경과 가장 유사하게 백엔드, 네이티브 앱 코드까지 연동된 환경을 제공해드립니다.

강사의 한 마디
실제 서비스는 프론트엔드, 백엔드, 모바일(네이티브 앱) 영역이 서로 긴밀하게 연동되어 있습니다. 따라서 프론트엔드 개발자가 문제를 해결하기 위해 프론트엔드 사이드의 코드를 수정했을 때 다른 영역에서 어떤 영향이 있는지 확인할 수 있어야 합니다. 수강생 여러분들이 실제와 유사한 환경에서 학습할 수 있도록 강의에서도 클라이언트, 백엔드, 네이티브 앱 코드는 미리 제공하고 JavaScript, TypeScript, 서버(Node.js) 코드를 중점적으로 분석하고 설명할 예정입니다.

인정받는 개발자가 일하는 법

프론트엔드 엔지니어의 핵심 역량,
협업 능력 키우기

채용 공고에도 자주 등장할 만큼 프론트엔드 엔지니어의 핵심 역량인 협업 능력.
비개발, 개발 직무와 협업에 필요한 기술까지 알려드릴게요.

비개발 직무와의 협업

디자이너, 기획자 등 비개발 직무와의
협업을 위한 태도와 커뮤니케이션 방법
▾▾▾
∙ 비개발 직무와 소통 시 상황에 따른 효과적인 문제 상황 표현 방법
∙ 커뮤니케이션 후 개발 프로세스 수립 시 공유 되어야 하는 정보
개발팀 내의 협업

[ 상황 4 ] 개발팀의 규모가 갑자기 커진 상황을
해결하는 헙업 전략
▾▾▾
∙ ESLint 룰 설정 방법
∙ 코딩 컨벤션 작성(문서 버전, 자동화 버전)
∙ 코드 리뷰

강사의 한 마디
프론트엔드 개발자는 특히 협업이 많이 필요한 직무입니다. 그래서 프론트엔드 개발자의 핵심역량으로 협업 능력이 자주 언급되죠.
하지만 협업을 잘하기 위한 방법을 알려주는 곳은 많지 않은 것 같아요. 이번 강의에서는 각 문제 상황에서 비개발 직무와 효과적으로 커뮤니케이션 하는 방법을 나쁜 예시와 좋은 예시를 비교해서 알려드리고, 갑자기 개발 규모가 커진 상황을 해결하며 개발팀의 규모가 갑자기 커져도 안정적으로 개발을 할 수 있는 전략을 설명해드릴게요.

커리어 고민 해결

우아한형제들 기술이사의
커리어 조언으로 취업/이직 준비까지

강사의 한 마디
좋은 시니어 개발자로 성장하기 위해 지금까지 학습한 내용도 결국 환경이 뒷받침되지 못한다면 의미가 없습니다.
여러분이 더 좋은 환경에서 커리어를 쌓을 수 있도록 수천 건의 이력서와 경력 기술서를 읽으며 깨달은 많은 주니어 개발자들이 모르는 당신이 능력 있는 개발자라는 것을 증명할 수 있는 방법을 알려드리겠습니다.

코스 프로모션 배너 전용입니다.

0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.

강사님께 직접 물었습니다

김민태

이력
現 우아한형제들 / 기술이사 프론트엔드 개발 그룹장
 前 피키캐스트 / 웹 프론트엔드 파트 리더
前 NCSoft / 차장
前 KTH / 웹 플랫폼팀 팀장, Ios 개발팀 팀장

교육 경험
• 우아한형제들 개발자 채용 및 사내외 교육 진행
• 패스트캠퍼스 오프라인 JavaScript 부트 캠프 과정 14기 진행
• 패스트캠퍼스 온라인 The RED : React와 Redux로 구현하는 아키텍처와 리스크 관리 강의 진행

기타 활동
• 한국 웹 20주년 국제 콘퍼런스 강연

Question 1.
어떤 사람이 들으면 가장 도움이 될까요?

∙ 프론트엔드 개발 언어(JavaScript 또는 TypeScript)에 대한 이해도가 있고, 웹 서비스를 개발해본 경험이 있는 분
∙ 문제 해결 능력을 키우고 싶은 주니어 개발자(5년 미만)
∙ 좋은 시니어 개발자의 노하우를 배워 빠르게 성장하고 싶은 프론트엔드 개발자

Question 2.
강의를 수강하는데 필요한 사전지식이 있나요?

∙ JavaScript 또는 TypeScript에 대한 이해 및 활용 가능한 수준
∙ 웹 서비스 개발 경험
∙ GraphQL, Recoil 등의 대한 지식은 필수는 아닙니다.
∙ 해당 강의에서는 기술 스택 사용법을 자세하게 다루지는 않으며, 학습을 하는데에 있어 개념을 이해하기 위한 정도의 설명이 진행됩니다.

Question 3.
수업을 듣고 어떤 것을 배울 수 있나요?

∙ 프론트엔드 실무 상항에서 한번 쯤 마주할 문제를 해결하기 위해 필요한 기술(서비스 개발, Webview, 라이브러리 개발 및 운영, 마이그레이션, MSA 클라이언트, 리팩토링 등)을 실무 상황과 유사한 환경에서 배울 수 있습니다.
∙ 프론트엔드 엔지니어로서 문제 해결 능력을 학습합니다. 더 나아가, 해결 방법을 선택하는 과정에서 어떤 기준과 근거로 판단을 내리는지 좋은 시니어 개발자의 관점을 배워갈 수 있습니다.

Question 4.
1, 2강을 수강해야 따라갈 수 있나요?

아니요. 1, 2강을 수강하지 않아도 필요한 선수지식만 갖췄다면 따라올 수 있습니다. 하지만 개발 언어(JavaScript, TypeScript)에 대한 기본기가 부족하다고 생각하다면 1강을 먼저 수강하시길 추천드리고, 프론트엔드 개발의 개념과 원리에 대한 기술적인 이해가 필요하신 분들에게는 2강을 먼저 수강하시는 것을 추천합니다.

Question 5.
수업을 위해서는 어떤 Tool들이 필요할까요?

∙ JavaScript - ES 2017 이상
∙ TypeScript - 4.5 이상
∙ React - 17.0 이상

커리큘럼을 확인하세요.

아래의 모든 챕터 클립을 강의 하나로 들을 수 있습니다.
지금 결제 한 번으로 모든 강의를 평생 소장하세요!

Part 1. 프로 개발자 되기

∙ 강의에 대하여
∙ 실무 웹 프론트앤드 개발자
∙ 입사 전 준비
∙ 회사 선택 체크리스트

Part 2. 입사, 새로운 출발

∙ 서비스 탐색
∙ 기술스택, 아키텍처 리뷰
∙ 위험요소 탐색 후 분류하고 기록하기
∙ 위험요소 문서화 하고 모든 구성원과 커뮤니케이션하기
∙ 첫 번째 프로젝트
∙ PoC vs. Prototype
∙ 기술 스택 선택 - SSR v CSR
∙ Step 1 - 개발
∙ Step 2 - QA
∙ Step 3 - 출시
∙ Step 4 - 운영 & 모니터링

Part 3. 웹뷰와의 첫 만남

∙ 웹뷰 vs. 모바일 웹
∙ 웹뷰 체크리스트
∙ 서비스 설계
∙ 단일 화면 웹뷰 구현
∙ 추가된 화면 설계
∙ 문제점 발견! 라우팅은 어디서?
∙ 멀티 웹뷰 그리고 딥링크 구현
∙ 화면간 데이터 교환을 위한 아키텍처

Part 4. 이상과 현실 밸런스 게임

∙ 접근성 리뷰
∙ 기술과 태도의 문제
∙ 디자이너, 기획자와 협업하기
∙ 구현, 그리고 개발 프로세스 수립
∙ 컴포넌트 가이드라인
∙ 컴포넌트 저장소 분리하기

Part 5. 팀 워크

∙ 팀 플레이를 위한 체크리스트
∙ 개성과 표준의 갈등
∙ 권고와 강제
∙ 코딩 컨벤션 문서 버전
∙ 코딩 컨벤션 자동화 버전
∙ 코드 리뷰
∙ 코드 운영 전략
∙ 지속 가능한 코드 리뷰 전략

Part 6. VOC! 우리는 고객을 알고있나?

∙ 고객 행동 데이타 수집 전략
∙ 로그 수집기 구현
∙ 코드 스니펫 제공 전략
∙ 라이브러리 설계
∙ 라이브러리 구현
∙ 라이브러리 배포

Part 7. 레거시, 리펙토링

∙ 레거시 아키텍처 가시화
∙ 리펙토링 계획 수립
∙ 리펙토링 스프린트 vs. 조용한 리펙토링
∙ 독립 저장소 vs. 모노레포
∙ 조용한 리펙토링을 위한 테스트 전략
∙ 새로운 도구의 도입
∙ 리펙토링 리포트

Part 8. 준비되지 못한 성공

∙ N 클라이언트 N 서버
∙ 프로토콜 표준화하기
∙ 딕셔너리 구축
∙ 클라이언트 중심 메세지 처리 전략
∙ 서버 중심 메세지 처리 전략
∙ 단일 API 서버 클라이언트 구현
∙ 성능 가이드 만들기
∙ 저비용을 위한 캐싱 전략

Part 9. 현재와 미래를 위한 준비

∙ 고통의 코드 탐색
∙ 탐색 비용 vs. 전환 비용
∙ 대안 기술 검토
∙ 정적 언어 도입
∙ 정적 언어로의 전면 전환

Part 10. 이직을 위한 준비

∙ 기록 그리고 기록
∙ 첼린지는 어디에 있는가?
∙ 매력적인 개발자되기
∙ 개발자의 이력서

상세 커리큘럼.

자세한 커리큘럼 및 내용은 여기서 확인하세요!

자세히 보기 »

코스 프로모션 배너 전용입니다.

0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.

김민태에 대해 더 알아보고 싶다면

지금 보러가기 »

구매 안내.

결제 후, 언제 어디서나 하루 10분 공부 시작.

• 홈페이지 회원가입 및 로그인
• 원하는 강의 결제하기
• 마이페이지에서 강의 시청하기

이 강의도 추천해요.

학습규정 * 본 상품은 동영상 형태의 강의를 수강하는 상품입니다.
* 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
* 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다.

총 학습기간:
– 정상 수강기간(유료 수강기간) 최초 1개월 (30일), 무료 수강 기간은 31일 일차 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다.
– 본 패키지는 약 14시간 분량으로, 일 1시간 내외의 학습 시간을 통해 정상 수강 기간(=유료 수강 기간) 내에 모두 수강이 가능합니다.
– 수강시작일: 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다. (사전 예약 강의는 1차 강의 오픈일)
– 패스트캠퍼스의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.
– 일부 강의는 아직 모든 영상이 공개되지 않았습니다. 각 상세페이지 하단에 공개 일정이 안내되어 있습니다.

주의사항 – 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
– 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다.
– 본 상품은 기수강생 할인, VIP CLUB 제도 (구 프리미엄 멤버십), 기타 할인 이벤트 적용이 불가할 수 있습니다.
– 커리큘럼은 제작 과정에서 일부 추가, 삭제 및 변경될 수 있습니다.
– 쿠폰 적용이나 프로모션 등으로 인해 5만원 이하의 금액으로 강의를 결제할 경우, 할부가 적용되지 않습니다.

환불규정 – 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다.
– 쿠폰을 사용하여 강의를 결제하신 후 취소/환불 시 쿠폰은 복구되지 않습니다.

– 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
– 수강시작 후 7일 이내, 5강 이상 수강 시 전체 강의에서 수강한 강의의 비율에 해당하는 수강료를 차감 후 환불 가능합니다.

– 수강시작 후 7일 초과 시 정상 수강기간 대비 잔여일에 대해 아래 환불규정에 따라 환불 가능합니다.
환불요청일 시 기준
: 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불
: 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불
: 수강시작 후 1/2 경과 후, 환불 금액 없음

* 보다 자세한 환불 규정은 홈페이지 취소/환불 정책에서 확인 가능합니다.

패스트캠퍼스 아이디 공유 금지 정책 안내 [패스트캠퍼스 아이디 공유 금지 정책]
패스트캠퍼스의 모든 온라인 강의에서는 1개의 아이디로 여러명이 공유하는 형태를 금지하고 있습니다.
동시접속에 대한 기록은 내부 시스템을 통해 자동으로 누적되며, 이후 서비스 이용이 제한될 수 있습니다.

[기기제한 정책]
패스트캠퍼스 온라인 강의 시청을 위해서는 ID별 최대 3개의 기기를 등록할 수 있으며, 기기 등록은 온라인 강의장 접속 시 자동 등록됩니다.
최대 갯수를 초과하였을 경우 등록된 기기 해제가 필요합니다.

[저작권 정책]
패스트캠퍼스의 모든 강의는 무단 배포 및 가공하는 행위, 캡쳐 및 녹화하여 공유하는 행위, 무단으로 판매하는 행위 등 일체의 저작권 침해 행위를 금지합니다.
부정 사용이 적발될 경우 저작권법 위반에 의한 법적인 제재를 받으실 수 있습니다.

root layout

(23년 6월)김민태의 프론트엔드 아카데미 : 제 3강 시나리오로 배우는 프론트엔드 실무