Typescript를 사용한지 1달도 안 됐지만, 사용이 불편하거나 오히려 고민거리를 만드는 단점이 있어 포스팅합니다.
장점이야 2012년 이후 너무 많은 사람이 이야기해서 1달도 안 써본 제가 적는 게 의미가 없다고 느꼈습니다.
인터넷에 검색해봐도 두려워 말고 타입스크립트 쓰라는 트랜드세터들의 글이 수천 개가 넘습니다.
그런데 왜 Typescript를 도입할 필요가 없는지, 혹은 어떤점에 대해서는 기대하지 말고 단점을 각오하고 사용해야 실망을 덜 하는지 설명해주는 글이 없더군요.
목차는 아래와 같습니다.
바쁘신 분들을 위해 단점 2가지만 요약하자면 “타자수가 많아지고, 굳이 객체지향을 쓸 필요가 없다” 입니다.
주의 : 까는 글만 썼지만 저는 타입스크립트 도입에 찬성했고 아직도 타입스크립트를 밀고 있습니다.
나는 외롭다… 혼자 개발한다… 코드 리뷰를 언제 해봤는지 모르겠다… 잘 하는 것 보다 빨리 개발이나 하자…
저런 상황이면 props를 미리 정의하거나 인터페이스를 미리 만드는 것이 의미가 없을 수도 있습니다.
나중에 시간이 흘러 유지보수 할 때 꼼꼼하게 제한한 타입들이 숫자를 문자열로 받거나 컨테이너에서 컴포넌트로 잘못된 props를 넘겨주는 일을 막아줄 수도 있겠지만, 애초에 혼자 개발하는데 많은 코드를 짜는 프로젝트가 아니면 그런 실수 할 일도 적고 괜히 타자수만 늘려서 시간 낭비 할 수도 있겠습니다.
// Typescript
interface LayoutProps {
hasSider: Boolean,
hasHeader: Boolean,
//etc
}
function Layout(props: LayoutProps): React.Fc {
//todo
}
//Javascript
const Layout = ({hasSider, hasHeader, ...etc}) => {
//todo 별다줄
}물론 타입스크립트도 밑에처럼 짧게 사용하실 수 있지만 그러면 타입스크립트를 사용하는 이유가 좀 퇴색될 것 같습니다.
function Layout({...props}) {
//todo
}아무거나 아무거나 하다가 민트초코가 왔다.
자바스크립트에서 다용도로 쓰는 취급주의 타입은 고작 2개입니다. Array 아니면 Object이죠. 그래서 새로운 걸 하고 싶으면 저 둘 중에서 하나 골라서 사용하면 됩니다.
Optional하게 값을 감싸서 쓰고 싶으면 Array를 쓰고, KeyValue로 뭔가 저장하고 싶으면 Object를 쓰면 됩니다.
그런데 타입스크립트에서는 별걸 다 직접 만들어 쓰다 보니 Object나 뭔지 모르는 걸 쓸 상황에는 any를 사용합니다.
타입스크립트스럽게 쓸 노력이 없으면 나중에 모든 타입이 any로 떡칠돼서, 타입스크립트를 쓰나 마나 아무런 타입 에러도 잡아주지 않을 게 뻔해 보였습니다.
다 같이 음식 시킬 때 아무거나 달라고 하면 정말 아무거나 줍니다.
타입스크립트도 정말 아무 데이터나 인자로 넘어갈 수 있습니다.
이렇게 사용하면 타입스크립트를 쓰는 게 너무 아깝습니다. 귀찮다고 넘기지 말고 2번째 함수처럼 명확하게 인자의 타입을 써주셔야합니다.
너무 당연한 것 같아도 막상 하다보면 안 지킵니다. 아무거나 달라고 하면 민트초코 먹습니다.
function number2CommaStringBad(value: any, suffix: any) { // bad
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + suffix
}
function number2CommaStringGood(value: number | string, suffix: string = '') { // good
return (typeof value === 'string' ? value : value.toString()).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + suffix
}
const mint = {1: '23000'}
number2CommaStringBad(mint, '원') // [object Object]원
number2CommaStringGood(mint, '원') // syntex error
number2CommaStringGood(100000, '원') // 100,000원사막에서 바늘을 찾으려고 사막 전체를 사버렸다. flex
아래는 그냥 상황 설정입니다. 재미로 봐 주세요;;
배철강씨는 완벽주의자라 개발 시작할 때 가장 먼저 모든 모델과 클래스가 정의되어야 안심하는 사람입니다. 자 그러면 배철강씨를 위해 Advertise 타입을 미리 만들어 드릴까요?
데이터 관점에서 보면 is-a는 없고 has-a가 대부분이 맞다고 생각합니다.
그러면 이제 데이터베이스와 비슷한 모양새로 만들어 봅시다.
interface Writer {
createdBy: string,
updatedBy: string,
}
interface Informaiton {
email: string,
managerName: string,
phone: string
}
interface Manager {
name: string,
token: string,
information: ManagerInformation
}
interface ManagerInformation {
signupPath: string,
infomation: Informaiton
...
}
interface Advertiser {
infomation: Informaiton
...
}
interface Capacitie {
totalCapacite?: number,
dailyCapacite?: number,
}
interface Publisher {
cap?: Capacites,
publisher: string,
createdBy: string,
updatedBy: string,
infomation: Informaiton
}
interface Advertise { // 이거 하나 필요한데요...
payout: number,
capatites: Capacitie
advertisers: Advertiser
publishers: Publisher[]
manager: Manager
writer: Writer
}다 한 것 같기는 한데, 제가 원한 건 Advertise 하나인데 한 번 쓰고 다시는 안 쓸 Capacities, Advertiser, Publisher를 전부 정의해 버렸네요.
별 생각 없이 모든 인터페이스를 만들다보면 시간 아깝게 이런 상황이 벌어집니다… 바늘 하나 찾겠다고 사막을 산 셈이네요.
그래! 함수형, 리액티브, 훅 시류에 따라야겠다. 그런데 그 유행에 클래스는 필요 없는 것 같아.
요즘 리액트 유행에서는 대부분 새로 만드는 컴포넌트는 함수형 컴포넌트로 만들고 이전에 프레젠테이션 컴포넌트(클래스로 만든 컴포넌트)의 역할을 Hook Api를 사용해서 만듭니다.
Hook는 2019년 2월에 공식 릴리즈 됐는데 1년 조금 넘는 시간 동안 각종 Hook을 지원하는 라이브러리가 등장했습니다.
시대는 바야흐로 함수형 컴포넌트, Hook의 시대입니다. 이런 상황에서 클래스로 뭘 할 필요성도 못 느끼고 라이브러리를 만들지 않는 한 다형성 구현을 할 필요성을 못 느꼈습니다.
위에서 살짝 언급했듯이 모델 만드는 데는 is-a 대신 has-a면 충분하기 때문에 extends나 impliments를 사용할 필요가 없었습니다.
ES6 이후 추가된 map, flatmap, filter, reduce 같은 고차함수, 리액트의 함수형 컴포넌트들이 자바스크립트와 라이브러리가 함수형으로 가는 방향을 보여주는데 간단한 걸 만드는데, 굳이 클래스가 필요한지 의문이 듭니다.
타입스크립트 클린코드 가이드의 객체지향 관련된 대부분의 내용이 중요하긴 해도 막상 간단한 웹 만들 때는 필요가 없던거죠.
다른 개발자들에게 킬링타입용 글 하나 쓰기 위해 억지억지로 단점을 찾던 중 이건 별로 합리적이지 않다 싶어 제외한 단점들이 많습니다. 그런 단점의 반론으로 생각해 본 내용입니다.
초보 개발자가 많은데 새로운 언어를 배우는 진입장벽 때문에 프로젝트에 악영향이 갈 거다.
저희가 학생들도 아니고 주니어라도 직업으로 하는 사람인데 타입스크립트 도입 하나 때문에 프로젝트가 망할 거라고 생각하지는 않습니다.
오히려 잘하는 사람 1명만 있고 나머지 3명의 초보자가 프로젝트를 한다고 가정해봅시다.
잘하는 1명이 만든 인터페이스와 제한들로 인해 나머지 3명이 오히려 타입 관련된 초보적인 오류나 클래스를 잘 못 가져다 쓰는 실수는 피할 것 같습니다.
도입 비용이 너무 많이 들어서
완전히 새로운 프로젝트가 아니라 기존 프로젝트에 도입하는게 고민되시면 전체 코드를 .ts, .tsx로 바꾸지 마시고 새로 만드는 부분만 타입스크립트로 개발하세요.
자바스크립트와 타입스크립트가 호환이 안 되는 것은 아닙니다.
생태계가 과연 괜찮나?
이것도 별 고민할게 없는게 현재 대다수의 라이브러리가 타입스크립트로 만들어지고 타입스크립트를 지원하는 추세입니다.
타입스크립트는 2019년 스택오버플로우 프로그래밍, 스크립트, 마크업 사용 조사에서 10위를 차지했는데 대략 20퍼센트의 프로그래머가 사용할 수 있습니다. (링크)
같은 조사에서 선호도는 73.1퍼센트로 3위를 차지했습니다. (링크)
사용도 많이하고 좋아하는 사람도 많은 언어입니다.
어차피 평소에 타입 체크 잘 써서 타입스크립트가 필요가 있는지 모르겠네요.
어차피 할거 인자 구문에서 더 쉽게 합시다. 제네릭 하나만 잘 써도 코드가 매력이 넘칩니다.
밑에는 제가 좋아하는 함수인데, 오브젝트 배열 하나를 받고 함수에 따라 _.groupBy() 해주는 함수를 만드는 예제입니다.
//javascript
function groupBy(items, func) {
if (!Array.isArray(items) || typeof func === 'function') throw error() // 이러고도 못잡을 가능성 있음
const results = {}
items.forEach((item) => results[func(item)] = (results[func(item)] || []).concat(item))
return results
}자바스크립트에서는 인자가 배열과 함수인지만 확인하기 위해 코드 안에 if문과 그 조건에 떡칠하기보다는, 그냥 인자 뒤에 :로 타입을 명시하거나 제네릭으로 사용하는 사람이 타입을 정하게 해서 에러를 막는 게 더 편합니다.
function groupBy<T>(items: T[], func: (item: T) => any) { // 타입 확인 끝, 엉뚱한 타입의 값을 인자로 주면 syntex error
const results: any = {}
items.forEach((item: T) => results[func(item)] = (results[func(item)] || []).concat(item))
return results
}
interface Something {
item: string,
paly: boolean
}
const items: Something[] = [{
item: 'hello wolrd',
paly: false
}, {
item: 'hello',
paly: false
}, {
item: 'wolrd',
paly: true
}]
groupBy<Something>(items, (item) => item.paly) // {true: [...], false: [...]}
groupBy<Something>(items, (item) => item.item) // {'hello wolrd': [...], 'hello': [...], 'world': [...]}이상 굳이 찾아본 타입스크립트 단점과 장점입니다.
글을 쓰다 보니 장점을 4개나 쓰긴 했지만 장점도, 단점도 모두 다른 사람들이 단점이라 말하는 부분들에 더 집중해서 썼습니다.
예시로 쓴 간단한 코드들 중에 클래스를 만드는 코드가 없는데 클래스는 딱히 쓸 일이 없었습니다. 그래서 뭔가 단점을 찾기가 어려웠습니다.
혹시 나중에 기회가 있다면 타입스크립트를 더 사용해보고 이 글의 다음 편으로 타입스크립트 잘 쓰는 법 같은 글을 써보고 싶습니다.
<매드업>은 개인정보보호법에 따라 이용자의 개인정보 보호 및 권익을 보호하고 개인정보와 관련한 이용자의 고충을 원활하게 처리할 수 있도록 다음과 같은 처리방침을 두고 있습니다.
<매드업>은 회사는 개인정보처리방침을 개정하는 경우 웹사이트 공지사항(또는 개별공지)을 통하여 공지할 것입니다.
○ 본 방침은 2020년 1월 15일부터 시행됩니다.
개인정보의 처리 목적 <매드업>은 개인정보를 다음의 목적을 위해 처리합니다. 처리한 개인정보는 다음의 목적 이외의 용도로는 사용되지 않으며 이용 목적이 변경될 시에는 사전동의를 구할 예정입니다.
가. 홈페이지 회원가입 및 관리 회원 가입의사 확인, 회원제 서비스 제공에 따른 본인 식별·인증, 회원자격 유지·관리, 제한적 본인확인제 시행에 따른 본인확인, 서비스 부정이용 방지, 만14세 미만 아동 개인정보 수집 시 법정대리인 동의 여부 확인, 각종 고지·통지, 고충처리, 분쟁 조정을 위한 기록 보존 등을 목적으로 개인정보를 처리합니다.
나. 민원사무 처리 민원인의 신원 확인, 민원사항 확인, 사실조사를 위한 연락·통지, 처리결과 통보 등을 목적으로 개인정보를 처리합니다.
다. 재화 또는 서비스 제공 물품배송, 서비스 제공, 청구서 발송, 콘텐츠 제공, 맞춤 서비스 제공, 본인인증, 연령인증, 요금결제·정산 등을 목적으로 개인정보를 처리합니다.
라. 마케팅 및 광고에의 활용 신규 서비스(제품) 개발 및 맞춤 서비스 제공, 이벤트 및 광고성 정보 제공 및 참여기회 제공 , 인구통계학적 특성에 따른 서비스 제공 및 광고 게재 , 서비스의 유효성 확인, 접속빈도 파악 또는 회원의 서비스 이용에 대한 통계 등을 목적으로 개인정보를 처리합니다.
개인정보 파일 현황
가. 개인정보 파일명 : 개인정보 처리방침
개인정보 항목 : 이메일, 휴대전화번호, 비밀번호, 이름, 업체명, 제목, 광고 예산, 내용, 사업자 등록 번호, 신용카드정보, 은행계좌정보, 예금주, 생년월일, 서비스 이용 기록, 접속 로그, 쿠키, 접속 IP 정보, 결제기록
수집방법 : 홈페이지, 계약서
보유근거 : 홈페이지 회원정보 수집 등에 관한 기록
보유기간 : 5년
관련법령 : 대금결제 및 재화 등의 공급에 관한 기록 : 5년
개인정보의 처리 및 보유 기간 ① <매드업>은 법령에 따른 개인정보 보유·이용기간 또는 정보주체로부터 개인정보를 수집 시에 동의 받은 개인정보 보유,이용기간 내에서 개인정보를 처리,보유합니다. ② 각각의 개인정보 처리 및 보유 기간은 다음과 같습니다.
가. <홈페이지 회원가입 및 관리> <홈페이지 회원가입 및 관리>와 관련한 개인정보는 수집.이용에 관한 동의일로부터<5년>까지 위 이용목적을 위하여 보유.이용됩니다.
보유근거 : 홈페이지 회원정보 수집 등에 관한 기록
관련법령 : 대금결제 및 재화 등의 공급에 관한 기록 : 5년
예외사유 :
나. <재화 또는 서비스 제공> <재화 또는 서비스 제공>와 관련한 개인정보는 수집.이용에 관한 동의일로부터<5년>까지 위 이용목적을 위하여 보유.이용됩니다.
보유근거 : 계약 또는 청약철회 등에 관한 기록
관련법령 : 계약 또는 청약철회 등에 관한 기록 : 5년
예외사유 :
다. <마케팅 및 광고에의 활용> <마케팅 및 광고에의 활용>와 관련한 개인정보는 수집.이용에 관한 동의일로부터<3년>까지 위 이용목적을 위하여 보유.이용됩니다.
보유근거 : 전자상거래등에서의 소비자보호에 관한 법률
관련법령 : 소비자의 불만 또는 분쟁처리에 관한 기록 : 3년
예외사유 :
정보 주체와 법정대리인의 권리·의무 및 그 행사방법 이용자는 개인정보주체로써 다음과 같은 권리를 행사할 수 있습니다.
① 정보주체는 매드업에 대해 언제든지 개인정보 열람,정정,삭제,처리 정지 요구 등의 권리를 행사할 수 있습니다.
② 제1항에 따른 권리 행사는 매드업에 대해 개인정보 보호법 시행령 제41조제1항에 따라 서면, 전자우편, 모사전송(FAX) 등을 통하여 하실 수 있으며 매드업은 이에 대해 지체 없이 조치하겠습니다.
③ 제1항에 따른 권리 행사는 정보주체의 법정대리인이나 위임을 받은 자 등 대리인을 통하여 하실 수 있습니다. 이 경우 개인정보 보호법 시행규칙 별지 제11호 서식에 따른 위임장을 제출하셔야 합니다.
④ 개인정보 열람 및 처리 정지 요구는 개인정보보호법 제35조 제5항, 제37조 제2항에 의하여 정보주체의 권리가 제한 될 수 있습니다.
⑤ 개인정보의 정정 및 삭제 요구는 다른 법령에서 그 개인정보가 수집 대상으로 명시되어 있는 경우에는 그 삭제를 요구할 수 없습니다.
⑥ 매드업은 정보주체 권리에 따른 열람의 요구, 정정·삭제의 요구, 처리 정지의 요구 시 열람 등 요구를 한 자가 본인이거나 정당한 대리인인지를 확인합니다.
처리하는 개인정보의 항목 작성
① <매드업>은 다음의 개인정보 항목을 처리하고 있습니다.
가. <홈페이지 문의 및 관리>
필수항목 : 업체명, 이메일, 제목, 연락처, 광고 예산, 내용, 휴대전화번호, 비밀번호, 이름, 서비스 이용 기록, 접속 로그, 쿠키, 접속 IP 정보
선택항목 : 프로필 사진
나. <재화 또는 서비스 제공>
필수항목 : 업체명, 이메일, 제목, 연락처, 광고 예산, 내용, 비밀번호, 이름, 회사명, 사업자 등록 번호, 신용카드정보, 은행계좌정보, 예금주, 생년월일, 서비스 이용 기록, 접속 로그, 쿠키, 접속 IP 정보, 결제기록
선택항목 :
다. <마케팅 및 광고에의 활용>
필수항목 : 업체명, 이메일, 제목, 연락처, 광고 예산, 내용, 휴대전화번호, 이름, 서비스 이용 기록, 접속 로그, 쿠키, 접속 IP 정보
선택항목 :
개인정보의 파기<매드업>은 원칙적으로 개인정보 처리 목적이 달성된 경우에는 지체없이 해당 개인정보를 파기합니다. 파기의 절차, 기한 및 방법은 다음과 같습니다.
파기절차
이용자가 입력한 정보는 목적 달성 후 별도의 DB에 옮겨져(종이의 경우 별도의 서류) 내부 방침 및 기타 관련 법령에 따라 일정기간 저장된 후 혹은 즉시 파기됩니다. 이 때, DB로 옮겨진 개인정보는 법률에 의한 경우가 아니고서는 다른 목적으로 이용되지 않습니다.
파기기한
이용자의 개인정보는 개인정보의 보유기간이 경과된 경우에는 보유기간의 종료일로부터 5일 이내에, 개인정보의 처리 목적 달성, 해당 서비스의 폐지, 사업의 종료 등 그 개인정보가 불필요하게 되었을 때에는 개인정보의 처리가 불필요한 것으로 인정되는 날로부터 5일 이내에 그 개인정보를 파기합니다.
파기방법
전자적 파일 형태의 정보는 기록을 재생할 수 없는 기술적 방법을 사용합니다. 종이에 출력된 개인정보는 분쇄기로 분쇄하거나 소각을 통하여 파기합니다.
개인정보 자동 수집 장치의 설치•운영 및 거부에 관한 사항
① 매드업은 개별적인 맞춤서비스를 제공하기 위해 이용 정보를 저장하고 수시로 불러오는 ‘쿠키(cookie)’를 사용합니다.
② 쿠키는 웹사이트를 운영하는데 이용되는 서버(http)가 이용자의 컴퓨터 브라우저에게 보내는 소량의 정보이며 이용자들의 PC 컴퓨터 내의 하드디스크에 저장되기도 합니다.
가. 쿠키의 사용 목적 : 이용자가 방문한 각 서비스와 웹 사이트들에 대한 방문 및 이용형태, 인기 검색어, 보안접속 여부, 등을 파악하여 이용자에게 최적화된 정보 제공을 위해 사용됩니다.
나. 쿠키의 설치•운영 및 거부 : 웹브라우저 상단의 도구>인터넷 옵션>개인정보 메뉴의 옵션 설정을 통해 쿠키 저장을 거부 할 수 있습니다.
다. 쿠키 저장을 거부할 경우 맞춤형 서비스 이용에 어려움이 발생할 수 있습니다.
개인정보 보호책임자 작성
① 매드업은 개인정보 처리에 관한 업무를 총괄해서 책임지고, 개인정보 처리와 관련한 정보주체의 불만처리 및 피해구제 등을 위하여 아래와 같이 개인정보 보호책임자를 지정하고 있습니다.
▶ 개인정보 보호책임자
성명 : 강남석
직책 : CFO
직급 : CFO
연락처 : 02-1522-1060, contact@madup.com
※ 개인정보 보호 담당부서로 연결됩니다.
▶ 개인정보 보호 담당부서
부서명 : General Affairs Team
담당자 : 민상준
연락처 : 02-1522-1060, contact@madup.com
② 정보 주체께서는 매드업의 서비스(또는 사업)을 이용하시면서 발생한 모든 개인정보 보호 관련 문의, 불만처리, 피해구제 등에 관한 사항을 개인정보 보호책임자 및 담당부서로 문의하실 수 있습니다. 매드업은 정보주체의 문의에 대해 지체 없이 답변 및 처리해드릴 것입니다.
개인정보 처리방침 변경
① 이 개인정보처리방침은 시행일로부터 적용되며, 법령 및 방침에 따른 변경 내용의 추가, 삭제 및 정정이 있는 경우에는 변경사항의 시행 7일 전부터 공지사항을 통하여 고지할 것입니다.
개인정보의 안전성 확보 조치 <매드업>은 개인정보보호법 제29조에 따라 다음과 같이 안전성 확보에 필요한 기술적/관리적 및 물리적 조치를 하고 있습니다.
가. 정기적인 자체 감사 실시 개인정보 취급 관련 안정성 확보를 위해 정기적(분기 1회)으로 자체 감사를 실시하고 있습니다.
나. 개인정보 취급 직원의 최소화 및 교육 개인정보를 취급하는 직원을 지정하고 담당자에 한정시켜 최소화 하여 개인정보를 관리하는 대책을 시행하고 있습니다.
다. 내부관리계획의 수립 및 시행 개인정보의 안전한 처리를 위하여 내부관리계획을 수립하고 시행하고 있습니다.
라. 해킹 등에 대비한 기술적 대책 <매드업>은 해킹이나 컴퓨터 바이러스 등에 의한 개인정보 유출 및 훼손을 막기 위하여 보안프로그램을 설치하고 주기적인 갱신·점검을 하며 외부로부터 접근이 통제된 구역에 시스템을 설치하고 기술적/물리적으로 감시 및 차단하고 있습니다.
마. 개인정보의 암호화 이용자의 개인정보는 비밀번호는 암호화 되어 저장 및 관리되고 있어, 본인만이 알 수 있으며 중요한 데이터는 파일 및 전송 데이터를 암호화 하거나 파일 잠금 기능을 사용하는 등의 별도 보안기능을 사용하고 있습니다.
바. 접속 기록의 보관 및 위변조 방지 개인정보처리시스템에 접속한 기록을 최소 6개월 이상 보관, 관리하고 있으며, 접속 기록이 위변조 및 도난, 분실되지 않도록 보안기능 사용하고 있습니다.
사. 개인정보에 대한 접근 제한 개인정보를 처리하는 데이터베이스시스템에 대한 접근 권한의 부여,변경,말소를 통하여 개인정보에 대한 접근통제를 위하여 필요한 조치를 하고 있으며 침입차단시스템을 이용하여 외부로부터의 무단 접근을 통제하고 있습니다.
아. 문서 보안을 위한 잠금 장치 사용 개인정보가 포함된 서류, 보조저장매체 등을 잠금 장치가 있는 안전한 장소에 보관하고 있습니다.
자. 비인가자에 대한 출입 통제 개인정보를 보관하고 있는 물리적 보관 장소를 별도로 두고 이에 대해 출입통제 절차를 수립, 운영하고 있습니다.