41. 기획서 / 스펙 분석
문서 구조 분석시맨틱
헤더, 아티클 등
시맨틱 요소 파악
공통 요소, 네비
게이션 등 문서
구조 파악
42. 문서 구조 분석시맨틱 기능 분석 기능 리스트
헤더, 아티클 등
시맨틱 요소 파악
공통 요소, 네비
게이션 등 문서
구조 파악
자 바 스 크 립 트
개 발 이 필 요 한
요소 파악
파악한 자바스크
립트 기능 리스트
작성
기획서 / 스펙 분석
43. 문서 구조 분석시맨틱 기능 분석 기능 리스트
프로토타이핑 구현 불가능 요소
헤더, 아티클 등
시맨틱 요소 파악
공통 요소, 네비
게이션 등 문서
구조 파악
자 바 스 크 립 트
개 발 이 필 요 한
요소 파악
파악한 자바스크
립트 기능 리스트
작성
구현 가능한 스펙
인지 알 수 없을땐
프로토타이핑
구현불가능한요소는
기획자에게 고지 및
스펙 수정
기획서 / 스펙 분석
49. 개발 환경 세팅
버전 관리 시스템
소스 코드의 버전을
안전하게 관리하기
위한 기반 시스템
50. 버전 관리 시스템
소스 코드의 버전을
안전하게 관리하기
위한 기반 시스템
IDE
스위칭 비용 줄이고
안락하게 개발하기
위한 통합 개발 환경
도구
개발 환경 세팅
51. 버전 관리 시스템
소스 코드의 버전을
안전하게 관리하기
위한 기반 시스템
IDE
스위칭 비용 줄이고
안락하게 개발하기
위한 통합 개발 환경
도구
스캐폴딩
프로젝트 전 선행
되어야할 작업을
자동으로 처리
개발 환경 세팅
52. 버전 관리 시스템
소스 코드의 버전을
안전하게 관리하기
위한 기반 시스템
IDE
스위칭 비용 줄이고
안락하게 개발하기
위한 통합 개발 환경
도구
모듈 관리 도구
모 듈 을 관 리 하 기
쉽게 도와주는 도구
개발 환경 세팅
스캐폴딩
프로젝트 전 선행
되어야할 작업을
자동으로 처리
53. CSS 전처리기
정 적 인 C S S 의
단점을 극복할 수
있는 전처리 도구
마크업 개발
54. CSS 전처리기
정 적 인 C S S 의
단점을 극복할 수
있는 전처리 도구
타이핑 도구
HTML과 CSS를
빠르게 편집할 수
있도록 도와주는
도구
마크업 개발
55. 마크업 설계
공통 요소 분석
전체구조 설계
마크업 개발
CSS 전처리기
정 적 인 C S S 의
단점을 극복할 수
있는 전처리 도구
타이핑 도구
HTML과 CSS를
빠르게 편집할 수
있도록 도와주는
도구
56. 마크업 단계
컨텐츠의 골격을
잡아가는 작업.
의미있는 시맨틱,
웹표준을 준수한
문서 작성
마크업 설계
공통 요소 분석
전체구조 설계
마크업 개발
CSS 전처리기
정 적 인 C S S 의
단점을 극복할 수
있는 전처리 도구
타이핑 도구
HTML과 CSS를
빠르게 편집할 수
있도록 도와주는
도구
57. 마크업 단계
컨텐츠의 골격을
잡아가는 작업.
의미있는 시맨틱,
웹표준을 준수한
문서 작성
스타일링 단계
CSS를 활용하여
문 서 를 꾸 미 는
작업
마크업 설계
공통 요소 분석
전체구조 설계
마크업 개발
CSS 전처리기
정 적 인 C S S 의
단점을 극복할 수
있는 전처리 도구
타이핑 도구
HTML과 CSS를
빠르게 편집할 수
있도록 도와주는
도구
60. 자바스크립트 개발
코드 품질 검증
도구
자바스크립트코드
의안티패턴,신텍스
오류 등을 미리
검증하는 도구
테스트 러너
작 성 한 테 스 트
코드를 자동으로
실행하고 결과를
산출하는 도구
테스트 프레임
워크
테 스 트 코 드 를
작성할 때 필요한
함수 집합
61. 자바스크립트 개발
테스트 더블
테스트하기어려운
컴포넌트(요소)를
대체하는 기능을
가진 라이브러리
코드 품질 검증
도구
자바스크립트코드
의안티패턴,신텍스
오류 등을 미리
검증하는 도구
테스트 러너
작 성 한 테 스 트
코드를 자동으로
실행하고 결과를
산출하는 도구
테스트 프레임
워크
테 스 트 코 드 를
작성할 때 필요한
함수 집합
62. 자바스크립트 개발
테스트 더블
테스트하기어려운
컴포넌트(요소)를
대체하는 기능을
가진 라이브러리
코드 품질 검증
도구
자바스크립트코드
의안티패턴,신텍스
오류 등을 미리
검증하는 도구
애너테이션
특 수 한 의 미 를
부 여 하 기 위 해
작성한 주석
테스트 러너
작 성 한 테 스 트
코드를 자동으로
실행하고 결과를
산출하는 도구
테스트 프레임
워크
테 스 트 코 드 를
작성할 때 필요한
함수 집합
63. 자바스크립트 개발
테스트 더블
테스트하기어려운
컴포넌트(요소)를
대체하는 기능을
가진 라이브러리
웹 API 디자인
백엔드 개발자와
웹 API 인터페이스
정의
코드 품질 검증
도구
자바스크립트코드
의안티패턴,신텍스
오류 등을 미리
검증하는 도구
애너테이션
특 수 한 의 미 를
부 여 하 기 위 해
작성한 주석
테스트 러너
작 성 한 테 스 트
코드를 자동으로
실행하고 결과를
산출하는 도구
테스트 프레임
워크
테 스 트 코 드 를
작성할 때 필요한
함수 집합
64. 테스트 러너
작 성 한 테 스 트
코드를 자동으로
실행하고 결과를
산출하는 도구
테스트 프레임
워크
테 스 트 코 드 를
작성할 때 필요한
함수 집합
테스트 더블
테스트하기어려운
컴포넌트(요소)를
대체하는 기능을
가진 라이브러리
클래스 설계
도메인을분석하여
객체 설계
웹 API 디자인
백엔드 개발자와
웹 API 인터페이스
정의
자바스크립트 개발
코드 품질 검증
도구
자바스크립트코드
의안티패턴,신텍스
오류 등을 미리
검증하는 도구
애너테이션
특 수 한 의 미 를
부 여 하 기 위 해
작성한 주석
65. 테스트 러너
작 성 한 테 스 트
코드를 자동으로
실행하고 결과를
산출하는 도구
테스트 프레임
워크
테 스 트 코 드 를
작성할 때 필요한
함수 집합
테스트 더블
테스트하기어려운
컴포넌트(요소)를
대체하는 기능을
가진 라이브러리
클래스 설계
도메인을분석하여
객체 설계
구현 개발
설 계 를 토 대 로
실제 코드를 작성
하여 구현
웹 API 디자인
백엔드 개발자와
웹 API 인터페이스
정의
자바스크립트 개발
코드 품질 검증
도구
자바스크립트코드
의안티패턴,신텍스
오류 등을 미리
검증하는 도구
애너테이션
특 수 한 의 미 를
부 여 하 기 위 해
작성한 주석
69. 자바스크립트 빌드&배포
태스크 자동화
압축, 문서화, 검증
테스트 등 개발 간
또는빌드전에실행
되어야할 작업을
자동으로실행하는
도구
문서화
주석을 파싱하여
문서를 생성하는
도구
난독화&압축
자바스크립트코드
압축 및 난독화
도구
70. CI
각 자 가 작 업 한
산출물을 한곳에
모 아 검 증 하 고
통합
자바스크립트 빌드&배포
태스크 자동화
압축, 문서화, 검증
테스트 등 개발 간
또는빌드전에실행
되어야할 작업을
자동으로실행하는
도구
문서화
주석을 파싱하여
문서를 생성하는
도구
난독화&압축
자바스크립트코드
압축 및 난독화
도구