최신 유행을 따라가기 이전에, 프론트엔드 개발자가 먼저 집중해야 할 것

5년, 10년 뒤에도 정체되지 않고 실력을 쌓아 나가고 싶은 모든 프론트엔드 개발자라면, 지금 영상을 확인해 보세요.

지금 가장 핫한 프레임워크도 시간이 지나면서 점차 쓰이지 않게 됩니다. 결국 우리는 5년, 10년, 20년이 지나도 변하지 않는 것에 집중해야 합니다.

프론트엔드 개발자의 기본기는 시간이 지나도 오랫동안 사용할 수 있는 '지속 가능한 코드를 쓸 수 있느냐', 그리고 웹 애플리케이션의 '성능을 향상시키기 위해 코드를 개선하고 점검할 수 있느냐'에 달려있다고 봅니다. RED를 통해 이러한 기본기를 여러분이 충실하게 쌓을 수 있도록 도와드리겠습니다.


by 김태곤

Top of Top

프론트엔드 개발자
김태곤

네이버 블로그 스마트 에디터 코어 개발에 참여한 1세대 프론트엔드 개발자

'제로보드(XE)' 초기 개발, 네이버 자체 프레임워크 'Jindo'의 개발자

화제의 블로그 글 "프론트엔드 개발자는 왜 구하기 어렵나요?"의 역자

프론트엔드, 백엔드가 아닌 '웹 개발자'라는 직무가 통용되던 시절부터 커리어를 시작한 김태곤 개발자는 NHN에 입사해 '네이버 1세대 프론트엔드 개발자'로서 네이버 블로그 스마트에디터, 네이버 카페, 네이버 지도 등 다양한 프로젝트 개발에 참여하였습니다.

그가 당시 작성한 '텍스트를 복사하면 출처를 자동으로 삽입해주는 코드'는 12년이 지난 지금까지도 사용되고 있습니다. 이외에도 네이버 자체 프레임워크 'Jindo' 개발, XpressEngine에서 '제로보드' 초기 개발 등 다양한 프로젝트에 활발히 참여하며, 지속 가능한 코드와 사용자를 고려한 프론트엔드 개발에 집중해왔습니다.

현재는 WordPress의 개발사인 Automattic에서 JavaScript Engineer로서 커리어를 연결해 나가는 중이며, 언제나 '코드 쓰는 사람'으로 남고 싶다고 말합니다.


• 2016 ~ 현재
Automattic ( WordPress ) / Senior JavaScript Engineer
워드프레스닷컴 웹 사이트 개발 참여
- 쿠폰 관리 시스템 개발
- 배너 메시지 통합 관리 시스템 개선
- A/B 테스팅
- 회원 가입 플로우 개선

• 2011 ~ 2016
ThingD ( Fancy ) / Senior Frontend developer
프론트엔드 개발 총괄
- 에르메스(Hermès International)와의 콜라보를 통해 애니메이션 페이지 개발

• 2015
NHN NEXT / Professor
프론트엔드 개발 교수
• 2006 ~ 2011
NHN / Front-end engineer
네이버 1세대 프론트엔드 개발자로서 다양한 프로젝트 참여
- 네이버 자체 프레임워크 Jindo 개발
- 네이버 스마트 에디터 코어 개발
- 네이버 블로그 시즌 2 개발
- 네이버 지도 API 관련 프로젝트 개발
- '제로보드(XE)' 초기 개발

• 2006
SK / Web developer
PHP 기반의 사내 사이트 구축
- 앎드로메다

현 직장 Automattic ( WordPress ) 동료들과 정기 모임에 참석한 김태곤 개발자


김태곤 개발자가 운영하는 블로그
<코드 쓰는 사람> 미리 읽어 보기

  • 프론트엔드 개발자는 왜 구하기 어렵나요?

    “왜 프론트엔드 개발자를 구하기 어려운가”에 대한 첫 번째 답변이자 가장 간단한 답변은 프론트엔드 개발이 신생 분야이기 때문이다. 이 명제에 동의하지 않는 사람들이 대부분이겠지만...

  • 신입 프론트엔드 개발자를 위한 면접 조언

    보통 신입한테는 어마어마한 기술적 소양을 물어보기보다는 다루는 기술의 기본을 충실히 알고 있는지 확인하는 경우가 많다. 따라서 면접을 앞두고 있다면 지금까지 본인이 잘 안다고 생각했던 것들을 정말 제대로 알고...

Heritage Story

어디서나 볼 수 있는
프론트엔드 개발 강의와는 다릅니다.

브라우저, HTML/CSS에 대한
잘못된 기초 바로 잡기

렌더링 엔진의 동작 과정을 바탕으로 브라우저의 기본기를 확실히 합니다. HTML의 탄생 이유와 기본 속성과 기능을 알아보고, 점진적 향상과 우아한 성능 저하를 학습합니다. 또한 CSS에 대한 잘못된 지식을 바로 잡고, 필수 프로퍼티를 정리하는 시간을 가집니다.

프레임워크 없이 JavaScript로만 개발해보기

10가지 프레임워크를 다룰 줄 안다고 해서, 프론트엔드 개발을 잘 한다고 할 수 없습니다. JS를 쓰는 사람이라면 누구나 쉽게 저지를 수 있는 실수를 살펴보고, 어휘적 범위, 비동기 처리, 콜백 지옥 등을 공부합니다. 오직 JS로만 개발하는 실습을 병행하여, JavaScript 기본기를 확실히 할 수 있습니다.

좋은 코드를 만들기 위한 코드 테스트,
TDD, BDD, 리팩토링

작성한 코드가 과연 내 의도대로 작동할지 알아보려면 테스트가 필수적입니다. 지속 가능한 좋은 코드를 만들기 위해 '잘 테스트하는 법'은 무엇인지 알아봅니다. 또한 기능은 그대로 유지하면서도 간결하고 명료한 코드를 만드는 리팩토링 과정을 단계별로 학습하고 이후, 실무에도 적용할 수 있습니다.

프론트엔드 개발자의 각종 성능 개선법

사용자 경험을 개선하기 위해 프론트엔드 개발자로 성능 향상을 고려해야 합니다. 브라우저와 렌더링 순서에 따라 성능을 개선하는 법, 0.1초 단위로 성능에 큰 영향을 미치는 CSS 최적화 방법을 공부합니다. 메모리와 네트워크 트래픽, 프레임워크 최적화를 통한 성능 개선법도 내것으로 만들 수 있습니다.

Brand-new Sight

당신의 시야를 확장시킬
김태곤의 이야기를 The Red에서 만나보세요.

Point 01
최신 프레임워크를 배우기 전에,
가장 기본으로 다시 돌아가야 한다.
선호하는 프레임워크와 라이브러리의 유행이 아무리 빠르게 변화해도, 기본기가 탄탄한 프론트엔드 개발자만이 오랫동안 일할 수 있습니다. 프론트엔드 개발의 기본이라 할 수 있는 '브라우저', 'HTML', 'CSS', 'JavaScript' 기초중 실무에서 사용되는 우선순위의 기본기를 정리하고, 누구나 쉽게 범하는 오류에 대해 다뤄봅니다. 또한 성능을 한 단계 개선시킬 수 있는 고급 스킬을 알려드리려 합니다
Point 02
10년 뒤에도 쓸 수 있는
'지속 가능한 코드'는 이렇게 탄생한다.
누군가 좋은 코드가 무엇이냐고 묻는다면, 저는 간결하고 오랫동안 사용 지속 가능한 코드가 좋은 코드라고 말할 것입니다. 좋은 코드는 단번에 쓸 수 있는 것이 아닙니다. 계속되는 테스트와 TDD, 리팩토링, BDD 등 일련의 과정을 통해 체계적으로 만들어 나가는 것입니다. 지속 가능한 코드 작성을 위해 꼭 거쳐야 할 프론트엔드 개발자의 업무 프로세스에 대해 알려드립니다.
Point 03
웹 애플리케이션의 성능을
고려하지 않은 코드는 문제를 일으킨다.
성능은 백엔드 개발자의 영역이라고만 단정 짓는 사람들이 있습니다. 하지만 사용자가 가장 먼저 접하는 프론트엔드를 책임지는 우리들은 그 누구보다 웹 애플리케이션의 성능을 개선하기 위해 노력해야 합니다. 프론트엔드 개발자가 성능을 고려하지 않고 개발할 경우 어떤 문제들이 발생하는지 알아봅니다. 또한 자바스크립트 코드 개선을 통해 성능을 향상시키는 법을 전해드립니다.
Point 04
주니어 프론트엔드 개발자라면
이 5가지는 꼭 알고 와야 한다.
다양한 기업에서 프론트엔드 개발을 경험했고, 현재는 사내에서 주니어 프론트엔드 개발자의 멘토 역할을 하는 시니어 개발자의 관점에서, 프론트엔드 개발자로 커리어를 오랫동안 이어나가기 위해 꼭 알아야 할 5가지를 알려드립니다.
(자동) (자동) (자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)
상세 커리큘럼

1. 정체되지 않는 프론트엔드 개발자의 일하는 방식

2. Back to the Basics : 프레임워크보다 기본기

3. 10년 이상 쓸 수 있는 지속 가능한 코드 작성

4. 웹 애플리케이션의 성능을 200% 끌어올리기 위한 코드 점검 및 개선 방법

그리고 한 걸음 더

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

[ 주의사항 및 환불규정 ]

* 해당 강의는 사전 예약 판매 상품입니다.
강의 영상은 10월 26일 공개될 예정입니다. 수강에 참고 부탁드립니다.


- 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다.
- 본 상품은 기수강생 할인, VIP CLUB 제도 (구 프리미엄 멤버십), 기타 할인이벤트 적용 불가 합니다.
- 쿠폰 적용이나 프로모션 등으로 인해 5만원 이하의 금액으로 강의를 결제할 경우, 할부가 적용되지 않습니다.

총 학습기간

- 정상 수강기간(유료 수강기간) 최초 1개월(30일), 무료 수강 기간은 31일차 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다.
본 패키지는 약 8시간 분량으로, 일 1시간 내외의 학습 시간을 통해 정상 수강 기간(=유료 수강 기간) 내에 모두 수강이 가능합니다.
- 수강시작일: 수강 시작일은 결제일로부터 기간이 산정됩니다. (사전 예약 강의의 경우 1차 강의 오픈일)
- 패스트캠퍼스의 사정으로 수강시작이 늦어진 경우에는해당 일정 만큼 수강 시작일이 연기됩니다.

- 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다.
- 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
- 수강시작 후 7일 초과, 5강 이상 수강 시 정상(유료) 수강 기간인 {1개월(30일)} 대비 잔여일에 대해 학원법 환불 규정에 따라 환불 가능합니다.
환불요청일 시 기준 수강시작 후 ⅓ 경과 전, 실 결제금액의 ⅔에 해당하는 금액 환불
환불요청일 시 기준 수강시작 후 ½ 경과 전, 실 결제금액의 ½에 해당하는 금액 환불
환불요청일 시 기준 수강시작 후 ½ 경과 후, 환불 금액 없음



※ 패스트캠퍼스 아이디 공유 금지 정책 안내 ※

아이디 공유란?
1개의 아이디로 여러명이 공유하여 수강하는 형태를 말합니다. 패스트캠퍼스의 모든 온라인 강의에서는 아이디 공유를 금지하고 있습니다.
동시접속에 대한 기록이 내부 시스템을 통해 자동으로 누적되며, 동시 접속 기록이 10회 이상 확인되는 경우 사전 안내없이 아이디가 차단될 수 있습니다.


수강료.

  • The RED : 프론트엔드 개발자 김태곤

    현재 정가 대비 42% 할인 중!
    9월 27일 일요일 자정 까지

    정가 259,000원
    현재 판매가 149,000원

    12개월 무이자 할부 시 월 12,416원

국내 9개 카드사 12개월 무이자 할부 지원!

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