스파르타코딩클럽 내일배움캠프 58일차

오늘 일과 간단 요약

1. typescript 유데미 강의
2. react 프로젝트 리팩토링 회의
3. 타임어택 (타입스크립트로 투두리스트 만들기)

 

 

 

 

 

 

typescript 유데미 강의

어제에 이어서 유데미 강의를 계속 들었다. 튜터님이 제공해주신 강의는 개념을 훑어주는 용도로 들었고, 유데미 강의는 보다 더 자세하게 알려줘서 그걸로 개념을 보충하며 듣고 있는데 내 예상보다 더 오래 걸린다...ㅎ

 

계획은 오늘 section 4~6 듣기였는데 지금 5까지밖에 못 들었다. 프로젝트 하면서도 들어야 할 것 같다.

강의는 그렇게까지 길지 않은데 강의 들으면서 실습하고 노션에 정리해가면서 듣다 보니 시간이 좀 걸리는 듯 하다.

타임어택 과제가 있어서 그거 하느라 오후 시간을 다 보내서 내일도 부지런히 들어야지.

아직 클래스와 인터페이스 부분까지만 들어서 그 이후 강의를 들어보고 싶다.

 

유데미 강의만 듣다 보니 코드를 직접 만드는 게 아니라서 유튜브에서 타입스크립트로 프로젝트 하는 것도 찾아보고 있다.

타임어택 과제가 투두리스트로 리팩토링 하는 거였는데 리덕스 버전을 내일 한 번 시도해봐야겠다.

 

 

 

 

 

react 프로젝트 리팩토링 회의

저저번 프로젝트였던 React 프로젝트 팀원들과 함께 프로젝트도 더 업그레이드 시키면서 리팩토링 하기로 계획했었다.

 

https://github.com/react-teamProject/Animal-World-react

GitHub - react-teamProject/Animal-World-react

 

이 프로젝트를

 

https://github.com/react-teamProject/Animal-World-ts

GitHub - react-teamProject/Animal-World-ts

타입스크립트로 리팩토링 하면서,

그 때 초기에 짰던 와이어프레임대로 프로젝트를 조금 더 업그레이드 시키려고 한다.

 

원래 프로젝트는 로그인/회원가입 없이 글과 댓글을 작성할 때 비밀번호를 같이 작성하면서 내 글인 걸 알게 했었는데,

이번에는 firebase를 연동해서 로그인 부분도 해결하고 프로필 기능도 넣는 등 기능이 더 많아질 것 같다.

플러스로 redux thunk가 아닌 react-query를 이용해보기로. 하고 싶은 건 참 많다 ㅋㅋㅋ

 

초기에 계획했을 때는 타입스크립트가 아닌 리액트로 할 계획이었는데 타입스크립트를 배우고 있기도 하고 그게 훨씬 더 실력 향상에 도움이 될것 같아서 타입스크립트로 리팩토링할 계획이다. (언제 전부 완성될지는 미지수지만...)

 

그래서 각자 타입스크립트 공부하고 오늘은 한 사람이 화면 공유를 하면서 라이브 코딩을 할 예정이었는데,

폴더 구조를 먼저 생각하지 않아서 일단 그거부터.

이전 프로젝트보다 더 기능이 많아서 페이지 수도 많아지고 폴더 구조도 조금씩 달라졌다.

 

폴더 구조 짜고 필요한 파일들 정리하다가 한 시간이 지나서 타임어택을 해서 아쉽지만 여기서 마무리.

내일 다시 만나서 라이브 코딩 하기로 했다.

 

 

 

 

 

타임어택 과제 (타입스크립트로 투두리스트 만들기)

사전 공지 없이 30분 전에 갑자기 타임 어택 과제가 있다는 공지가 올라왔다. 딱 4시가 되지마자 올라왔는데 바로 리액트 입문/숙련 과제로 진행했던 투두리스트 만들기를 타입스크립트로 리팩토링 하는 과제였다.

 

처음에는 이게 뭐지...? 하고 일지정지 했었다 ㅋㅋㅋㅋㅋㅋ

일단 계속 유데미 강의를 듣다보니 문법에 대한 이해만 하고 있는 와중에 코드를 짜야 해서 얼떨떨했고,

리팩토링을 어떤 식으로 해야 할지 감이 안왔기 때문이다.

 

우선은 입문 과제를 리팩토링하기로 결정하고 원래 프로젝트를 tsx 파일로 바꿀지 아니면 새 프로젝트를 생성할지 고민하다가 그냥 새 프로젝트를 생성했다.

 

$ npx create-react-app tpyescript-todolist --template typescript

 

CRA를 이용해 typescript 프로젝트를 새로 생성한 뒤에 입문 과제 코드를 그대로 가져왔다.

가져오니 당연한 수순으로 에러가 났고 그 모든 걸 type 지정해주고 props를 받아올 때도 type을 지정하거나 따로 interface로 빼서 지정하면서 오류를 고쳐나갔다. 그러다가 만난 마지막 난관...

 

 

 

TodoList.tsx 에서 난 오류였는데 interface로 따로 빼줘서 type을 지정해주는 과정에서 오류가 났었다.

처음에 todo의 type을 any로 주고 까먹고 있다가 any를 검색해서 전부 바꿔주는 과정에서 알게 된 오류였다.

 

계속 보다보니 interface가 너무 무분별하게 사용되고 있다는 걸 깨달았다.

 

원래 item의 type이 List였는데, List와 Item 안의 type이 너무 동일하지 않은가...?ㅎ 난 이걸 무분별하게 interface를 남발하면서 에러가 생기고 난 뒤에야 알게 되었다.

 

todo의 type을 Item[] 배열로 지정하면서 (원래 todo type과 동일) return 부분에서 item 부분이 아예 전체 에러가 났었는데 저기 주석처리된 부분을 지우고 interface Item으로 type을 지정하자자 거짓말처럼 에러가 사라졌다.

 

그러니까, 계속 interface가 중첩되서 사용되고 있어서 원래 type을 읽지 못했던 것이었다.

그래서 이 부분을 지우고 나니 정상 작동 완료.

 

생각보다 에러 해결에 시간을 너무 쏟아서 제출 마감 20분 전에야 깃허브 링크를 제출할 수 있었다.

 

아래는 내가 작성한 깃허브 링크.

https://github.com/seoyeon-jung/TypeScript-TodoList

GitHub - seoyeon-jung/TypeScript-TodoList

 

그리고 겸사겸사 vercel로 배포도 했다 ㅎㅎ

https://type-script-todo-list-delta.vercel.app/

React App

 

이렇게 제출하지 못할까봐 걱정했던 타임어택 과제도 제출 완료...!

 

 

 

 

 

 

 

짧은 일기

오늘은 몸살 감기가 와서 부득이하게 카메라를 키지 않고 계속 참여하게 되었다.

몸상태가 안 좋다보니 아무래도 체력 관리가 1순위라는 걸 다시 한번 느끼고 있다...ㅋㅋㅋ 제발 건강관리...!!

 

그리고 예상치 못하게 타임 어택 과제를 수행하면서 계획했던 유데미 인강이나 프로젝트 리팩토링을 하지 못해서 이부분은 내일 다시 해야겠다. 오늘 하려고 했는데 아무래도 쉬는게 나을듯...ㅎ

그리고 숙련과제가 리덕스를 사용한 것이었는데 타입스크립트에서 redux를 어떻게 쓰는지에 관해서도 직접 해봐야겠다.

우리 조 조원분이 숙련 과제를 리팩토링하셨는데, 생각보다 어렵지 않다고 해주셔서 내일 도전해봐야지.

 

정말 체력 관리가 1순위라는 걸 느끼면서...ㅋㅋㅋㅋㅋ 내일은 멀쩡한 컨디션으로 진행했으면 좋겠다.