Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

coding etude

[project] React-TypeScript TODO List 회고 본문

Dev Dialy

[project] React-TypeScript TODO List 회고

코코리니 2021. 3. 3. 20:58

TypeScript(TS)를 시작하며..

TS를 처음 시작할 때의 막막함은 처음 코딩을 공부할 때와는 조금 다른 막막함이었다.

어디서부터 시작해야 할지 알 수 없었기 때문이랄까?? 무작정 공식 홈페이지부터 찾았고 생각보다 방대한 분량의 설명과 예시에 살짝 겁이 났던 것 같다.

공식 페이지의 내용을 번역해놓은 페이지를 찾아서 예시를 보면서 하나씩 공부를 시작했지만, JS의 Super Set이라고 생각해서 크게 어렵지 않을 것이라는 생각은 큰 착각이었다. JS기반의 전혀 다른 언어 인듯한 느낌을 받았고,  JS와의 차이점과 error해결 방법들을 찾아보면서 그 생각은 더 커저만 갔다. 특히, 설명과 예시가 어려운 것들이 많았다..

하지만, 어느 정도 TS 만의 규칙성을 찾게 되었고 생각보다 금방 공부할 수 있을 것 같다는 생각을 했다.

 

TypeScript와 React

TS의 규칙에 어느 정도 익숙해져 가면서 React를 활용하여 직접 페이지를 구현해봐야 실제 사용에 익숙해질 것 같아서 

바로 실행에 옮겼지만.. 확실히 이론으로 숙지한 내용은 이론일 뿐 React에서의 사용 방법은 전혀 모른 채로. tsx 파일을 작성하기는 너무 어려웠다. 우선 TSlint가 문제였다. lint의 설정값이 너무 많았고, 설정값이 제대로 반영되지 않거나 에러가 계속 나오는데 해결하기 힘들었다. 며칠을 외국 블로그와 stack overflow를 찾아가며 검색했지만, 생각보다 명확한 해답을 찾기 힘들었다. 그러다 우연히 ESlint에 관한 이야기를 보게 되었고, TSlint는 더 이상 업데이트를 하지 않으며 ESlint에서 TS를 지원한다는 내용이었다. 바로 ESlint를 확인했고 또 그 설정값을 확인하고 설정하는데 오랜 시간이 걸렸다.

물론, TS 홈페이지에 React와 함께 사용하는 방법이 나오지만 한 번에 이해하기 어려운 내용이 많았다.

무작정 해보자는 마음으로 시작했지만 하나의 component 조차 만들기 어려웠다. 

그래서 선택한 방법은 유튜브를 보면서 무작정 따라 해 보고 왜 그렇게 사용하는지 공식문서를 보고 분석해 보는 것이었고, 확실히 보는 것보다 직접 실행해 보고 오류 값을 해결하는 것이 새로운 기술을 조금 더 빨리 습득하는 방법임을 다시 한번 느끼는 개기가 되었다. 많이 돌아왔지만 이것 역시 하나의 큰 경험이라고 생각되고, 이 경험을 바탕으로 다른 기술도 지금보다는 조금은 더 빨리 배울 수 있지 않을까 생각한다.

 

type & interface의 중요성

TS의 가장 기본적이고 핵심적인 내용을 꼽자면 당연히 Type, 그리고 Type를 활용할 interface라고 생각한다. 몇 주 동안 공부하면서 정확한 type의 정의와 그 type을 활용하여 변수와 함수를 정의해주는 interface를 정의해 주고 또 명확하게 props로 전달하는 게 핵심이라고 느꼈다. 너무나 당연한 이야기를 너무 큰 깨닮음인 것처럼 말하는 것도 우습지만..;;

핵심은, 처음 페이지를 기획하면서 어떠한 변수를 어떠한 타입으로 정의하고 어떤 타입을 가진 함수를 실행하여 어떠한 결과를 원하는지 하나부터 열까지 명확한 기준을 잡아야 하는 것이 아닐까 생각했다. 

아직은 많이 서툴지만 이 또한 익숙해질 것이라 믿는다..