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

오늘 일과 간단 요약

1. 프로젝트
2. 유데미 typescript 강의
3. 프로젝트
4. ..

 

 

 

 

 

 

 

 

프로젝트 회의(?) : 예외 처리

설날 연휴 동안 carousel 구현은 완료했다.

api 에서 이미지 데이터만 받아오려고 했는데 전체 다 받아온 data에서 이미지만 뽑아 쓰기로 결정하고 random 대신에

default로 해놓은 서울-국보 이미지를 슬라이드에 구현했다.

 

연휴 내내 고민했던 부분인데, 아무래도 api 자체가 이미지만 따로 빼서 받아올 수가 없었기 때문에...ㅎ

그냥 인섭님이 해놓으신 api 파일 보고 그걸 응용해서 슬라이드에 적용해서 구현 성공.

연휴에 issue도 만들어두고 pull request까지 해놓았다. 그리고 나 말고 다른 조원분이 merge까지 완료.

 

그러고 나서 오늘 오전에 만나서 팀원들끼리 약간의 회의를 했다.

사진 디폴트 이미지, 내용없는것, 지도없는거, 내용2줄만 나오게.. 등등 예외처리 할 부분이 있었다.

 

또 피드백 받은 부분에서 CRUD가 없어서 프로젝트가 너무 심심해보인다는 조언이 있어서 추가 기능으로 넣었던

문화재 리뷰 CRUD를 넣는 걸로 회의 완료.

 

오전에는 계속 이렇게 회의만 했었다.

 

 

 

 

 

 

유데미 typescript 강의

잠깐 프로젝트 중간에 개인 공부도 나름 했다.

 

어제도 강의를 들었는데 지금 듣는 부분이 연습 프로젝트라 그냥 넘어갈까 하다가 새로운 경험일 것 같아서 오늘도 들었는데 아직 그 부분은 다 못들었다. drag&drop 기능도 구현하는 거라서 나중에 개인 프로젝트로 하고 싶은 게 있었는데 거기에 응용할 수 있을 것 같다.

 

이런 형태의 프로젝트인데 index.html 파일과 app.ts 에서 전부 다 구현하는 프로젝트라서 사실 내가 원한 그런 프로젝트는 아니고, 타입스크립트 문법에 대해 복습해보고 있다.

 

아예 몰랐던 데코레이터나 제너릭, 인터페이스로 타입 나누는 방법 등등...

어떤 식으로 응용해야 할지는 모르겠는데 그냥 강의 들으면서 주석으로 설명 써가면서 보고 있다.

내일까지 들으면 drag&drop 기능까지 전부 완료될것 같은데 프로젝트 때문에 내일 듣는게 가능하려나...? 싶네...

우선은 혼자서 연습 프로젝트 따라해보고 있었다. (타입스크립트 공부에 도움이 될지는 모르겠지만ㅎ)

 

 

 

 

 

 

 

프로젝트 : typescript로 바꾸기

우리 조는 처음 시작은 CRA를 통해 리액트 프로젝트를 만들어서 구현했었다.

그러고 난 다음에 타입스크립트로 바꾸자고 했었는데, CRUD 하기 전인 오늘 하기로 했는데....!

 

$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

 요걸로 기존 프로젝트에 타입스크립트를 추가하고,

reat-router, styled-component 등도 전부 @types를 추가해서 타입스크립트 버전을 설치해주었다.

 

그리고 파일들도 전부 .tsx 로 바꾸고 나니 마주하는 수많은 에러들....ㅋㅋㅋㅋ

그때부터였을까 처음부터 타입스크립트로 할 걸, 하는 후회가....ㅋㅋㅋㅋㅋ

 

창순님이 화면 공유해주시고 라이브 코딩으로 타입을 지정하면서 했는데, 생각보다 더 오래 걸렸다.

우선 타입 지정하는 것부터 고민해야 했고 문화재청 api가 xml 파일이라서 이 파일을 json 파일로 바꿔서 api를 받와아야 했는데 기존에 사용했던 xml-parse 라이브러리가 타입스크립트 버전이 없었던 것이다.

 

그래서 이런 저런 해결책들을 하다가...정익님이 알려주신 새로운 걸 알게 되었다.

 

@ts-ignore

• 더 큰 프로젝트를 갖고 있고 코드에서 발생한 새로운 오류의 명확한 책임자를 찾기 힘든 경우
• TypeScript의 두 가지 버전 사이에서 업그레이드하는 중이고, 한 버전에서는 코드 오류가 발생하지만 나머지 버전에서는 그렇지 않은 경우
• 솔직히 어떤 옵션 더 나은지 결정할 시간이 없는 경우

 

라는데 이걸 적고 나니까 react-xml-parser 라이브러리를 제대로 import 할 수 있게 되었다.

 

그 이후에 자잘한 타입 지정을 해주다가 하루가 끝나버린 느낌...

사실 querykey로 받던 것도 다시 리팩토링하고 나니까 오류가 생겨버렸다. 이건 내일 다같이 해결하기로...

 

CORS 오류가 났는데 이건 해결했고, 그 이후에

data가 왜 never type이 되는지를 해결하지 못했다. 대체 뭘까...?

계속 라이브코딩 하는 화면을 보면서 했는데 계속 보디보니까 머리가 안돌아가는 기분ㅋㅋㅋㅋㅋㅋ

 

저거 말고도 새로운 거 안 거 많은데 지금 머리가 너무 복잡해서(?) 내일 혼자 천천히 복습해봐야겠다.

 

이렇게 에러를 고치면서도 계속 타입스크립트로 시작할걸...이랬었따 ㅋㅋㅋㅋ

 

 

 

 

 

 

 

 

 

짧은 일기

중간에 아주 짧게 말고는 계속 프로젝트에 올인한 날이었다.

타입스크립트로 바꾸는 과정에서 수많은 오류들을 만났고, 해결하면서 더 많은 걸 구글링해보았다.

몰랐던 @ts-ignore 를 알기도 하고 CORS 오류가 뭔지 찾아보기도 하고...

타입 지정하면서 any 썼다가 다시 바꾸고 또 any로 바꿔보고..ㅋㅋㅋㅋㅋㅋ 여튼 창순님이 라이브코딩하면서 많이 고생하셨다.

 

아직 전부 다 해결된 건 아니라 내일 오전에도 계속 달려야지.

api 받아오는게 받고 나서 타입스크립트로 리팩토링하면서 이렇게 어려워진건지 원래 어려운건지 잘 모르겠다.

나중에 혼자 복습해보면서 알아봐야지...내 생각엔 xml 파일을 json 형태로 바꾸는 과정 때문에 그런것 같은데...

 

오늘은 여기서 끝내야지...너무 복잡한 하루였다...ㅋㅋㅋ