The RED : 프론트엔드 Back to the Basics : 지속 가능한 코드작성과 성능 향상법 by 김태곤

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

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

(자동)

정가 ~~(자동)~~

할인 금액 (자동)

현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시

바로 구매하기

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

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가지를 알려드립니다.

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

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

(자동)

정가 ~~(자동)~~

할인 금액 (자동)

현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시

바로 구매하기

강의 미리보기

JavaScript 자주하는 실수부터 콜백지옥까지

HTML5는 어떤 의미인가

좋은 코드란 무엇인가

리팩토링

프론트엔드 개발자가 왜 성능을 신경써야 하나요?

상세 커리큘럼

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

1) Intro : 프론트엔드의 과거와 지금

프론트엔드 개발자라는 직무가 존재하기 전부터 커리어를 시작해 이어 온 김태곤 개발자가 말해주는 프론트엔드의 과거와 현재를 짚어봅니다.

2) 프론트엔드 개발자의 정의와 성장

프론트엔드 개발자는 어떤 역할을 하는 사람인지 정의하고, 프론트엔드 개발자가 스스로 성장하기 위한 여러 가지 방법에 대해 이야기합니다.

3) 개발을 시작할 때 일어나는 고민들

실무의 방식은 크게 2가지입니다. 기존 프로젝트에 기능을 추가하거나 수정해야 하는 경우, 그리고 아예 바닥부터 코드를 작성해야 하는 경우. 각각의 경우에, 프론트엔드 개발자로서 해야 하는 고민과 그 과정을 알려드립니다.

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

1) Browser : 웹 페이지를 표현하는 방법

프론트엔드는 주로 브라우저 플랫폼을 기반으로 이루어지므로 플랫폼에 대한 이해가 실력의 차이를 가져올 수 있습니다. 렌더링 엔진의 동작과정을 바탕으로 브라우저 지식의 기본기를 다집니다.

2) HTML : HTML5는 어떤 의미인가?

HTML을 사용하며, 염두에 두어야 할 필수 개념을 정리하고, 점진적 향상과 우아한 성능 저하에 대해 공부합니다.

3) CSS : CSS3는 없다

CSS에 대한 잘못된 인식을 바로 잡습니다. 또한 프로퍼티 및 마진 병합 현상과 같은 꼭 알아두어야 하는 필수 지식을 정리합니다.

4) JavaScript : 자주 하는 실수부터 콜백 지옥까지

JavaScript를 활용하면서 누구나 쉽게 저지를 수 있는 실수를 짚어봅니다. 어휘적 범위, 클로저, 비동기 처리, 콜백 지옥 해결 방법을 배우고 내것으로 만들어 봅니다.

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

1) 좋은 코드란 무엇인가?

오랫동안 견고하게 지속될 수 있는 좋은 코드의 요건에 대해 알아봅니다.

2) 테스트와 TDD, BDD

내가 작성한 코드가 의도한대로 동작되는지 테스트하는 방법을 공부합니다. 테스트 수행 결과를 정량화하는 코드 커버리지에 대해 알아보고, TDD와 BDD 방식을 공부합니다.

3) 리팩토링

코드의 기능은 유지하면서, 명료하고 읽기 좋은 방식으로 내 코드를 리팩토링 하는 과정을 단계별로 알려드립니다.

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

1) 프론트엔드 개발자가 왜 성능을 신경써야하나요?

사용자 경험(UX)에 많은 부분을 담당하는 만큼 프론트엔드 개발자도 웹 애플리케이션의 성능을 고려해야 합니다. 성능을 고려하지 않고 코드를 작성할 경우 발생하는 문제에 대해 알아봅니다.

2) 코드 바깥의 성능

사용자가 민감하게 느끼는 초기 구동 시간에 영향을 미치는 요소를 점검해보고 네트워크, 서버측 기법, 리소스 최적화 등 자바스크립트를 사용하지 않는 성능 개선 방법을 배웁니다.

3) 애니메이션 성능

0.1초 차이로 UX에 큰 영향을 끼치는 애니메이션의 성능을 개선하는 방법을 배웁니다.

4) JavaScript 코드의 성능

메모리 누수(memory leak) 문제가 발생하는 사례와 예방법을 알아보고, 성능을 개선할 수 있는 자바스크립트 패턴을 배워봅니다.

상세 커리큘럼 다운 받기

그리고 한 걸음 더

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

강의는 어떤 내용으로 구성되어 있나요? PHP/ajax 시절부터 jQuery, React, Vue 까지 프론트엔드에서의 트랜드는 너무도 빨리 바뀌고 이 속도는 점점 빨라지고 있습니다. 당장 내년에 유행할 프레임워크도 예측하기 어렵습니다.

프론트엔드 개발자라면 빠른 변화에 적응하는 힘을 길러야 합니다. 이런 힘은 커뮤니티 활동을 많이 한다고 길러지는 것은 아닙니다. 이런 힘은 프론트엔드의 탄탄한 기본기로부터 옵니다. 프론트 엔드의 탄탄한 기본기를 잡아 둔다면 변화에 빠르게 적응하고 더 창의적이고 빠르게 문제를 해결할 수 있습니다

그래서 프론트엔드 개발자가 갖추어야할 기본기와 실무에 사용되는 수많은 코딩 팁을 RED를 통해 알려드리려 합니다. 나아가, 지속가능한 코드를 작성하는 방법과 웹 애플리케이션 성능을 향상시키는 방법을 전수해 드립니다.

어떤 사람이 들으면 좋을까요? 이 강의는 제가 다년간 사내/사외 강의를 통해 가르쳤던 주니어 개발자를 염두에 두고 내용을 구성했습니다. 그래서 3년차 미만의 프론트엔드 개발 주니어라면 들어두면 좋습니다. 특히, 평소에 개발이 어렵거나 개발을 하는데 막히는 곳이 많은 분들이 들으면 크게 도움이 될 것 입니다.

지속 가능한 코드라는게 무엇인가요? 개발자들 사이에서 좋은 코드라는 표현을 많이 사용하는데요. 사실 좋은 코드라는 말 자체가 굉장히 모호합니다. 제가 생각하는 좋은 코드를 아래의 4가지 기준으로 정의해보았습니다.

1. 사람이 읽기 좋아야 하고
2. 의도가 명확해야 하고
3. 가능하면 의존성이 적은 코드.
4. 하나의 함수, 메소드, 클래스는 각각 명확한 하나의 책임만 지니도록 하는 코드

이에 대해 동의하는 사람도 있고 동의하지 않는 사람도 있을 수 있겠지만, 위의 4가지가 지켜진 코드는 절대 나쁜 코드는 아니라는 점에는 동의할 것 입니다.

이런 좋은 코드는 오래갑니다. 읽기 좋고, 의도가 명확하고 의존성까지 적으니 수정할 필요가 거의 없습니다. 제가 12년 전에 네이버에서 작성하여 지금까지 사용되고 있는 코드가 그렇습니다.

위의 좋은 코드의 조건들을 만족하면 그게 바로 지속가능한 코드일 것 입니다.

프론트엔드 개발 Back to the Basics 가 어떤 의미인가요? 프론트엔드 개발자 채용을 진행하다 보면, 기본기를 제대로 갖추지 못한 채 React, Vue 등 프레임워크를 중심으로 공부하는 주니어 개발자들을 많이 만날 수 있습니다.

프레임워크는 개발자들에게 생산성과 효율성을 부여해주는 좋은 도구임에는 틀림 없습니다. 허나, 기본기를 제대로 쌓지 못한 채 프레임워크 다루기에만 급급하면 실무에서 예측하지 못한 이슈가 발생했을때, 적절하게 대처하지 못합니다.

탄탄한 기본기를 갖추면 많은 이슈들을 대처하는 힘을 갖출 수 있습니다. 그래서 다시 프론트엔드 개발의 기본기로 되돌아가보자는 것입니다. 프레임 워크의 유행에 끌려가는 것이 아닌 탄탄한 기본기를 바탕으로 어떤 프레임워크라도 자신만의 기본기를 바탕으로 적절하게 활용해야 한다는 의미입니다.

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

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

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

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

– 수강시작 후 7일 이내, 100% 환불 가능합니다. (단, 수강하셨다면 수강 분량만큼 차감)
– 수강시작 후 7일 이내, 1강 이상 수강 시 전체 강의에서 수강한 강의의 비율에 해당하는 수강료를 차감 후 환불 가능합니다.

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

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

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

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

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