대학생, 실무자를 위한 인프런 멘토링 프로그램 운영
1
2
목차
- 프런트엔드 입문자의 고민
- 타입스크립트가 뭐길래
- 다들 왜 타입스크립트를 쓸까
- 타입스크립트의 개발자 경험
- 현실적인 고민
- 타입스크립트 배우기
3
프런트엔드 개발 입문자의 고민
4
타입스크립트로 FE 개발 레벨업
취직/이직하고 싶은데 타입스크립트도 알아야 하나요?
주니어 Frontend 개발자들의 고민
5
흔한 프런트엔드 개발 채용공고
6
흔한 프런트엔드 개발 채용공고
7
타입스크립트가 대체 뭐길래
8
10년된 언어
9
타입스크립트로 FE 개발 레벨업
FE 전문 개발자가 있는 조직은 거의 다 쓰고 있다.
아니면 쓰려고 공부하고 있거나...
아니면 쓰려고 공부하고 있거나...
10년차 직장인
10
시대의 대세
11
다들 왜 타입스크립트를 쓸까?
12
유지보수가 쉽고 생산성이 높아서?
13
유지보수가 쉽고 생산성이 높아서?
14
첫째도 둘째도 개발자 경험
15
첫째도 둘째도 개발자 경험
16
타입스크립트의 개발자 경험
17
타입스크립트란?
- 자바스크립트에 타입을 부여한 언어
// JavaScript const message = 'hi'; function sum(a, b) { return a + b; }// JavaScript const message = 'hi'; function sum(a, b) { return a + b; }
// TypeScript const message: string = 'hi'; function sum(a: number, b: number): number { return a + b; }// TypeScript const message: string = 'hi'; function sum(a: number, b: number): number { return a + b; }
18
타입스크립트의 개발자 경험
- DX(Developer Experience) : 코드를 빠르고 정확하게 작성할 수 있음
메모장
IDE - 통합 개발 환경
19
타입스크립트의 사용자 경험
- UX(User Experience) : 사용자를 보호해 준다 === 사용자 경험을 향상시켜준다
JavaScript
var ten = '10'; ten.toFixed(2); // Uncaught TypeError: b.toFixed is not a function const sum = (a, b) => a + b; sum(10, '20'); // 30?var ten = '10'; ten.toFixed(2); // Uncaught TypeError: b.toFixed is not a function const sum = (a, b) => a + b; sum(10, '20'); // 30?
TypeScript
INFO 사용자보다 개발자가 에러를 먼저 발견!
20
현실적인 고민
21
타입스크립트로 FE 개발 레벨업
학습 비용
- JS도 잘 모르는데 TS는 어떻게 배워요?
- 언어를 하나 더 배우는게 힘듭니다
적용 비용
- 이미 JS로 만든 서비스를 운영하고 있어요.
- TS를 적용하려면 코드를 전부 다 다시 써야 하는거 아닌가요?
22
현실적인 접근 방식 - JSDoc
JavaScript
var ten = '10'; ten.toFixed(2); // Uncaught TypeError: b.toFixed is not a function function sum(a, b) { return a + b; } sum(10, '20'); // 30?var ten = '10'; ten.toFixed(2); // Uncaught TypeError: b.toFixed is not a function function sum(a, b) { return a + b; } sum(10, '20'); // 30?
JavaScript with JSDoc
23
JSDoc을 적용한 자바스크립트 파일
24
JSDoc이란?
- JSDoc이란 일정한 형식으로 코드에 설명을 추가하는 주석
// app.js /** * @typedef {Object} User * @property {string} name 사용자 이름. ex) capt * @property {number} age 사용자 나이. ex) 100 * * @param {number} id 사용자 아이디 * @return {Promise<User>} 사용자 정보 **/ function fetchUserById(id) { const url = `https://ts.levelup/users/${id}`; return fetch(url).then(res => res.json()); // { name: 'capt', age: 100 } }// app.js /** * @typedef {Object} User * @property {string} name 사용자 이름. ex) capt * @property {number} age 사용자 나이. ex) 100 * * @param {number} id 사용자 아이디 * @return {Promise<User>} 사용자 정보 **/ function fetchUserById(id) { const url = `https://ts.levelup/users/${id}`; return fetch(url).then(res => res.json()); // { name: 'capt', age: 100 } }
TIP! 간단한 API 함수부터 적용해 보세요.
25
JSDoc보다는 타입스크립트가 편합니다…
JavaScript with JSDoc
/** * @typedef {Object} User * @property {string} name 사용자 이름. ex) capt * @property {number} age 사용자 나이. ex) 100 * * @param {number} id 사용자 아이디 * @return {Promise<User>} 사용자 정보 **/ function fetchUserById(id) { const url = `https://ts.levelup/users/${id}`; return fetch(url).then(res => res.json()); }/** * @typedef {Object} User * @property {string} name 사용자 이름. ex) capt * @property {number} age 사용자 나이. ex) 100 * * @param {number} id 사용자 아이디 * @return {Promise<User>} 사용자 정보 **/ function fetchUserById(id) { const url = `https://ts.levelup/users/${id}`; return fetch(url).then(res => res.json()); }
TypeScript
interface User { name: string; age: number; } function fetchUserById(id: number): Promise<User> { const url = `https://ts.levelup/users/${id}`; return fetch(url).then(res => res.json()); }interface User { name: string; age: number; } function fetchUserById(id: number): Promise<User> { const url = `https://ts.levelup/users/${id}`; return fetch(url).then(res => res.json()); }
26
결론
TS가 어렵다면 JSDoc으로 시작해보고
재밌어지면 TS를 차근히 배워보자
27
타입스크립트 배우기
28
29
타입스크립트로 FE 개발 레벨업
30
31
타입스크립트로 FE 개발 레벨업
그리고 마지막… 하나 더!
32
2년간 열심히 썼습니다
33