0. 타입스크립트를 쓴 이유
우선 타입스크립트를 쓰면 좋다는 현업 리액트+타입스크립트 개발자 스터디원의 강력추천으로 타입스크립트를 공부하려고 하긴 했었다… 물론 마음만… 그리고 또 워낙 대세라 언젠간 해야할 공부였다.
이렇게 미루던 공부를 하게 된 결정적인 계기는 입사지원한 곳의 입사 과제가 타입스크립트로 간단한 리액트 앱을 만드는 것이었기 때문이다.
(근데 코딩테스트라고하고 과제를 줬다. 물론 이게 코딩 테스트가 맞기는 한데, 보통 과제는 과제라고 하지 않나?
그리고 나는 타입스크립트를 쓴다고/썼다고 한 적이 없는데 노빠꾸로 무조건 타입스크립트를 써서 과제를 제출하라는 회사의 박력… 너무 멋지다… 그래서 떨어졌는데도 진심을 담아 감사 메일도 보냄
)
- CRA typescript
나는 CRA로 타입스크립트 프로젝트를 만들었다.
만들 때 참고한 링크들은 아래와 같다.
https://ko.reactjs.org/docs/static-type-checking.html#typescript
https://velog.io/@_jouz_ryul/CRA로-typescript-개발환경-설정하기
2. add @types
타입스크립트가 이해할 수 있게 @types를 이용해서 리액트, 리액트 돔등을 추가해줘야 하는데,
이 과정에서 나는 처음에 npm install을 이용했다.
그런데 계~~~~~속 react, react-dom에 빨간줄이 생겼다.
=> 문제 해결
우선 처음에 나는 내 클라우드 서버(리눅스)에 sftp를 연결해서 개발을 하고 있었는데 이상하게도 리액트는 유독 sftp연결이 잘 안 됐었다.
그래서 nodemodules에 npm install한 @types들이 제대로 추가가 잘 안 되었었던 것으로 보여서 그냥 내 컴퓨터(윈도우)에서 작업을 했다.
결론) 윈도우에서 바로 작업하고,
타입들을 npm이 아닌 yarn으로 추가해주니 문제가 해결 됨
++) 윈도우에서 yarn설치 중에 권한문제가 생겨 아래 링크를 참조하여 해결함얀 설치에 권한문제가 있어서 이걸로 해결함
3. 프리티어, eslint 설정
왜 일반 자바스크립트 리액트는 cra하면 프리티어가 자동적으로 ?동작하는데 타입스크립트는 안 그렇죠?… 무시하고 그냥 개발하려다가(입사지원 과제 수행 중이라 시간이 빠듯했다) 삐뚤빼뚤한 코드들을 보는 것이 너무 고통스러워서 eslinit와 프리티어 설정을 했다.
*** 이 프리티어는 훗날 나에게 고통을 주는데… 이 문제는 뒤에 자세히 다루도록 하겠다.
역시 그냥 막쓰면 문제가 생긴다. 그리고 해결도 성격 급해서 로그도 제대로안 읽으려고 하면 절대 해결 안 된다. 불변의 진리를 다시 깨달았다.
https://velog.io/@_jouz_ryul/CRA로-typescript-개발환경-설정하기
4. 시작은 창대했으나 그 끝은 미약하리라
입사과제인 만큼 잘보이고 싶은 욕심이 너무 컸다.
매우 간단한 과제였는데 내 욕심에 쓸데없는 걸 덕지덕지 붙이려고 했고 나중에는 결국 수습이 불가능해질 정도여서 그냥 너덜너덜한채로 막 내버렸다…….
news api를 이용한 뉴스검색, 페이징, 뉴스 정렬, 로그인/로그아웃, 뉴스 북마크, 북마크한 뉴스 내용수정(새로고침해도 내용이 남아있어야 함)
요정도의 간단한 기능만 만들면 됐는데… 타입스크립트를 처음써보고 리액트도 많이 안 써본 찌질이가 욕심이 과했다.
아래 폴더 구조를 보라.
심지어 CSS는 POSTCSS를 쓰겠다고 깝치다가 기본적인 CSS도 쓰지도 못했으며, 타입스크립트를 잘 썼어야 했는데 막판에 any의 유혹에 넘어가버렸다.
5. 이대로 죽을 순 없다.
이 프로젝트를 그냥 이대로 그냥 두기엔 … 상태가 영 별로니 아래 요소들을 개선해서 깃헙에 올려보려고 한다. 또 나름 뭔가를 만들었는데 좀더 정리해서 올려두면 좋잖아요?
- any 쓴 곳 다 없애기
- POSTCSS를 POSTCSS답게 쓰기(이 플랜을 얘기 하니 현업 개발자 분께서 styled-componenet를 쓰는 걸 추천했다)
- useReducer, Custom Hook, useState의 끔찍한 혼종을 통일시키기(현업개발자 분께서 코드가 너무 통일성이 없다고 했다. 잘 안 써본 티가 난다며…)
- 아마도 백엔드랑 연결하기(지금은 그냥 로컬스토리지에 저장)
- 예외처리
6. 프리티어 오류는 어떻게 해결했는가
파일을 압축해서 제출하고,
혹시 몰라 다시 프로젝트 폴더를 열어서 yarn start를 해봤는데…
이게 웬걸… 빨간 줄이 미친듯이 화면을 장식하는 것이 아닌가?
(아니 왜그래… 너 아까까지만 해도 나랑 즐거웠잖아…)
근데 에러 로그가 모두 프리티어 관련한 로그였다.
하지만 이미 제출 기한이 5분인가? 남은 상태여서 해결해서 다시 보낼 수는 없었다. ‘아 이곳의 입사는 안 되겠군’ 하고 단념하고 다음날 현업 타입스크립트+리액트 개발자님의 가이드를 통해 에러를 해결했다.
어떻게 해결했나! 뭐가 문제였나? 이것은 TBC(To be continued…)
7. 놓친 디테일들
타입들을 임포트해서 쓰는게 번거로울 것 같아서 우선 types.d.ts에 타입들을 선언해놨다(나중에 전역적으로 쓰는 타입들만 여기에 선언해주는 것이 맞는 것 같다).
그리고 타입명을 그냥 카멜네이밍으로 만들었는데
원래 타입명은 대문자로 시작하는 것이 컨벤션이라고 한다(이것도 현업 개발자님께서 알려주심…).
8. 수고했어 내 자신!
나는 처음 타입스크립트 써본 사람치고 잘썼다고 생각한다
(나이가 들 수록 뻔뻔함이 느는 스타일).
아니 2틀만에 처음써보는 언어로 간단한 프로젝트 만들면 거 꽤괜찮은 거 아닙니까…? 심지어 나는 리액트 숙련자도 아닌걸?(이건 좀 슬프다)
아 그리고 이 과제하느라 살이 1키로 정도 빠졌다… 개발도 배우고 살도 빠지다니 너무나 개이득…
아무튼 고생이 많았다! 잘했어!
