웹서비스 개발 MVP

프론트엔드 적정 기술
코스 프로모션 배너 전용입니다.
0 0시간 0 0 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시

10년 전 제가 주니어로 처음 실무에 투입됐을 때
이틀 넘게 정말 열심히 코딩해서 가져갔는데
현실에서 적용될 수 없다는 거예요!

비즈니스에서 원하는 요구사항을
어떻게 기술적으로 풀어야 하는 지 몰랐으니
(확인해야 하는 지도 몰랐고)
우선순위를 결정하는 게 어려워 일정에 쫓겼고
코드 퀄리티도 떨어졌죠.

아직까지도 수많은 주니어 분들이
비슷한 페인포인트가 있다는 게 너무 안타깝습니다.
그래서 이론 학습이나 부트캠프 이후에 추가로
알아야 할 실무 이야기
를 담아 이 강의를 만들었어요.

웹 서비스를 만들 때 신경써야 할 사항들,
다양한 stakeholders와 협업하는 법,
돌발 상황을 해결하는 법,
비즈니스 성공에 기여하는 법, 등
현업에서 일 잘하는 법을 가르쳐드립니다.


by 프론트엔드 개발자 조은

Brand-new Sight

<프론트엔드 실무 가이드>

시중의 프론트엔드 교재와 부트캠프에서
개발에 정답이 있는 마냥 Best practice를 가르치지만
현업에선 당면한 문제를 해결하고
최선의 기술셋을 찾아 비즈니스 성공에
도움되는 방향으로 개발하는 역량을 원합니다.


이것이 현업이다!

재현하는 것을 넘어서,
Step by Step으로 현업 프론트엔드 리드의
생각의 흐름과 판단 기준까지-
날것 그대로의 개발을 참관할 수 있도록


패스트캠퍼스에서 최초로 구성한 강의 내용과 방식입니다.

교육 콘텐츠 플랫폼 F사의 비즈니스 모델을 분석하고 웹사이트를 해부하여, 개발 이론 뿐 아니라 이후 서비스 개발에 활용할 수 있는 실무 기반을 마련합니다.

현실 개발 사례와 수반되는 예상 문제들을 꼬리를 무는 형식의 문답으로 풀어나갑니다. Why?를 질문하며 웹서비스를 개발하는 습관을 시작해봅니다.

HTML, CSS, JavaScript, React, GraphQL, Node.js 등을 활용하며 정제되지 않은 Real 코딩을 통해 기능 확장과 서비스 운영까지 다루는 프로젝트 실습을 진행합니다.

Learning Point
프론트엔드 요구사항 분석과 적정 기술

Step 1. 비즈니스 분석 및 기술 요구사항 도출

- 비즈니스 요구 사항 확인 및 적정 기술 도출
- 기능 개발을 위한 이해관계인들과의 협업 (with. Backend, Designer, PM 등)
- 코드만 완성했다고 해서 프론트엔드 개발이 끝이 아닌 이유


★ 조은의 꿀팁 ★
자주 확인하는 습관이 무엇보다 중요합니다. 언제나 커뮤니케이션은 과하다 싶을 정도로 진행하되, 커뮤니케이션 마무리된 사항에 대해서는 잘 문서화하여 진행합니다.

Step 2. 개발에 필요한 적정 기술과 리소스 체크

- 웹 전체를 아우르는 문제 정리하기
- Micro Services Architectures와 Micro frontends
- Why React? Why TypeScript?

★ 조은의 꿀팁 ★
동료들과 협업할 때 '적어도 이건 알아야 한다' 라는 것들 위주로 다루었습니다. 프론트엔드 개발자가 프론트엔드에 집중하더라도, 프론트엔드만 알아서는 협업하기 어렵습니다. 그러니 이 스텝에서는 '이 정도는 알고 있어야지' 를 무엇보다 강조합니다.

Step 3. MVP 구현, 고도화 및 배포

- 패스트캠퍼스 웹사이트 구현을 위한 데이터 플로우 그리기, 유저 시나리오 작성하기, 페이지 생성, 컴포넌트 생성
- Mock API, UseQuery로 데이터 가져오기, Custom Hooks로 Hooks 레이어 빼내기
- 배포 시 신경써야 하는 것들


★ 조은의 꿀팁 ★
실제 개발 환경을 최대한 가깝게 조성해드리기 위해 연습 없이 실제로 개발해봅니다. 현업 개발 리드가 어떻게 개발하는 지 관찰할 수 있는 챕터입니다. 개발 작업을 이제 막 시작하는 사람들이나, 혹은 회사에서 개발을 하고 있는 분들이 다른 사람의 라이브 코딩을 볼 기회는 생각보다 많지 않아요. 그러니 페어 프로그래밍을 한다고 생각하고, 궁금한 점들을 정리해보세요. 그걸 나중에 복기해보면 충분히 도움이 될 거라 생각합니다.


  • 현실에 연습은 없다! 준비되지 않은 채 코딩합니다.

    강의 내용만큼 강의 방식도 중요합니다.

    부트캠프나 학교에서 Best Practice를 학습한 것을
    수영장에서 평영을 한 것으로 비유한다면,
    이 강의에서는 조은이
    업계 현실 그대로 Real하게
    일단 바다에 뛰어들어 헤엄쳐보듯 개발할 거예요.


    예상치 못한 문제를 만났을 때 어떤 생각의 흐름을 통해 해결하는 지,
    비즈니스 성공을 위해 어떤 선택을 해야하는 지 다- 가르쳐드립니다.

실무자 면접관들이 원하는 대답!


신입이든 주니어 경력자든
면접을 보시는 분들이 틀리는 답변들은 유사합니다.

면접관들이 질문하는 핵심적인 이유를 파악하지 못해서 그래요.

프론트엔드 개발 업계 면접관들은
여러분 앞에 실무 프로젝트가 던져졌을 때
비즈니스 요구사항을 개발자의 언어로 해석하여
일정에 맞게 웹 서비스를 Step by Step 만들 수 있는
실무 기본기가 있는 지 보고 싶었던 거죠.

'꽤 잘한다' 생각했는데 왜 또 불합격?
기술 나열보다 더 중요한 게 부족하니까요.

프론트엔드 리드인 제 기준에서 주니어에게 기대하는 역량은 다음과 같습니다.

▶ 왜 React 가 나왔으며, React에서 Hooks는 왜 사용하는 지, 기존에 어떤 문제가 있었는 지 파악할 수 있는 사람.
▶ 기획에서 핵심 문제를 도출해내고, 그 핵심 문제를 기술적인 관점으로 풀어내서 해결해낼 수 있는 사람.

제 강의를 듣고 나면, 실제 회사에서 필요한 실무 역량을 채울 수 있습니다. 회사에서 개발자로서 존재는 무엇인 지, 어떤 스탠스를 취해야 하는 지, 협업자들과 어떻게 커뮤니케이션 해야하는 지, 프로덕션이 어떻게 굴러가는 지 알게될 거예요.

비즈니스 요구사항에 가장 적합한 스팩을
판단하고 개발하는 능력을 기르세요.

1달 안에 로그인 기능을 만들어달라는 비즈니스 요청사항이 들어왔다고 예를 들어볼께요.

경험이 없다면 '그냥 아이디랑 비밀번호 저장해뒀다가 불러오면 되는 거 아닌가?'라며 쉬워보이겠지만, 사실 개인정보 인증, 인증 후 처리 방법, 인증 업체, 회원 정보 저장소, 회원가입 등 개발해야 할 기능들이 다양해요. 하지만 이 기능들을 다 구현하려면 6개월은 걸릴테구요. 그럼 그냥 '하기 어렵다'고 말하면 될까요?

우리 회사가 유저 정보를 획득해서 무엇을 하고자 하는 건지 파악하는 것부터 필요합니다. 회원수를 늘리는 게 목적이라면 SNS 로그인을 메인 기능으로 가져가고 꼭 필요한 정보인 회원 이름만 받는 것도 해결방법이니까요.

'모든 기능을 다 구현하려면 총 6개월이 걸리니까 업무 기한을 6개월로 변경하던 지, 아니면 1개월 안에 끝낼 수 있는 Plan B (SNS 로그인 기능 탑재)가 있다'고 제안하고, 비즈니스 성공에 도움되는 선택을 하는 것. 이게 바로 '일이 되게 하는' 개발자의 기본 중의 기본 역량이죠.


조은의 강의력과 교수법은 이미
많은 수강생들에게 검증되었습니다.

*HTML&CSS 입문 캠프 수강후기 중 발췌

Top of Top

오늘의집, 네이버, 우아한형제들
출신 프론트엔드 개발 리드 조은

국내 굴지 IT 기업을 거치며 실력을 다진 이천만 다운로드 App '오늘의집' 프론트엔드 리드.

국내 대기업인 SK Comms 퍼블리셔로 경력을 시작하여 프론트엔드 개발자로 전향한 이후, NHN, 우아한형제들, 네이버, 데이블을 거쳐 버킷플레이스(오늘의 집)에서 근무했습니다. 아키텍처 설계, TDD도입, Micro Frontend 도입 등 다양한 기술분야를 두루두루 적용하며 유연하게 개발하며 여러 프로젝트를 성공적으로 개발했습니다.

대한민국에서 4명 뿐인 Web Technologies GDE 중 하나.

개발자 커뮤니티에서 좋은 성과와 영향력을 보이는 개발자인 “Google Developers Expert (GDE)”로 선정되여, 구글 엔지니어들과 소통하며 새로운 기술을 익히고 다양한 개발 경험을 공유하고 있습니다. 국내 웹 GDE 4명 중 1명으로 선정되었습니다.

프론트엔드 개발자들 사이에서 손 꼽히는 유명 인플루언서.

2016년에 작성한 브런치 '개발자들이여 공부하라'는 수많은 주니어 개발자들에게 동기유발이 되었고, 미디엄 블로그에 꾸준히 업로드하는 포스팅은 많은 현업자들의 공감을 얻고 있습니다. 미디엄, 브런치, 페이스북, 트위터 등 도합 5천 명 이상의 팔로워에게 개발 지식, 교육, 사고방법 등 다양한 긍정적인 영향을 미치고 있습니다.

North East Asia GDG Community Summit

브런치, 미디엄 게시글


• 2021.05 ~ 2022
버킷플레이스 / FE 챕터 리더
- '오늘의집'의 모든 프론트엔드 개발 리딩

• 2020.10 ~ 2021.03
데이블 / FE Lead, ZET Team
- Front-End Part 매니지먼트
- Mago Editor Alpha 개발 및 설계
- Front Page 설계

• 2018.02 ~ 2020.09
Apollo CIC, NAVER Corp / Frontend Engineer, Senior UI Engineer, Technical Product Manager
- Influencer Home
- SmartEditor
- Article Studio - Technical Product Manager

• 2015.08 ~ 2017.12
우아한형제들 / Frontend Engineer
- 네이버 클로바 프로젝트
- 배달의민족 주문 지면
- 우아한닷컴
- 신춘문예
- 사장님사이트
- 개발 가이드라인 작성

• 2013.12 ~ 2015.06
NHN Technology Services/ UI 개발자
- 네이버 항공권 UI 개발

• 2012.01 ~ 2013.11
SK 커뮤니케이션즈/ UI 개발자
- 네이트 검색 UI 개발

▼ 최근 진행한 프로젝트 내용이 더 궁금하면 클릭 ▼


데이블 / FE Lead, ZET Team

[Front-End Part 매니지먼트]
- 프런트엔드 개발자들의 성장을 위한 Front-End 성장 레벨을 설계 및 공표
- 프런트엔드 개발자들이 올바른 속도로 개발할 수 있게 하기 위해 Asana를 도입
- JavaScript에서 자주 발생하는 타입 이슈를 해결하기 위해 TypeScript를 도입
- 제품군 별로 배포할 수 있도록 Micro Frontend 아키텍처를 도입하였으나 실험 단계에서 마무리하게됨
- 스프린트에 한 번 1:1 미팅을 진행하며 개발자들의 불편한 점 등을 개선
- 코드 리뷰 문화 정립
- TDD 도입을 장려

[Mago Editor Alpha 개발 및 설계]
- WYSIWYM 에디터인 Mago Editor 구조를 설계
- 'contenteditable'을 사용하여 기본적인 IME 대응 및 편집 대응을 진행하였으며, 유저의 편집에 따라 에디터 데이터를 갱신하고, 갱신된 데이터를 바탕으로 다시 컴포넌트를 그려내는 방식으로 구현함
- 유저가 선택하는 영역 (Selection) 정보를 바탕으로 데이터를 정제하여 Store에 저장하는 패턴은 FLUX 패턴을 사용하였으며, 자체 구현을 고려하였으나 이미 FLUX 패턴의 구현체인 Redux가 잘 되어있어 Redux를 활용
- 컨트롤러간 통신은 DOM으로 직접 통신하는 형태가 아닌 정제된 데이터를 구조받는 형태의 통신으로 진행. 그렇게 하지 않을 경우, DOM에서 유저가 임의로 데이터를 처리하는 경우 데이터 구조에 문제가 발생할 수 있기 때문
- 에디터는 제품 특성상 편집과 렌더링이 동시에 일어나기 때문에, 특히 re-render 시점에서 제어가 불가능한 React 사용을 배제함. Block형 에디터를 구현하는 경우에는 React 사용이 무리 없이 가능.

[Front Page 설계]
- Mago 제품군에서 공통으로 사용하는 Front Page의 아키텍처 설계
- 백엔드는 API로 제공한다는 걸 전제로 하여 SSR (Server-Side Rendering) 형태를 구현하기 위해서 Next.js 사용. (기술 스택 선택 시점에는 React가 SSR을 기본으로 제공하지 않았음)
- 대시보드 단위로 Page를 생성하고, Page 내에서 여러 컴포넌트를 조합하는 형태를 선택하였으나 이는 프런트엔드에서는 굉장히 흔한 구조임. 데이터를 중앙에서 관리하는 방식을 사용하기 위해서 Redux 도입을 검토

전) 오늘의집 FE 리드 조은 님의 이야기를
지금 최저가로 만나보세요!
Heritage Story

회사에서 공개하진 않지만
우대하는 개발자들의 공통점!

Point 01
'어렵다' 대신 '된다'라고 말한다.
"안 돼요." "아, 이번엔 힘들 것 같아요."
개발자가 협업하는 직군(기획자, 디자이너 등)에게 가장 자주 하는 말일텐데요, 기계적으로 못한다, 어렵다고 말하기 전에 '어느 부분까지는 가능하지만 이러 이러한 문제들 때문에 힘들 수 있다' 라고 친절하게 대화하는 개발자가 될 수는 없을까요?
그러기 위해서는 협업자의 요구사항 분석과 스펙 도출이 매우 중요합니다. 그래야만 '언제까지, 어느 정도를 구현할 수 있다'에 대한 답을 줄 수 있기 때문이죠.
만약 전체 프로젝트 일정이 2주라면, 그 중 2일은 스펙을 분석하는 데에만 사용해도 늦지 않습니다. 무작정 코드를 먼저 짜기 보다는, 요구조건을 분석하고 유저 플로우에 대해 충분히 고민하면 더 좋은 결과물이 나올 수 있다고 생각합니다.
즉, 문제를 정확히 정의하고, 이를 개발자 관점에서 상대에게 이해 가능하도록 말해줄 수 있는 소프트스킬을 일부 다룰 예정입니다.
Point 02
비즈니스 성공을 우선순위에 둔다.
회사는 자아실현을 하는 곳이 아닌, 당면한 프로젝트를 진행하고 비즈니스를 성공시키는 곳입니다. 언제나 best practice 만을 도출할 수는 없죠. 늘 완벽한 설계와 기술 구현이 될 수 있다면 베스트이겠지만, 현업에서는 한정된 자원과 시간 안에서 가능한 최선의 선택을 해야할 순간들이 많습니다.
예를 들어 로그인 기능을 붙여야 하는데 주어진 시간이 이틀밖에 없다면, 복잡한 데이터를 가져와 알고리즘을 짜는 것을 고집하기보다는 소셜 로그인와 같은 대체 기능을 사용하여 구현하는 것처럼 말이죠.
이는 기술적 타협이 아닌 효율적이고 유연한 의사결정 역량이 될 수 있습니다. 같은 맥락에서 적정 기술과 기술 부채에 대한 이야기도 일부 다뤄볼 예정입니다.
Point 03
문제 해결 능력이 뛰어나다.
수많은 Interviewee에게 정말 알려주고 싶었지만 꾹 참았던 말들이 있습니다. 단순히 언어를 익히고 기술을 다루는 것은 사실 실무에서는 크게 중요하지 않습니다. 오히려 '문제가 무엇이며, 왜 이 문제를 해결하려고 하는가?, 이 문제는 어떻게 해결할 수 있는가'에 집중하는 사람을 개발자로서 더 높게 평가합니다.
특히 개발에는 완전히 정해진 정답이라는 게 없기 때문에 더욱 이 능력은 중요한데, 이는 '문제 해결능력'으로 귀결됩니다. 부트캠프를 수료했거나 개발자 취업 과정을 거친 후 기술에 대한 자신감만으로 면접에 임하는 예비 개발자들에게, 실제 현업에서 필요로하는 개발자의 요건과 나아가 경력자처럼 일하는 법에 대한 팁을 줄 수 있는 강의가 될 것입니다.
이 강의로 인해 잘못된 관념이나 관습적인 프로그래밍을 개선하여 탄탄한 기초를 다질 수 있는 계기가 되길 바랍니다.
개발자 체크리스트

사수가 없어서 멘땅에 헤딩하며 일하는 스타트업의 프론트엔드 개발자

부트캠프에서 쌓은 포폴은 화려하지만 면접에서 자꾸 떨어지는 프론트엔드 개발 취준생

Best Practice에만 신경쓰고, Why라는 질문을 하지 않는 프론트엔드 개발자

협업 시 ‘안된다’, ‘어렵다’ 라는 말이 기계적으로 먼저 나오는 프론트엔드 개발자

개발자의 역량
Heritage Story

주니어 개발자들의 고민을
시원하게 해결해드렸습니다!

주니어 개발자 고민

지금 강의를 듣고 조은의 인사이트를 배워보세요!

코스 프로모션 배너 전용입니다.
0 0시간 0 0 코스 프로모션 배너 전용입니다.
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시

강의 미리 엿보기 👇

상세 커리큘럼

1. Hard things : 현실 세계에서 어려운 것들

2. 웹을 지탱하는 기술들 : 클라이언트 사이드

3. Next 기반 애플리케이션 개발 환경 구성하기

4. 애플리케이션 개발하기

그리고 한 걸음 더

강의에 대해 궁금하셨나요?
한 걸음 더 들어가봅니다.

수강료.

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

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

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