• FE 강의 진도율 100% 달성

• 자바스크립트 과제 완료

  • 음식 메뉴 앱

  • 가위 바위 보 앱

  • 퀴즈 앱

  • 책 리스트 나열 앱

  • Github Finder 앱

  • 비밀번호 생성 앱

  • 타이핑 테스트 앱

• 리액트 과제 완료

  • 예산 계산기 앱

  • 디즈니 플러스 앱

  • 포켓몬 도감 앱

  • 리덕스를 이용한 쇼핑몰 앱(Nextjs 사용)

드디어, 3주가 다 지나갔다.

강의는 라디오를 청취하듯이 듣고, 과제를 진행하면서 막히는 경우에 재청취 하였다.

자바스크립트 강의는 총 12시간, 리액트 강의는 총 18시간 분량이었는데 청취하면서 사실 쉽지는 않았다. 아는 내용은 가볍게 넘기기도 하였다. 개인적으로 좋았던 점은 강의에 대부분의 내용이 담겨있어서 복습하기 좋았다. 그리고 리액트 강의에서는 React v18 에 추가된 부분도 있고 Docker 를 사용하여 컨테이너 기반으로 리액트 프로젝트를 해보는 강의도 있어서 좋았다.

React v18 에 제일 큰 변화는 향상된 automation batching 과 Suspense 가 SSR도 지원하여 Streaming HTML 이 아닐까 생각한다. SSR은 데이터가 다 준비가 되고 렌더링이 될 때까지 기다려야 한다. 하지만 리액트팀은 이러한 부분을 개선하여 UX를 향상 시켰다.

해당 스터디를 참여를 해야하나 조금 고민을 했었다. 혼자서 공부가 가능한 내용들이기 때문이었는데 결론적으로는 참여하길 잘 했다고 생각한다. 반 강제적이긴 하지만 과제들을 하면서 복기를 할 수 있었고 강의를 들으면서 내용을 다시 한번 흩어볼 수 있어서 유익한 시간이었다.

리액트 과제같은 경우에는 전부 TS 를 기반으로 작성 하였다. JS를 활용한 프론트엔드 또는 백엔드 개발에서 TS는 사실 이제 필수라고 생각한다. JS 자료형이 외부 도구에 의존을 해야 할 만큼 나쁜가? 라고 생각을 한다면 꼭 나쁘다고 단정 지을 수는 없다. 아무래도 동적 타이핑에서 발생하는 문제를 해결해주는 가치가 크기 때문이 아닐까 생각한다.

• 동적 타이핑은 값이 할당 된 순간 타입이 결정이 되므로, 타입 관련 에러가 런타임 환경에 발생할 수 있다.

• 동적 타이핑은 값이 할당 된 순간 타입이 결정이 되므로, 타입 관련 에러가 발생 했을 때 규모가 큰 프로젝트에서 이를 추적하기 어렵거나 예측하기 어렵다.

위 문제를 해결하고자 우리는 TS 를 사용한다. 조기에 더 많은 오류를 포착해주기 때문이다. 그리고 정적 타이핑을 통한 코드 가독성이 향상 된다.(어떤 함수를 호출한다고 가정하면, 해당 인자가 어떤 타입인지 추론이 가능하기 때문이다)

TS 를 사용함으로써 제일 큰 이점은 리팩토링이다. 예를 들어, API Response 명세가 바뀌었다고 가정하자. 프론트엔드단에서 이 명세에 맞게 모델을 바꿔야 할 거다. 해당 모델에 대한 타입이 정의가 되어있으므로 우리는 자신있게 이 부분을 리팩토링 할 수 있다.(틀리면 바로 에러로 알려주기 때문이다.)

만약, 그냥 JS 환경이라면 실행이 잘 될수도 있고 놓친 부분이 있다면 런타임에서 에러가 발견이 될 거다.

Angular 는 애초에 First party 로 TS 를 사용해 왔다.

Vue, React 는 이후에 지원을 하기 시작했다. 이런거 보면, Angular 를 관리하는 구글이 선견지명이 있는거같다.

그렇지만, TS도 만능은 아니다.

TSC 를 통해 나온 컴파일 결과물인 js 파일들을 확인해보면, TS 관련 코드들은 전부 사라져 있다. 결국에는 완벽하게 런타임 오류를 완전히 방지하지는 못한다. 그리고 TS를 사용하면 코드량이 증가하며 학습 비용이 발생하므로 이 부분도 프로젝트 규모의 따라 고민을 해보면 좋을 것 같다.(킹치만, 사용 안하면 너무 불안한걸?)