오늘(5월 12일 2022년) React Typescript 튜토리얼까지 모두 끝냈다. 이번 졸업 프로젝트를 Typescript로 하게 되면서 자연스럽게 프론트에 관심을 갖게 되었다. 이참에 프론트엔드로 취업을 도전해볼 수 있는 수준까지 해보려고 여러가지 공부를 시작했다.
지금까지 공부한 내용을 열거하자면,
- 함수형 컴포넌트를 사용하는 React
- Typescript의 기초 문법과 기능
- React with Typescript
함수형 컴포넌트 React
React를 처음 배운 건 2020년도이다. 그때 생활코딩으로 React를 잠깐 찍먹해봤는데 그때 배운 자료에는 컴포넌트가 class로 만들어져있는 것을 보면 트렌드가 class로 컴포넌트를 만드는 것이었었나 보다.
이번에도 생활코딩으로 공부했다. 같은 강의가 아닌 리뉴얼된 버전으로 컴포넌트를 function으로 만드는 방식으로 React를 알려주셨다. 컴포넌트는 html 코드를 return 하는 익명 함수를 갖는 변수로 선언을 하는 것 같았다. 일단 Python 해비유저인 나는 Javascript에 익숙하지 않아 약간 당황했다ㅋㅋㅋ 그래도 금방 문법에 적응해서 여러 가지 기본적인 기능들을 익힐 수 있었다.
최종적으로 만든 것은 CRUD가 가능한 앱이라고 부르기도 민망한 SPA이다. CSS도 안 들어간 정말 간단한 기능만 구현한 앱이었다. 그래도 CRUD를 할 수 있게 되었고, 함수로 컴포넌트를 만들 수 있게 되었다. Javascript에도 조금이나마 익숙해지게 된 시간이었다.
정말 마음에 드는 언어, Typescript
Typescript를 공부하면서 나는 이 언어의 팬이 되어버렸다. Javascript를 공부하면서, 그리고 사용하면서 정말 힘들었던 것 중에 하나가 type에 너무 자유로워서 예상하지 못한 방식으로 프로그램이 동작하는 경우가 생기는 것이었다. 물론 ECMAscript spec에 익숙했다면 덜 힘들었겠지만, spec도 잘 모르고 코딩하는 방식이 처음부터 코드를 꼼꼼하게 작성하는 스타일이 아니다 보니 Javascript는 큰 프로젝트에서 사용하기가 까다로웠다.
Typescript는 이름에 Type가 들어가듯이 타입을 매우 꼼꼼하게 검사해주다 보니 Typescript로 개발하는 입장에서는 매우 편리할 것 같다는 생각이 들었다. 이는 후에 React에서 props를 Type로 선언해 사용해보며 그 편리함을 몸소 느낄 수 있었다.
두 가지를 같이...! React w/ Typescript
생활코딩을 보면서 공부한, JS 작성된 React app를 Typescript도 공부했겠다 그대로 이동해보려고 했다. 결과는 처참히 망.... 생각대로 type 선언이 어려웠다. 그리고 컴포넌트의 구조(?)에 따라서 React 라이브러리를 불러다가 사용해야 하는 것도 모르고 작업을 해서 마음대로 되는 것이 하나도 없었다. 그래서 강의를 보기 시작.
한국에는 마땅한 유튜브 영상이 없어 보여서 영어로 검색해 나름 조회수가 높은 튜토리얼을 시작했다. 강의마다 10분 내외의 분량으로 Reac에서 Typescript를 사용할 때 어떤 기능을 사용할 수 있고, 코드는 어떻게 작성해야 하는지를 배울 수 있었다. 배운것을 활용해서 다시 마이그레이션을 도전할 예정이다.
앞으로의 계획은 배움은 잠시 멈추고 토이 프로젝트 작업에 몰두 할 예정이다. 백엔드가 전혀 필요없는 프론트엔드 앱을 개발, 테스트, 배포까지 해볼 생각이다. (잘된다면 더 나아가서 electron까지 붙여서 데스크탑 앱까지..!)
라고 했지만.. Next.js 를 공부하고 있다..ㅋㅋㅋㅋㅋ
세줄 요약
- 함수로 컴포넌트를 만드는 방식으로 리액트를 다시 공부했다.
- 타입스크립트의 기본적인 문법과 기능들을 공부했다.
- Typescript를 이용해서 리액트 개발 하는 법을 공부했다.
추후 계획
- Next.js 프레임워크 공부
- 개발 블로그 만들기
- Vercel로 배포
