프론트엔드김민태

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

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

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

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

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

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

김민태의 프론트엔드 아카데미 패스 (1~3강)
기업이 모셔가는 프론트엔드 개발자가 되는 법을 제대로 배워보세요.
프론트엔드 아카데미 시리즈 1~3강을 추가 할인 받고 구매해보세요.
월말에 가격이 인상됩니다!

번들강의이미지
총 10과목
정가 0원
할인 판매가 0% 할인 0원
12개월 할부 월 0원

*해당 묶음 상품은 페이백/1+1등 별도의 프로모션 및 쿠폰이 적용되지 않습니다.

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

강의 미리보기 👇

확장성 있는 엔지니어링을 위한 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 이상

커리큘럼을 확인하세요.

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

  • 상세 커리큘럼.

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

    자세히 보기 »

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

구매 안내.

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

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

이 강의도 추천해요.
3년 연속 브랜드 대상 수상, 패스트캠퍼스

수강료.

국내 8개 카드사 12개월 무이자 할부 지원! (간편 결제 제외)

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • BC카드
  • KB국민은행
  • NH농협카드

※ BC카드의 경우, 비씨(페이북)을 선택하여 결제시에만 12개월 무이자 할부가 가능합니다.
(BC계열 – 우리/제일/기업/대구/경남/부산/광주/수협/전북/제주/신협)