BEST

개발 · 프로그래밍

프로그래밍 언어

견고한 JS 소프트웨어 만들기

Name: 견고한 JS 소프트웨어 만들기
Price: 27500 KRW

같은 기능을 만들더라도 자바스크립트 문법을 이제 막 뗀 주니어 개발자와 경험 많은 시니어 개발자의 코드는 상당히 다릅니다. 물론 결과물은 같더라도 말이죠. 후자의 코드가 인정받는 이유는 짜임새 있는 설계와 변화에 대응할수 있는 확장성 때문일거에요. 이 강의는 그런 좋은 코드를 만들어 내는 방법에 대해 알아봅니다.

(4.8) 수강평 96개

수강생 1,168명

김정환

소프트웨어 테스트 TDD jasmine

중급자를 위해 준비한
[TDD, jasmine] 강의입니다.

이런 걸 배울 수 있어요

테스트 주도 개발(TDD) 방법론
자바스크립트 모듈 패턴
단일 책임 원칙을 적용한 코드 리팩토링
DOM 조작 및 이벤트 처리
자바스크립트 코드의 테스트 및 유지보수

좋은 코드를 알면,
좋은 소프트웨어를 만들 수 있어요.

견고한 소프트웨어 만들기

같은 기능을 만들더라도 자바스크립트 문법을 이제 막 뗀 주니어 개발자와 경험 많은 시니어 개발자의 코드는 상당히 다릅니다. 물론 결과물은 같더라도 말이죠. 후자의 코드가 인정받는 이유는 짜임새 있는 설계와 변화에 대응할 수 있는 확장성 때문일거에요. 이 강의는 그런 좋은 코드를 만들어 내는 방법에 대해 알아봅니다.

이 강의의 특별한 점 ✨

테스트주도 개발 방법으로 견고한 프론트엔드 코드를 설계하고 코딩할 수 있어요.
소프트웨어 공학 원칙과 디자인 패턴을 학습할 수 있어요.

먼저 자바스크립트의 특성과 왜 TDD(테스트 주도 개발) 가 필요한지에 대해 짚어 봅니다. 실무에서 흔히 사용되는 코드 예제로 진행하는데요. 코드의 문제점을 함께 진단해 보고 단계적으로 개선해 나가는 과정을 함께 할 거에요. 그리고나서 TDD와 디자인 패턴에 대한 이론을 살펴보구요. 이를 리팩토링에 적용해 보면서 결국에는 좋은 품질의 코드를 만들어 낼 수 있습니다.

각 강의는 10분 미만으로 짧아서 언제라도 다시 시작할 수 있습니다. 영상 중간에 준비한 브랜치들은 실습하지 못한 분들을 위한 작은 배려입니다. 그렇지만 직접 한 땀 한 땀 코딩하면서 수업에 참여하시는 것을 적극 권해드립니다.

이런 분들이 들으면 좋아요!

“자바스크립트 문법은 아는데 어떻게 개발해야 할지 모르겠어요”

“TDD는 들어봤는데 어떻게 하는 건지 궁금해요"

“요구사항이 변경되더라도 코드는 조금만 수정했으면 좋겠어요"

🔹 미리 보는 학습 환경

편집기: VS Code
코드 저장소: Github
브라우저: Chrome
테스프 프레임웍: Jasmine

저를 소개합니다 🧑‍🏫

김정환

웹 기술을 학습하고 정리하는 걸 좋아하는 실무 개발자
웹 기술 및 개발자로서의 생각을 담은 기술 블로그를 운영하고 있어요.

링크: 🖋 김 정환 블로그

학습한 기술과 실무에서 배운 노하우를 모아 발표나 강의 형식으로 공유하는 활동도 하고 있어요.

링크: 🎥 인프런
링크: 🎥 유튜브

우아한형제들에서 프론트엔드 개발자로 일하고 있어요.

링크: 🖋 우아한형제들 기술블로그

리액트 기술과 관련된 컨텐츠도 작성했어요.

링크: 🖋 리액트 관련 블로그 글
링크: 🎥 리액트 관련 유튜브 영상

이런 분들께
추천드려요!

학습 대상은
누구일까요?

프로그래밍 초보자
자바스크립트 개발자
프론트엔드 개발자
소프트웨어 품질을 향상시키고 싶은 사람
테스트 주도 개발에 관심 있는 사람

안녕하세요
김정환입니다.

13,513

명

수강생

837

개

수강평

583

개

답변

4.8

점

강의 평점

개

강의

👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.

수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.

커리큘럼

전체

19개 ∙ (1시간 11분)

섹션 1. 1. TDD 이론 및 패턴 소개

7개 ∙ (18분)

섹션 2. 2. 모듈패턴으로 기존 코드 개선하기

6개 ∙ (31분)

8. 클릭카운터 모듈 - 스펙1
05:00
9. 클릭카운터 모듈 - 스펙2
05:00
10. 클릭카운트뷰 모듈 - 스펙1
05:00
11. 클릭카운트뷰 모듈 - 스펙1 (계속)
03:00
12. 클릭카운트뷰 모듈 - 스펙2
07:00
13. 클릭카운트뷰 모듈 - 스펙 3
06:00

섹션 3. 3. 중간 정리, 뭐가 개선된거죠?

2개 ∙ (7분)

14. 모듈 이용해서 화면 만들기
03:00
15. 개선된 점
04:00

섹션 4. 4. 추가 요구사항도 쉽게 받을수 있는 코드 만들기

2개 ∙ (10분)

섹션 5. 5. 정리

2개 ∙ (5분)

강의 게시일: 2018. 05. 29.

마지막 업데이트일: 2025. 05. 19.

수강평

전체

96개

4.8

96개의 수강평

HYUNJUN KIM
수강평 2
∙
평균 평점 5.0
2019. 06. 30.
5
100% 수강 후 작성
김정환 님의 강의 덕분에 좋은 코드를 작성하는 게 어떤 것인지 감을 잡을 수 있었습니다. 저는 비전공자로 프로그래밍에 입문한 지 몇개월 안된 수강생입니다. 사람들이 항상 좋은 코드, 클린 코드 말하는 것만 듣고, 그게 정확히 어떤 것인지 감이 잘 안 잡혔습니다. 그러던 와중에 저의 멘토분께서 항상 TDD로 코딩 해보는 것을 추천해주셨습니다. 일을 매우 작은 단위로 추적하는 것을 습관화하는데 도움이 된다는 말과 함께요. 그래서 김정환 님의 강의를 찾아 들었습니다. 작은 단위로 생각하는 것과 더불어, 맨날 말로만 들었던 DRY 한 코드가 어떤 것인지 조금이나마 감을 잡게 된 것 같습니다. 이 강의 뿐만 아니라, 노드 TDD 개발이나 블로그에 써주시는 글도 너무 좋은 것 같습니다. 좋은 강의 자료 제공해주셔서 감사합니다.
- 김정환
  지식공유자
  2020. 03. 21.
  강의, 블로그까지 찾아주시다니 고맙습니다.
홍상의
수강평 2
∙
평균 평점 5.0
2019. 01. 09.
5
100% 수강 후 작성
재미있어요. 간단하지만 많은 내용이 들어가 있습니다. TDD부터 자바스크립트 개발시 주의할점. 거기에 객체개념까지... 강사님은 자연스럽게 그런것들을 적용하는것 같은데 전 아직 그정도는 아닙니다. 많이 배우고 갑니다.
- 김정환
  지식공유자
  2020. 03. 21.
  저도 아직 배워야할것 들이 많아요ㅜㅜ
김호균
수강평 12
∙
평균 평점 5.0
2018. 12. 23.
5
100% 수강 후 작성
아주 쉽게 TDD에 대해서 설명해주시네요 TDD에 대한 개념을 아주 쉽게 설명해 주셔서 재밌게 봤습니다. 만드시는 소스 스타일이 React나 Vue랑 비슷한거 같네요. 궁금한 점이 있습니다. 아직 ES6를 사용하지 못하는 프로젝트에서는 ES5로 변환해서 배포해야 할텐데 ES6에서 테스트한 코드는 ES5로 변환한 후에도 테스트에서 통과한 내용을 모두 보증할 수 있나요? 좋은 강의 감사합니다. 다른 강의도 유익하게 보겠습니다!
- 김정환
  지식공유자
  2018. 12. 23.
  그렇지 않습니다 어플리케이션 코드와 버전을 맞추는 것이 좋습니다. es5로도 얼마든지 테스트 코드 작성할 수 있거든요.
sugbong2
수강평 6
∙
평균 평점 5.0
2019. 07. 03.
5
100% 수강 후 작성
깔끔하네요
- 김정환
  지식공유자
  2020. 03. 21.
  👍
uoon lee
수강평 1
∙
평균 평점 4.0
2018. 09. 27.
4
100% 수강 후 작성
프론트엔드 TDD 수업은 많지 않습니다. 김정환 님 강의는 웬만하면 챙겨 듣는 편이에요. 마침 테스트 주도 개발에 관심이 생겼을 때 강의가 있길래 구입해서 몰아 들었습니다. 쉽게 설명해주시기에 처음 시작하시는 분들에게 도움이 되는 강좌일 거라 생각해요. 분량이 적은 편이라 깊은 내용까지 알기는 어렵지만 맛보기로 시작해보기에 괜찮은 강의라고 생각합니다. 늘 좋은 강의해주셔서 감사합니다.

김정환님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

김정환

리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용해 어플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.

초급

React, MVC

[리액트 2부] 고급 주제와 훅

김정환

리액트(React)는 실무에서 가장 많이 찾는 인기 프론트엔드 기술입니다. 리액트를 이용해 애플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.

중급이상

React, React Context, react-component

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

김정환

이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요.

중급이상

Node.js, Webpack, Babel

테스트주도개발(TDD)로 만드는 NodeJS API 서버

김정환

이 강의에서는 Javascript 언어로 백엔드 개발을 할 수 있는 NodeJS를 학습하고, 테스트 주도 개발(TDD) 방법으로 NodeJS를 이용해 API 서버 개발을 할 수 있습니다. 또한 NodeJS의 대표적인 웹 프레임워크 ExpressJS의 기초 원리를 이해하고, 모바일과 웹 서비스에서 사용하는 REST API 개발 방법을 학습할 수 있습니다.

초급

TDD, Node.js, Express

웹 개발의 핵심, HTTP 완벽 마스터하기!

김정환

HTTP 기본부터 데이터 요청, 실시간 통신, 보안과 성능 최적화까지! 웹 개발자가 꼭 알아야 할 HTTP의 모든 것을 깊이 있게 배워보세요.

초급

https, cookie, Ajax

트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

김정환

다른 웹 어플리케이션을 내 손으로 구현하는 과정을 통해 Vuejs의 중급 기술 (Vuex, Vue-Router, Http)을 학습할 수 있습니다. 퍼블리싱 결과물, API 서버와 문서하는 등을 미리 구성했기에 협업하는 방법도 체험하실 수 있는 강의입니다.

중급이상

JavaScript, Vue.js

실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발

김정환

순수 자바스크립트와 VueJS라는 UI Library를 이용하여 쇼핑몰 검색 페이지를 만들어 보며 VueJS 개발 학습을 진행합니다. 순수 자바스크립트와 VueJs 로 개발을 각기 진행하며 각 개발의 차이점과 MVC, MVVM 디자인 패턴의 차이도 배울 수 있습니다.

초급

JavaScript, Vue.js

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

부트캠프에서 알려주지 않는 것들 (리액트) 1편

애프터캠프

커스텀 훅, TDD, 컨텍스트 API, 리팩토링, 복잡한 상태 관리 등 React 개발의 복잡한 부분을 마스터하세요.

중급이상

React, React Context, TDD

테스트주도개발(TDD)로 만드는 NodeJS API 서버

김정환

초급

TDD, Node.js, Express

소프트웨어 개발 7가지 기본 원칙: 최고의 프로그래머가 되는 방법

드라진

소프트웨어 품질은 습관입니다! 이 강의를 통해 기업이 원하는 최고의 프로그래머가 되는 방법을 배울 수 있을 것입니다.

초급

알고리즘, C, 소프트웨어 설계

리셀봇 원리로 알아보는 Cypress

애프터캠프

자동 로그인, 자동 상품 구매 동작 원리를 Cypress를 통해서 배워봅니다

초급

Cypress, 소프트웨어 테스트

하루만에 Cypress로 작성하는 자바스크립트 E2E 테스트 코드

메이커준

프론트엔드는 사용자와의 접점이 이루어지는 곳이기 때문에 개발자의 입장이 아닌, 사용자의 입장에서의 테스트가 매우 중요합니다. E2E테스트를 통해 사용자 시나리오가 정상적으로 동작하는지 검증해보고 내 코드에 대해 두려움에서 자신감을 가지는 경험을 해보세요!

초급

Cypress, 소프트웨어 테스트

테스트 with Jest: 제로초에게 제대로 배우기

제로초(조현영)

본 강의에서는 테스트가 필요한 경우와 테스트를 할 때의 장점을 Jest 프레임워크를 통해 보여드립니다. 리액트, Express 등에 유닛테스트, 통합테스트를 적용해봅니다.

초급

소프트웨어 테스트, Jest, react-testing-library

SW 역량테스트 합격하기 A형 with C++ (Advanced Algorithm)

피로물든딸기

코드트리 기출문제와 기출문제를 풀기 위한 알고리즘과 팁을 알려드립니다. C++을 사용하지만 라이브러리를 사용하지 않기 때문에 다른 언어를 사용하는 분도 수강이 가능합니다. (Python 코드 제공)

입문

C++, 코딩 테스트, 알고리즘

TDD 개발 방법론을 활용한 React Native 앱 개발

박동호

간단한 ReactNative 앱을 TDD 방법론을 통해 개발하면서 TDD 의 개념을 확실히 익히고, ReactNative 모바일 앱 개발에 적용할 수 있도록 연습합니다.

초급

JavaScript, React, React Native

스토리북 & 자동화 테스트와 함께 하는 컴포넌트 주도 프론트엔드 개발

인프런

입문

frontend, 소프트웨어 테스트, storybook

스프링부트 JUnit 테스트 - 시큐리티를 활용한 Bank 애플리케이션

최주호

스프링 부트(Spring Boot)로 은행 애플리케이션을 개발해 봅니다. 개발을 하면서 발생하는 여러 문제들을 하나씩 직접 제이유닛(JUnit)으로 테스트해 보면서 스스로 고민하고 애플리케이션을 구축할 수 있는 힘을 길러드리는 강의입니다.

초급

JUnit, Spring Boot, 소프트웨어 테스트

ISTQB AI Testing - 베스트 프랙티스를 배우고 시험에 대비

edu

AI 기술의 현재와 미래를 이해하고, 머신러닝 등 AI 모델의 테스트 과정을 체험하며 테스터의 역할을 배우게 됩니다. AI 기반 시스템 테스트 전략 수립부터 테스트 케이스 설계 · 실행, 또 테스트 지원을 위한 AI 활용 방법까지 폭넓게 익힙니다. 본 과정을 ISTQB의 AI Testing 실러버스를 기반으로 진행되며, ISTQB AI Testing 자격시험을 완벽하게 준비할 수 있는 기회를 제공합니다.

입문

ISTQB, 소프트웨어 테스트, 인공지능(AI)