[원티드 프리온보딩 프론트엔드 인턴십] Week 4-1. TypeScript로 런타임에 안전한 웹 앱 작성하기 - 강의 후기

Week 4-1. TypeScript로 런타임에 안전한 웹 앱 작성하기

TypeScript / 타입 가드 / 타입 추론 / 제네릭

 

 

4-1 강의 시간에는 2주차 팀 과제 리뷰 시간을 갖고, 타입스크립트에 대해 배웠다.

타입스크립트는 처음 배울 땐 별로 어려워 보이지 않았는데, 사용할수록 어려운 점(타입 에러..)도 생기고 아직 익숙해져가는 과정에 있다.

 

 

---

 

 

 

1. 과제 리뷰

이슈 트래킹 툴 미션에 대한 피드백 시간이 있었다. 

잘한 점과 지양할 점을 코드로 예시를 들어 보여주셨다.

과제를 하며 많은 사람이 어려워했을 부분에 대한 설명도 진행되었다.

 

마크업을 로직에 연결하면 안 된다

 

마크업 : jsx, html 요소

 

⚠️ 관심사 분리가 되어야 한다.

마크업을 로직에서 사용하면 안 된다. 다른 관심사가 강하게 결합되어 있어서 유지보수 및 재사용이 불가하다.

컴포넌트는 독립적이고, 재사용 할 수 있어야 한다.

• e.target.className
• e.target.closest
• id를 조회해서 filter

위와 같은 경우는 부모자식 컴포넌트가 강결합되어 유지보수, 재사용이 어렵다.

스타일링을 할 때도 다 분리해서 스타일을 주어야 한다.

리액트에서 태그에 id를 쓰는 것은 지양 👉 고유의 값을 함수의 인자로 넘겨서 사용하자

 

 

 

기타 주의할 점

 

• 변수명 주의, 불필요한 변수 선언 지양
  • arr.filter((v) ⇒ v.id ! == id);
  • 변수명도 value 라고 쓰는 것을 지양하자. 정확히 어떤 값인지 드러나게 작성할 것
• location state의 잘못된 활용
  • 어떤 페이지에서 넘어왔는지에 너무 의존적으로 코드를 작성하면, 사용자가 공유하기 기능을 사용했을 때 정보를 제대로 받아올 수 없다.
  • url의 정보를 이용해야 한다.
• 주석 활용법
  • 나쁜 주석
    • (내 코드에 대한) 변명하는 주석 : 주석은 낡는다. 주석과 코드 내용이 달라질 수 있다.
    • 주석처리한 코드 : 왜 있는지는 모르는데 아무도 못 지우는 주석이 됨 💡 나중에 쓰기 위한 코드라면 git에 남겨둘 것
  • 좋은 주석
    • 코드로 설명하지 못하는 부분을 말해주기 위해
    • 개발자의 주석 컨벤션 : TODO, FIXME 💡 배포할 때 TODO 주석이 남아있는지 검사하는 스크립트를 돌릴 수 있음
• 불필요한 함수 선언&useEffect 의존성 배열 처리
  • onClick={() ⇒ print()} ❌
  • onClick = {print} ✅
• 리드미에 적힌 실행방법 여부 체크 : package 이슈가 종종 발생

 

 

 

잘한 점

 

• 검색 기능에서 toLowerCase() 처리 : 한글 검색의 경우에는 필요 없음
• 깃허브 위키 활용

 

 

 

과제에서 주목할 포인트

 

🎯 드래그 앤 드롭 구현시 state 값 활용

• 순서 바꾸기 로직
  • 드래그 시작시 드래그 된 아이템 추적해서 저장하기
  • 드래그 놓아지는 부분 아이템 추적해서 저장하기
  • 위치 조정하기

 

• state와 일반 값 구분
  • 함수는 호출과 호출 사이에 값 공유 불가
  • 첫번째 함수 호출에서 사용한 변수값을 두번째 함수 호출로 넘겨줄 수 없다

 

• ref 사용하면 좋은 값
  
  • 첫번째 렌더링에 특정 값을 A에 저장했다.
  • 두번째 렌더링에도 A에 접근하면 첫번째 렌더링에서 저장해둔 값을 그대로 가져오고 싶다.
  • 그렇지만, 이 값들이 렌더링에 연관은 없다. 즉 바뀐다고 리렌더 되야하는 건 아니다.

 

• 구분 기준
  • state: ui 업데이트에 관한 값, 값이 바뀌면 ui가 리렌더 되야 하는 값
  • useRef: DOM 저장시 (실행 콘텍스트, 콜스택 등의 개념과 연관)
  • 일반 값

 

 

 

🎯 딜레이 구현

• 디바운스, 스로틀
• 공통점 : 딜레이 - 여러 번의 이벤트가 단시간에 많이 발생했을 때 딜레이 처리

 

debounce : 마지막 이벤트가 발생한 후 특정 시간이 지나면 실행

• 중복실행을 방지할 수 있음
• 한 번만 발생
• 검색 API 호출 최적화

 

throttle : 특정 시간마다 한번씩만 실행

• 중복실행을 방지하면서, 특정 시간마다 실행을 보장할 수 있음
• 여러 번 발생
• 버튼 클릭 딜레이

 

 

 

2. 타입스크립트의 정의와 사용 이유

타입스크립트란?

 

자바스크립트는 유연한 언어이기에 발생하는 장단점이 있다. 

프로그래밍에 은탄환은 없다. (개발의 복잡성을 한 번에 해소할 마법(은탄환)같은 방법은 없다)

 

초기 자바스크립트는 간단한 것만 수행하기 위해 만들어진 언어라서 제약이 없고 많은 기능을 제공하지도 않았다.

급격한 웹시장의 발달로 인해 많은 동작이 필요해졌고 모듈 시스템, 새로운 문법 등이 추가되어 복잡성이 높은 애플리케이션의 설계가 어느정도 가능해졌다.

브라우저 밖에서도 js를 실행할 수 있는 런타임 node.js 탄생, electron, react native 등이 등장했다.

하위 호환성을 지켜야 하기 때문에 자바스크립트 자체를 교체할 순 없다. 

typeof null의 결과가 object인 자바스크립트 설계 오류도, 이 로직을 기반으로 동작하고 있는 곳이 있기 때문에 함부로 건드릴 수 없는 것이다.

참고로 지금은 많이 사용하지 않는 '코볼'이라는 예전 프로그래밍 언어가, 미국 은행권에서 사용된다는 이유 때문에 코볼 개발자의 수요가 치솟았었던 적이 있다고 한다.

 

 

 

타입스크립트 사용 이유

 

타입스크립트는 js에 타입문법을 추가해서 만든 슈퍼셋으로, 타입 개념을 js에 도입한 것이다.

정적 타입의 특성을 가지고 있고, 최종적으로 js로 컴파일된다.

💡 컴파일이란, 파파고(번역)의 개념으로 이해하면 쉽다.

 

자바스크립트는 컴파일이 필요없는 인터프리터 언어이지만,

타입스크립트는 컴파일 언어이고 기계어가 아닌 js로 컴파일된다.

자바스크립트를 사용할 수 있는 곳에는 어디든지 활용할 수 있다는 범용성과 더불어, 정적타입언어의 안정성과 표현력 또한 갖추고 있다.

 

 

1. 안정성

정적타입이란, 코드를 작성하는 과정에서 엄격한 규칙을 지켜야 한다는 뜻으로 제약이 발생한다.

프로그래밍 언어는 제약이 많아지는 방향으로 발전해왔다.

제약이 많을수록 개발자의 실수나, 권장되지 않은 방식으로 코드를 작성할 확률을 줄일 수 있어 안정성이 높아진다.

유저가 애플리케이션을 실제 사용하는 과정에서 에러가 발생한다면 안정성을 갖추지 못한 코드이지만, 

💡 타입스크립트는 컴파일 언어이기 때문에 번역하는 과정에서 오류가 발생해서 비교적 안전하다.

에러가 발생되는 시점이 중요한 이유다.

타입에 관련된 문제가 있을 시 컴파일 단계에서 개발자가 확인하고 수정할 수 있게 되며, 최종적으로 컴파일된 자바스크립트 코드에는 더이상 타입 문제가 없는 것을 확신할 수 있기 때문에 타입스크립트는 안전하다고 할 수 있다.

 

 

2. 표현력

타입스크립트의 진정한 효용은 표현력의 증대에 있다.

타입스크립트는 타입이라는 추가적인 개념을 통해서 자바스크립트로는 할 수 없는 다양한 표현을 할 수 있다.

IDE의 자동완성이 좋아진다 = 표현력의 증대

 

타입은 추상과 구체를 구분짓고, 추상만으로 코드를 읽고 이해하고 소통하도록 한다.

추상 : 코드의 겉으로 보이는 동작, 이 코드가 무엇을 하는지 what

구체 : 코드가 어떻게 동작을 수행하는지 how

 

코드를 작성할 때는 구체적인 동작의 수행방법을 작성해야하지만, 코드를 사용할 때는 구체적으로 어떻게 수행하는지 알 필요가 없다.

전자기기를 사용할 때 정확한 작동원리는 몰라도 이용에는 지장이 없는 것과 같다.

 

 

 

3. 타입스크립트 활용법

타입 스크립트 강의에 대한 모든 내용을 적기 보다는 내가 들으며 기록하고 싶은 부분만 적어보았다.

자세한 내용은 타입스크립트 핸드북 등의 공식문서를 참조하자.

 

기본적인 타입

 

any: 어떤 타입도 할당 가능, JS와 동일

• 라이브러리, 프레임워크 등 제어할 수 없는 상황을 극복하기 위해서
• 확실히 안전함을 보장할 수 있지만 타입이 지정하기 까다로울 때 제한적으로 활용(가급적 활용 X)

 

튜플 - 불변 배열

• length, element 타입이 고정되어 있는 배열
• ex. useState - 무조건 2개짜리 배열 [값, 함수]

 

Type Alias

• 변수처럼 타입도 선언해서 저장해둔 뒤 활용 가능

 

Interface

• 객체의 타입을 지정할 수 있는 방법

Type Alias과 Interface 중 객체의 타입을 지정할 때 어떤 것을 사용해야 하는지는 개인마다 기준을 세우는 것이 좋다.

 

 

 

advanced type

 

literal type

• 범용적인 string, number 타입이 아닌 정확한 형태의 값을 타입으로 지정 가능

 

as const

• Object나 Array 내부의 프로퍼티들의 값을 literal처럼 정확히 지정할 때 사용

 

Generic

• 타입을 인자처럼 활용하기

 

 

 

타입스크립트, 기술에 대해 이해하기, 그리고 본인의 생각을 가지기

 

기술 면접에서 '왜 타입스크립트를 사용하는가'라는 질문을 받는다면 어떻게 답변해야 할까?

많은 사람들이 쓰니까, 요즘 대세니까 등의 답변은 도움이 되지 않을 것이다.

비단 ts만이 아니라 어떤 기술스택, 라이브러리를 사용할 때는 내가 이것을 왜 사용하는지, 사용하며 어떤 것을 느꼈는지, 기술에 대한 나의 견해는 어떻게 되는지를 고민하며 개발해야 한다. 나만의 철학을 가지고 개발하는 연습을 해야겠다.

 

 

---

 

 

멘토님이 하신 말 중에 '타입 에러를 해결하는 과정에서 실력이 는다'는 말이 맴돈다.

처음에는 괜히 에러만 많이 뜨고 코딩 난이도가 더 어려워졌다고 생각했는데, 강의를 듣고 나니 타입스크립트가 '표현력의 확장' 측면에서 봤을 때 큰 장점을 가진 언어라고 느껴졌다.

유저가 사용할 때 에러가 터지는 것 대신 개발할 때 에러가 나는 것에 감사하자!!